/* ============================================================
   Nuestro rinconcito · v22
   Estética tipo app de pareja: pastel, redondita, suave ("clay").
   Todo color sale de los tokens de :root; el modo oscuro solo los
   cambia. Animaciones: solo transform y opacity.
   ============================================================ */
:root{
  --bg:#fff5f8; --bg-2:#fdeef4;
  --surface:#ffffff; --surface-2:#fff8fb; --surface-3:#fbe9f1;
  --ink:#3a2232; --ink-2:#6f5163; --ink-3:#a2879a;
  --line:#f3dbe6;
  --primary:#d23a74; --primary-2:#c7346c; --primary-ink:#b42a61; --primary-soft:#ffe3ee;
  --on-primary:#ffffff;
  --lav:#8e7cf3; --lav-ink:#5b47c9; --lav-soft:#ece8ff;
  --peach:#ffb089; --peach-soft:#ffeadf;
  --mint-ink:#1f7a58; --mint-soft:#e2f6ee;
  --butter-soft:#fff4d6;
  --danger:#c62f45; --danger-soft:#fde8ea;
  --hero-1:#ffd9e8; --hero-2:#e9e2ff; --hero-3:#ffe9dc;
  --burbuja-otra:#ffffff;
  --sombra-1:0 1px 2px rgba(58,34,50,.05), 0 10px 26px -16px rgba(201,51,113,.30);
  --sombra-2:0 2px 6px rgba(58,34,50,.06), 0 22px 44px -22px rgba(201,51,113,.45);
  --clay:inset 0 -3px 0 rgba(58,34,50,.045), inset 0 2px 0 rgba(255,255,255,.75);
  --r-xl:30px; --r-lg:24px; --r-md:18px; --r-sm:12px;
  --fuente:"Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --titulo:"Fredoka", "Nunito", system-ui, sans-serif;
  --top-h:60px; --tab-h:66px;
  --sa-t:env(safe-area-inset-top, 0px); --sa-b:env(safe-area-inset-bottom, 0px);
  --teclado:0px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#1b1218; --bg-2:#22161e;
    --surface:#2a1c25; --surface-2:#30212b; --surface-3:#3a2833;
    --ink:#fbeef4; --ink-2:#d2b6c5; --ink-3:#9c8494;
    --line:#3d2a35;
    --primary:#c8417c; --primary-2:#a4335f; --primary-ink:#ff8fbb; --primary-soft:#45263a;
    --lav-ink:#c3b8ff; --lav-soft:#2f2846; --peach-soft:#3e2a25; --mint-ink:#8fe0c0; --mint-soft:#1f3a31;
    --butter-soft:#3a321f; --danger:#ff7d8f; --danger-soft:#47232b;
    --hero-1:#4a2338; --hero-2:#2e2748; --hero-3:#432a2a;
    --burbuja-otra:#33232e;
    --sombra-1:0 1px 2px rgba(0,0,0,.3), 0 12px 28px -18px rgba(0,0,0,.7);
    --sombra-2:0 2px 8px rgba(0,0,0,.35), 0 24px 46px -24px rgba(0,0,0,.8);
    --clay:inset 0 -3px 0 rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.05);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#1b1218; --bg-2:#22161e;
  --surface:#2a1c25; --surface-2:#30212b; --surface-3:#3a2833;
  --ink:#fbeef4; --ink-2:#d2b6c5; --ink-3:#9c8494;
  --line:#3d2a35;
  --primary:#c8417c; --primary-2:#a4335f; --primary-ink:#ff8fbb; --primary-soft:#45263a;
  --lav-ink:#c3b8ff; --lav-soft:#2f2846; --peach-soft:#3e2a25; --mint-ink:#8fe0c0; --mint-soft:#1f3a31;
  --butter-soft:#3a321f; --danger:#ff7d8f; --danger-soft:#47232b;
  --hero-1:#4a2338; --hero-2:#2e2748; --hero-3:#432a2a;
  --burbuja-otra:#33232e;
  --sombra-1:0 1px 2px rgba(0,0,0,.3), 0 12px 28px -18px rgba(0,0,0,.7);
  --sombra-2:0 2px 8px rgba(0,0,0,.35), 0 24px 46px -24px rgba(0,0,0,.8);
  --clay:inset 0 -3px 0 rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.05);
  color-scheme:dark;
}

/* ---------- base ---------- */
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body{ margin:0; height:100%; overscroll-behavior:none; }
body{
  background:var(--bg); color:var(--ink);
  font:16px/1.5 var(--fuente); font-weight:500;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow:hidden;
}
button, input, textarea, select{ font:inherit; color:inherit; }
button{ cursor:pointer; touch-action:manipulation; -webkit-user-select:none; user-select:none; }
button:disabled{ cursor:default; opacity:.55; }
img{ max-width:100%; display:block; }
a{ color:var(--primary-ink); }
:focus-visible{ outline:3px solid var(--primary); outline-offset:2px; border-radius:10px; }
.sr{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.ico{ width:1.15em; height:1.15em; flex:none; vertical-align:-.2em; }
h1, h2, h3{ font-family:var(--titulo); font-weight:600; letter-spacing:-.01em; margin:0; line-height:1.2; }

/* ---------- fondo vivo ---------- */
.fondo{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.fondo .mancha{ position:absolute; border-radius:50%; filter:blur(48px); opacity:.75; will-change:transform; }
.fondo .m1{ width:62vmax; height:62vmax; left:-22vmax; top:-24vmax; background:var(--hero-1); animation:pasea 34s ease-in-out infinite alternate; }
.fondo .m2{ width:52vmax; height:52vmax; right:-24vmax; top:18vh; background:var(--hero-2); animation:pasea 41s ease-in-out -12s infinite alternate-reverse; }
.fondo .m3{ width:46vmax; height:46vmax; left:-10vmax; bottom:-22vmax; background:var(--hero-3); animation:pasea 38s ease-in-out -6s infinite alternate; }
.fondo .flota{ position:absolute; bottom:-30px; color:var(--primary); opacity:0; animation:sube linear infinite; }
.fondo .flota svg{ width:100%; height:100%; }
@keyframes pasea{ from{ transform:translate3d(0,0,0) scale(1); } to{ transform:translate3d(6vmax,5vmax,0) scale(1.08); } }
@keyframes sube{
  0%{ transform:translate3d(0,0,0) rotate(0); opacity:0; }
  12%{ opacity:var(--o,.18); }
  85%{ opacity:var(--o,.18); }
  100%{ transform:translate3d(var(--dx,20px),-110vh,0) rotate(var(--giro,20deg)); opacity:0; }
}

/* ---------- carcasa de la app ---------- */
.shell{
  position:fixed; left:0; right:0; top:var(--vvt, 0px); z-index:1;
  height:var(--vvh, 100dvh);
  max-width:560px; margin:0 auto;
  display:flex; flex-direction:column;
}
.top{
  flex:none; display:flex; align-items:center; gap:10px;
  padding:calc(8px + var(--sa-t)) 16px 8px; min-height:calc(var(--top-h) + var(--sa-t));
}
.top h1{ font-size:clamp(19px, 5.6vw, 23px); flex:1; min-width:0; display:flex; align-items:center; gap:7px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.top h1 .ico{ color:var(--primary); width:22px; height:22px; }
.chip-pareja{
  display:inline-flex; align-items:center; gap:8px; max-width:46%; flex:none;
  background:var(--surface); border-radius:999px; padding:5px 12px 5px 5px;
  box-shadow:var(--sombra-1), var(--clay); border:0; min-height:40px; font-size:13px; font-weight:700; color:var(--ink-2);
}
.chip-pareja .txt{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chip-pareja .escribe{ color:var(--primary-ink); }

.vistas{ flex:1; min-height:0; position:relative; }
.vista{
  position:absolute; inset:0; overflow-y:auto; overflow-x:hidden;
  overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  padding:4px 16px calc(24px + var(--tab-h) + var(--sa-b));
  display:none;
}
.vista.activa{ display:block; }
.vista-chat.activa{ display:flex; flex-direction:column; padding:0; overflow:hidden; }

/* ---------- barra de abajo ---------- */
.tabbar{
  position:absolute; left:12px; right:12px; bottom:calc(10px + var(--sa-b)); z-index:5;
  height:var(--tab-h); display:flex; align-items:stretch; justify-content:space-around;
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(14px); backdrop-filter:saturate(1.4) blur(14px);
  border-radius:26px; box-shadow:var(--sombra-2), var(--clay); padding:6px;
  transition:transform .25s ease, opacity .2s ease;
}
.teclado-abierto .tabbar{ transform:translateY(140%); opacity:0; pointer-events:none; }
.tab{
  flex:1; min-width:0; border:0; background:none; border-radius:20px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  font-size:11.5px; font-weight:800; color:var(--ink-2); position:relative;
  transition:background-color .2s ease, color .2s ease, transform .15s ease;
}
.tab .ico{ width:24px; height:24px; }
.tab:active{ transform:scale(.94); }
.tab.activa{ color:var(--primary-ink); background:var(--primary-soft); }
.badge{
  position:absolute; top:4px; left:calc(50% + 6px); min-width:19px; height:19px; padding:0 5px;
  border-radius:999px; background:var(--primary); color:var(--on-primary);
  font-size:11px; font-weight:800; line-height:19px; text-align:center;
  box-shadow:0 0 0 2px var(--surface);
}
.badge:empty{ display:none; }

/* ---------- tarjetas ---------- */
.tarjeta{
  background:var(--surface); border-radius:var(--r-lg); padding:18px;
  box-shadow:var(--sombra-1), var(--clay); margin:0 0 14px;
}
.tarjeta h2{ font-size:19px; display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.tarjeta h2 .ico{ color:var(--primary); }
.tarjeta p{ margin:0 0 10px; color:var(--ink-2); }
.tarjeta .sub{ color:var(--ink-2); font-size:14px; }
.etiqueta{ font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); margin:22px 4px 10px; }
.fila2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px; }
.fila2 .tarjeta{ margin:0; }

/* ---------- héroe de la pareja ---------- */
.heroe{
  position:relative; overflow:hidden; text-align:center; padding:22px 18px 20px;
  background:linear-gradient(140deg, var(--hero-1), var(--hero-2) 60%, var(--hero-3));
  border-radius:var(--r-xl); box-shadow:var(--sombra-2), var(--clay); margin:6px 0 14px;
}
.heroe .pareja{ display:flex; align-items:center; justify-content:center; gap:14px; }
.persona{ display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0; width:96px; }
.persona b{ font-family:var(--titulo); font-weight:600; font-size:16px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.avatar{
  --c:var(--primary);
  width:72px; height:72px; border-radius:50%; display:grid; place-items:center;
  font-size:38px; line-height:1; background:var(--surface);
  box-shadow:0 0 0 4px var(--surface), 0 0 0 7px var(--c), var(--sombra-1);
  position:relative;
}
.avatar.chico{ width:30px; height:30px; font-size:17px; box-shadow:0 0 0 2px var(--c); }
.avatar .punto{ position:absolute; right:2px; bottom:2px; width:16px; height:16px; border-radius:50%; background:var(--ink-3); box-shadow:0 0 0 3px var(--surface); }
.avatar.chico .punto{ width:10px; height:10px; right:-1px; bottom:-1px; box-shadow:0 0 0 2px var(--surface); }
.punto.on{ background:#2fbf71; }
.latido{ color:var(--primary); width:44px; height:44px; display:grid; place-items:center; flex:none; }
.latido .ico{ width:38px; height:38px; filter:drop-shadow(0 6px 10px rgba(210,58,116,.35)); animation:late 1.6s ease-in-out infinite; }
@keyframes late{ 0%,100%{ transform:scale(1); } 15%{ transform:scale(1.18); } 30%{ transform:scale(1); } 45%{ transform:scale(1.1); } }
.contador{ margin-top:14px; }
.contador .numero{ font-family:var(--titulo); font-weight:600; font-size:56px; line-height:1; letter-spacing:-.02em; color:var(--primary-ink); }
.contador .dias{ font-family:var(--titulo); font-size:18px; font-weight:500; }
.contador small{ display:block; color:var(--ink-2); font-size:14px; margin-top:4px; }
.proximo{
  display:inline-flex; align-items:center; gap:8px; margin-top:12px;
  background:color-mix(in srgb, var(--surface) 80%, transparent); border-radius:999px; padding:8px 14px;
  font-size:14px; font-weight:700;
}
.proximo .ico{ color:var(--primary); }

/* ---------- botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:12px 20px; border-radius:999px; border:0;
  font-weight:800; font-size:16px; line-height:1.2;
  transition:transform .15s ease, box-shadow .2s ease, background-color .2s ease;
}
.btn:active:not(:disabled){ transform:scale(.97); }
.btn-primario{ background:linear-gradient(135deg, var(--primary-2), var(--primary)); color:var(--on-primary); box-shadow:0 10px 22px -12px rgba(210,58,116,.7), inset 0 1px 0 rgba(255,255,255,.25); }
.btn-suave{ background:var(--surface-3); color:var(--ink); }
.btn-borde{ background:transparent; color:var(--primary-ink); box-shadow:inset 0 0 0 2px var(--primary-soft); }
.btn-peligro{ background:var(--danger); color:#fff; }
.btn-ancho{ width:100%; }
.btn-chico{ min-height:40px; padding:8px 14px; font-size:14px; }
.btn-icono{ width:48px; height:48px; padding:0; border-radius:50%; flex:none; }
.btn-icono .ico{ width:24px; height:24px; }
.botones{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.botones .btn{ flex:1; }

/* ---------- campos ---------- */
.campo{
  width:100%; font-size:16px; padding:13px 16px; border-radius:16px;
  border:2px solid var(--line); background:var(--surface-2); color:var(--ink);
  transition:border-color .2s ease, background-color .2s ease;
  -webkit-appearance:none; appearance:none;
}
.campo::placeholder{ color:var(--ink-3); }
.campo:focus{ outline:none; border-color:var(--primary); background:var(--surface); }
textarea.campo{ resize:none; line-height:1.4; }
label.rotulo{ display:block; font-weight:800; font-size:14px; margin:14px 2px 6px; }
.ayuda{ font-size:13px; color:var(--ink-2); margin:6px 2px 0; }
.error{ color:var(--danger); font-weight:700; font-size:14px; margin:10px 2px 0; min-height:1px; }
.error:empty{ display:none; }

/* ---------- login ---------- */
.pantalla-login{ position:fixed; inset:0; z-index:2; overflow-y:auto; display:flex; align-items:center; justify-content:center; padding:calc(24px + var(--sa-t)) 16px calc(24px + var(--sa-b)); }
.login{ width:100%; max-width:400px; }
.login-marca{ text-align:center; margin-bottom:18px; }
.login .logo{ width:96px; height:96px; margin:0 auto 12px; border-radius:30px; display:grid; place-items:center; background:linear-gradient(140deg, var(--hero-1), var(--hero-2)); box-shadow:var(--sombra-2), var(--clay); color:var(--primary); }
.login .logo .ico{ width:52px; height:52px; animation:late 1.8s ease-in-out infinite; }
.login h1{ font-size:30px; }
.login-marca p{ color:var(--ink-2); margin:6px 0 0; }
.login form{ padding:22px; }
.clave-envoltura{ position:relative; }
.clave-envoltura .campo{ padding-right:56px; }
.ver-clave{ position:absolute; right:4px; top:50%; transform:translateY(-50%); width:44px; height:44px; border:0; background:none; border-radius:12px; color:var(--ink-2); display:grid; place-items:center; }

/* ---------- carteles ---------- */
.cartel{ display:flex; align-items:flex-start; gap:12px; background:var(--butter-soft); border-radius:var(--r-md); padding:14px; margin:0 0 14px; box-shadow:var(--clay); }
.cartel .ico-caja{ width:40px; height:40px; border-radius:14px; background:var(--surface); display:grid; place-items:center; flex:none; color:var(--primary); }
.cartel .txt{ flex:1; min-width:0; overflow-wrap:anywhere; }
.cartel .txt b{ display:block; font-size:14px; }
.cartel .txt small{ color:var(--ink-2); }

/* ---------- widgets de inicio ---------- */
.widget{ display:flex; flex-direction:column; gap:6px; min-height:132px; text-align:left; border:0; width:100%; font:inherit; color:inherit; }
.widget .titulo-w{ font-size:13px; font-weight:800; color:var(--ink-2); display:flex; align-items:center; gap:6px; }
.widget .grande{ font-size:34px; line-height:1.1; }
.widget .num{ font-family:var(--titulo); font-size:34px; font-weight:600; color:var(--primary-ink); line-height:1.1; }
.widget small{ color:var(--ink-2); font-size:13px; line-height:1.35; }
.widget.rosa{ background:var(--primary-soft); }
.widget.lav{ background:var(--lav-soft); }
.accesos{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-bottom:14px; }
.acceso{ border:0; background:var(--surface); border-radius:var(--r-md); padding:14px 8px; display:flex; flex-direction:column; align-items:center; gap:8px; font-size:13px; font-weight:800; box-shadow:var(--sombra-1), var(--clay); min-height:92px; text-align:center; transition:transform .15s ease; }
.acceso:active{ transform:scale(.96); }
.acceso .bola{ width:42px; height:42px; border-radius:15px; display:grid; place-items:center; }
.acceso .bola .ico{ width:22px; height:22px; }
.bola.rosa{ background:var(--primary-soft); color:var(--primary-ink); }
.bola.lav{ background:var(--lav-soft); color:var(--lav-ink); }
.bola.menta{ background:var(--mint-soft); color:var(--mint-ink); }
.bola.durazno{ background:var(--peach-soft); color:var(--primary-ink); }

.fechas-lista{ list-style:none; margin:0; padding:0; }
.fechas-lista li{ display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--line); }
.fechas-lista li:first-child{ border-top:0; padding-top:2px; }
.fechas-lista .emo{ width:40px; height:40px; border-radius:14px; background:var(--surface-3); display:grid; place-items:center; font-size:20px; flex:none; }
.fechas-lista .emo .ico{ color:var(--primary); }
.fechas-lista .t{ flex:1; min-width:0; }
.fechas-lista .t b{ display:block; overflow-wrap:anywhere; }
.fechas-lista .t small{ color:var(--ink-2); }
.pildora{ font-size:12px; font-weight:800; border-radius:999px; padding:5px 10px; background:var(--primary-soft); color:var(--primary-ink); white-space:nowrap; }
.pildora.hoy{ background:var(--primary); color:var(--on-primary); }

/* ---------- grilla de widgets ---------- */
.widgets{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:6px 0 14px; }
.widgets > *{ grid-column:1 / -1; margin:0; min-width:0; }
.widgets > .w-medio:not(.solo){ grid-column:auto; }
.widgets > [hidden]{ display:none; }
.widgets .heroe, .widgets .tarjeta, .widgets .accesos{ margin:0; }
.widgets .w-medio .widget{ height:100%; }
.sin-widgets p{ margin:0; text-align:center; }

/* distancia */
.w-distancia{ text-align:center; background:linear-gradient(160deg, var(--surface), var(--lav-soft)); }
.w-distancia h2{ justify-content:center; }
.dist-linea{ display:flex; align-items:center; gap:6px; margin:6px 8px 10px; }
.dist-linea .trazo{ flex:1; height:0; border-top:3px dotted var(--ink-3); opacity:.7; }
.dist-corazon{ color:var(--primary); display:grid; place-items:center; }
.dist-corazon .ico{ width:22px; height:22px; animation:late 1.8s ease-in-out infinite; }
.dist-num{ font-family:var(--titulo); font-weight:600; font-size:40px; line-height:1.1; color:var(--lav-ink); }
.w-distancia small{ color:var(--ink-2); display:block; margin-top:2px; }
.w-distancia p{ margin:0 auto 12px; max-width:330px; }

/* el evento que viene, con su cuenta regresiva grande */
.evento-top{ display:flex; align-items:center; gap:14px; background:var(--peach-soft); border-radius:var(--r-md); padding:12px; margin:4px 0 6px; }
.evento-top .cuenta{ width:68px; height:68px; flex:none; border-radius:20px; background:var(--surface); box-shadow:var(--sombra-1);
  display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1; }
.evento-top .cuenta b{ font-family:var(--titulo); font-weight:600; font-size:28px; color:var(--primary-ink); }
.evento-top .cuenta small{ font-size:12px; font-weight:800; color:var(--ink-2); margin-top:2px; }
.evento-top .t{ min-width:0; }
.evento-top .t b{ display:block; font-size:17px; overflow-wrap:anywhere; }
.evento-top .t small{ color:var(--ink-2); }
.evento-top + .fechas-lista li:first-child{ border-top:0; }

/* personalizar */
.wg-fila{ display:flex; align-items:center; }
.wg-fila .op{ flex:1; min-width:0; gap:12px; padding:10px 8px 10px 14px; min-height:60px; }
@media (max-width:430px){
  .wg-fila .op .t small{ display:none; }
  .wg-fila .op .bola{ width:34px; height:34px; border-radius:12px; }
}
.wg-mover{ display:flex; gap:6px; padding-right:12px; }
.wg-mover .btn-icono{ width:40px; height:40px; }
.wg-mover .btn-icono .ico{ width:20px; height:20px; }

/* ---------- pregunta del día ---------- */
.pregunta .q{ font-family:var(--titulo); font-size:21px; font-weight:500; line-height:1.3; margin:4px 0 14px; overflow-wrap:anywhere; }
.respuestas-dia{ display:grid; gap:10px; }
.resp-dia{ border-radius:var(--r-md); padding:12px 14px; background:var(--surface-3); overflow-wrap:anywhere; }
.resp-dia.mia{ background:var(--primary-soft); }
.resp-dia b{ display:block; font-size:13px; color:var(--ink-2); margin-bottom:2px; }
.resp-dia.oculta{ display:flex; align-items:center; gap:10px; color:var(--ink-2); font-weight:700; }
.resp-dia.oculta .ico{ color:var(--primary); }

/* ---------- chat ---------- */
.chat-lista{ flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:8px 14px 12px; display:flex; flex-direction:column; gap:2px; }
.chat-vacio{ margin:auto; text-align:center; color:var(--ink-2); max-width:280px; padding:24px 0; }
.chat-vacio .ilus{ width:84px; height:84px; margin:0 auto 12px; border-radius:30px; background:var(--primary-soft); display:grid; place-items:center; color:var(--primary); }
.chat-vacio .ilus .ico{ width:44px; height:44px; }
.separador{ align-self:center; margin:14px 0 8px; font-size:12px; font-weight:800; color:var(--ink-2); background:var(--surface); border-radius:999px; padding:5px 12px; box-shadow:var(--sombra-1); }
.fila-msg{ display:flex; flex-direction:column; max-width:82%; align-self:flex-start; margin-top:8px; position:relative; }
.fila-msg.mia{ align-self:flex-end; align-items:flex-end; }
.fila-msg.seguida{ margin-top:2px; }
.fila-msg.nueva{ animation:entra .38s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes entra{ from{ transform:translateY(10px) scale(.96); opacity:0; } to{ transform:none; opacity:1; } }
.burbuja{
  border:0; text-align:left; font:inherit; color:var(--ink); display:block; max-width:100%;
  background:var(--burbuja-otra); border-radius:22px 22px 22px 8px; padding:10px 14px;
  box-shadow:var(--sombra-1); overflow-wrap:anywhere; white-space:pre-wrap; position:relative;
  -webkit-user-select:text; user-select:text; cursor:pointer;
}
.fila-msg.seguida .burbuja{ border-top-left-radius:12px; }
.mia .burbuja{ background:linear-gradient(135deg, var(--primary-2), var(--primary)); color:var(--on-primary); border-radius:22px 22px 8px 22px; }
.mia.seguida .burbuja{ border-top-right-radius:12px; border-top-left-radius:22px; }
.burbuja.elegida{ box-shadow:0 0 0 3px var(--primary-soft), var(--sombra-1); }
.cita{ display:block; border-left:3px solid var(--primary); background:color-mix(in srgb, var(--surface-3) 85%, transparent); border-radius:10px; padding:5px 9px; margin:0 0 7px; font-size:13.5px; color:var(--ink-2); white-space:normal; max-height:3.2em; overflow:hidden; }
.mia .cita{ border-left-color:#fff; background:rgba(255,255,255,.18); color:#fff; }
.meta{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-2); margin:3px 6px 0; font-weight:700; }
.meta .ico{ width:15px; height:15px; }
.meta .visto{ color:var(--primary-ink); }
.reacs{ display:flex; gap:4px; flex-wrap:wrap; margin:-6px 8px 0; position:relative; z-index:1; }
.reac{ border:0; background:var(--surface); border-radius:999px; padding:2px 8px; min-height:28px; font-size:15px; box-shadow:var(--sombra-1); display:inline-flex; align-items:center; gap:3px; }
.reac.mia{ box-shadow:0 0 0 2px var(--primary-soft), var(--sombra-1); }
.reac small{ font-size:11px; font-weight:800; color:var(--ink-2); }
.escribiendo{ align-self:flex-start; margin-top:8px; background:var(--burbuja-otra); border-radius:22px 22px 22px 8px; padding:14px 16px; box-shadow:var(--sombra-1); display:flex; gap:5px; }
.escribiendo i{ width:8px; height:8px; border-radius:50%; background:var(--ink-3); animation:puntito 1.2s ease-in-out infinite; }
.escribiendo i:nth-child(2){ animation-delay:.15s; } .escribiendo i:nth-child(3){ animation-delay:.3s; }
@keyframes puntito{ 0%,60%,100%{ transform:translateY(0); opacity:.5; } 30%{ transform:translateY(-5px); opacity:1; } }

/* canción dentro de la burbuja */
.cancion{ display:flex; align-items:center; gap:10px; min-width:220px; }
.cancion img{ width:52px; height:52px; border-radius:12px; object-fit:cover; flex:none; background:var(--surface-3); }
.cancion .caratula-vacia{ width:52px; height:52px; border-radius:12px; flex:none; display:grid; place-items:center; background:rgba(255,255,255,.2); }
.cancion .t{ min-width:0; white-space:normal; }
.cancion .t b{ display:block; line-height:1.25; }
.cancion .t small{ opacity:.85; }
.dedicatoria{ display:block; margin-top:8px; white-space:pre-wrap; }
.embed{ margin-top:10px; border-radius:14px; overflow:hidden; width:min(300px, 70vw); }
.embed iframe{ width:100%; border:0; display:block; }
.btn-escuchar{ margin-top:8px; min-height:36px; border-radius:999px; border:0; padding:6px 14px; font-weight:800; font-size:13px; display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.22); color:inherit; }
.fila-msg:not(.mia) .btn-escuchar{ background:var(--primary-soft); color:var(--primary-ink); }

/* foto de una vez */
.sobre-media{ display:flex; align-items:center; gap:12px; min-width:220px; white-space:normal; }
.sobre-media .bola{ width:46px; height:46px; border-radius:16px; display:grid; place-items:center; flex:none; background:var(--primary-soft); color:var(--primary-ink); }
.mia .sobre-media .bola{ background:rgba(255,255,255,.22); color:#fff; }
.sobre-media .bola .ico{ width:24px; height:24px; }
.sobre-media b{ display:block; }
.sobre-media small{ opacity:.85; font-size:13px; }
.sobre-media.abrir .bola{ animation:late 1.8s ease-in-out infinite; }

/* compositor */
.compositor{ flex:none; padding:8px 12px calc(10px + var(--tab-h) + var(--sa-b) + 10px); }
.teclado-abierto .compositor{ padding-bottom:10px; }
.respondiendo{ display:flex; align-items:center; gap:10px; background:var(--surface); border-radius:16px 16px 6px 6px; padding:8px 8px 8px 14px; margin:0 4px 6px; box-shadow:var(--sombra-1); font-size:14px; }
.respondiendo .t{ flex:1; min-width:0; border-left:3px solid var(--primary); padding-left:8px; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.respondiendo .t b{ color:var(--ink); }
.caja-comp{ display:flex; align-items:flex-end; gap:8px; background:var(--surface); border-radius:28px; padding:6px; box-shadow:var(--sombra-2), var(--clay); }
.caja-comp textarea{ flex:1; min-width:0; min-height:46px; border:0; background:none; resize:none; font-size:16px; line-height:1.4; padding:11px 4px; max-height:132px; color:var(--ink); }
.caja-comp textarea:focus{ outline:none; }
.caja-comp textarea::placeholder{ color:var(--ink-3); }
.btn-mas{ background:var(--surface-3); color:var(--primary-ink); }
.btn-enviar{ background:linear-gradient(135deg, var(--primary-2), var(--primary)); color:var(--on-primary); transition:transform .15s ease, opacity .2s ease; }
.btn-enviar:disabled{ opacity:.45; }

/* ---------- nuestro día ---------- */
.escala{ display:flex; gap:6px; margin:6px 0 12px; }
.grado{ flex:1; min-width:0; border:0; background:var(--surface-3); border-radius:18px; padding:10px 2px 8px; display:flex; flex-direction:column; align-items:center; gap:3px; transition:transform .15s ease, background-color .2s ease, box-shadow .2s ease; min-height:72px; }
.grado .cara{ font-size:27px; line-height:1; }
.grado small{ font-size:clamp(9.5px, 2.7vw, 12px); font-weight:800; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.grado.activo{ background:var(--primary-soft); box-shadow:inset 0 0 0 2px var(--primary); transform:translateY(-2px); }
.grado:active{ transform:scale(.94); }
.animo-ahora{ display:flex; align-items:center; gap:12px; }
.animo-ahora .cara{ font-size:44px; line-height:1; }
.animo-ahora b{ display:block; font-size:17px; }
.animo-ahora small{ color:var(--ink-2); overflow-wrap:anywhere; }
.hilo{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.hilo span{ display:inline-flex; align-items:center; gap:4px; background:var(--surface-3); border-radius:999px; padding:4px 10px 4px 6px; font-size:16px; }
.hilo small{ font-size:12px; font-weight:700; color:var(--ink-2); }
.semana{ display:grid; grid-template-columns:70px repeat(7, 1fr); gap:6px 4px; align-items:center; text-align:center; font-size:12px; font-weight:800; color:var(--ink-2); }
.semana .quien{ text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); }
.semana .celda{ height:34px; border-radius:12px; background:var(--surface-3); display:grid; place-items:center; font-size:19px; }
.semana .hoy-col{ color:var(--primary-ink); }
.marcador{ display:flex; gap:12px; margin:6px 0 12px; }
.marca{ flex:1; border-radius:var(--r-md); padding:12px; background:var(--surface-3); text-align:center; }
.marca.suya{ background:var(--primary-soft); }
.marca b{ display:block; font-family:var(--titulo); font-size:34px; font-weight:600; line-height:1.1; color:var(--primary-ink); }
.marca small{ color:var(--ink-2); font-weight:700; }
.boton-carinito{ width:100%; min-height:64px; font-size:18px; }
.boton-carinito .ico{ width:26px; height:26px; }
.corazon-vuela{ position:fixed; z-index:60; width:26px; height:26px; color:var(--primary); pointer-events:none; animation:vuela 1s ease-out forwards; }
.corazon-vuela .ico{ width:100%; height:100%; }
@keyframes vuela{ from{ transform:translateY(0) scale(.6); opacity:1; } to{ transform:translateY(-130px) scale(1.25); opacity:0; } }
.estado-alm{ border-radius:var(--r-md); padding:12px 14px; background:var(--mint-soft); }
.estado-alm.no{ background:var(--danger-soft); } .estado-alm.aun_no, .estado-alm.lo_hare{ background:var(--butter-soft); }
.estado-alm b{ display:block; } .estado-alm small{ color:var(--ink-2); overflow-wrap:anywhere; }

/* ---------- juego ---------- */
.pista{ display:flex; gap:8px; align-items:center; background:var(--lav-soft); color:var(--lav-ink); border-radius:14px; padding:10px 12px; font-weight:700; margin-bottom:10px; overflow-wrap:anywhere; }
.juego-play{ width:100%; }
.juego-play.sonando{ background:var(--ink); }
.onda{ height:8px; border-radius:999px; background:var(--surface-3); overflow:hidden; margin:10px 0; }
.onda span{ display:block; height:100%; width:100%; transform-origin:left; transform:scaleX(0); background:linear-gradient(90deg, var(--lav), var(--primary)); }
.vidas{ display:flex; gap:6px; margin:4px 0 12px; }
.vida{ flex:1; height:8px; border-radius:999px; background:var(--surface-3); }
.vida.fallo{ background:var(--danger); } .vida.salto{ background:var(--ink-3); } .vida.ahora{ background:var(--primary); }
.res-lista{ display:flex; flex-direction:column; gap:6px; margin:8px 0; max-height:300px; overflow-y:auto; overscroll-behavior:contain; }
.res-item{ display:flex; align-items:center; gap:10px; border:0; background:var(--surface-2); border-radius:14px; padding:8px; text-align:left; min-height:56px; width:100%; box-shadow:inset 0 0 0 2px transparent; }
.res-item.activo{ box-shadow:inset 0 0 0 2px var(--primary); background:var(--primary-soft); }
.res-item img{ width:44px; height:44px; border-radius:10px; object-fit:cover; flex:none; background:var(--surface-3); }
.res-item .t{ min-width:0; } .res-item b{ display:block; font-size:15px; line-height:1.25; overflow-wrap:anywhere; } .res-item span{ font-size:13px; color:var(--ink-2); }
.final{ display:flex; gap:12px; align-items:center; border-radius:var(--r-md); padding:12px; background:var(--mint-soft); margin-bottom:10px; }
.final.perdio{ background:var(--surface-3); }
.final img{ width:64px; height:64px; border-radius:14px; flex:none; }
.final b{ display:block; } .final small{ color:var(--ink-2); display:block; } .final .veredicto{ font-weight:800; margin-top:2px; display:block; }
.lista-pronto{ list-style:none; margin:0; padding:0; }
.lista-pronto li{ display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--line); font-weight:700; }
.lista-pronto li:first-child{ border-top:0; }
.lista-pronto .pildora{ margin-left:auto; }

/* ---------- ajustes (vista "yo") ---------- */
.perfil-cab{ display:flex; align-items:center; gap:16px; }
.perfil-cab .avatar{ cursor:pointer; border:0; }
.perfil-cab .t{ flex:1; min-width:0; }
.perfil-cab b{ font-family:var(--titulo); font-size:22px; font-weight:600; display:block; overflow:hidden; text-overflow:ellipsis; }
.perfil-cab small{ color:var(--ink-2); }
.colores{ display:flex; gap:10px; flex-wrap:wrap; margin-top:4px; }
.color{ width:40px; height:40px; border-radius:50%; border:0; background:var(--c); box-shadow:0 0 0 3px var(--surface), 0 0 0 5px transparent; }
.color.activo{ box-shadow:0 0 0 3px var(--surface), 0 0 0 5px var(--c); }
.emojis{ display:grid; grid-template-columns:repeat(6, 1fr); gap:8px; }
.emojis button{ border:0; background:var(--surface-3); border-radius:16px; aspect-ratio:1; font-size:26px; display:grid; place-items:center; min-height:48px; }
.emojis button.activo{ box-shadow:inset 0 0 0 2px var(--primary); background:var(--primary-soft); }
.lista{ list-style:none; margin:0; padding:0; background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--sombra-1), var(--clay); overflow:hidden; margin-bottom:14px; }
.lista > li + li{ border-top:1px solid var(--line); }
.op{ width:100%; display:flex; align-items:center; gap:14px; border:0; background:none; text-align:left; padding:14px 16px; min-height:64px; }
.op:active:not(:disabled){ background:var(--surface-2); }
.op .bola{ width:40px; height:40px; border-radius:14px; display:grid; place-items:center; flex:none; }
.op .bola .ico{ width:21px; height:21px; }
.op .t{ flex:1; min-width:0; }
.op .t b{ display:block; }
.op .t small{ color:var(--ink-2); font-size:13px; display:block; }
.op .der{ color:var(--ink-3); }
.op.peligro b{ color:var(--danger); }
.op select{ border:0; background:var(--surface-3); border-radius:12px; padding:8px 10px; font-weight:800; font-size:15px; max-width:44%; }
.op .interruptor{ width:52px; height:32px; border-radius:999px; background:var(--surface-3); position:relative; flex:none; transition:background-color .2s ease; }
.op .interruptor::after{ content:""; position:absolute; top:3px; left:3px; width:26px; height:26px; border-radius:50%; background:#fff; box-shadow:0 2px 4px rgba(0,0,0,.2); transition:transform .2s ease; }
.op[aria-checked="true"] .interruptor{ background:var(--primary); }
.op[aria-checked="true"] .interruptor::after{ transform:translateX(20px); }

/* ---------- hojas (ventanitas que suben desde abajo) ---------- */
.hoja-capa{ position:fixed; left:0; right:0; top:var(--vvt, 0px); height:var(--vvh, 100dvh); z-index:40; display:flex; align-items:flex-end; justify-content:center; }
.hoja-capa .velo{ position:absolute; inset:0; background:rgba(40,20,32,.42); animation:aparece .2s ease both; }
.hoja{
  position:relative; width:100%; max-width:560px; max-height:calc(var(--vvh, 100dvh) - 24px - var(--sa-t));
  overflow-y:auto; overscroll-behavior:contain;
  background:var(--surface); border-radius:30px 30px 0 0; padding:10px 20px calc(20px + var(--sa-b));
  box-shadow:var(--sombra-2); animation:subeHoja .3s cubic-bezier(.2,.9,.3,1) both;
}
.hoja::before{ content:""; display:block; width:44px; height:5px; border-radius:999px; background:var(--line); margin:0 auto 12px; }
.hoja h3{ font-size:22px; margin:4px 0 6px; display:flex; align-items:center; gap:8px; }
.hoja h3 .ico{ color:var(--primary); }
.hoja > p{ color:var(--ink-2); margin:0 0 12px; }
.hoja .cerrar{ position:absolute; top:12px; right:12px; width:44px; height:44px; border:0; border-radius:50%; background:var(--surface-3); display:grid; place-items:center; color:var(--ink-2); }
.hoja-capa.saliendo .velo{ animation:desaparece .16s ease both; }
.hoja-capa.saliendo .hoja{ animation:bajaHoja .18s ease-in both; }
@keyframes aparece{ from{ opacity:0; } } @keyframes desaparece{ to{ opacity:0; } }
@keyframes subeHoja{ from{ transform:translateY(100%); } } @keyframes bajaHoja{ to{ transform:translateY(100%); } }
.reac-fila{ display:flex; justify-content:space-between; gap:2px; background:var(--surface-3); border-radius:999px; padding:6px; margin:6px 0 12px; }
.reac-fila button{ border:0; background:none; font-size:clamp(20px, 6vw, 26px); flex:1 1 0; min-width:0; max-width:46px; aspect-ratio:1; min-height:40px; border-radius:50%; display:grid; place-items:center; padding:0; transition:transform .15s ease; }
.reac-fila button:active{ transform:scale(1.25); }
.reac-fila button.mia{ background:var(--surface); box-shadow:var(--sombra-1); }
.previa{ border-radius:18px; overflow:hidden; background:var(--surface-3); margin:8px 0; display:grid; place-items:center; max-height:46vh; }
.previa img, .previa video{ max-height:46vh; width:auto; max-width:100%; }
.barra-subida{ height:8px; border-radius:999px; background:var(--surface-3); overflow:hidden; margin-top:10px; display:none; }
.barra-subida.activa{ display:block; }
.barra-subida span{ display:block; height:100%; width:0; background:var(--primary); transition:width .2s ease; }
.chips{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{ border:0; border-radius:999px; background:var(--surface-3); padding:10px 14px; min-height:44px; font-weight:800; font-size:14px; }
.chip.activo{ background:var(--primary-soft); box-shadow:inset 0 0 0 2px var(--primary); color:var(--primary-ink); }
.pasos{ background:var(--surface-3); border-radius:16px; padding:14px; line-height:1.9; }

/* visor de fotos de una vez */
.visor{ position:fixed; inset:0; z-index:70; background:#0b0709; display:flex; align-items:center; justify-content:center; }
.visor .cuerpo{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.visor img, .visor video{ max-width:100%; max-height:100%; object-fit:contain; }
.visor .barra{ position:absolute; top:calc(10px + var(--sa-t)); left:14px; right:14px; height:4px; border-radius:999px; background:rgba(255,255,255,.25); overflow:hidden; }
.visor .barra span{ display:block; height:100%; width:100%; background:#fff; transform-origin:left; }
.visor .x{ position:absolute; top:calc(22px + var(--sa-t)); right:14px; width:48px; height:48px; border-radius:50%; border:0; background:rgba(255,255,255,.16); color:#fff; display:grid; place-items:center; }
.visor .msg{ color:#fff; font-weight:700; }

/* bloqueo Face ID y pantallas completas */
.pantalla{ position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; padding:24px 16px; background:var(--bg); }
.pantalla .tarjeta{ max-width:380px; width:100%; text-align:center; padding:28px 22px; }
.pantalla .logo{ width:84px; height:84px; margin:0 auto 14px; border-radius:28px; display:grid; place-items:center; background:linear-gradient(140deg, var(--hero-1), var(--hero-2)); color:var(--primary); }
.pantalla .logo .ico{ width:44px; height:44px; }
.pantalla h2{ justify-content:center; font-size:24px; }
html.bloqueado .shell, html.bloqueado .pantalla-login{ visibility:hidden; }

.cargando{ position:fixed; inset:0; display:grid; place-items:center; color:var(--ink-2); font-weight:700; }
.cargando .ico{ width:40px; height:40px; color:var(--primary); animation:late 1.4s ease-in-out infinite; display:block; margin:0 auto 10px; }

/* globito de avisos */
.toast{
  position:fixed; left:50%; top:calc(12px + var(--sa-t)); z-index:90; max-width:min(92vw, 440px);
  transform:translate(-50%, -150%); opacity:0; transition:transform .3s cubic-bezier(.2,.9,.3,1.2), opacity .2s ease;
  background:var(--ink); color:var(--bg); border-radius:18px; padding:12px 16px; font-weight:700; font-size:15px;
  box-shadow:var(--sombra-2); pointer-events:none; overflow-wrap:anywhere;
}
.toast.ver{ transform:translate(-50%, 0); opacity:1; }

/* ---------- pantallas chicas y movimiento reducido ---------- */
@media (max-width:360px){
  .vista{ padding-left:12px; padding-right:12px; }
  .avatar{ width:62px; height:62px; font-size:32px; }
  .contador .numero{ font-size:48px; }
  .accesos{ gap:8px; }
  .tab span{ font-size:10.5px; }
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .fondo .flota{ display:none; }
}
.pantalla .pasos{ text-align:left; }