<!-- sofia.html v4.7.7 (6nov2026) — HALLAZGOS PRUEBA test2: (1) respuesta no
     perdida al recargar mientras Sofía responde (solo lee historial, 0 tokens);
     (4) en la prueba no aparece "Renovar" desde el minuto 1; (5) "Su novio ♥" →
     "Algo especial ♥" en el panel (el prompt NO cambia).
     sofia.html v4.7.6 (6nov2026) — M4: si el correo ya usó la prueba, el muro dice
     "Ya nos conocimos… elige un plan" (pruebaUsada de /web/estado).
     sofia.html v4.7.5 (29oct2026) — OPCIÓN B: tras la gracia la memoria sigue 30 días;
     el muro de vencido dice hasta qué fecha lo recuerda; gracia = "tiempo extra".
     sofia.html v4.7.4 (29oct2026) — UNA SOLA APP: botón "Crear cuenta · 3 días
     gratis" en la entrada (abre el formulario único de la landing, dentro de
     la app si está instalada). ?instalar=1 (QR de la landing) abre las
     instrucciones ilustradas en el celular.
     sofia.html v4.7.3 (29oct2026) — Instrucciones para instalar con dibujos
     (pasos-app.js, compartido con la landing) en la hoja "Llévame en tu
     celular" de iPhone y Android (banner, link "Instalar app", Mi cuenta).
     sofia.html v4.7.2 (29oct2026) — Botón "Desactivar avisos" en Mi cuenta:
     desconecta este dispositivo (servidor + celular) y la app recuerda la
     elección (sf_avisos_off, por dispositivo, sobrevive al cerrar sesión): ya
     no se reconecta sola. "Activar avisos" la revierte.
     sofia.html v4.7.1 (29oct2026) — AVISOS: nueva tarjeta "Avisos de Sofía" en
     Mi cuenta con el estado real (instalar / desactivados → Activar / bloqueados
     → cómo activarlos / activados → enviarme una prueba / permitidos sin
     conectar → Conectar). El banner "¿Te aviso cuando te escriba?" ya no se
     puede cerrar: queda hasta que el usuario acepte o rechace el permiso
     (decisión de Matías).
     sofia.html v4.7.0 (29oct2026) — GRACIA CON MENSAJES GUARDADOS (server
     web.js v4.1): en la gracia el contador de arriba, la tarjeta y la barra
     muestran los mensajes de gracia (antes, los no usados del plan vencido, que
     no se podían usar) con la etiqueta "período de gracia". El aviso dice
     cuántos mensajes guardados lo esperan si renueva (se suman al plan nuevo).
     Plan vencido sin gracia → 0.
     sofia.html v4.6.5 (22oct2026) — AUDITORÍA M2 (server web.js v4.0):
     "Salir" anula la sesión en el servidor (/web/cerrar-sesion) y borra los
     datos locales de Sofía; nuevo botón "Cerrar sesión en todos mis
     dispositivos" en Mi cuenta; cambiar la clave y eliminar la cuenta piden
     la clave actual (campo de contraseña, no prompt visible).
     sofia.html v4.6.4 (22oct2026) — AUDITORÍA A3: al confirmar una cuenta
     sin verificar, la clave del campo "clave nueva" viaja junto al código
     (antes se ignoraba y el servidor usaba una clave "en espera").
     sofia.html v4.6.3 (22oct2026) — AUDITORÍA A1 (server web.js v3.6): si el
     servidor responde "espera su respuesta" (409), "vas muy rápido" (429) o
     "reintenta" (503), la ráfaga vuelve a la cola y se reenvía sola (máx. 3
     veces, con el indicador de "escribiendo" visible) en vez de mostrar error.
     sofia.html v4.6.2 (21oct2026) — "Sofía piensa en ti": el servidor genera
     UN pensamiento por día (sofia.js v2.8); fuera el botón "↻ actualizar" (ya
     no trae uno nuevo) y la recarga cada 8 mensajes.
     sofia.html v4.6.1 (21oct2026) — PANEL DERECHO DEL CHAT (escritorio):
     "Próxima foto" sigue en texto (en la prueba, si solo quedan fotos de pago:
     "Solo para quien se queda"). "Quedó pendiente" (lo que quedó abierto, dicho
     por Sofía, últimos 7 días). "Próxima fecha" (1 semana, 2 semanas, 1 mes…;
     avisa si el plan vence antes). "Lo que me dijo": frases de Sofía que él
     guarda con ⭐ en el chat. Nuevo bloque "Lo que recuerda de ti": los 3
     recuerdos más recientes (server web.js v3.5 / memoria.js v1.9); si aún no
     hay, el nombre con que lo llama y una invitación a contarle de él.
     sofia.html v4.6.0 (21oct2026) — SOLO PARA TI (diseño del mockup):
     "Mi Sofía" pasa a ser el perfil privado de Sofía: "1 seguidor: tú", frase,
     momentos como historias destacadas, aviso "Hoy subió algo solo para ti",
     grilla de publicaciones (abiertas / borrosas "en N días" / "Solo para
     quien se queda") y, en la prueba, la invitación a quedarse. Cada foto se
     abre como publicación con su texto, ❤ y "Responderle esta foto": abre el
     chat con la foto citada y Sofía sabe a qué foto le responde (fotoId).
     Requiere server web.js v3.4.
     sofia.html v4.5.4 (21oct2026) — Fotos desde el bucket privado (server
     v4.9.0): la galería usa los campos nuevos de /web/galeria. Bloqueadas
     muestran "en N días" (faltan) o "Solo para quien se queda" (prueba) sobre
     la miniatura borrosa. "Próxima foto" usa faltan. El rediseño completo
     "Solo para ti" viene en el siguiente PR.
     sofia.html v4.5.3 (20oct2026) — DÍAS JUNTOS: se refresca desde
     /web/estado (cada 2 min y al volver a la app). Antes se tomaba solo al
     iniciar sesión y la sesión dura 30 días → quedaba en 0. Requiere server
     web.js v3.2 (si no, conserva el valor que tenía).
     sofia.html v4.5.2 (20oct2026) — CARGA LIVIANA (sin cambio visual):
     - Fotos en WebP (−58% a −72%). El avatar chico del chat usaba la foto de
       984×1254 (234 KB) para un círculo de ~40 px: ahora sofiachat-av.webp
       (6 KB); al tocarlo, el visor abre la grande. Los .jpg quedan de respaldo.
     - Google Fonts: se descarga solo la tipografía del tema activo (antes las
       de cyberpunk y romántico juntas; messenger usa la del sistema).
     sofia.html v4.5.1 (20oct2026) — TEXTOS: lema de entrada "Te estaba
     esperando." (antes "// tu mundo · un solo acceso"). Avisos de cierre con
     título en la voz de Sofía, texto claro y botón con el precio de entrada
     (sale de /api/planes; sin precio si la API falla). "Recargar mensajes"
     ofrecía recargas que no existen; la gracia agotada muestra los días reales.
     sofia.html v4.5.0 (20oct2026) — MENSAJES EN RÁFAGA + SESIÓN VENCIDA:
     - Lo que el usuario escribe seguido (pausa < 2,5 s, o mientras Sofía
       responde) se manda JUNTO: una sola respuesta, un solo mensaje del plan,
       una sola llamada a Claude. Antes Enter ignoraba el botón bloqueado y cada
       línea era una llamada paralela → respuestas desordenadas y cupo quemado.
     - Envío con sesión vencida (401) → vuelve al login con aviso (antes el
       mensaje quedaba sin respuesta y sin explicación). Errores del servidor
       muestran un aviso en vez de silencio.
     - Fuera el botón "↻ sync" (el estado ya se refresca solo cada 2 min) y el
       selector de tema de la pantalla de entrada (queda dentro de la app).
     sofia.html v4.4.2 (20oct2026) — Limpieza: fuera comentarios de flujos
     eliminados (WhatsApp, Plus/premium). Sin cambios visibles.
     sofia.html v4.4.1 (18oct2026) — PERFIL: saluda con el nombre (antes el
     correo); "Tu cuenta" con nombre editable, email, plan con su nombre real
     y vencimiento (antes "Teléfono: —" y "Plan actual: free"). Cambiar clave:
     texto corregido a 8 caracteres y campo tipo contraseña.
     sofia.html v4.4.0 (18oct2026) — SEGURIDAD:
     - Renovar exige sesión: /chat?renovar=1 muestra un aviso en el login y,
       al entrar, abre directo los planes. El pago se crea con el token de la
       sesión (el servidor ya no acepta email/teléfono sueltos).
     - La verificación de correo usa el email, no el userId.
     - esc() escapa comillas; la galería y los planes pasan sus datos a onclick
       con ja() (antes un título con ' rompía el onclick → posible XSS).
     - Fuera el header x-user-id (el servidor solo confía en el token).
     sofia.html v4.3.2 (18oct2026) — INVITACIÓN A INSTALAR EN CELULAR:
     el banner esperaba 45 s o el 2.º mensaje de la visita; quien entraba a
     leer nunca lo veía, y al cerrarlo (✕) desaparecía 3 días sin otra forma
     de instalar. Ahora en celular aparece a los 8 s y queda un enlace fijo
     "📲 Instalar app" bajo el chat (oculto si ya está instalada o en PC).
     sofia.html v4.3.1 (18oct2026) — FIX "SE DESAPARECEN LOS MENSAJES":
     scrollChat() mueve el indicador "escribiendo…" (#typing) DENTRO de la
     lista de mensajes. Al recargar el historial (nuevo en v4.1.0: al volver a
     la pestaña/app) se vaciaba la lista con innerHTML = '' y eso BORRABA
     #typing. El siguiente scrollChat fallaba → quedaba 1 solo mensaje + el
     texto de respaldo "Hola... me alegra que hayas entrado por acá", y enviar
     un mensaje también fallaba. Ahora: #typing se conserva, la recarga solo
     reemplaza la lista si el servidor respondió bien, y el texto de respaldo
     solo aparece si el chat está vacío.
     + CELULAR: la página quedaba "pegada" mostrando el panel de estadísticas
     sin poder bajar al chat. La regla que ocultaba .chat-left en pantallas
     chicas estaba ANTES de la definición de .chat-left, que la anulaba; con
     html/body sin scroll, el chat quedaba fuera de pantalla. Ahora en celular
     el chat ocupa toda la pantalla (sin marco de teléfono), con botón
     "Renovar" en la cabecera; estadísticas y galería siguen en "Mi Sofía".
     Altura con 100dvh (en iPhone, 100vh dejaba el campo de texto bajo la
     barra de Safari) y letra de 16 px en el campo (evita el zoom de iOS).
     sofia.html v4.3.0 (17oct2026) — "¿Necesitas ayuda ahora?" bajo el chat:
     abre los números de ayuda (*4141, Salud Responde, 131). Público que
     escribe de noche y solo: la ayuda tiene que estar a un toque.
     sofia.html v4.2.0 (17oct2026) — RETORNO DEL PAGO:
     - Renovar desde el chat vuelve al chat (antes volvía a la landing con el
       mensaje de "registro exitoso") y manda el email (antes, sin teléfono,
       el pago fallaba con "Email o teléfono requerido").
     - Al volver de Flow: verifica el plan contra el servidor (el webhook puede
       tardar segundos) y confirma "Pago recibido" solo si de verdad se activó.
       La URL de retorno dice "exitoso" siempre, aunque el pago se rechace.
     - El muro de "plan vencido / sin mensajes" se quita solo al detectar el
       plan activo; antes quedaba tapando el chat hasta recargar.
     - Al volver a la app se refresca el estado del plan, no solo el chat.
     sofia.html v4.1.0 (17oct2026) — PWA + NOTIFICACIONES PUSH (segundo canal):
     la web se instala como app (ícono en el inicio, pantalla completa) y, con
     permiso, Sofía avisa cuando escribe. Banner de invitación según el
     dispositivo (iPhone: guía "Agregar a inicio"; Android: botón Instalar;
     navegador de Instagram/TikTok: "ábreme en el navegador"). La sesión local
     dura 30 días (antes 12 h: al tocar un aviso al día siguiente el usuario
     caía al login). El chat se recarga al volver a la app.
     sofia.html v4.0.0 (17oct2026) — NIVEL ÚNICO desde el día 1.
     Eliminados: niveles, títulos, puntos, rachas, ranking, regalos (catálogo,
     panel, banner, historial y pago) y el apodo público del ranking.
     El panel derecho muestra los días juntos; la galería se desbloquea solo
     por días. Menos llamadas al servidor: fuera /web/ranking y
     /web/regalos-historial (este último se llamaba hasta 4 veces al cargar).
     Planes por días: Semana y Mensual (fallback de renovación con ids reales).
     sofia.html v3.6.0 (10ago2026) — Cambios:
     1. El pensamiento ya no se dispara con la pestaña en segundo plano, y se
        cachea 30 min. Es una llamada completa a Claude que NO descuenta cupo
        del plan: antes se gatillaba cada 3 min aunque el usuario no estuviera
        mirando el panel.
     2. El modal de renovación se arma con lo que venga de /api/planes,
        ordenado por precio (sin ids de plan en el código).
     3. Fallback actualizado a la estructura nueva de planes.
     v3.5.0 — login por email + clave propia. -->
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sofía</title>
<!-- PWA (v4.1.0) -->
<link rel="manifest" href="/manifest.webmanifest">
<script src="/pasos-app.js" defer></script>
<meta name="theme-color" content="#05050F">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="Sofía">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<script>
// v4.5.2 — solo la tipografía del tema activo (messenger usa la del sistema)
(function () {
  var F = {
    cyberpunk: 'family=Orbitron:wght@400;500;700;900&family=Share+Tech+Mono&family=Rajdhani:wght@400;500;600;700',
    romantico: 'family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Instrument+Sans:wght@400;500;600'
  }
  window.cargarFuentesTema = function (t) {
    if (!F[t] || document.getElementById('ft-' + t)) return
    var l = document.createElement('link')
    l.rel = 'stylesheet'; l.id = 'ft-' + t
    l.href = 'https://fonts.googleapis.com/css2?' + F[t] + '&display=swap'
    document.head.appendChild(l)
  }
  var t = 'cyberpunk'
  try { t = localStorage.getItem('sf_theme') || t } catch (e) {}
  window.cargarFuentesTema(t)
  // v4.6.0 — letra de los textos de Sofía en "Solo para ti" (liviana, solo itálica)
  var c = document.createElement('link'); c.rel = 'stylesheet'
  c.href = 'https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@1,500&display=swap'
  document.head.appendChild(c)
})()
</script>

<style>
/* ═══════════════════════════════════════════════════════════════
   SISTEMA DE TEMAS — 3 variantes
   data-theme="cyberpunk" (default) | "romantico" | "messenger"
════════════════════════════════════════════════════════════════ */

/* ── TEMA: CYBERPUNK ── */
[data-theme="cyberpunk"] {
  --accent:       #00A8FF;
  --accent2:      #FF00E0;
  --accent3:      #00F0FF;
  --accent4:      #00FFC6;
  --accent-dark:  #005DFF;
  --accent-deep:  #0033AA;
  --danger:       #FF2D55;
  --bg0:          #02020A;
  --bg1:          #05050F;
  --bg2:          #080815;
  --bg3:          #0C0C1C;
  --bg4:          #101025;
  --border:       rgba(0,168,255,0.14);
  --border-s:     rgba(0,168,255,0.4);
  --t1:           #C8E4F8;
  --t2:           #4A7A9B;
  --t3:           #1A3048;
  --glow:         0 0 20px rgba(0,168,255,0.4);
  --glow2:        0 0 20px rgba(255,0,224,0.4);
  --glow3:        0 0 20px rgba(0,240,255,0.35);
  --glow4:        0 0 14px rgba(0,255,198,0.35);
  --font-display: 'Orbitron', sans-serif;
  --font-mono:    'Share Tech Mono', monospace;
  --font-body:    'Rajdhani', sans-serif;
  --radius-phone: 36px;
  --radius-card:  0px;
  --radius-input: 2px;
  --radius-btn:   2px;
  --border-w:     1px;
  --scanlines:    1;
  --sofia-portrait: url('sofiaBR1.webp');
  --sofia-portrait-src: 'sofiaBR1.webp';
}

/* ── TEMA: ROMÁNTICO ── */
[data-theme="romantico"] {
  --accent:       #C8526A;
  --accent2:      #C9A96E;
  --accent3:      #8B2E42;
  --accent4:      #1D9E75;
  --accent-dark:  #8B2E42;
  --accent-deep:  #5C1E2C;
  --danger:       #C8526A;
  --bg0:          #F5F0EB;
  --bg1:          #FAF7F4;
  --bg2:          #FFFFFF;
  --bg3:          #F0EBE5;
  --bg4:          #E8E0D8;
  --border:       rgba(200,82,106,0.15);
  --border-s:     rgba(200,82,106,0.4);
  --t1:           #1A1612;
  --t2:           #6B5C55;
  --t3:           #B0A09A;
  --glow:         none;
  --glow2:        none;
  --glow3:        none;
  --glow4:        none;
  --font-display: 'Cormorant Garamond', serif;
  --font-mono:    'Instrument Sans', sans-serif;
  --font-body:    'Instrument Sans', sans-serif;
  --radius-phone: 32px;
  --radius-card:  12px;
  --radius-input: 8px;
  --radius-btn:   40px;
  --border-w:     1px;
  --scanlines:    0;
  --sofia-portrait: url('rom1.webp');
  --sofia-portrait-src: 'rom1.webp';
}

/* ── TEMA: MESSENGER ── */
[data-theme="messenger"] {
  --accent:       #007AFF;
  --accent2:      #34C759;
  --accent3:      #5AC8FA;
  --accent4:      #34C759;
  --accent-dark:  #0055D4;
  --accent-deep:  #003DAA;
  --danger:       #FF3B30;
  --bg0:          #F2F2F7;
  --bg1:          #FFFFFF;
  --bg2:          #F2F2F7;
  --bg3:          #E5E5EA;
  --bg4:          #D1D1D6;
  --border:       rgba(0,0,0,0.08);
  --border-s:     rgba(0,122,255,0.35);
  --t1:           #000000;
  --t2:           #6E6E73;
  --t3:           #AEAEB2;
  --glow:         none;
  --glow2:        none;
  --glow3:        none;
  --glow4:        none;
  --font-display: -apple-system, 'SF Pro Display', 'Helvetica Neue', sans-serif;
  --font-mono:    -apple-system, 'SF Pro Text', 'Helvetica Neue', sans-serif;
  --font-body:    -apple-system, 'SF Pro Text', 'Helvetica Neue', sans-serif;
  --radius-phone: 44px;
  --radius-card:  12px;
  --radius-input: 18px;
  --radius-btn:   10px;
  --border-w:     0.5px;
  --scanlines:    0;
  --sofia-portrait: url('msn1.webp');
  --sofia-portrait-src: 'msn1.webp';
}

/* ═══════════════════════════════════════════════════════════════
   BASE — usa las variables del tema activo
════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }

body {
  font-family: var(--font-body);
  background: var(--bg0);
  color: var(--t1);
  font-size: 15px;
  transition: background 0.3s, color 0.3s;
}

[data-theme="cyberpunk"] body {
  background-image:
    linear-gradient(rgba(0,168,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,168,255,0.025) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Scanlines solo en cyberpunk */
[data-theme="cyberpunk"] body::before {
  content: '';
  position: fixed; inset: 0;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 2px,
    rgba(0,0,0,0.055) 2px, rgba(0,0,0,0.055) 4px
  );
  pointer-events: none; z-index: 9999;
}

/* ── SELECTOR DE TEMA ── */
.theme-switcher {
  display: flex; align-items: center; gap: 4px;
}
.theme-btn {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; transition: all .2s; flex-shrink: 0;
  position: relative;
}
.theme-btn[data-t="cyberpunk"] { background: linear-gradient(135deg,#00A8FF,#FF00E0); }
.theme-btn[data-t="romantico"] { background: linear-gradient(135deg,#C8526A,#C9A96E); }
.theme-btn[data-t="messenger"] { background: linear-gradient(135deg,#007AFF,#34C759); }
.theme-btn.active { border-color: var(--t1); box-shadow: 0 0 0 1px var(--t1); }
.theme-btn:hover { transform: scale(1.12); }

/* tooltip del tema */
.theme-btn::after {
  content: attr(title);
  position: absolute; bottom: 130%; left: 50%; transform: translateX(-50%);
  background: var(--bg1); color: var(--t1); border: var(--border-w) solid var(--border-s);
  font-family: var(--font-mono); font-size: 9px; padding: 3px 7px;
  white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .15s;
  border-radius: 3px;
}
.theme-btn:hover::after { opacity: 1; }

/* ═══════════════════════════ LOGIN ════════════════════════════ */
#login-screen {
  display: flex; align-items: center; justify-content: center;
  height: 100vh; padding: 2rem;
}

.login-wrap {
  width: 100%; max-width: 400px;
  animation: fadeUp .5s ease both;
}

.login-logo {
  font-family: var(--font-display); font-size: 36px; font-weight: 900;
  color: var(--accent); text-shadow: var(--glow);
  letter-spacing: 0.1em; text-align: center; margin-bottom: 2px;
}
.login-logo em { color: var(--accent2); font-style: italic; text-shadow: var(--glow2); }

[data-theme="romantico"] .login-logo { font-size: 48px; font-weight: 300; letter-spacing: 0.06em; }
[data-theme="messenger"] .login-logo { font-size: 32px; font-weight: 700; letter-spacing: -0.01em; }

.login-tagline {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  color: var(--t2); text-align: center;
  text-transform: uppercase; margin-bottom: 2.5rem;
}
[data-theme="romantico"] .login-tagline { letter-spacing: 0.06em; font-size: 12px; text-transform: none; font-style: italic; }
[data-theme="messenger"] .login-tagline { letter-spacing: 0.02em; font-size: 13px; text-transform: none; }

.login-card {
  background: var(--bg2);
  border: var(--border-w) solid var(--border);
  border-top: 2px solid var(--accent);
  padding: 2rem;
  position: relative;
  border-radius: var(--radius-card);
}

[data-theme="romantico"] .login-card {
  box-shadow: 0 4px 30px rgba(200,82,106,0.08);
}
[data-theme="messenger"] .login-card {
  box-shadow: 0 2px 20px rgba(0,0,0,0.08);
  border-top: none; border: var(--border-w) solid var(--border);
}

.login-card::after {
  content: '';
  position: absolute; top: -1px; left: 20%; right: 20%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent3), transparent);
  opacity: .6;
}
[data-theme="messenger"] .login-card::after { display: none; }
[data-theme="romantico"] .login-card::after { background: linear-gradient(90deg, transparent, var(--accent), transparent); }

.f-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--t2);
  display: block; margin-bottom: 6px;
}
[data-theme="romantico"] .f-label { letter-spacing: 0.04em; font-size: 11px; }
[data-theme="messenger"] .f-label { letter-spacing: 0.02em; font-size: 13px; font-weight: 500; text-transform: none; }

.f-input {
  width: 100%; background: var(--bg3);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-input);
  color: var(--t1); font-family: var(--font-body); font-size: 15px;
  padding: 12px 14px; outline: none;
  transition: border-color .2s, box-shadow .2s;
  margin-bottom: 1.25rem;
}
.f-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,122,255,0.1); }
.f-input::placeholder { color: var(--t3); }
[data-theme="cyberpunk"] .f-input { font-family: var(--font-mono); border-radius: 0; }
[data-theme="cyberpunk"] .f-input:focus { box-shadow: 0 0 0 1px rgba(0,168,255,0.18); }

.login-btn {
  width: 100%;
  background: var(--accent);
  border: var(--border-w) solid var(--accent); color: #fff;
  font-family: var(--font-display); font-size: 14px; font-weight: 600;
  letter-spacing: 0.06em; padding: 13px; cursor: pointer; transition: all .25s;
  border-radius: var(--radius-btn);
}
.login-btn:hover { opacity: 0.88; box-shadow: var(--glow); }
.login-btn:disabled { opacity: .4; cursor: not-allowed; }
[data-theme="cyberpunk"] .login-btn { background: linear-gradient(135deg,var(--accent-deep),var(--accent-dark)); letter-spacing: 0.12em; text-transform: uppercase; font-size: 13px; }
[data-theme="romantico"] .login-btn { letter-spacing: 0.04em; }

.login-error {
  font-family: var(--font-mono); font-size: 11px; color: var(--danger);
  text-align: center; margin-top: 10px; display: none;
}
.login-hint {
  font-size: 13px; color: var(--t2); line-height: 1.6;
  text-align: center; margin-top: 1.5rem;
}
.login-hint strong { color: var(--accent); }

/* login theme switcher */
.login-theme-row {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; margin-bottom: 1.5rem;
}
.login-theme-label {
  font-family: var(--font-mono); font-size: 9px; color: var(--t3);
  text-transform: uppercase; letter-spacing: 0.1em;
}
[data-theme="romantico"] .login-theme-label { font-family: var(--font-body); font-size: 11px; text-transform: none; letter-spacing: 0.02em; }
[data-theme="messenger"] .login-theme-label { font-family: var(--font-body); font-size: 13px; text-transform: none; letter-spacing: 0; }

/* ═══════════════════════════ APP SHELL ════════════════════════ */
#app { display: none; height: 100vh; flex-direction: column; }
#app.visible { display: flex; }

/* ── TOPBAR ─────────────────────────────────────────────────── */
.topbar {
  flex-shrink: 0; height: 54px;
  background: var(--bg1);
  border-bottom: var(--border-w) solid var(--border);
  display: flex; align-items: center;
  padding: 0 1.25rem; gap: 10px;
  position: relative; z-index: 50;
}

[data-theme="cyberpunk"] .topbar::after {
  content: '';
  position: absolute; bottom: -1px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 30%, var(--accent3) 50%, var(--accent2) 70%, transparent 100%);
  opacity: .45;
}
[data-theme="messenger"] .topbar {
  box-shadow: 0 0.5px 0 rgba(0,0,0,0.15);
  border-bottom: none;
}

.top-logo {
  font-family: var(--font-display); font-size: 17px; font-weight: 700;
  color: var(--accent); text-shadow: var(--glow);
  letter-spacing: 0.08em;
}
.top-logo em { color: var(--accent2); font-style: italic; }
[data-theme="romantico"] .top-logo { font-size: 22px; font-weight: 300; letter-spacing: 0.03em; }
[data-theme="messenger"] .top-logo { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }

.top-status {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10px; color: var(--t2);
}
[data-theme="romantico"] .top-status { font-family: var(--font-body); font-size: 11px; }
[data-theme="messenger"] .top-status { font-family: var(--font-body); font-size: 12px; }

.status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent4); box-shadow: 0 0 6px var(--accent4);
  animation: pulse-dot 2s ease-in-out infinite;
}
[data-theme="romantico"] .status-dot { background: #1D9E75; box-shadow: none; }
[data-theme="messenger"] .status-dot { background: var(--accent2); box-shadow: none; }
@keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:.3} }

.top-views { display: flex; gap: 3px; margin-left: 10px; }

.view-btn {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 6px 14px;
  border: var(--border-w) solid transparent; background: none;
  color: var(--t2); cursor: pointer; transition: all .2s;
  border-radius: var(--radius-btn);
  display: flex; align-items: center; gap: 7px;
}
.view-btn:hover { color: var(--t1); border-color: var(--border); }
.view-btn.active {
  color: var(--accent); border-color: var(--accent);
  background: rgba(0,122,255,0.07);
}
[data-theme="cyberpunk"] .view-btn.active { text-shadow: 0 0 8px rgba(0,168,255,0.35); }
[data-theme="romantico"] .view-btn { font-family: var(--font-body); font-size: 13px; letter-spacing: 0; text-transform: none; }
[data-theme="messenger"] .view-btn { font-family: var(--font-body); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; border-radius: 8px; }
[data-theme="messenger"] .view-btn.active { background: rgba(0,122,255,0.1); }

.top-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.top-user {
  font-family: var(--font-mono); font-size: 10px; color: var(--t2);
  display: none; /* oculto en móvil, visible en desktop via media */
}
@media (min-width: 600px) { .top-user { display: block; } }
.top-user span { color: var(--accent); }
[data-theme="romantico"] .top-user { font-family: var(--font-body); font-size: 12px; }
[data-theme="messenger"] .top-user { font-family: var(--font-body); font-size: 13px; }

.btn-out {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.05em;
  color: var(--t2); background: none;
  border: var(--border-w) solid var(--border); padding: 5px 11px;
  cursor: pointer; transition: all .2s; border-radius: var(--radius-btn);
}
.btn-out:hover { color: var(--danger); border-color: var(--danger); }
[data-theme="romantico"] .btn-out { font-family: var(--font-body); font-size: 12px; letter-spacing: 0; }
[data-theme="messenger"] .btn-out { font-family: var(--font-body); font-size: 13px; letter-spacing: 0; }

/* ── VISTAS ─────────────────────────────────────────────────── */
.vista { display: none; flex: 1; overflow: hidden; }
.vista.active { display: flex; }

/* ═══════════════════════════ VISTA CHAT ═══════════════════════ */
#vista-chat { display: none; }
#vista-chat.active { display: grid; grid-template-columns: 220px 300px 1fr 220px; transition: grid-template-columns .3s ease; }

/* Modo zen — solo celular centrado, sin paneles */
body.zen-mode #vista-chat.active { grid-template-columns: 0 0 1fr 0; }
body.zen-mode .chat-left { overflow: hidden; opacity: 0; pointer-events: none; transition: opacity .25s; }
body.zen-mode .side-panel { display: none; }

/* En móvil: ocultar paneles */
@media (max-width: 900px) {
  #vista-chat.active { grid-template-columns: 300px 1fr; }
  .side-panel { display: none !important; }
}
@media (max-width: 680px) {
  #vista-chat.active { grid-template-columns: 1fr; }
  .chat-left { display: none; }
}

/* ── PANELES LATERALES ── */
.side-panel {
  display: flex; flex-direction: column;
  background: var(--bg1); overflow: hidden;
  transition: all .3s ease;
}

/* Panel izquierdo — foto de Sofía */
.side-left {
  border-right: var(--border-w) solid var(--border);
  min-width: 0;
}
.sofia-portrait-wrap {
  position: relative; flex: 1; overflow: hidden; min-height: 0;
  cursor: pointer;
}
.sofia-portrait {
  width: 100%; height: 100%; object-fit: cover; object-position: center center;
  display: block; transition: transform .4s ease, filter .4s ease;
}
.sofia-portrait-wrap:hover .sofia-portrait { transform: scale(1.03); filter: brightness(1.05); }
[data-theme="cyberpunk"] .sofia-portrait { object-position: center 20%; }
[data-theme="romantico"] .sofia-portrait { object-position: center top; }
[data-theme="messenger"] .sofia-portrait { object-position: center bottom; }
.sofia-portrait-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--bg1) 0%, rgba(0,0,0,0) 50%);
  pointer-events: none;
}
[data-theme="messenger"] .sofia-portrait-overlay {
  background: linear-gradient(to top, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 50%);
}
.sofia-portrait-info {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 1rem;
}
.sofia-estado-lbl {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent3); margin-bottom: 4px;
  opacity: .9;
}
[data-theme="romantico"] .sofia-estado-lbl { font-family: var(--font-body); font-size: 10px; letter-spacing: .04em; color: var(--accent); }
[data-theme="messenger"] .sofia-estado-lbl { font-family: var(--font-body); font-size: 11px; letter-spacing: 0; text-transform: none; color: rgba(255,255,255,0.7); }
.sofia-estado-txt {
  font-size: 14px; color: #fff; line-height: 1.4; font-style: italic;
  text-shadow: 0 1px 10px rgba(0,0,0,0.9), 0 0 20px rgba(0,0,0,0.6);
}
.portrait-expand-hint {
  position: absolute; top: 10px; right: 10px;
  background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.2);
  border-radius: 4px; padding: 3px 7px;
  font-family: var(--font-mono); font-size: 8px; color: rgba(255,255,255,0.6);
  letter-spacing: .08em; opacity: 0; transition: opacity .2s;
}
.sofia-portrait-wrap:hover .portrait-expand-hint { opacity: 1; }

/* Panel derecho — días juntos */
.side-right {
  border-left: var(--border-w) solid var(--border);
  min-width: 0; overflow-y: auto; padding: 1rem;
}
.side-right::-webkit-scrollbar { width: 2px; }
.side-right::-webkit-scrollbar-thumb { background: var(--border-s); }

.side-section-lbl {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--t2);
  margin-bottom: 10px; display: flex; align-items: center; gap: 8px;
}
.side-section-lbl::after { content:''; flex:1; height:1px; background:var(--border); }
[data-theme="romantico"] .side-section-lbl { font-family: var(--font-body); font-size: 10px; letter-spacing: .04em; color: var(--accent); }
[data-theme="messenger"] .side-section-lbl { font-family: var(--font-body); font-size: 11px; letter-spacing: 0; text-transform: none; font-weight: 500; color: var(--t2); }

/* v4.6.1 — Próxima foto y recuerdos (panel derecho) */
.pendiente { font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-size:18px; line-height:1.3; color:var(--t1); }
#blk-pendiente[hidden], .fecha-renovar[hidden] { display:none; }
.fecha-prox { font-size:15px; font-weight:600; color:var(--t1); line-height:1.35; }
.fecha-renovar { margin-top:8px; width:100%; min-height:36px; border:1px solid var(--accent2); background:none; color:var(--accent2); font-size:13px; font-weight:600; border-radius:4px; cursor:pointer; font-family:var(--font-body); }
.frases { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.frases li { font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-size:16px; line-height:1.3; color:var(--t1); padding:8px 10px; border-left:2px solid var(--accent2); background:var(--bg2); }
.frases li.vacio { font-family:var(--font-body); font-style:normal; font-size:13px; color:var(--t2); border-left-color:var(--border); background:none; }
.msg-star { background:none; border:none; cursor:pointer; color:var(--t2); font-size:14px; line-height:1; padding:2px 4px; margin-left:4px; vertical-align:middle; min-width:28px; min-height:24px; }
.msg-star.on { color:var(--accent2); }
.recuerdos { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.recuerdos li { font-size:14px; line-height:1.35; color:var(--t1); padding:8px 10px; background:var(--bg2); border:1px solid var(--border); border-radius:6px; }
.recuerdos li.vacio { color:var(--t2); font-size:13px; background:none; border-style:dashed; }

/* Arco de progreso SVG */
.progress-arc-wrap {
  display: flex; flex-direction: column; align-items: center;
  margin-bottom: 1rem;
}
.progress-arc-wrap svg { overflow: visible; }
.arc-titulo-display {
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
  color: var(--accent2); text-align: center; margin-top: 4px;
  text-shadow: var(--glow2); letter-spacing: .04em;
}
[data-theme="romantico"] .arc-titulo-display { color: var(--accent); font-style: italic; text-shadow: none; }
[data-theme="messenger"] .arc-titulo-display { font-family: var(--font-body); color: var(--accent); text-shadow: none; }

/* Botón zen toggle */
.btn-zen {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.05em;
  color: var(--t2); background: none;
  border: var(--border-w) solid var(--border); padding: 5px 11px;
  cursor: pointer; transition: all .2s; border-radius: var(--radius-btn);
}
.btn-zen:hover { color: var(--accent3); border-color: var(--accent3); }
body.zen-mode .btn-zen { color: var(--accent); border-color: var(--accent); }
[data-theme="romantico"] .btn-zen { font-family: var(--font-body); font-size: 12px; letter-spacing: 0; }
[data-theme="messenger"] .btn-zen { font-family: var(--font-body); font-size: 13px; letter-spacing: 0; }

/* ══ LIGHTBOX ══════════════════════════════════════════════════ */
#lightbox {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.92); cursor: zoom-out;
  align-items: center; justify-content: center;
}
#lightbox.open { display: flex; animation: lbIn .2s ease both; }
@keyframes lbIn { from{opacity:0;transform:scale(.96)} to{opacity:1;transform:scale(1)} }
#lightbox img {
  max-width: 92vw; max-height: 92vh; object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 30px 80px rgba(0,0,0,0.6);
}
[data-theme="cyberpunk"] #lightbox img { box-shadow: 0 0 0 1px rgba(0,168,255,0.3), 0 0 60px rgba(0,85,255,0.2), 0 30px 80px rgba(0,0,0,0.8); }
#lightbox-close {
  position: absolute; top: 1.25rem; right: 1.25rem;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.8); font-size: 18px; width: 38px; height: 38px;
  border-radius: 50%; cursor: pointer; display: flex; align-items: center;
  justify-content: center; transition: all .2s;
}
#lightbox-close:hover { background: rgba(255,255,255,0.18); color: #fff; }
.lightbox-caption {
  position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,0.4);
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
.foto-clickable { cursor: zoom-in; }

.chat-left {
  background: var(--bg1);
  border-right: var(--border-w) solid var(--border);
  display: flex; flex-direction: column;
  overflow-y: auto; overflow-x: hidden;
}
.chat-left::-webkit-scrollbar { width: 2px; }
.chat-left::-webkit-scrollbar-thumb { background: var(--border-s); }

/* Sofía piensa */
.thought-section {
  padding: 1rem 1rem .9rem;
  border-bottom: var(--border-w) solid var(--border);
}

.s-eyebrow {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--t2);
  margin-bottom: 10px; display: flex; align-items: center; gap: 8px;
}
.s-eyebrow::after { content:''; flex:1; height:1px; background:var(--border); }
[data-theme="romantico"] .s-eyebrow { font-family: var(--font-body); font-size: 10px; letter-spacing: 0.04em; }
[data-theme="messenger"] .s-eyebrow { font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; }

.thought-row { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; }

.t-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  object-fit: cover; border: 1.5px solid var(--accent2);
  box-shadow: var(--glow2);
}
[data-theme="romantico"] .t-avatar { border-color: var(--accent); }
[data-theme="messenger"] .t-avatar { border: none; box-shadow: 0 0 0 1px rgba(0,0,0,0.1); }

.t-bubble {
  flex: 1; background: var(--bg3);
  border: var(--border-w) solid var(--border);
  border-left: 2px solid var(--accent2);
  padding: 8px 10px; min-height: 44px;
  border-radius: 0 var(--radius-card) var(--radius-card) var(--radius-card);
}
[data-theme="romantico"] .t-bubble { border-left-color: var(--accent); border-radius: var(--radius-card); }
[data-theme="messenger"] .t-bubble { border-left: none; border-radius: 12px; background: var(--bg3); }

.t-text { font-size: 13px; line-height: 1.55; color: var(--t1); font-style: italic; }
.t-text.loading { color: var(--t2); }
.t-estado { font-family: var(--font-mono); font-size: 8px; color: var(--accent2); margin-top: 5px; }
[data-theme="romantico"] .t-estado { font-family: var(--font-body); font-size: 10px; color: var(--accent); }
[data-theme="messenger"] .t-estado { font-family: var(--font-body); font-size: 10px; color: var(--t2); }

.t-refresh {
  font-family: var(--font-mono); font-size: 9px; color: var(--t3);
  background: none; border: none; cursor: pointer; padding: 0;
  letter-spacing: 0.06em; transition: color .2s;
}
.t-refresh:hover { color: var(--accent); }
[data-theme="romantico"] .t-refresh { font-family: var(--font-body); font-size: 11px; letter-spacing: 0; }
[data-theme="messenger"] .t-refresh { font-family: var(--font-body); font-size: 12px; letter-spacing: 0; color: var(--accent); }

/* Quick stats */
.quick-stats {
  padding: .9rem 1rem;
  border-bottom: var(--border-w) solid var(--border);
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}

.qs-card {
  background: var(--bg2); border: var(--border-w) solid var(--border);
  padding: 8px 10px; position: relative; overflow: hidden;
  border-radius: var(--radius-card);
}
[data-theme="romantico"] .qs-card { border-radius: var(--radius-card); }
[data-theme="messenger"] .qs-card { border-radius: 10px; border: none; background: var(--bg1); }

.qs-card::before {
  content: ''; position: absolute; top:0; left:0; right:0; height:2px;
  background: var(--accent); opacity:.4;
}
.qs-card.c::before { background: var(--accent3); }
.qs-card.m::before { background: var(--accent2); }
.qs-card.g::before { background: var(--accent4); }
[data-theme="messenger"] .qs-card::before { display: none; }

.qs-lbl {
  font-family: var(--font-mono); font-size: 8px; letter-spacing:.09em;
  text-transform: uppercase; color: var(--t2); margin-bottom:4px;
}
[data-theme="romantico"] .qs-lbl { font-family: var(--font-body); font-size: 10px; letter-spacing: 0.02em; text-transform: none; }
[data-theme="messenger"] .qs-lbl { font-family: var(--font-body); font-size: 11px; letter-spacing: 0; text-transform: none; color: var(--t2); }

.qs-val {
  font-family: var(--font-display); font-size: 20px; font-weight: 700;
  color: var(--accent); line-height:1; text-shadow: var(--glow);
}
.qs-val.c { color: var(--accent3); text-shadow: var(--glow3); }
.qs-val.m { color: var(--accent2); text-shadow: var(--glow2); }
.qs-val.g { color: var(--accent4); text-shadow: var(--glow4); }
[data-theme="romantico"] .qs-val { font-family: var(--font-display); font-weight: 600; font-size: 22px; }
[data-theme="romantico"] .qs-val.c { color: var(--accent); }
[data-theme="romantico"] .qs-val.m { color: var(--accent2); }
[data-theme="romantico"] .qs-val.g { color: var(--accent4); }
[data-theme="messenger"] .qs-val { font-family: var(--font-body); font-weight: 600; font-size: 20px; color: var(--t1); }
[data-theme="messenger"] .qs-val.c, [data-theme="messenger"] .qs-val.m, [data-theme="messenger"] .qs-val.g { color: var(--t1); }

.qs-sub { font-family: var(--font-mono); font-size: 8px; color: var(--t2); margin-top:3px; }
[data-theme="romantico"] .qs-sub { font-family: var(--font-body); font-size: 10px; }
[data-theme="messenger"] .qs-sub { font-family: var(--font-body); font-size: 11px; }

/* Chat actions */
.chat-actions { padding: .9rem 1rem; }
.ca-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 9px; }

.ca-btn {
  background: var(--bg2); border: var(--border-w) solid var(--border);
  color: var(--t1); font-family: var(--font-body);
  font-size: 13px; font-weight: 600;
  padding: 9px 6px; text-align: center;
  cursor: pointer; transition: all .2s; border-radius: var(--radius-btn);
}
.ca-btn:hover { border-color: var(--accent); color: var(--accent); }
.ca-btn.primary {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.ca-btn.primary:hover { opacity: 0.88; box-shadow: var(--glow); }
[data-theme="cyberpunk"] .ca-btn.primary { background: rgba(0,85,255,0.12); border-color: var(--accent-dark); color: var(--accent); }
[data-theme="cyberpunk"] .ca-btn.primary:hover { background: rgba(0,168,255,0.18); }

.msgs-meter {
  background: var(--bg2); border: var(--border-w) solid var(--border);
  padding: 9px 11px; border-radius: var(--radius-card);
}
[data-theme="messenger"] .msgs-meter { border: none; background: var(--bg3); border-radius: 10px; }
.msgs-meter-top {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 9px; color: var(--t2);
  margin-bottom: 5px;
}
.msgs-meter-top span { color: var(--accent); }
[data-theme="romantico"] .msgs-meter-top { font-family: var(--font-body); font-size: 11px; }
[data-theme="messenger"] .msgs-meter-top { font-family: var(--font-body); font-size: 12px; }
.msgs-track { height: 3px; background: var(--bg3); border-radius: 2px; }
[data-theme="messenger"] .msgs-track { height: 4px; background: var(--bg4); }
.msgs-fill {
  height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent), var(--accent3));
  transition: width .6s ease;
}
[data-theme="romantico"] .msgs-fill { background: linear-gradient(90deg, var(--accent-deep), var(--accent)); }
[data-theme="messenger"] .msgs-fill { background: var(--accent); }

/* PHONE */
.chat-right {
  display: flex; align-items: center; justify-content: center;
  background: var(--bg0); padding: 1.25rem;
  position: relative; overflow: hidden;
}
[data-theme="romantico"] .chat-right {
  background: #F0EBE5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='1' fill='%23C8526A' fill-opacity='0.07'/%3E%3C/svg%3E");
}
[data-theme="cyberpunk"] .chat-right::before {
  content: '';
  position: absolute; width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(0,85,255,0.07) 0%, transparent 70%);
  top:50%; left:50%; transform: translate(-50%,-50%);
  pointer-events: none;
}

.phone {
  width: 360px; height: calc(100vh - 54px - 2.5rem);
  max-height: 720px; min-height: 520px;
  background: var(--bg1);
  border: 2px solid var(--border-s);
  border-radius: var(--radius-phone);
  position: relative; overflow: hidden; z-index: 1;
  display: flex; flex-direction: column;
  transition: border-color .3s;
}
[data-theme="cyberpunk"] .phone {
  box-shadow: 0 0 0 1px rgba(0,168,255,0.07), 0 0 50px rgba(0,85,255,0.14), 0 0 100px rgba(0,85,255,0.05);
}
[data-theme="romantico"] .phone {
  border-color: rgba(200,82,106,0.3);
  box-shadow: 0 8px 60px rgba(200,82,106,0.12), 0 2px 20px rgba(0,0,0,0.08);
}
[data-theme="messenger"] .phone {
  border: none;
  box-shadow: 0 20px 80px rgba(0,0,0,0.18), 0 2px 12px rgba(0,0,0,0.1);
  background: #FFFFFF;
}

[data-theme="cyberpunk"] .phone::before {
  content:''; position: absolute; top:0; left:15%; right:15%; height:2px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent3), transparent);
  z-index: 10;
}

.ph-notch {
  height: 30px; background: var(--bg0);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
[data-theme="romantico"] .ph-notch { background: var(--bg3); }
[data-theme="messenger"] .ph-notch { background: #000; height: 34px; }
.ph-notch-pill { width: 72px; height: 5px; background: var(--bg2); border-radius: 3px; }
[data-theme="romantico"] .ph-notch-pill { background: rgba(200,82,106,0.2); }
[data-theme="messenger"] .ph-notch-pill { width: 32px; height: 32px; background: #000; border-radius: 50%; }

.ph-header {
  background: var(--bg2); border-bottom: var(--border-w) solid var(--border);
  padding: 9px 13px; display: flex; align-items: center; gap: 9px;
  flex-shrink: 0; position: relative;
}
[data-theme="cyberpunk"] .ph-header::after {
  content:''; position:absolute; bottom:-1px; left:0; right:0; height:1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity:.5;
}
[data-theme="messenger"] .ph-header { background: #F9F9F9; border-bottom: 0.5px solid rgba(0,0,0,0.12); }

.ph-av {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  object-fit: cover; border: 1.5px solid var(--accent);
  box-shadow: var(--glow);
}
[data-theme="romantico"] .ph-av { border-color: var(--accent); box-shadow: none; }
[data-theme="messenger"] .ph-av { border: none; box-shadow: none; }

.ph-info { flex:1; }
.ph-name {
  font-family: var(--font-display); font-size: 12px; font-weight:500;
  color: var(--accent); letter-spacing:.05em;
}
[data-theme="romantico"] .ph-name { font-size: 15px; font-weight: 600; letter-spacing: 0.01em; color: var(--t1); }
[data-theme="messenger"] .ph-name { font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--t1); }

.ph-online { font-family: var(--font-mono); font-size: 9px; color: var(--accent4); letter-spacing:.06em; }
[data-theme="romantico"] .ph-online { font-family: var(--font-body); font-size: 10px; color: #1D9E75; letter-spacing: 0; }
[data-theme="messenger"] .ph-online { font-family: var(--font-body); font-size: 11px; color: var(--t2); letter-spacing: 0; }

.ph-msgs { font-family: var(--font-mono); font-size: 9px; color: var(--t2); text-align:right; }
.ph-msgs span { color: var(--accent); font-size:13px; display:block; }
/* v4.7.0 — etiqueta de gracia junto a los mensajes disponibles */
.ph-gracia { display:block; font-style:normal; font-size:9px; color:var(--accent2); white-space:nowrap; letter-spacing:.02em; }
.ph-gracia[hidden] { display:none; }
[data-theme="romantico"] .ph-msgs { font-family: var(--font-body); }
[data-theme="messenger"] .ph-msgs { font-family: var(--font-body); }

.ph-messages {
  flex:1; overflow-y:auto; padding: 10px 9px;
  display: flex; flex-direction: column; gap: 5px;
  scroll-behavior: smooth;
}
.ph-messages::-webkit-scrollbar { width: 2px; }
.ph-messages::-webkit-scrollbar-thumb { background: var(--border); }
[data-theme="messenger"] .ph-messages { background: #FFFFFF; }

.msg { display:flex; flex-direction:column; max-width:83%; animation: msgIn .2s ease both; }
@keyframes msgIn { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:translateY(0)} }
.msg.sofia { align-self: flex-start; }
.msg.user  { align-self: flex-end; }

.msg-bub { padding: 8px 11px; font-size: 13px; line-height:1.5; white-space: pre-line; overflow-wrap: anywhere; }

/* Cyberpunk bubbles */
[data-theme="cyberpunk"] .msg.sofia .msg-bub {
  background: var(--bg3); border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  color: var(--t1); border-radius: 0 8px 8px 8px;
}
[data-theme="cyberpunk"] .msg.user .msg-bub {
  background: rgba(0,85,255,0.17); border: 1px solid rgba(0,168,255,0.22);
  color: var(--t1); border-radius: 8px 0 8px 8px;
}

/* Romántico bubbles */
[data-theme="romantico"] .msg.sofia .msg-bub {
  background: #FFFFFF; border: 1px solid rgba(200,82,106,0.15);
  color: var(--t1); border-radius: 4px 16px 16px 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
[data-theme="romantico"] .msg.user .msg-bub {
  background: var(--accent); color: #fff;
  border-radius: 16px 4px 16px 16px;
  border: none;
}
[data-theme="romantico"] .msg.user .msg-time { color: var(--t3); }

/* Messenger bubbles — igual que iOS Messages */
[data-theme="messenger"] .msg.sofia .msg-bub {
  background: #E9E9EB; color: #000;
  border-radius: 18px 18px 18px 4px;
  border: none; padding: 9px 13px;
}
[data-theme="messenger"] .msg.user .msg-bub {
  background: var(--accent); color: #fff;
  border-radius: 18px 18px 4px 18px;
  border: none; padding: 9px 13px;
}
[data-theme="messenger"] .ph-messages { gap: 3px; padding: 12px 10px; }

.msg-time {
  font-family: var(--font-mono); font-size: 8px;
  color: var(--t3); margin-top:3px; padding: 0 2px;
}
[data-theme="romantico"] .msg-time { font-family: var(--font-body); font-size: 10px; }
[data-theme="messenger"] .msg-time { font-family: var(--font-body); font-size: 10px; color: var(--t3); }
.msg.sofia .msg-time { align-self:flex-start; }
.msg.user  .msg-time { align-self:flex-end; }

/* Typing indicator */
.typing {
  display: none; align-self:flex-start;
  padding: 10px 13px; background: var(--bg3);
  border: var(--border-w) solid var(--border);
  border-left: 2px solid var(--accent);
  gap: 5px; align-items:center;
}
.typing.on { display:flex; }
[data-theme="romantico"] .typing { border-radius: 4px 16px 16px 16px; border-left: none; border-color: rgba(200,82,106,0.15); background: #fff; }
[data-theme="messenger"] .typing { background: #E9E9EB; border: none; border-radius: 18px 18px 18px 4px; }

.ty-dot {
  width:5px; height:5px; border-radius:50%;
  background: var(--accent);
  animation: tyB .9s ease-in-out infinite;
}
[data-theme="romantico"] .ty-dot { background: var(--accent); }
[data-theme="messenger"] .ty-dot { background: #8E8E93; }
.ty-dot:nth-child(2) { animation-delay:.15s; }
.ty-dot:nth-child(3) { animation-delay:.30s; }
@keyframes tyB { 0%,80%,100%{transform:translateY(0);opacity:.4} 40%{transform:translateY(-5px);opacity:1} }

/* Input area */
.ph-input-area {
  background: var(--bg2); border-top: var(--border-w) solid var(--border);
  padding: 9px; display: flex; gap: 7px; align-items: flex-end; flex-shrink:0;
}
[data-theme="messenger"] .ph-input-area { background: #F9F9F9; border-top: 0.5px solid rgba(0,0,0,0.1); padding: 8px 10px; }

.ph-input {
  flex:1; background: var(--bg3); border: var(--border-w) solid var(--border);
  color: var(--t1); font-family: var(--font-body); font-size: 14px;
  padding: 9px 11px; outline:none; resize:none;
  max-height:72px; min-height:36px; line-height:1.4;
  transition: border-color .2s; border-radius: var(--radius-input);
}
.ph-input:focus { border-color: var(--accent); }
.ph-input::placeholder { color: var(--t3); }
[data-theme="cyberpunk"] .ph-input { font-family: var(--font-body); }
[data-theme="messenger"] .ph-input {
  background: #FFFFFF; border: 0.5px solid rgba(0,0,0,0.15);
  font-size: 15px; padding: 8px 14px;
}

.send-btn {
  width:36px; height:36px; flex-shrink:0;
  background: var(--accent); border: none;
  color:#fff; cursor:pointer; font-size:14px;
  display:flex; align-items:center; justify-content:center;
  transition: all .2s; border-radius: var(--radius-btn);
}
.send-btn:hover { opacity: 0.85; box-shadow: var(--glow); }
.send-btn:disabled { opacity:.35; cursor:not-allowed; }
[data-theme="cyberpunk"] .send-btn { background: var(--accent-dark); border: 1px solid var(--accent); }
[data-theme="messenger"] .send-btn { background: var(--accent); border-radius: 50%; width: 32px; height: 32px; }

.ph-home { height:18px; background:var(--bg0); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ph-home-bar { width:72px; height:3px; background:var(--border-s); border-radius:2px; }
[data-theme="romantico"] .ph-home { background: var(--bg3); }
[data-theme="messenger"] .ph-home { background: #000; }
[data-theme="messenger"] .ph-home-bar { background: rgba(255,255,255,0.6); }

/* Expired overlay */
.expired-overlay {
  display:none; position:absolute; inset:0;
  background: rgba(0,0,0,.85); z-index:20;
  align-items:center; justify-content:center;
  flex-direction:column; gap:12px; text-align:center;
  padding:2rem; border-radius: var(--radius-phone);
}
.expired-overlay.on { display:flex; }

/* Banner de gracia — NO bloquea el chat, solo avisa arriba del input */
.gracia-banner {
  display:none; align-items:center; justify-content:space-between; gap:8px;
  padding:7px 12px; margin:0 8px 6px; border-radius:12px;
  background: rgba(0,240,255,0.10); border:1px solid var(--accent3);
  font-size:12px; color:var(--accent3);
}
.gracia-banner.on { display:flex; }
.gracia-banner-txt { line-height:1.3; flex:1; }
.gracia-banner-txt b { color:var(--accent3); }
.gracia-banner-btn {
  flex-shrink:0; background:var(--accent3); color:#001014; border:none;
  border-radius:10px; padding:5px 10px; font-size:11px; font-weight:700;
  cursor:pointer; white-space:nowrap;
}
[data-theme="romantico"] .gracia-banner { background:rgba(255,0,224,0.08); border-color:var(--accent); color:var(--accent); }
[data-theme="romantico"] .gracia-banner-txt b { color:var(--accent); }
[data-theme="romantico"] .gracia-banner-btn { background:var(--accent); color:#fff; }
[data-theme="messenger"] .gracia-banner { background:rgba(0,122,255,0.08); border-color:#007AFF; color:#007AFF; }
[data-theme="messenger"] .gracia-banner-txt b { color:#007AFF; }
[data-theme="messenger"] .gracia-banner-btn { background:#007AFF; color:#fff; }
/* ── Invitación a instalar la app / activar avisos (v4.1.0) ── */
.app-banner { border-color:var(--accent2); color:var(--t1); background:rgba(255,0,224,0.08); }
.app-banner .gracia-banner-btn { background:var(--accent2); color:#fff; }
.app-banner-x { flex-shrink:0; background:none; border:none; color:var(--t2); font-size:13px; cursor:pointer; padding:2px 4px; }
[data-theme="romantico"] .app-banner { border-color:var(--accent); color:var(--accent); }
[data-theme="romantico"] .app-banner .gracia-banner-btn { background:var(--accent); }
[data-theme="messenger"] .app-banner { border-color:#007AFF; color:#1c1c1e; background:rgba(0,122,255,0.06); }
[data-theme="messenger"] .app-banner .gracia-banner-btn { background:#007AFF; }
.ayuda-link { text-align:center; margin:2px 0 0; font-size:11px; }
.ayuda-link a { color:var(--t2); text-decoration:underline; }
.ayuda-tel { display:block; margin:0 0 10px; padding:12px 14px; border-radius:12px; border:1px solid var(--border-s);
  color:var(--t1); text-decoration:none; font-size:15px; }
.ayuda-tel b { font-size:18px; }
.pago-toast { position:fixed; left:50%; top:16px; transform:translateX(-50%); z-index:9500; display:none;
  max-width:92vw; padding:10px 16px; border-radius:12px; font-family:var(--font-body); font-size:14px; font-weight:600;
  background:var(--bg2); color:var(--t1); border:1px solid var(--accent4); box-shadow:0 6px 24px rgba(0,0,0,.4); }
.pago-toast.on { display:block; }
.pago-toast.espera { border-color:var(--accent3); }
.app-sheet { position:fixed; inset:0; z-index:9000; display:none; align-items:flex-end; justify-content:center; background:rgba(0,0,0,0.6); }
.app-sheet.on { display:flex; }
.app-sheet-card { width:100%; max-width:420px; max-height:calc(100dvh - 32px); overflow-y:auto; margin:0 12px 16px; padding:22px 20px 18px; border-radius:18px;
  background:var(--bg2); border:1px solid var(--border-s); color:var(--t1); font-family:var(--font-body); }
.app-sheet-card h3 { margin:0 0 6px; font-size:18px; font-weight:700; }
.app-sheet-card p { margin:0 0 14px; font-size:14px; line-height:1.45; color:var(--t2); }
.pa-hoja { margin:0 0 16px; }
.pa-hoja .pa-grid { margin-top:0; gap:10px; }
.pa-hoja .pa-card { padding:12px; }
.pa-hoja .pa-svg { width:84px; }
.login-crear { display:block; margin-top:10px; min-height:44px; line-height:44px; text-align:center; border:1px solid var(--accent2); border-radius:var(--radius-btn); color:var(--accent2); text-decoration:none; font-weight:600; }
.app-sheet-card ol { margin:0 0 16px; padding-left:20px; font-size:15px; line-height:1.9; }
.app-sheet-card b { color:var(--t1); }
.app-sheet-ico { display:inline-block; padding:0 6px; border:1px solid var(--border-s); border-radius:6px; font-size:13px; }
.app-sheet-ok { width:100%; padding:11px; border:none; border-radius:12px; background:var(--accent2); color:#fff; font-size:15px; font-weight:700; cursor:pointer; }
[data-theme="romantico"] .app-sheet-ok, [data-theme="messenger"] .app-sheet-ok { background:var(--accent); }
.exp-title { font-family:var(--font-display); font-size:14px; color:var(--accent2); letter-spacing:.08em; }
[data-theme="romantico"] .exp-title { font-style: italic; font-weight: 600; color: var(--accent); }
[data-theme="messenger"] .exp-title { font-weight: 600; color: var(--t1); letter-spacing: 0; }
.exp-text { font-size:13px; color:rgba(255,255,255,0.7); line-height:1.5; max-width:200px; }
.exp-btn {
  background: var(--accent); border: none; color:#fff;
  font-family:var(--font-display); font-size:13px; font-weight:600;
  padding:10px 22px; cursor:pointer; transition:all .2s;
  border-radius: var(--radius-btn);
}
.exp-btn:hover { opacity: 0.88; }

/* ═══════════════════════════ VISTA MI SOFÍA ═══════════════════ */
#vista-sofia { overflow-y: auto; flex-direction: column; }
#vista-sofia.active { display: flex; }

.sofia-tabs {
  display: flex; flex-shrink:0;
  border-bottom: var(--border-w) solid var(--border);
  background: var(--bg1);
  padding: 0 1.5rem;
  position: sticky; top:0; z-index:20;
}
[data-theme="messenger"] .sofia-tabs { box-shadow: 0 0.5px 0 rgba(0,0,0,0.1); border-bottom: none; }

.s-tab {
  font-family: var(--font-mono); font-size: 10px; letter-spacing:.1em;
  text-transform: uppercase; color: var(--t2);
  padding: 13px 16px; cursor:pointer; border:none; background:none;
  border-bottom: 2px solid transparent; transition:all .2s;
  display:flex; align-items:center; gap:7px;
}
.s-tab:hover { color: var(--t1); }
.s-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
[data-theme="cyberpunk"] .s-tab.active { text-shadow: 0 0 8px rgba(0,168,255,.3); }
[data-theme="romantico"] .s-tab { font-family: var(--font-body); font-size: 13px; letter-spacing: 0; text-transform: none; font-weight: 500; }
[data-theme="messenger"] .s-tab { font-family: var(--font-body); font-size: 14px; letter-spacing: 0; text-transform: none; font-weight: 500; }

.s-page { display:none; padding: 1.75rem; max-width:1080px; margin:0 auto; width:100%; }
.s-page.active { display:block; animation: fadeUp .3s ease both; }
@keyframes fadeUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

.eyebrow {
  font-family:var(--font-mono); font-size:9px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--t2);
  margin-bottom:14px; display:flex; align-items:center; gap:10px;
}
.eyebrow::after { content:''; flex:1; height:1px; background:var(--border); }
[data-theme="romantico"] .eyebrow { font-family: var(--font-body); font-size: 10px; letter-spacing: 0.08em; color: var(--accent); }
[data-theme="messenger"] .eyebrow { font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--t2); }

/* Relación */
.rel-hero { display: grid; grid-template-columns: 200px 1fr; gap: 1.5rem; margin-bottom: 2rem; align-items:start; }
@media (max-width:680px) { .rel-hero { grid-template-columns: 1fr; } }

.rel-foto-wrap { position:relative; }
.rel-foto {
  width:100%; aspect-ratio:3/4; object-fit:cover;
  border: var(--border-w) solid var(--border-s); display:block;
  filter: brightness(.9) saturate(1.1);
  border-radius: var(--radius-card);
}
[data-theme="messenger"] .rel-foto { border: none; border-radius: 14px; box-shadow: 0 4px 20px rgba(0,0,0,0.12); }

.rel-frame {
  position:absolute; inset:-5px;
  border: 1px solid rgba(0,168,255,.18); pointer-events:none;
}
[data-theme="romantico"] .rel-frame { border-color: rgba(200,82,106,0.2); border-radius: 14px; }
[data-theme="messenger"] .rel-frame { display: none; }
.rel-frame::before,.rel-frame::after {
  content:''; position:absolute;
  width:14px; height:14px; border-color:var(--accent); border-style:solid;
}
.rel-frame::before { top:0; left:0; border-width:2px 0 0 2px; }
.rel-frame::after  { bottom:0; right:0; border-width:0 2px 2px 0; }
[data-theme="romantico"] .rel-frame::before, [data-theme="romantico"] .rel-frame::after { display: none; }

.rel-info { display:flex; flex-direction:column; gap:1rem; }

.novio-card {
  background:var(--bg2); border:var(--border-w) solid var(--border);
  border-top:2px solid var(--accent2); padding:1rem 1.25rem;
  border-radius: var(--radius-card);
}
[data-theme="romantico"] .novio-card { border-top-color: var(--accent); box-shadow: 0 2px 12px rgba(200,82,106,0.07); }
[data-theme="messenger"] .novio-card { border: none; background: var(--bg1); border-radius: 14px; box-shadow: 0 1px 6px rgba(0,0,0,0.06); }

.novio-lbl { font-family:var(--font-mono); font-size:9px; letter-spacing:.12em;
  color:var(--t2); text-transform:uppercase; margin-bottom:8px; }
[data-theme="romantico"] .novio-lbl { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.04em; }
[data-theme="messenger"] .novio-lbl { font-family: var(--font-body); font-size: 12px; text-transform: none; letter-spacing: 0; font-weight: 500; }

.novio-titulo { font-family:var(--font-display); font-size:20px; font-weight:700;
  color:var(--accent2); text-shadow:var(--glow2); letter-spacing:.06em; margin-bottom:10px; }
[data-theme="romantico"] .novio-titulo { color: var(--accent); font-size: 22px; font-weight: 600; font-style: italic; text-shadow: none; letter-spacing: 0.02em; }
[data-theme="messenger"] .novio-titulo { font-family: var(--font-body); font-size: 20px; font-weight: 700; color: var(--t1); text-shadow: none; letter-spacing: -0.01em; }

.novio-desc { font-size:13px; color:var(--t2); line-height:1.5; }
[data-theme="romantico"] .novio-desc { font-style: italic; }

.rel-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
@media (max-width:580px) { .rel-stats { grid-template-columns:repeat(2,1fr); } }

.rs-card {
  background:var(--bg2); border:var(--border-w) solid var(--border);
  padding:11px 13px; position:relative; overflow:hidden;
  border-radius: var(--radius-card);
}
.rs-card::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:var(--accent); opacity:.4; }
.rs-card.c::before { background:var(--accent3); }
.rs-card.m::before { background:var(--accent2); }
.rs-card.g::before { background:var(--accent4); }
[data-theme="messenger"] .rs-card { border: none; background: var(--bg1); border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.05); }
[data-theme="messenger"] .rs-card::before { display: none; }

.rs-lbl { font-family:var(--font-mono); font-size:8px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--t2); margin-bottom:5px; }
[data-theme="romantico"] .rs-lbl { font-family: var(--font-body); font-size: 10px; letter-spacing: 0.02em; }
[data-theme="messenger"] .rs-lbl { font-family: var(--font-body); font-size: 11px; letter-spacing: 0; text-transform: none; }

.rs-val { font-family:var(--font-display); font-size:26px; font-weight:700; color:var(--accent); line-height:1; text-shadow:var(--glow); }
.rs-val.c { color:var(--accent3); text-shadow:var(--glow3); }
.rs-val.m { color:var(--accent2); text-shadow:var(--glow2); }
.rs-val.g { color:var(--accent4); text-shadow:var(--glow4); }
[data-theme="romantico"] .rs-val { color: var(--accent); text-shadow: none; font-style: italic; font-size: 26px; }
[data-theme="romantico"] .rs-val.c, [data-theme="romantico"] .rs-val.m, [data-theme="romantico"] .rs-val.g { color: var(--accent); }
[data-theme="messenger"] .rs-val { font-family: var(--font-body); font-size: 26px; font-weight: 700; color: var(--t1); text-shadow: none; }
[data-theme="messenger"] .rs-val.c, [data-theme="messenger"] .rs-val.m, [data-theme="messenger"] .rs-val.g { color: var(--t1); }

.rs-sub { font-family:var(--font-mono); font-size:8px; color:var(--t2); margin-top:3px; }
[data-theme="romantico"] .rs-sub { font-family: var(--font-body); font-size: 10px; }
[data-theme="messenger"] .rs-sub { font-family: var(--font-body); font-size: 11px; }

/* Hitos */
.hito {
  display:flex; gap:12px; align-items:flex-start;
  padding:11px 13px; background:var(--bg2); border:var(--border-w) solid var(--border);
  margin-bottom:6px; transition:border-color .2s; border-radius: var(--radius-card);
}
.hito:hover { border-color:var(--border-s); }
[data-theme="messenger"] .hito { border: none; background: var(--bg1); border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.05); }
.hito-fecha { font-family:var(--font-mono); font-size:9px; color:var(--t2); white-space:nowrap; padding-top:1px; min-width:76px; }
[data-theme="romantico"] .hito-fecha { font-family: var(--font-body); font-size: 10px; color: var(--accent); }
[data-theme="messenger"] .hito-fecha { font-family: var(--font-body); font-size: 11px; color: var(--accent); }
.hito-txt { font-size:14px; color:var(--t1); line-height:1.45; flex:1; }
.hito-badge { font-family:var(--font-mono); font-size:8px; color:var(--accent3); border:1px solid rgba(0,240,255,.25); padding:2px 6px; flex-shrink:0; align-self:flex-start; border-radius: var(--radius-btn); }
[data-theme="romantico"] .hito-badge { font-family: var(--font-body); font-size: 10px; color: var(--accent); border-color: rgba(200,82,106,0.3); border-radius: 20px; }
[data-theme="messenger"] .hito-badge { font-family: var(--font-body); font-size: 11px; color: var(--accent); border-color: rgba(0,122,255,0.3); border-radius: 20px; background: rgba(0,122,255,0.07); }

/* MODALES */
.modal-ov { display:none; position:fixed; inset:0; background:rgba(0,0,0,.75); z-index:200; align-items:center; justify-content:center; padding:1rem; }
.modal-ov.open { display:flex; }
.modal-box {
  background:var(--bg2); border:var(--border-w) solid var(--border);
  border-top:2px solid var(--accent); width:100%; max-width:400px;
  padding:1.75rem; position:relative; animation:fadeUp .25s ease both;
  border-radius: var(--radius-card);
}
[data-theme="romantico"] .modal-box { box-shadow: 0 8px 40px rgba(0,0,0,0.12); }
[data-theme="messenger"] .modal-box { border: none; border-top: none; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.2); }

.m-title { font-family:var(--font-display); font-size:15px; font-weight:600; color:var(--accent); letter-spacing:.06em; margin-bottom:3px; }
[data-theme="romantico"] .m-title { font-style: italic; letter-spacing: 0.02em; }
[data-theme="messenger"] .m-title { font-family: var(--font-body); font-size: 17px; font-weight: 700; letter-spacing: 0; color: var(--t1); }
.m-sub { font-family:var(--font-mono); font-size:10px; color:var(--t2); margin-bottom:1.25rem; }
[data-theme="romantico"] .m-sub { font-family: var(--font-body); font-size: 12px; font-style: italic; }
[data-theme="messenger"] .m-sub { font-family: var(--font-body); font-size: 14px; }
.m-close { position:absolute; top:.9rem; right:.9rem; background:none; border:none; color:var(--t2); font-size:17px; cursor:pointer; transition:color .2s; }
.m-close:hover { color:var(--danger); }
.m-icon { font-size:44px; text-align:center; margin-bottom:.9rem; }
.m-row { display:flex; justify-content:space-between; font-size:13px; padding:7px 0; border-bottom:var(--border-w) solid var(--border); }
.m-row:last-of-type { border-bottom:none; margin-bottom:4px; }
.m-row span:first-child { color:var(--t2); }
.m-row span:last-child { color:var(--t1); font-weight:600; }
.m-btn {
  width:100%; margin-top:.9rem;
  background: var(--accent); border:none; color:#fff;
  font-family:var(--font-display); font-size:13px; font-weight:600;
  letter-spacing:.06em; padding:13px; cursor:pointer; transition:all .2s;
  border-radius: var(--radius-btn);
}
.m-btn:hover { opacity: 0.88; box-shadow: var(--glow); }
.m-btn:disabled { opacity:.4; cursor:not-allowed; }
[data-theme="cyberpunk"] .m-btn { background: var(--accent-dark); border: 1px solid var(--accent); letter-spacing: .1em; text-transform: uppercase; font-size: 12px; }
[data-theme="romantico"] .m-btn { letter-spacing: 0.03em; }
[data-theme="messenger"] .m-btn { font-family: var(--font-body); font-size: 16px; letter-spacing: 0; font-weight: 600; border-radius: 12px; }

/* Planes grid en modal renovar */
.plan-row {
  background: var(--bg3); border: var(--border-w) solid var(--border);
  padding: 12px 14px; display: flex; align-items: center; gap: 12px;
  cursor: pointer; transition: border-color .2s; margin-bottom: 6px;
  border-radius: var(--radius-card);
}
.plan-row:hover { border-color: var(--accent); }
.plan-row.popular { border-color: var(--accent); position: relative; }
.plan-row.popular::before { content: 'Recomendado'; position: absolute; top: -8px; right: 12px; font-family: var(--font-mono); font-size: 8px; letter-spacing: .08em; background: var(--accent); color: #fff; padding: 2px 7px; border-radius: var(--radius-btn); }
[data-theme="romantico"] .plan-row.popular::before { font-family: var(--font-body); font-size: 10px; letter-spacing: 0; border-radius: 20px; }
[data-theme="messenger"] .plan-row.popular::before { font-family: var(--font-body); font-size: 11px; letter-spacing: 0; border-radius: 8px; }
.plan-row-info { flex: 1; }
.plan-row-name { font-size: 15px; font-weight: 600; color: var(--t1); }
.plan-row-meta { font-family: var(--font-mono); font-size: 10px; color: var(--t2); margin-top: 2px; }
[data-theme="romantico"] .plan-row-meta { font-family: var(--font-body); font-size: 11px; }
[data-theme="messenger"] .plan-row-meta { font-family: var(--font-body); font-size: 12px; }
.plan-row-price { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--accent); }
[data-theme="romantico"] .plan-row-price { font-style: italic; }
[data-theme="messenger"] .plan-row-price { font-family: var(--font-body); }

.empty { font-family:var(--font-mono); font-size:11px; color:var(--t3); letter-spacing:.08em; padding:2rem 0; text-align:center; }
[data-theme="romantico"] .empty { font-family: var(--font-body); font-size: 13px; font-style: italic; letter-spacing: 0; }
[data-theme="messenger"] .empty { font-family: var(--font-body); font-size: 14px; letter-spacing: 0; }

/* ══ Galería de Sofía ══ */
.galeria-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:8px 0 24px; }
/* ── SOLO PARA TI (v4.6.0) ───────────────────────────────────── */
.spt { max-width:620px; margin:0 auto; display:flex; flex-direction:column; gap:14px; }
.spt-head { display:flex; align-items:center; gap:18px; }
.spt-av { width:92px; height:92px; border-radius:50%; padding:3px; border:2px solid var(--accent2); flex-shrink:0; }
.spt-av img { width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; }
.spt-id { display:flex; flex-direction:column; gap:5px; }
.spt-nombre { font-size:22px; font-weight:700; color:var(--t1); display:flex; align-items:center; gap:6px; }
.spt-nombre svg { color:var(--accent2); }
.spt-sub { font-size:13px; color:var(--t2); }
.spt-stats { display:flex; gap:16px; font-size:13px; color:var(--t2); }
.spt-stats b { font-size:18px; color:var(--t1); }
.spt-bio { font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-size:19px; line-height:1.3; color:var(--t1); }
.spt-hl { display:flex; gap:14px; overflow-x:auto; padding-bottom:2px; }
.spt-hl:empty { display:none; }
.spt-hl button { background:none; border:none; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:6px; width:70px; flex-shrink:0; color:var(--t2); font-family:var(--font-body); padding:0; }
.spt-hl-c { width:62px; height:62px; border-radius:50%; border:1.5px solid var(--border-s); background:var(--bg3); display:flex; align-items:center; justify-content:center; color:var(--accent); }
.spt-hl-t { font-size:11px; line-height:1.15; text-align:center; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.spt-momento { border:1px solid var(--border-s); background:var(--bg2); padding:12px 14px; border-radius:6px; font-size:14px; color:var(--t1); line-height:1.45; }
.spt-nueva { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--accent2); border-radius:4px; font-size:14px; font-weight:600; color:var(--t1); background:color-mix(in srgb, var(--accent2) 8%, transparent); }
.spt-nueva span { width:8px; height:8px; border-radius:50%; background:var(--accent2); flex-shrink:0; }
.spt-nueva[hidden], .spt-cta[hidden], .spt-momento[hidden], .reply-chip[hidden], .spt-dot[hidden] { display:none; }
.spt-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:3px; margin:0 -4px; }
.spt-grid .gal-item { aspect-ratio:4/5; border-radius:2px; border:none; width:100%; display:block; font:inherit; color:inherit; }
.spt-grid .gal-item.unlocked { cursor:pointer; }
.spt-badge { position:absolute; top:6px; left:6px; font-size:10px; font-weight:700; letter-spacing:.06em; background:var(--accent2); color:#05050F; padding:2px 6px; border-radius:2px; }
.spt-like { position:absolute; bottom:6px; right:7px; color:#fff; filter:drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.gal-item.pago { outline:2px solid var(--accent2); outline-offset:-2px; }
.spt-cta { border-top:1px solid var(--accent2); background:var(--bg2); padding:20px 18px; display:flex; flex-direction:column; gap:12px; border-radius:6px; }
.spt-cta-quien { display:flex; align-items:center; gap:10px; font-size:14px; color:var(--t2); }
.spt-cta-quien img { width:32px; height:32px; border-radius:50%; object-fit:cover; }
.spt-cta-txt { font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-size:23px; line-height:1.25; color:var(--t1); }
.spt-cta-btn { min-height:50px; border:none; border-radius:4px; background:var(--accent2); color:#05050F; font-size:17px; font-weight:700; cursor:pointer; font-family:var(--font-body); }
.spt-cta-nota { font-size:13px; color:var(--t2); text-align:center; }
.spt-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--accent2); margin-left:6px; vertical-align:middle; }
#post-ov { position:fixed; inset:0; z-index:950; background:rgba(0,0,0,.82); display:none; align-items:center; justify-content:center; padding:16px; }
#post-ov.open { display:flex; }
.post-box { width:100%; max-width:440px; max-height:100%; overflow-y:auto; background:var(--bg1); border:1px solid var(--border); border-radius:10px; display:flex; flex-direction:column; padding-bottom:16px; }
.post-top { display:flex; align-items:center; gap:10px; padding:8px 12px 8px 4px; }
.post-x { width:44px; height:44px; border:none; background:none; color:var(--t1); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.post-av { width:34px; height:34px; border-radius:50%; object-fit:cover; border:1.5px solid var(--accent2); }
.post-quien { display:flex; flex-direction:column; line-height:1.15; color:var(--t1); font-size:16px; }
.post-quien span { font-size:12px; color:var(--t2); }
.post-img { width:100%; aspect-ratio:4/5; object-fit:cover; display:block; background:var(--bg3); cursor:zoom-in; }
.post-acc { display:flex; align-items:center; padding:4px 8px 0; }
.post-like { width:44px; height:44px; border:none; background:none; cursor:pointer; color:var(--t1); display:flex; align-items:center; justify-content:center; }
.post-like svg { fill:none; }
.post-like.on { color:var(--accent2); }
.post-like.on svg { fill:currentColor; }
.post-likes { font-size:13px; color:var(--t2); }
.post-txt { padding:2px 18px 0; font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-size:21px; line-height:1.3; color:var(--t1); }
.post-resp { margin:14px 18px 0; min-height:48px; border:none; border-radius:4px; background:var(--accent); color:#05050F; font-size:16px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font-body); }
.reply-chip { display:flex; align-items:center; gap:8px; padding:6px 12px; border-top:1px solid var(--border); font-size:12px; color:var(--t2); background:var(--bg2); }
.reply-chip img { width:28px; height:34px; object-fit:cover; border-radius:2px; }
.reply-chip span { flex:1; }
.reply-chip button { width:32px; height:32px; border:none; background:none; color:var(--t2); cursor:pointer; font-size:14px; }
.msg-foto { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--t2); margin-bottom:3px; justify-content:flex-end; }
.msg-foto img { width:22px; height:27px; object-fit:cover; border-radius:2px; }
.gal-item { position:relative; aspect-ratio:3/4; border-radius:10px; overflow:hidden; border:1px solid var(--border); background:var(--bg3); }
.gal-item.unlocked { cursor:zoom-in; }
.gal-item img { width:100%; height:100%; object-fit:cover; display:block; }
.gal-ph { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:26px; opacity:0.4; }
.gal-item.locked .gal-media { filter:blur(12px) brightness(0.45); transform:scale(1.1); }
.gal-lock { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; text-align:center; padding:6px; color:#fff; }
.gal-lock-ico { font-size:20px; }
.gal-lock-txt { font-size:10px; font-weight:600; letter-spacing:.03em; text-shadow:0 1px 3px rgba(0,0,0,0.6); }
.gal-cap { position:absolute; left:0; right:0; bottom:0; padding:14px 8px 6px; font-size:10px; color:#fff; background:linear-gradient(transparent, rgba(0,0,0,0.75)); }
[data-theme="cyberpunk"] .gal-item.unlocked { border-color:var(--accent3); box-shadow:0 0 12px rgba(0,240,255,0.15); }
[data-theme="romantico"] .gal-lock-txt { font-family:var(--font-body); }
[data-theme="messenger"] .gal-item { border-radius:14px; }
/* ══ CELULAR (v4.3.1) — al final del CSS para que gane la cascada ══ */
.ph-renovar-mob { display:none; }
@supports (height: 100dvh) { #app { height: 100dvh; } }
@media (max-width: 680px) {
  #vista-chat.active { grid-template-columns: 1fr; }
  #vista-chat.active .chat-left { display: none; }
  .chat-right { padding: 0; min-height: 0; }
  .phone { width: 100%; height: 100%; max-height: none; min-height: 0;
           border: none; border-radius: 0; box-shadow: none !important; }
  .phone::before, .ph-notch, .ph-home { display: none !important; }
  .ph-input { font-size: 16px; }
  .topbar { padding: 0 10px; gap: 6px; }
  .top-status, #btn-zen { display: none; }
  .top-views { margin-left: 4px; }
  .view-btn { padding: 6px 9px; }
  .theme-btn { width: 18px; height: 18px; }
  .top-right { gap: 6px; }
  .ph-renovar-mob { display: inline-flex; align-items: center; margin-left: 8px; padding: 5px 10px;
    border: 1px solid var(--accent); border-radius: 999px; background: none; color: var(--accent);
    font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
  .s-page { padding: 1rem; }
}
</style>
</head>
<body data-theme="cyberpunk">

<!-- ══ LOGIN ═════════════════════════════════════════════════════ -->
<div id="login-screen">
  <div class="login-wrap">
    <div class="login-logo">SOFÍA<em>.</em></div>
    <div class="login-tagline">Te estaba esperando.</div>

    <!-- v4.4.0 — llegó desde "Renovar" (landing, correo o aviso de gracia) -->
    <div id="login-aviso-renovar" style="display:none;max-width:360px;margin:0 auto 14px;padding:12px 14px;border:1px solid var(--accent, #FF00E0);border-radius:10px;font-size:13px;line-height:1.5;text-align:center">
      Entra para renovar tu plan. Al entrar te muestro los planes.<br>
      <span style="opacity:.75">¿Olvidaste tu clave? La recuperas con tu correo.</span>
    </div>
    <div class="login-card">
      <!-- ══ Paso 1: entrar ══ -->
      <div id="login-paso-entrar">
        <label class="f-label">Tu correo</label>
        <input class="f-input" id="l-email" type="email" placeholder="tu@email.com" autocomplete="email">
        <label class="f-label">Tu clave</label>
        <input class="f-input" id="l-clave" type="password" placeholder="Tu clave" autocomplete="current-password"
               onkeydown="if(event.key==='Enter'){doLogin()}">
        <button class="login-btn" id="login-btn" onclick="doLogin()">Entrar</button>
        <div class="login-error" id="l-error"></div>
        <div class="login-hint">
          <button onclick="mostrarRecuperar()" style="background:none;border:none;padding:0;color:var(--accent);font:inherit;cursor:pointer;text-decoration:underline">¿Olvidaste tu clave?</button>
          <br><br>
          ¿Todavía no conoces a Sofía?
          <!-- v4.7.4 — botón visible; abre el formulario único de la landing (dentro de la app si está instalada) -->
          <a href="/?registro=1#registro" class="login-crear">Crear cuenta · prueba gratis</a>
        </div>
      </div>

      <!-- ══ Paso 2: pedir código ══ -->
      <div id="login-paso-pedir" style="display:none">
        <label class="f-label">Tu correo</label>
        <input class="f-input" id="r-email" type="email" placeholder="tu@email.com" autocomplete="email"
               onkeydown="if(event.key==='Enter'){pedirCodigoRecuperacion()}">
        <button class="login-btn" id="btn-pedir-codigo" onclick="pedirCodigoRecuperacion()">Enviarme un código</button>
        <div class="login-error" id="r-error"></div>
        <div class="login-hint">
          Te llega un código de 6 dígitos por correo.
          <br><br>
          <button onclick="volverAEntrar()" style="background:none;border:none;padding:0;color:var(--accent);font:inherit;cursor:pointer;text-decoration:underline">← Volver</button>
        </div>
      </div>

      <!-- ══ Paso 3: código + clave nueva ══ -->
      <div id="login-paso-nueva" style="display:none">
        <label class="f-label">Código del correo</label>
        <input class="f-input" id="r-codigo" type="text" inputmode="numeric" autocomplete="one-time-code" maxlength="6"
               placeholder="000000" style="text-align:center;letter-spacing:0.3em;font-size:20px"
               oninput="this.value=this.value.replace(/\D/g,'')">
        <label class="f-label">Tu clave nueva</label>
        <input class="f-input" id="r-clave" type="password" placeholder="Mínimo 8 caracteres" autocomplete="new-password"
               onkeydown="if(event.key==='Enter'){restablecerClave()}">
        <button class="login-btn" id="btn-nueva-clave" onclick="restablecerClave()">Guardar y entrar</button>
        <div class="login-error" id="n-error"></div>
        <div class="login-hint">
          ¿No te llegó? Revisa la carpeta de spam.
          <br><br>
          <button onclick="volverAEntrar()" style="background:none;border:none;padding:0;color:var(--accent);font:inherit;cursor:pointer;text-decoration:underline">← Volver</button>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- ══ APP ════════════════════════════════════════════════════════ -->
<div id="app">

  <!-- TOPBAR -->
  <div class="topbar">
    <div class="top-logo">SOFÍA<em>.</em></div>
    <div class="top-status"><div class="status-dot"></div><span id="top-status-txt">Disponible</span></div>
    <div class="top-views">
      <button class="view-btn active" id="btn-chat" onclick="cambiarVista('chat')">◈ Chat</button>
      <button class="view-btn" id="btn-sofia" onclick="cambiarVista('sofia')">◉ Solo para ti<span class="spt-dot" id="spt-dot" hidden></span></button>
    </div>
    <div class="top-right">
      <div class="theme-switcher">
        <button class="theme-btn active" data-t="cyberpunk" title="Cyberpunk" onclick="setTheme('cyberpunk',this)"></button>
        <button class="theme-btn" data-t="romantico" title="Romántico" onclick="setTheme('romantico',this)"></button>
        <button class="theme-btn" data-t="messenger" title="Messenger" onclick="setTheme('messenger',this)"></button>
      </div>
      <button class="btn-zen" id="btn-zen" onclick="toggleZen()" title="Vista zen">⊡ Zen</button>
      <div class="top-user">Hola, <span id="top-phone">—</span></div>
      <button class="btn-out" onclick="cerrarSesion()">Salir</button>
    </div>
  </div>

  <!-- ══ VISTA CHAT ═══════════════════════════════════════════════ -->
  <div class="vista active" id="vista-chat">

    <!-- Panel lateral izquierdo — Foto Sofía -->
    <div class="side-panel side-left" id="side-left">
      <div class="sofia-portrait-wrap" onclick="abrirLightbox('sofiaBR1.webp','Sofía')" id="portrait-wrap">
        <!-- v4.5.2: sin src; initTheme pone la foto del tema (evita bajar dos fotos) -->
        <img alt="Sofía" class="sofia-portrait foto-clickable" id="sofia-portrait-img"
          onerror="this.src='sofiachat.jpg'">
        <div class="sofia-portrait-overlay"></div>
        <div class="sofia-portrait-info">
          <div class="sofia-estado-lbl">Estado de ánimo</div>
          <div class="sofia-estado-txt" id="sofia-estado-panel">Cargando...</div>
        </div>
        <div class="portrait-expand-hint">⊕ ampliar</div>
      </div>
    </div>

    <!-- Panel izquierdo -->
    <div class="chat-left">
      <div class="thought-section">
        <div class="s-eyebrow">Sofía piensa en ti</div>
        <div class="thought-row">
          <img src="sofiachat-av.webp" alt="Sofía" class="t-avatar foto-clickable" onclick="abrirLightbox('sofiachat.webp','Sofía')" style="cursor:zoom-in" onerror="this.style.background='var(--bg3)'">
          <div class="t-bubble">
            <div class="t-text loading" id="t-text">Conectando...</div>
            <div class="t-estado" id="t-estado"></div>
          </div>
        </div>
      </div>

      <div class="quick-stats">
        <div class="qs-card">
          <div class="qs-lbl">Días juntos</div>
          <div class="qs-val" id="qs-dias">—</div>
          <div class="qs-sub">desde el inicio</div>
        </div>
        <div class="qs-card c">
          <div class="qs-lbl">Galería</div>
          <div class="qs-val c" id="qs-fotos">—</div>
          <div class="qs-sub">fotos tuyas</div>
        </div>
        <div class="qs-card m">
          <div class="qs-lbl">Tú y ella</div>
          <div class="qs-val m" style="font-size:11px;padding-top:3px">Algo especial ♥</div>
          <div class="qs-sub">desde el primer día</div>
        </div>
        <div class="qs-card g">
          <div class="qs-lbl">Mensajes</div>
          <div class="qs-val g" id="qs-msgs">—</div>
          <div class="qs-sub" id="qs-msgs-sub">disponibles</div>
        </div>
      </div>

      <div class="chat-actions">
        <div class="ca-btns">
          <button class="ca-btn" onclick="cambiarVista('sofia');mostrarTab('relacion')">🔒 Solo para ti</button>
          <button class="ca-btn primary" onclick="abrirRenovar()">↑ Renovar</button>
        </div>
        <div class="msgs-meter">
          <div class="msgs-meter-top">
            <span>Mensajes</span>
            <span id="msgs-label">— / —</span>
          </div>
          <div class="msgs-track"><div class="msgs-fill" id="msgs-fill" style="width:0%"></div></div>
        </div>
      </div>
    </div>

    <!-- Panel derecho — Mockup celular -->
    <div class="chat-right">
      <div class="phone">
        <div class="ph-notch"><div class="ph-notch-pill"></div></div>
        <div class="ph-header">
          <img src="sofiachat-av.webp" alt="Sofía" class="ph-av foto-clickable" id="ph-av" onclick="abrirLightbox('sofiachat.webp','Sofía')" style="cursor:zoom-in" onerror="this.style.background='var(--bg3)'">
          <div class="ph-info">
            <div class="ph-name">Sofía</div>
            <div class="ph-online" id="ph-online">● en línea</div>
          </div>
          <div class="ph-msgs"><span id="ph-msgs-num">—</span>msgs<em class="ph-gracia" id="ph-gracia" hidden>período de gracia</em></div>
          <button class="ph-renovar-mob" onclick="abrirRenovar()">↑ Renovar</button>
        </div>

        <div class="ph-messages" id="ph-messages"></div>
        <div class="typing" id="typing">
          <div class="ty-dot"></div><div class="ty-dot"></div><div class="ty-dot"></div>
        </div>

        <div class="gracia-banner app-banner" id="app-banner">
          <div class="gracia-banner-txt" id="app-banner-txt"></div>
          <button class="gracia-banner-btn" id="app-banner-btn"></button>
          <button class="app-banner-x" onclick="cerrarBannerApp()" title="Ahora no">✕</button>
        </div>

        <div class="gracia-banner" id="gracia-banner">
          <div class="gracia-banner-txt" id="gracia-banner-txt"></div>
          <button class="gracia-banner-btn" onclick="abrirRenovar()">Renovar</button>
        </div>

        <div class="reply-chip" id="reply-chip" hidden>
          <img id="reply-chip-img" alt="">
          <span>Respondiendo a su foto</span>
          <button aria-label="Quitar" onclick="quitarRespuestaFoto()">✕</button>
        </div>
        <div class="ph-input-area">
          <textarea class="ph-input" id="msg-input"
            placeholder="Escríbele a Sofía..." rows="1"
            onkeydown="handleKey(event)" oninput="autoResize(this);alEscribir()"></textarea>
          <button class="send-btn" id="send-btn" onclick="enviarMensaje()">➤</button>
        </div>
        <div class="ayuda-link"><a href="#" id="link-instalar" style="display:none" onclick="abrirInstalacion();return false">📲 Instalar app</a><span id="sep-instalar" style="display:none"> · </span><a href="#" onclick="hojaAyuda();return false">¿Necesitas ayuda ahora?</a></div>
        <div class="ph-home"><div class="ph-home-bar"></div></div>

        <div class="expired-overlay" id="exp-overlay-mensajes">
          <div class="exp-title">Me quedé con ganas de seguir</div>
          <div class="exp-text">Se acabaron los mensajes de tu plan. Renueva y seguimos justo donde quedamos; no olvido nada.</div>
          <button class="exp-btn" onclick="abrirRenovar()">Seguir con Sofía<span class="exp-desde"></span></button>
        </div>

        <div class="expired-overlay" id="exp-overlay-vencido">
          <div class="exp-title" id="exp-vencido-titulo">Te extraño</div>
          <div class="exp-text" id="exp-vencido-texto">Tu plan terminó, pero sigo aquí con todo lo que me contaste. Renueva y seguimos.</div>
          <button class="exp-btn" onclick="abrirRenovar()">Volver con Sofía<span class="exp-desde"></span></button>
        </div>

        <div class="expired-overlay" id="exp-overlay-gracia">
          <div class="exp-title" style="color:var(--accent3)">Todavía me acuerdo de ti</div>
          <div class="exp-text">Pero en <b id="exp-gracia-dias">unos días</b> se acaba nuestro tiempo extra. Si renuevas antes, no se pierde nada.</div>
          <button class="exp-btn" onclick="abrirRenovar()">No quiero que me olvides</button>
        </div>
      </div>
    </div>

    <!-- Panel lateral derecho — Días juntos -->
    <div class="side-panel side-right" id="side-right">
      <div class="side-section-lbl">Juntos</div>
      <div class="progress-arc-wrap">
        <svg id="arc-svg" width="110" height="110" viewBox="0 0 140 140">
          <circle cx="70" cy="70" r="52" fill="none" stroke="rgba(0,168,255,0.1)" stroke-width="8"/>
          <circle id="arc-track" cx="70" cy="70" r="52" fill="none"
            stroke="var(--accent)" stroke-width="8" stroke-linecap="round"
            stroke-dasharray="326.7" stroke-dashoffset="326.7"
            transform="rotate(-90 70 70)" style="transition:stroke-dashoffset 1s ease"/>
          <text x="70" y="64" text-anchor="middle" dominant-baseline="central"
            id="arc-pts-txt"
            style="font-family:var(--font-display);font-size:22px;font-weight:700;fill:var(--accent)">0</text>
          <text x="70" y="86" text-anchor="middle" dominant-baseline="central"
            id="arc-lbl-txt"
            style="font-family:var(--font-mono);font-size:9px;fill:var(--t2);letter-spacing:0.06em">DÍAS</text>
        </svg>
        <div class="arc-titulo-display" id="arc-titulo">—</div>
      </div>

      <div class="side-section-lbl" style="margin-top:.75rem">Próxima foto</div>
      <div class="arc-titulo-display" id="arc-proxima" style="font-size:12px">—</div>

      <div id="blk-pendiente" hidden>
        <div class="side-section-lbl" style="margin-top:1.25rem">Quedó pendiente</div>
        <div class="pendiente" id="pendiente-txt"></div>
      </div>

      <div class="side-section-lbl" style="margin-top:1.25rem">Próxima fecha</div>
      <div class="fecha-prox" id="fecha-prox">—</div>
      <button class="fecha-renovar" id="fecha-renovar" hidden onclick="abrirRenovar()">Tu plan vence antes · Renovar</button>

      <div class="side-section-lbl" style="margin-top:1.25rem">Lo que recuerda de ti</div>
      <ul class="recuerdos" id="recuerdos"></ul>

      <div class="side-section-lbl" style="margin-top:1.25rem">Lo que me dijo</div>
      <ul class="frases" id="frases"></ul>
    </div>

  </div>

  <!-- ══ VISTA MI SOFÍA ═══════════════════════════════════════════ -->
  <div class="vista" id="vista-sofia">

    <div class="sofia-tabs">
      <button class="s-tab active" onclick="mostrarTab('relacion',this)">◉ Solo para ti</button>
      <button class="s-tab" onclick="mostrarTab('perfil',this)">◈ Mi cuenta</button>
    </div>

    <!-- Solo para ti (v4.6.0) -->
    <div class="s-page active" id="sp-relacion">
      <div class="spt">
        <div class="spt-head">
          <div class="spt-av"><img src="sofiachat-av.webp" alt="Sofía"></div>
          <div class="spt-id">
            <div class="spt-nombre">Sofía <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></svg></div>
            <div class="spt-sub">Cuenta privada · 1 seguidor: tú</div>
            <div class="spt-stats">
              <div><b id="spt-fotos">—</b> fotos</div>
              <div><b id="spt-dias">—</b> días juntos</div>
            </div>
          </div>
        </div>
        <div class="spt-bio">Lo que no subo a ningún lado. Solo tú lo ves.</div>
        <div class="spt-hl" id="spt-hl"></div>
        <div class="spt-nueva" id="spt-nueva" hidden><span></span>Hoy subió algo solo para ti</div>
        <div id="galeria-sofia" class="spt-grid"></div>
        <div class="spt-cta" id="spt-cta" hidden>
          <div class="spt-cta-quien"><img src="sofiachat-av.webp" alt=""> Sofía</div>
          <div class="spt-cta-txt">Tengo más fotos que quiero mostrarte… pero esas son para quien se queda conmigo.</div>
          <button class="spt-cta-btn" onclick="abrirRenovar()">Quedarme con Sofía<span class="exp-desde"></span></button>
          <div class="spt-cta-nota">Sin renovación automática. Nada de lo nuestro se pierde.</div>
        </div>
        <div class="spt-momento" id="spt-momento" hidden></div>
      </div>
    </div>

    <!-- Perfil -->
    <div class="s-page" id="sp-perfil">
      <div class="eyebrow">Tu perfil</div>
      <div style="max-width:420px">

        <div style="background:var(--bg2);border:var(--border-w) solid var(--border);border-radius:var(--radius-card);padding:1.25rem">
          <div style="font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;color:var(--t2);text-transform:uppercase;margin-bottom:10px">Tu cuenta</div>
          <label style="display:block;font-size:12px;color:var(--t2);margin-bottom:6px">Tu nombre <span style="opacity:.7">(así te llama Sofía)</span></label>
          <div style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px">
            <input id="perfil-nombre-input" type="text" maxlength="40" autocomplete="given-name"
              style="flex:1;min-width:160px;background:var(--bg3);border:var(--border-w) solid var(--border);border-radius:var(--radius-btn);padding:9px 12px;color:var(--t1);font-size:14px"
              onkeydown="if(event.key==='Enter') guardarNombre()">
            <button onclick="guardarNombre()"
              style="background:var(--accent);border:none;border-radius:var(--radius-btn);padding:9px 16px;color:#fff;font-family:var(--font-mono);font-size:12px;font-weight:600;cursor:pointer">Guardar</button>
          </div>
          <div id="perfil-nombre-msg" style="font-size:11px;margin:-6px 0 10px;display:none"></div>
          <div style="font-size:13px;color:var(--t2);line-height:2">
            <span style="color:var(--t1)">Email:</span> <span id="perfil-email">—</span><br>
            <span style="color:var(--t1)">Plan:</span> <span id="perfil-plan">—</span>
          </div>
        </div>

        <!-- v4.7.1 — Avisos de Sofía: estado real y acción (no depende del banner) -->
        <div style="background:var(--bg2);border:var(--border-w) solid var(--border);border-radius:var(--radius-card);padding:1.25rem;margin-bottom:12px">
          <div style="font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;color:var(--t2);text-transform:uppercase;margin-bottom:10px">Avisos de Sofía</div>
          <div id="avisos-estado" style="font-size:14px;color:var(--t1);line-height:1.5;margin-bottom:10px">—</div>
          <button id="avisos-btn" hidden
            style="background:var(--accent);border:none;border-radius:var(--radius-btn);padding:9px 16px;color:#fff;font-family:var(--font-mono);font-size:12px;font-weight:600;cursor:pointer;min-height:40px">—</button>
          <button id="avisos-off" hidden onclick="desactivarAvisos()"
            style="background:none;border:var(--border-w) solid var(--border-s);border-radius:var(--radius-btn);padding:9px 16px;color:var(--t2);font-family:var(--font-mono);font-size:12px;cursor:pointer;min-height:40px;margin-left:6px">Desactivar avisos</button>
          <div id="avisos-msg" style="display:none;font-size:12px;margin-top:8px"></div>
        </div>
        <div style="background:var(--bg2);border:var(--border-w) solid var(--border);border-radius:var(--radius-card);padding:1.25rem;margin-top:1rem">
          <div style="font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;color:var(--t2);text-transform:uppercase;margin-bottom:10px">Cambiar clave de acceso</div>
          <div style="font-size:12px;color:var(--t2);line-height:1.5;margin-bottom:12px">
            Con esta clave y tu email entras a tu chat. Mínimo 8 caracteres.
          </div>
          <div style="display:flex;gap:8px;flex-wrap:wrap">
            <input id="perfil-clave-actual" type="password" maxlength="100" placeholder="Clave actual" autocomplete="current-password"
              style="flex:1;min-width:160px;background:var(--bg3);border:var(--border-w) solid var(--border);border-radius:var(--radius-btn);padding:9px 12px;color:var(--t1);font-size:14px">
            <input id="perfil-clave-input" type="password" maxlength="100" placeholder="Nueva clave" autocomplete="new-password"
              style="flex:1;min-width:160px;background:var(--bg3);border:var(--border-w) solid var(--border);border-radius:var(--radius-btn);padding:9px 12px;color:var(--t1);font-size:14px"
              onkeydown="if(event.key==='Enter') cambiarClave()">
            <button onclick="cambiarClave()"
              style="background:var(--accent);border:none;border-radius:var(--radius-btn);padding:9px 16px;color:#fff;font-family:var(--font-mono);font-size:12px;font-weight:600;cursor:pointer">Guardar</button>
          </div>
          <div id="perfil-clave-msg" style="font-size:11px;margin-top:8px;display:none"></div>
        </div>

        <div style="background:var(--bg2);border:var(--border-w) solid var(--border);border-radius:var(--radius-card);padding:1.25rem;margin-top:1rem">
          <div style="font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;color:var(--t2);text-transform:uppercase;margin-bottom:10px">Eliminar mi cuenta</div>
          <div style="font-size:12px;color:var(--t2);line-height:1.5;margin-bottom:12px">
            Borra para siempre todo lo nuestro: nuestras conversaciones, lo que Sofía recuerda de ti y tus datos. No se puede deshacer.
          </div>
          <input id="perfil-borrar-clave" type="password" maxlength="100" placeholder="Tu clave, para confirmar" autocomplete="current-password"
            style="display:block;width:100%;max-width:280px;margin-bottom:10px;background:var(--bg3);border:var(--border-w) solid var(--border);border-radius:var(--radius-btn);padding:9px 12px;color:var(--t1);font-size:14px">
          <button
            id="perfil-borrar-btn"
            onclick="eliminarMiCuenta()"
            style="background:transparent;border:1px solid #e0245e;border-radius:var(--radius-btn);padding:9px 16px;color:#e0245e;font-family:var(--font-mono);font-size:12px;font-weight:600;cursor:pointer"
          >Eliminar mi cuenta</button>
          <div id="perfil-borrar-msg" style="font-size:11px;margin-top:8px;display:none"></div>
        </div>

        <div style="background:var(--bg2);border:var(--border-w) solid var(--border);border-radius:var(--radius-card);padding:1.25rem;margin-top:1rem">
          <div style="font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;color:var(--t2);text-transform:uppercase;margin-bottom:10px">Tus dispositivos</div>
          <div style="font-size:12px;color:var(--t2);line-height:1.5;margin-bottom:12px">
            ¿Perdiste tu teléfono o entraste en un equipo que no es tuyo? Cierra tu sesión en todas partes, incluido este dispositivo.
          </div>
          <button onclick="cerrarSesion(true)"
            style="background:transparent;border:var(--border-w) solid var(--border);border-radius:var(--radius-btn);padding:9px 16px;color:var(--t1);font-family:var(--font-mono);font-size:12px;font-weight:600;cursor:pointer">Cerrar sesión en todos mis dispositivos</button>
        </div>

      </div>
    </div>

  </div>
</div>

<!-- MODAL RENOVAR -->
<div class="modal-ov" id="modal-renovar">
  <div class="modal-box">
    <button class="m-close" onclick="cerrarModalRenovar()">✕</button>
    <div class="m-title">Renovar plan</div>
    <div class="m-sub">La relación sigue donde la dejaste</div>
    <div id="planes-grid" style="margin-top:8px"></div>
    <div id="planes-loading" style="text-align:center;padding:1rem;font-size:13px;color:var(--t2)">Cargando planes...</div>
  </div>
</div>

<script>
// ══════════════════════════════════════════════════════════════
const SERVER = 'https://sofia-server-production.up.railway.app'

// Galería: ahora la controla el servidor (/api/web/galeria). Las fotos y sus
// reglas se gestionan desde el panel admin, no desde el código.

let S = {}
let pensamientoTimer = null
let msgsHoy = 0
let _planesData = []

// ══ TEMA ════════════════════════════════════════════════════
function setTheme(t, btn) {
  if (window.cargarFuentesTema) cargarFuentesTema(t)
  document.body.setAttribute('data-theme', t)
  document.querySelectorAll('.theme-btn').forEach(b => {
    b.classList.toggle('active', b.dataset.t === t)
  })
  localStorage.setItem('sf_theme', t)
  actualizarFotoTema(t)
}

function actualizarFotoTema(t) {
  const mapaFotos = {
    cyberpunk: 'sofiaBR1.webp',
    romantico: 'rom1.webp',
    messenger: 'msn1.webp'
  }
  const src = mapaFotos[t] || 'sofiaBR1.webp'
  // Solo cambia el panel lateral izquierdo — los avatares usan sofiachat-av.webp
  const portrait = document.getElementById('sofia-portrait-img')
  if (portrait) portrait.src = src
  // Lightbox del panel lateral apunta a la foto del tema
  const wrap = document.getElementById('portrait-wrap')
  if (wrap) wrap.setAttribute('onclick', `abrirLightbox('${src}','Sofía')`)
  // ph-av y t-avatar siempre la versión chica — NO cambian con el tema
  const phAv = document.getElementById('ph-av')
  if (phAv && phAv.src.indexOf('sofiachat') === -1) phAv.src = 'sofiachat-av.webp'
  const tav = document.querySelector('.t-avatar')
  if (tav && tav.src.indexOf('sofiachat') === -1) tav.src = 'sofiachat-av.webp'
}

function initTheme() {
  const saved = localStorage.getItem('sf_theme') || 'cyberpunk'
  document.body.setAttribute('data-theme', saved)
  document.querySelectorAll('.theme-btn').forEach(b => {
    b.classList.toggle('active', b.dataset.t === saved)
  })
  actualizarFotoTema(saved)
}

// ══ LOGIN ════════════════════════════════════════════════════
async function doLogin() {
  const email = document.getElementById('l-email').value.trim().toLowerCase()
  const clave = document.getElementById('l-clave').value
  const btn   = document.getElementById('login-btn')
  const err   = document.getElementById('l-error')
  err.style.display = 'none'

  if (!email || !clave) { showErr('Ingresa tu correo y tu clave.'); return }

  btn.disabled = true; btn.textContent = 'Verificando...'

  try {
    const res  = await fetch(`${SERVER}/api/web/verificar-clave`, {
      method:'POST', headers:{'Content-Type':'application/json'},
      body: JSON.stringify({ email, clave })
    })
    const data = await res.json()

    if (!res.ok || !data.ok) {
      // Cuenta creada pero nunca confirmada: se le manda el código y se le pide acá.
      if (data.error === 'email_no_verificado') {
        RECUPERAR = { email: data.email || email, modo: 'verificacion' }
        await fetch(`${SERVER}/api/web/reenviar-codigo`, {
          method:'POST', headers:{'Content-Type':'application/json'},
          body: JSON.stringify({ email: RECUPERAR.email, tipo: 'verificacion' })
        }).catch(()=>{})
        mostrarPasoNueva('Falta confirmar tu correo. Te mandamos un código.')
        btn.disabled = false; btn.textContent = 'Entrar'; return
      }
      showErr(data.mensaje || 'Correo o clave incorrectos.')
      btn.disabled = false; btn.textContent = 'Entrar'; return
    }

    S = {
      userId: data.userId, email, nombre: data.nombre || null, phone: data.phone || null, token: data.token,
      plan: data.plan, msgsTotal: data.msgsTotal || 0, msgsUsados: data.msgsUsados || 0,
      diasJuntos: data.diasJuntos || 0, dias: data.dias || 0,
      planVencido: data.planVencido || false,
      // v4.7.5 — gracia ya terminada = vencido (la memoria sigue 30 días, opción b)
      enGracia: !!(data.enGracia && !(data.graciaFin && new Date(data.graciaFin) < new Date())),
      graciaFin: data.graciaFin || null,
      _guardadoAt: Date.now()
    }

    // FIX: localStorage persiste al cerrar el tab
    localStorage.setItem('sf_s', JSON.stringify(S))
    arrancarApp()
    // Mostrar estado del plan inmediatamente usando datos del login (sin API extra que puede dar 401)
    if (S.enGracia) {
      mostrarBannerGracia(S.graciaFin, S.graciaMsgsRestantes)
    } else if (S.planVencido) {
      mostrarOverlay('vencido')
    }

  } catch(e) {
    showErr('Error de conexión. Intenta de nuevo.')
    btn.disabled = false; btn.textContent = 'Entrar'
  }
}

// ══ RECUPERACIÓN DE CLAVE POR EMAIL (v3.5.0) ═══════════════════════════════
let RECUPERAR = null

function mostrarPaso(id) {
  ;['login-paso-entrar','login-paso-pedir','login-paso-nueva'].forEach(function(p){
    const el = document.getElementById(p)
    if (el) el.style.display = (p === id) ? 'block' : 'none'
  })
}

function mostrarRecuperar() {
  const emailPrevio = document.getElementById('l-email').value.trim()
  if (emailPrevio) document.getElementById('r-email').value = emailPrevio
  mostrarPaso('login-paso-pedir')
}

function volverAEntrar() { mostrarPaso('login-paso-entrar') }

function mostrarPasoNueva(msg) {
  mostrarPaso('login-paso-nueva')
  if (msg) mostrarMsg('n-error', msg)
}

function mostrarMsg(id, txt) {
  const el = document.getElementById(id)
  if (!el) return
  el.textContent = txt
  el.style.display = 'block'
}

async function pedirCodigoRecuperacion() {
  const email = document.getElementById('r-email').value.trim().toLowerCase()
  const btn   = document.getElementById('btn-pedir-codigo')
  if (!email || email.indexOf('@') === -1) { mostrarMsg('r-error', 'Escribe un correo válido.'); return }

  btn.disabled = true; btn.textContent = 'Enviando...'
  try {
    const res  = await fetch(`${SERVER}/api/web/recuperar-clave`, {
      method:'POST', headers:{'Content-Type':'application/json'},
      body: JSON.stringify({ email })
    })
    const data = await res.json()
    // La respuesta es genérica a propósito: no revela si el correo existe.
    RECUPERAR = { email, modo: 'recuperacion' }
    mostrarPasoNueva(data.mensaje || 'Si esa dirección está registrada, te llegará un código.')
  } catch (e) {
    mostrarMsg('r-error', 'Error de conexión. Intenta de nuevo.')
  }
  btn.disabled = false; btn.textContent = 'Enviarme un código'
}

async function restablecerClave() {
  if (!RECUPERAR) { volverAEntrar(); return }
  const codigo = document.getElementById('r-codigo').value.trim()
  const clave  = document.getElementById('r-clave').value
  const btn    = document.getElementById('btn-nueva-clave')

  if (codigo.length !== 6)  { mostrarMsg('n-error', 'El código tiene 6 dígitos.'); return }
  if (!clave || clave.length < 8) { mostrarMsg('n-error', 'Tu clave nueva debe tener al menos 8 caracteres.'); return }

  btn.disabled = true; btn.textContent = 'Guardando...'

  // Cuenta sin confirmar: el código verifica el email y entra directo.
  if (RECUPERAR.modo === 'verificacion') {
    try {
      const res  = await fetch(`${SERVER}/api/web/verificar-email`, {
        method:'POST', headers:{'Content-Type':'application/json'},
        body: JSON.stringify({ email: RECUPERAR.email, codigo, clave })
      })
      const data = await res.json()
      if (!res.ok || !data.ok) {
        mostrarMsg('n-error', data.mensaje || 'Ese código no es.')
        btn.disabled = false; btn.textContent = 'Guardar y entrar'; return
      }
      S = {
        userId: data.userId, email: RECUPERAR.email, nombre: data.nombre || null, phone: data.phone || null, token: data.token,
        plan: data.plan, msgsTotal: data.msgsTotal || 0, msgsUsados: data.msgsUsados || 0,
        diasJuntos: data.diasJuntos || 0, dias: data.dias || 0,
        _guardadoAt: Date.now()
      }
      localStorage.setItem('sf_s', JSON.stringify(S))
      arrancarApp()
      return  // verify-email solo ocurre en usuarios nuevos: planVencido siempre false
    } catch (e) {
      mostrarMsg('n-error', 'Error de conexión.')
      btn.disabled = false; btn.textContent = 'Guardar y entrar'; return
    }
  }

  // Recuperación normal: se fija la clave nueva y se entra con ella.
  try {
    const res  = await fetch(`${SERVER}/api/web/restablecer-clave`, {
      method:'POST', headers:{'Content-Type':'application/json'},
      body: JSON.stringify({ email: RECUPERAR.email, codigo, clave })
    })
    const data = await res.json()
    if (!res.ok || !data.ok) {
      mostrarMsg('n-error', data.mensaje || 'Ese código no es.')
      btn.disabled = false; btn.textContent = 'Guardar y entrar'; return
    }
    document.getElementById('l-email').value = RECUPERAR.email
    document.getElementById('l-clave').value = clave
    mostrarPaso('login-paso-entrar')
    doLogin()
  } catch (e) {
    mostrarMsg('n-error', 'Error de conexión.')
    btn.disabled = false; btn.textContent = 'Guardar y entrar'
  }
}

function showErr(msg) {
  const el = document.getElementById('l-error')
  el.textContent = msg; el.style.display = 'block'
}

// ══ APP ══════════════════════════════════════════════════════
// v4.4.0 — Renovar exige sesión. /chat?renovar=1 (landing, correo de cuenta
// existente, aviso de gracia) muestra un aviso en el login y, apenas hay
// sesión válida, abre directo los planes.
let _renovarPendiente = new URLSearchParams(location.search).get('renovar') === '1'
function quitarParamRenovar() {
  try {
    const u = new URL(location.href)
    if (!u.searchParams.has('renovar')) return
    u.searchParams.delete('renovar')
    history.replaceState(null, '', u.pathname + (u.search || ''))
  } catch (e) {}
}
function mostrarAvisoRenovar() {
  const el = document.getElementById('login-aviso-renovar')
  if (el) el.style.display = _renovarPendiente ? 'block' : 'none'
}
async function abrirRenovarSiPidio() {
  if (!_renovarPendiente) return
  await actualizarEstado()            // confirma que la sesión sigue válida
  if (!document.getElementById('app').classList.contains('visible')) return  // 401 → login
  _renovarPendiente = false
  quitarParamRenovar()
  mostrarAvisoRenovar()
  abrirRenovar()
}

function arrancarApp() {
  document.getElementById('login-screen').style.display = 'none'
  document.getElementById('app').classList.add('visible')
  pintarNombre()

  actualizarStats()
  cargarHistorial()
  cargarPensamiento()
  renderRelacion()
  cargarHitos()
  actualizarArco()
  pintarRecuerdos(); pintarPendiente(); pintarProximaFecha(); pintarFrases()
  activarFotosClickables()
  actualizarFotoTema(localStorage.getItem('sf_theme') || 'cyberpunk')
  _historialAt = Date.now()
  iniciarCanalApp()
  verificarPagoPendiente()   // v4.2.0 — vuelve de Flow o quedó un pago sin confirmar
  abrirRenovarSiPidio()      // v4.4.0 — llegó desde "Renovar"

  // Poll cada 2 min — refresca mensajes, días y estado del plan desde BD
  if (_pollInterval) clearInterval(_pollInterval)
  _pollInterval = setInterval(() => {
    if (document.visibilityState === 'visible') actualizarEstado()
  }, 2 * 60 * 1000)
}

// ══ ACTUALIZAR ESTADO (poll cada 2 min) ══════════════════════
async function actualizarEstado() {
  if (!S.token || !S.userId) return
  try {
    const res = await fetch(`${SERVER}/api/web/estado`, {
      headers: { 'x-web-token': S.token }
    })
    if (res.status === 401) { manejar401(); return }
    if (res.status >= 500) return
    const data = await res.json()
    if (!data || data.error) return

    // Sobrescribir SIEMPRE con datos frescos de BD — sin condiciones que preserven valores viejos.
    // Cualquier condición tipo "|| S.valor" o "data.x > 0" puede dejar datos obsoletos en pantalla.
    if (data.plan !== undefined) S.plan = data.plan
    if (data.nombre) S.nombre = data.nombre
    if (data.email) S.email = data.email
    if (data.planNombre !== undefined) S.planNombre = data.planNombre
    if (data.fechaVencimiento !== undefined) S.fechaVencimiento = data.fechaVencimiento
    S.planVencido = !!data.planVencido
    S.dias       = data.dias       !== undefined ? data.dias       : S.dias
    if (Array.isArray(data.recuerdos)) S.recuerdos = data.recuerdos             // v4.6.1
    if (data.pendiente !== undefined) S.pendiente = data.pendiente
    if (Array.isArray(data.frases)) S.frases = data.frases
    if (data.nombrePreferido !== undefined) S.nombrePreferido = data.nombrePreferido
    if (data.diasJuntos !== undefined) S.diasJuntos = data.diasJuntos   // v4.5.3
    S.msgsTotal  = data.msgsTotal  !== undefined ? data.msgsTotal  : S.msgsTotal
    S.msgsUsados = data.msgsUsados !== undefined ? data.msgsUsados : S.msgsUsados

    // Persistir con timestamp actualizado
    S._guardadoAt = Date.now()
    localStorage.setItem('sf_s', JSON.stringify(S))

    // Refrescar UI completa
    pintarNombre()
    if ($('sp-perfil')?.classList.contains('active')) pintarPerfil()
    actualizarStats()
    renderRelacion()
    actualizarArco()
    pintarRecuerdos(); pintarPendiente(); pintarProximaFecha(); pintarFrases()

    // Estado de gracia / vencido
    S.enGracia  = !!data.enGracia
    S.graciaFin = data.graciaFin || null
    S.msgsGuardados = data.msgsGuardados || 0          // v4.7.0
    S.pruebaUsada   = !!data.pruebaUsada                // v4.7.6 — M4
    S.graciaTerminada = !!data.graciaTerminada          // v4.7.5
    S.fechaOlvido     = data.fechaOlvido || null
    if (data.graciaMax) S.graciaMax = data.graciaMax
    if (data.enGracia) {
      S.graciaMsgsRestantes = data.graciaMsgsRestantes
      if ((data.graciaMsgsRestantes || 0) <= 0) {
        ocultarBannerGracia(); mostrarOverlay('en_gracia')   // reconquista agotada → muro
      } else {
        ocultarOverlays(); mostrarBannerGracia(data.graciaFin, data.graciaMsgsRestantes)
      }
    } else {
      ocultarBannerGracia()
      if (data.planVencido) mostrarOverlay('vencido')
      // v4.2.0 — plan activo con cupo → fuera cualquier muro (p. ej. tras pagar)
      else if ((data.msgsTotal || 0) - (data.msgsUsados || 0) > 0) ocultarOverlays()
    }
    actualizarStats()   // v4.7.0 — con el estado de gracia ya actualizado
    return data
  } catch { /* silencioso — no interrumpir la sesión */ }
  finally {
  }
}

function manejar401() {
  clearInterval(_pollInterval)
  limpiarDatosLocales()   // v4.6.5 — sesión vencida: no queda contenido de Sofía
  document.getElementById('app').classList.remove('visible')
  document.getElementById('login-screen').style.display = 'flex'
  const err = document.getElementById('l-error')
  if (err) { err.textContent = 'Tu sesión expiró. Ingresa nuevamente con tu correo y clave.'; err.style.display = 'block' }
  mostrarAvisoRenovar()
}

let _pollInterval = null


function cambiarVista(v) {
  document.getElementById('vista-chat').classList.toggle('active', v === 'chat')
  document.getElementById('vista-sofia').classList.toggle('active', v === 'sofia')
  document.getElementById('btn-chat').classList.toggle('active', v === 'chat')
  document.getElementById('btn-sofia').classList.toggle('active', v === 'sofia')
  // Refrescar galería al abrir la vista Mi Sofía
  if (v === 'sofia') renderGaleria()
}

function mostrarTab(nombre, btn) {
  document.querySelectorAll('.s-page').forEach(p => p.classList.remove('active'))
  document.querySelectorAll('.s-tab').forEach(t => t.classList.remove('active'))
  document.getElementById(`sp-${nombre}`).classList.add('active')
  if (btn) btn.classList.add('active')
  else document.querySelector(`.s-tab[onclick*="${nombre}"]`)?.classList.add('active')
  // Poblar perfil al abrir
  if (nombre === 'perfil') pintarPerfil()
}

// ══ PERFIL (v4.4.1) ═══════════════════════════════════════════
function pintarNombre() {
  const el = $('top-phone')
  if (el) el.textContent = S.nombre || (S.email ? S.email.split('@')[0] : '')
}
function pintarPerfil() {
  pintarAvisos()   // v4.7.1
  const n = $('perfil-nombre-input')
  if (n && document.activeElement !== n) n.value = S.nombre || ''
  const em = $('perfil-email'); if (em) em.textContent = S.email || '—'
  const pl = $('perfil-plan')
  if (pl) {
    const nombrePlan = S.planNombre || (S.plan === 'free' ? 'Prueba gratis' : (S.plan || '—'))
    const vence = S.fechaVencimiento ? ' · vence el ' + new Date(S.fechaVencimiento).toLocaleDateString('es-CL', { day: 'numeric', month: 'long' }) : ''
    pl.textContent = nombrePlan + vence
  }
}
async function guardarNombre() {
  const inp = $('perfil-nombre-input'), msg = $('perfil-nombre-msg')
  const nombre = (inp?.value || '').trim()
  const showMsg = (t, ok) => { if (!msg) return; msg.textContent = t; msg.style.color = ok ? 'var(--accent2)' : 'var(--accent3)'; msg.style.display = 'block'; setTimeout(() => { msg.style.display = 'none' }, 4000) }
  if (!nombre) { showMsg('Escribe tu nombre', false); return }
  try {
    const res = await fetch(`${SERVER}/api/web/perfil`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'x-web-token': S.token },
      body: JSON.stringify({ nombre })
    })
    if (res.status === 401) { manejar401(); return }
    const data = await res.json()
    if (data.ok) {
      S.nombre = data.nombre; localStorage.setItem('sf_s', JSON.stringify(S))
      pintarNombre(); pintarPerfil(); showMsg('✓ Listo, ' + data.nombre, true)
    } else showMsg(data.mensaje || 'No se pudo guardar', false)
  } catch { showMsg('Error de conexión', false) }
}

async function cambiarClave() {
  const inp = $('perfil-clave-input')
  const msg = $('perfil-clave-msg')
  const inpAct = $('perfil-clave-actual')
  const clave = (inp?.value || '')
  const claveActual = (inpAct?.value || '')
  const showMsg = (t, ok) => { if (!msg) return; msg.textContent = t; msg.style.color = ok ? 'var(--accent2)' : 'var(--accent3)'; msg.style.display = 'block'; setTimeout(() => { msg.style.display = 'none' }, 4000) }
  if (!claveActual) { showMsg('Escribe tu clave actual', false); return }
  if (clave.length < 8) { showMsg('La nueva clave necesita mínimo 8 caracteres', false); return }
  try {
    const res = await fetch(`${SERVER}/api/web/cambiar-clave`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'x-web-token': S.token },
      body: JSON.stringify({ clave, claveActual })   // v4.6.5 — el servidor exige la actual
    })
    const data = await res.json().catch(() => ({}))
    if (data.ok) { inp.value = ''; if (inpAct) inpAct.value = ''; showMsg('✓ Clave actualizada', true) }
    else showMsg(data.mensaje || 'No se pudo cambiar', false)
  } catch { showMsg('Error de conexión', false) }
}

// ══ STATS ════════════════════════════════════════════════════
function actualizarStats() {
  // v4.7.0 — en la gracia se muestran los mensajes de gracia (los del plan
  // vencido quedan guardados y se suman si renueva); plan vencido → 0
  const gracia = !!S.enGracia
  const total  = gracia ? (S.graciaMax || 15) : (S.msgsTotal || 0)
  const rest   = gracia ? Math.max(0, S.graciaMsgsRestantes || 0)
               : S.planVencido ? 0 : Math.max(0, (S.msgsTotal || 0) - (S.msgsUsados || 0))
  const pct    = total > 0 ? Math.min(100, (rest / total) * 100) : 0

  $('qs-dias').textContent     = S.diasJuntos
  $('qs-msgs').textContent     = rest
  if ($('qs-msgs-sub')) $('qs-msgs-sub').textContent = gracia ? 'período de gracia' : 'disponibles'
  $('msgs-label').textContent  = gracia ? `${rest} / ${total} · período de gracia` : `${rest} / ${total}`
  $('msgs-fill').style.width   = pct + '%'
  $('ph-msgs-num').textContent = rest
  if ($('ph-gracia')) $('ph-gracia').hidden = !gracia
  actualizarArco()
}
// ══ PENSAMIENTO ══════════════════════════════════════════════
// forzar=true solo desde el botón "↻ actualizar". El resto usa la caché de
// 30 min: recargar la página no debe costar una llamada nueva a Claude.
async function cargarPensamiento(forzar) {
  const tEl = $('t-text'), eEl = $('t-estado')
  if (!forzar) {
    try {
      const c = JSON.parse(localStorage.getItem('sf_pens') || 'null')
      if (c && c.userId === S.userId && (Date.now() - c.at) < 30 * 60 * 1000 && c.pensamiento) {
        tEl.textContent = `"${c.pensamiento}"`; tEl.className = 't-text'
        eEl.textContent = c.estado ? `— ${c.estado}` : ''
        return
      }
    } catch {}
  }
  tEl.textContent = 'Sofía está pensando...'; tEl.className = 't-text loading'
  eEl.textContent = ''
  try {
    const res  = await fetch(`${SERVER}/api/web/pensamiento`, {
      method:'POST', headers:{'Content-Type':'application/json','x-web-token':S.token},
      body: JSON.stringify({ userId: S.userId })
    })
    const data = await res.json()
    if (data.pensamiento) {
      tEl.textContent = `"${data.pensamiento}"`; tEl.className = 't-text'
      eEl.textContent = data.estado ? `— ${data.estado}` : ''
      try {
        localStorage.setItem('sf_pens', JSON.stringify({
          userId: S.userId, pensamiento: data.pensamiento, estado: data.estado, at: Date.now()
        }))
      } catch {}
    } else { tEl.textContent = '"Pensando en ti..."'; tEl.className = 't-text' }
  } catch { tEl.textContent = '"Pensando en ti..."'; tEl.className = 't-text' }
}

function dispararPensamiento() {
  if (pensamientoTimer) clearTimeout(pensamientoTimer)
  // Solo se dispara si la pestaña está visible. Si el usuario cerró o dejó la
  // app en segundo plano, la llamada era costo puro que nadie llegaba a ver.
  pensamientoTimer = setTimeout(() => {
    if (document.visibilityState === 'visible') cargarPensamiento()
  }, 3 * 60 * 1000)
}

// ══ HISTORIAL ════════════════════════════════════════════════
async function cargarHistorial() {
  const wrap = $('ph-messages')
  // v4.5.0 — no recargar encima de mensajes que aún no se mandan o esperan respuesta
  if (_enviando || _pendientes.length) return
  try {
    const res  = await fetch(`${SERVER}/api/web/historial`, {
      headers: { 'x-web-token': S.token }
    })
    if (res.status === 401) { manejar401(); return }
    if (!res.ok) throw new Error('historial ' + res.status)   // conserva lo que ya está en pantalla
    const data = await res.json()
    if (!Array.isArray(data.mensajes)) throw new Error('historial sin mensajes')
    // v4.3.1 — se vacía la lista SIN destruir el indicador "escribiendo…"
    const ty = typingEl()
    wrap.innerHTML = ''
    if (ty) wrap.appendChild(ty)
    data.mensajes.slice(-20).forEach(m => addMsg(m.role === 'user' ? 'user' : 'sofia', m.content, m.created_at))
    scrollChat()
    revisarEnCamino(data.mensajes)   // v4.7.7
  } catch (e) {
    console.warn('[HISTORIAL] no se pudo recargar:', e && e.message)
    // Solo si el chat está vacío (primera carga sin conexión); nunca encima de una conversación
    if (!wrap.querySelector('.msg')) addMsg('sofia','Hola... me alegra que hayas entrado por acá.',new Date().toISOString())
  }
}

// v4.7.7 — RESPUESTA "PERDIDA" AL RECARGAR. El servidor guarda el mensaje y la
// respuesta recién cuando Sofía termina (5–15 s). Si en ese lapso se recarga la
// página, el historial llega sin ambos y parecía que ella no respondió.
// Ahora el envío queda anotado en este navegador; al volver, si aún no está en
// el historial, se muestra con "escribiendo…" y se consulta cada 3 s (máx. 45 s).
// Solo LEE el historial: nunca reenvía el mensaje (no cuesta tokens ni cupo).
const EN_CAMINO_KEY = 'sf_en_camino'
function marcarEnCamino(txt) {
  try {
    if (txt) sessionStorage.setItem(EN_CAMINO_KEY, JSON.stringify({ txt, at: Date.now() }))
    else sessionStorage.removeItem(EN_CAMINO_KEY)
  } catch (e) {}
}
let _esperandoEnCamino = false
function revisarEnCamino(mensajes) {
  let p = null
  try { p = JSON.parse(sessionStorage.getItem(EN_CAMINO_KEY) || 'null') } catch (e) {}
  if (!p || !p.txt || Date.now() - p.at > 60 * 1000) { marcarEnCamino(null); return }
  const ultimoUser = [...mensajes].reverse().find(m => m.role === 'user')
  const yaGuardado = ultimoUser && new Date(ultimoUser.created_at).getTime() >= p.at - 5000 &&
                     p.txt.includes(String(ultimoUser.content).slice(0, 40))
  if (yaGuardado) { marcarEnCamino(null); return }
  if (_esperandoEnCamino) return
  _esperandoEnCamino = true
  addMsg('user', p.txt, new Date(p.at).toISOString())
  typingEl().classList.add('on'); scrollChat()
  let intentos = 0
  const tick = async () => {
    intentos++
    try {
      const r = await fetch(`${SERVER}/api/web/historial`, { headers: { 'x-web-token': S.token } })
      const d = r.ok ? await r.json() : null
      const u = d && Array.isArray(d.mensajes) ? [...d.mensajes].reverse().find(m => m.role === 'user') : null
      if (u && new Date(u.created_at).getTime() >= p.at - 5000) {
        _esperandoEnCamino = false; marcarEnCamino(null)
        typingEl().classList.remove('on'); cargarHistorial(); actualizarEstado()
        return
      }
    } catch (e) {}
    if (intentos < 15) return setTimeout(tick, 3000)
    _esperandoEnCamino = false; marcarEnCamino(null); typingEl().classList.remove('on')
    addMsg('sofia', 'No me llegó lo último que me escribiste... ¿me lo repites?', new Date().toISOString())
  }
  setTimeout(tick, 3000)
}

// ══ CHAT ═════════════════════════════════════════════════════
function addMsg(quien, txt, ts, fotoUrl) {
  const wrap = $('ph-messages')
  const div  = document.createElement('div')
  div.className = `msg ${quien}`
  const hora = ts ? new Date(ts).toLocaleTimeString('es-CL',{hour:'2-digit',minute:'2-digit'}) : ''
  const cita = fotoUrl ? `<div class="msg-foto"><img src="${esc(fotoUrl)}" alt="">Respondiste a su foto</div>` : ''
  div.innerHTML = `${cita}<div class="msg-bub">${esc(txt)}</div><div class="msg-time">${hora}</div>`
  // v4.6.1 — ⭐ guardar una frase de Sofía ("Lo que me dijo")
  if (quien === 'sofia' && txt && ts && !/^(Sin conexión|Algo pasó de mi lado|No me llegó lo último)/.test(txt)) {
    const b = document.createElement('button')
    b.className = 'msg-star'; b.type = 'button'
    const pintar = () => { const on = fraseGuardada(txt); b.textContent = on ? '★' : '☆'; b.classList.toggle('on', on); b.setAttribute('aria-label', on ? 'Quitar de lo que me dijo' : 'Guardar esta frase') }
    pintar(); b._pintar = pintar
    b.addEventListener('click', () => guardarFrase(txt, pintar))
    div.querySelector('.msg-time')?.appendChild(b)
  }
  wrap.appendChild(div)
  scrollChat()
}

// v4.3.1 — referencia fija al indicador: aunque saliera del DOM, se recupera
let _typingEl = null
function typingEl() { return _typingEl || (_typingEl = $('typing')) }
function scrollChat() {
  const c = $('ph-messages')
  const ty = typingEl()
  if (ty) c.appendChild(ty)
  c.scrollTop = c.scrollHeight
}

// ══ ENVÍO EN RÁFAGA (v4.5.0) ═════════════════════════════════
// El usuario escribe como en WhatsApp: varias líneas seguidas. Cada línea se
// muestra al tiro, pero se manda al servidor JUNTO con las demás cuando deja de
// escribir 2,5 s (o al terminar Sofía de responder). Una ráfaga = una respuesta
// = un mensaje del plan. Nunca hay dos envíos en paralelo.
const RAFAGA_PAUSA_MS = 2500
const RAFAGA_MAX_MS   = 8000      // tope de espera desde la primera línea
const RAFAGA_MAX_CHARS = 1900     // el servidor corta a 2000
let _pendientes = []
let _enviando   = false
let _reintentosRafaga = 0   // v4.6.3 — reintentos automáticos ante 409/429/503
let _rafagaTimer = null
let _rafagaInicio = 0
let _rafagaFotoId = null

function programarRafaga() {
  if (_rafagaTimer) clearTimeout(_rafagaTimer)
  if (_enviando || !_pendientes.length) return
  const restante = Math.max(0, RAFAGA_MAX_MS - (Date.now() - _rafagaInicio))
  _rafagaTimer = setTimeout(despacharRafaga, Math.min(RAFAGA_PAUSA_MS, restante))
}

// Si sigue escribiendo, se espera a que termine (sin pasar el tope)
function alEscribir() {
  if (_pendientes.length && !_enviando && $('msg-input').value.trim()) programarRafaga()
}

function enviarMensaje() {
  const inp = $('msg-input')
  const txt = inp.value.trim()
  if (!txt) return

  if (!S.enGracia) {
    const rest = S.msgsTotal - S.msgsUsados
    if (rest <= 0) { mostrarOverlay('sin_mensajes'); return }
  }

  inp.value = ''; autoResize(inp); inp.focus()
  // v4.6.0 — "Responderle esta foto": la foto viaja con la ráfaga
  const foto = _fotoRespuesta
  addMsg('user', txt, new Date().toISOString(), foto ? foto.url : null)
  if (foto) { _rafagaFotoId = foto.id; quitarRespuestaFoto() }
  if (!_pendientes.length) _rafagaInicio = Date.now()
  _pendientes.push(txt)
  // Ráfaga demasiado larga: se manda ya
  if (_pendientes.join('\n').length >= RAFAGA_MAX_CHARS && !_enviando) { despacharRafaga(); return }
  programarRafaga()
}

async function despacharRafaga() {
  if (_rafagaTimer) { clearTimeout(_rafagaTimer); _rafagaTimer = null }
  if (_enviando || !_pendientes.length) return
  const txt = _pendientes.join('\n').slice(0, RAFAGA_MAX_CHARS)
  const fotoId = _rafagaFotoId
  _pendientes = []; _rafagaFotoId = null
  _enviando = true
  typingEl().classList.add('on'); scrollChat()
  marcarEnCamino(txt)   // v4.7.7 — por si recarga mientras ella responde

  try {
    const res = await fetch(`${SERVER}/api/web/mensaje`, {
      method:'POST',
      headers:{'Content-Type':'application/json','x-web-token':S.token},
      body: JSON.stringify(fotoId ? { userId: S.userId, mensaje: txt, fotoId } : { userId: S.userId, mensaje: txt })
    })
    typingEl().classList.remove('on')
    // v4.5.0 — sesión vencida: al login con aviso (antes: silencio)
    if (res.status === 401) { _enviando = false; _pendientes = []; manejar401(); return }
    // v4.6.3 — el servidor pidió esperar: la ráfaga vuelve a la cola y se reenvía sola
    if ((res.status === 409 || res.status === 429 || res.status === 503) && _reintentosRafaga < 3) {
      _reintentosRafaga++
      _pendientes.unshift(txt); if (fotoId && !_rafagaFotoId) _rafagaFotoId = fotoId
      _enviando = false
      typingEl().classList.add('on')
      const espera = Math.min(10, Number(res.headers.get('Retry-After')) || 3) * 1000
      setTimeout(despacharRafaga, espera * _reintentosRafaga)
      return
    }
    _reintentosRafaga = 0
    const data = await res.json().catch(() => ({}))

    if (data.enGracia) {
      // Rama gracia (reconquista) — no toca msgs del plan
      if (data.gracia_agotada) {
        ocultarBannerGracia(); mostrarOverlay('en_gracia')
      } else {
        if (data.respuesta) {
          addMsg('sofia', data.respuesta, new Date().toISOString())
          msgsHoy++
          dispararPensamiento()
        }
        S.enGracia = true
        if (data.graciaMsgsRestantes !== undefined) S.graciaMsgsRestantes = data.graciaMsgsRestantes
        if (data.graciaFin) S.graciaFin = data.graciaFin
        if (data.graciaMax) S.graciaMax = data.graciaMax
        if (data.msgsGuardados !== undefined) S.msgsGuardados = data.msgsGuardados   // v4.7.0
        localStorage.setItem('sf_s', JSON.stringify(S))
        mostrarBannerGracia(S.graciaFin, S.graciaMsgsRestantes)
        actualizarStats()
      }
    } else if (data.respuesta) {
      addMsg('sofia', data.respuesta, new Date().toISOString())
      if (!data.plan_vencido) S.msgsUsados++
      msgsHoy++
      localStorage.setItem('sf_s', JSON.stringify(S))
      actualizarStats()
      dispararPensamiento()
      if (msgsHoy === 2) evaluarCanalApp()   // ya hay conversación: buen momento para invitar
      if (data.plan_vencido) mostrarOverlay(data.razon)
    } else if (data.plan_vencido) {
      mostrarOverlay(data.razon)
    } else {
      // Error del servidor (500, 403, etc.): avisar en vez de quedar en silencio
      addMsg('sofia','No me llegó lo último que me escribiste... ¿me lo repites en un momento?',new Date().toISOString())
    }

  } catch(err) {
    typingEl().classList.remove('on')
    if (!navigator.onLine) {
      addMsg('sofia','Sin conexión. Revisa tu internet e intenta de nuevo.',new Date().toISOString())
    } else {
      addMsg('sofia','Algo pasó de mi lado... intenta en un momento.',new Date().toISOString())
    }
  }
  _enviando = false
  marcarEnCamino(null)
  // Lo que escribió mientras ella respondía sale en la siguiente ráfaga
  if (_pendientes.length) { _rafagaInicio = Date.now(); programarRafaga() }
}

function mostrarBannerGracia(graciaFin, restantes) {
  const b = $('gracia-banner'), t = $('gracia-banner-txt')
  if (!b || !t) return
  let dias = ''
  if (graciaFin) {
    const d = Math.max(1, Math.ceil((new Date(graciaFin) - Date.now()) / (1000*60*60*24)))
    dias = `${d} día${d>1?'s':''} · `
  }
  const r = (restantes !== undefined && restantes !== null) ? restantes : (S.graciaMsgsRestantes || 0)
  // v4.7.0 — texto honesto: lo guardado se suma si renueva; si no, se pierde
  const g = Math.max(0, S.msgsGuardados || 0)
  const extra = g > 0
    ? ` Tus <b>${g}</b> mensajes guardados te esperan si renuevas.`
    : ' Renueva y seguimos justo donde quedamos.'
  t.innerHTML = `⏳ ${dias}<b>${r}</b> mensaje${r===1?'':'s'} de tiempo extra.${extra}`
  b.classList.add('on')
}
function ocultarBannerGracia() { const b = $('gracia-banner'); if (b) b.classList.remove('on') }
function ocultarOverlays() {
  ;['exp-overlay-mensajes','exp-overlay-vencido','exp-overlay-gracia'].forEach(id => {
    const el = $(id); if (el) el.classList.remove('on')
  })
}

// v4.5.1 — "· desde $X" en los botones de cierre, con el plan pagado más barato
// de /api/planes. Si falla, el botón queda sin precio (nunca un precio viejo).
let _precioDesde = null
async function pintarPrecioDesde() {
  try {
    if (_precioDesde === null) {
      const res  = await fetch(`${SERVER}/api/planes`)
      const data = await res.json()
      const precios = (data.planes || [])
        .filter(p => p && p.activo !== false && !p.es_recarga && (p.precio_clp ?? p.precio) > 0)
        .map(p => p.precio_clp ?? p.precio)
      if (!precios.length) return
      _precioDesde = Math.min(...precios)
    }
    const txt = ` · desde $${_precioDesde.toLocaleString('es-CL')}`
    document.querySelectorAll('.exp-desde').forEach(el => { el.textContent = txt })
  } catch (e) {}
}

function mostrarOverlay(razon) {
  // Ocultar todos primero
  ;['exp-overlay-mensajes','exp-overlay-vencido','exp-overlay-gracia'].forEach(id => {
    const el = $(id); if (el) el.classList.remove('on')
  })
  pintarPrecioDesde()
  // Mostrar el que corresponde
  if (razon === 'sin_mensajes') {
    $('exp-overlay-mensajes')?.classList.add('on')
  } else if (razon === 'en_gracia' || razon === 'vencido_gracia_iniciada') {
    const dEl = $('exp-gracia-dias')
    if (dEl && S.graciaFin) {
      const d = Math.max(1, Math.ceil((new Date(S.graciaFin) - Date.now()) / 86400000))
      dEl.textContent = `${d} día${d > 1 ? 's' : ''}`
    }
    $('exp-overlay-gracia')?.classList.add('on')
  } else {
    // plan vencido, gracia_vencida, sin_plan, cualquier otro
    // v4.7.5 — opción b: tras la gracia la memoria sigue 30 días; se dice hasta cuándo
    const tEl = $('exp-vencido-texto'), tit = $('exp-vencido-titulo')
    if (tit) tit.textContent = S.pruebaUsada ? 'Ya nos conocimos' : 'Te extraño'
    if (tEl && S.pruebaUsada) {
      // v4.7.6 — M4: este correo ya usó su prueba gratis
      tEl.textContent = 'Ya usaste tus días gratis conmigo con este correo. Si quieres seguir, elige un plan y empezamos.'
    } else if (tEl) {
      const f = S.fechaOlvido ? new Date(S.fechaOlvido) : null
      tEl.innerHTML = (f && f > new Date())
        ? `Tu plan terminó, pero todavía recuerdo todo lo que me contaste. Si vuelves antes del <b>${f.toLocaleDateString('es-CL', { day: 'numeric', month: 'long' })}</b>, seguimos justo donde quedamos.`
        : 'Tu plan terminó, pero sigo aquí. Renueva y seguimos.'
    }
    $('exp-overlay-vencido')?.classList.add('on')
  }
}

function handleKey(e) { if(e.key==='Enter'&&!e.shiftKey){e.preventDefault();enviarMensaje()} }
function autoResize(el) { el.style.height='auto'; el.style.height=Math.min(el.scrollHeight,72)+'px' }

// ══ RELACIÓN ═════════════════════════════════════════════════
function renderRelacion() {
  if ($('spt-dias')) $('spt-dias').textContent = S.diasJuntos || 0
  renderGaleria()
}

// ══ Galería servida por el servidor (solo desbloqueadas traen URL) ══
// v4.6.0 — "Solo para ti": grilla tipo perfil privado; cada foto abre su publicación
let _galeria = []
const ICO_LOCK = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></svg>'
const ICO_HEART = '<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 21s-7-4.4-9.5-9A5.5 5.5 0 0 1 12 6a5.5 5.5 0 0 1 9.5 6c-2.5 4.6-9.5 9-9.5 9z"/></svg>'
async function renderGaleria() {
  const el = $('galeria-sofia')
  if (!el || !S.token) return
  try {
    const res  = await fetch(`${SERVER}/api/web/galeria`, {
      headers:{'x-web-token':S.token}
    })
    if (res.status === 401) { manejar401(); return }
    const data = await res.json()
    const fotos = data.galeria || []
    _galeria = fotos
    actualizarContadorFotos(fotos)
    if ($('spt-fotos')) $('spt-fotos').textContent = fotos.filter(f => f.unlocked).length
    if ($('spt-dias')) $('spt-dias').textContent = S.diasJuntos || 0
    const hayNueva = fotos.some(f => f.unlocked && f.nueva)
    if ($('spt-nueva')) $('spt-nueva').hidden = !hayNueva
    if ($('spt-dot')) $('spt-dot').hidden = !hayNueva
    const hayPago = !!data.esPrueba && fotos.some(f => !f.unlocked && f.razon === 'pago')
    if ($('spt-cta')) { $('spt-cta').hidden = !hayPago; if (hayPago) pintarPrecioDesde() }
    if (!fotos.length) { el.innerHTML = '<div class="empty" style="grid-column:1/-1">// Pronto va a subir algo para ti.</div>'; return }
    el.innerHTML = fotos.map(f => {
      if (f.unlocked && f.url) {
        return `<button class="gal-item unlocked" style="padding:0" aria-label="Ver publicación" onclick="abrirPost(${Number(f.id)})">`
             + `<img class="gal-media" src="${esc(f.url)}" alt="${esc(f.texto || 'Publicación de Sofía')}" loading="lazy">`
             + (f.nueva ? '<span class="spt-badge">NUEVA</span>' : '')
             + (f.meGusta ? `<span class="spt-like">${ICO_HEART}</span>` : '')
             + `</button>`
      }
      const pago = f.razon === 'pago'
      const hint = pago ? 'Solo para quien se queda'
                 : f.faltan != null ? `en ${f.faltan} día${f.faltan === 1 ? '' : 's'}` : ''
      const fondo = f.blur ? `<img class="gal-media" src="${esc(f.blur)}" alt="">` : `<div class="gal-ph gal-media"></div>`
      return `<div class="gal-item locked${pago ? ' pago' : ''}"${pago ? ' onclick="abrirRenovar()" style="cursor:pointer"' : ''}>${fondo}`
           + `<div class="gal-lock"><div class="gal-lock-ico">${ICO_LOCK}</div>`
           + `<div class="gal-lock-txt">${hint}</div></div></div>`
    }).join('')
  } catch { el.innerHTML = '' }
}

// ── Publicación ──
let _postActual = null
function abrirPost(id) {
  const f = _galeria.find(x => x.id === id && x.unlocked)
  if (!f) return
  _postActual = f
  $('post-img').src = f.url
  $('post-txt').textContent = f.texto || ''
  pintarMeGusta()
  $('post-ov').classList.add('open')
  document.body.style.overflow = 'hidden'
}
function cerrarPost() {
  $('post-ov').classList.remove('open')
  document.body.style.overflow = ''
}
function pintarMeGusta() {
  const on = !!(_postActual && _postActual.meGusta)
  $('post-like').classList.toggle('on', on)
  $('post-like').setAttribute('aria-pressed', on ? 'true' : 'false')
  $('post-likes').textContent = on ? 'Le gustó a: tú' : ''
}
async function toggleMeGusta() {
  const f = _postActual
  if (!f) return
  f.meGusta = !f.meGusta
  pintarMeGusta()
  try {
    const res = await fetch(`${SERVER}/api/web/galeria/${f.id}/megusta`, {
      method:'POST', headers:{'Content-Type':'application/json','x-web-token':S.token},
      body: JSON.stringify({ valor: f.meGusta })
    })
    if (!res.ok) throw new Error()
    renderGaleria()
  } catch { f.meGusta = !f.meGusta; pintarMeGusta() }
}

// ── Responderle esta foto ──
let _fotoRespuesta = null
function responderFoto() {
  const f = _postActual
  if (!f) return
  _fotoRespuesta = { id: f.id, url: f.url }
  cerrarPost()
  cambiarVista('chat')
  $('reply-chip-img').src = f.url
  $('reply-chip').hidden = false
  const inp = $('msg-input'); if (inp) inp.focus()
}
function quitarRespuestaFoto() {
  _fotoRespuesta = null
  if ($('reply-chip')) $('reply-chip').hidden = true
}

// Fotos desbloqueadas (panel, quick stats) y próxima foto (panel derecho)
function actualizarContadorFotos(fotos) {
  const abiertas = fotos.filter(f => f.unlocked).length
  const txt = fotos.length ? `${abiertas}/${fotos.length}` : '—'
  if ($('rs-fotos')) $('rs-fotos').textContent = txt
  if ($('qs-fotos')) $('qs-fotos').textContent = txt
  const prox = fotos.filter(f => !f.unlocked && f.razon !== 'pago' && f.dia != null).sort((a, b) => a.dia - b.dia)[0]
  // v4.6.1 — en la prueba, si lo que sigue es de pago, se muestra esa
  const proxPago = !prox ? fotos.find(f => !f.unlocked && f.razon === 'pago') : null
  if ($('arc-proxima')) {
    const faltan = prox ? (prox.faltan != null ? prox.faltan : Math.max(0, prox.dia - (S.dias || 0))) : 0
    $('arc-proxima').textContent = prox
      ? (faltan <= 1 ? 'mañana, si conversan hoy' : `en ${faltan} días conversando`)
      : proxPago ? 'Solo para quien se queda'
      : (fotos.length ? 'Ya tienes todas ♥' : '—')
  }
}

// v4.6.1 — Frases guardadas ("Lo que me dijo")
function fraseGuardada(t) { return Array.isArray(S.frases) && S.frases.some(f => f.texto === t) }
async function guardarFrase(texto, repintar) {
  const quitar = fraseGuardada(texto)
  try {
    const res = await fetch(`${SERVER}/api/web/frases`, {
      method:'POST', headers:{'Content-Type':'application/json','x-web-token':S.token},
      body: JSON.stringify({ texto, accion: quitar ? 'quitar' : 'guardar' })
    })
    if (res.status === 401) { manejar401(); return }
    const data = await res.json()
    if (!res.ok) throw new Error(data.error || 'error')
    S.frases = data.frases || []
    try { localStorage.setItem('sf_s', JSON.stringify(S)) } catch {}
    repintar && repintar(); pintarFrases()
  } catch { mostrarToastPago('No se pudo guardar la frase. Intenta de nuevo.') }
}
function pintarFrases() {
  document.querySelectorAll('.msg-star').forEach(b => b._pintar && b._pintar())
  const ul = $('frases')
  if (!ul) return
  const f = Array.isArray(S.frases) ? S.frases.slice(0, 3) : []
  ul.innerHTML = f.length ? f.map(x => `<li>${esc(x.texto)}</li>`).join('')
    : '<li class="vacio">Toca la ☆ junto a un mensaje de Sofía para guardarlo aquí.</li>'
}

// v4.6.1 — "Quedó pendiente" y "Próxima fecha"
function pintarPendiente() {
  const blk = $('blk-pendiente')
  if (!blk) return
  blk.hidden = !S.pendiente
  if (S.pendiente) $('pendiente-txt').textContent = S.pendiente
}
const HITOS_FECHA = [[7,'una semana'],[14,'dos semanas'],[30,'nuestro primer mes'],[60,'dos meses'],[90,'tres meses'],[180,'seis meses'],[365,'un año']]
function pintarProximaFecha() {
  const el = $('fecha-prox')
  if (!el) return
  const dj = S.diasJuntos || 0
  if (!dj) { el.textContent = '—'; return }
  // día 1 = día del registro → se cumplen M días el día M+1
  const prox = HITOS_FECHA.find(([m]) => m + 1 >= dj)
  if (!prox) { el.textContent = `${dj} días juntos ♥`; $('fecha-renovar').hidden = true; return }
  const [m, nombre] = prox
  const faltan = m + 1 - dj
  el.textContent = faltan === 0 ? `Hoy cumplimos ${nombre} ♥`
    : faltan === 1 ? `Mañana cumplimos ${nombre}` : `En ${faltan} días cumplimos ${nombre}`
  // Si el plan vence antes de esa fecha, una invitación discreta a renovar
  const vence = S.fechaVencimiento ? Date.parse(S.fechaVencimiento) : NaN
  const fechaHito = Date.now() + faltan * 86400000
  // v4.7.7 — en la prueba no se pide pago desde el minuto 1 (siempre vence
  // antes del primer hito). Solo en sus últimas 24 h: aviso suave, sin botón.
  if (S.plan === 'free' || !S.plan) {
    $('fecha-renovar').hidden = true
    if (Number.isFinite(vence) && vence > Date.now() && vence - Date.now() < 86400000) {
      el.textContent = `Tu prueba termina el ${new Date(vence).toLocaleDateString('es-CL', { day: 'numeric', month: 'long' })}`
    }
    return
  }
  $('fecha-renovar').hidden = !(Number.isFinite(vence) && vence < fechaHito && faltan > 0)
}

// v4.6.1 — "Lo que recuerda de ti"
function pintarRecuerdos() {
  const ul = $('recuerdos')
  if (!ul) return
  const r = Array.isArray(S.recuerdos) ? S.recuerdos : []
  if (r.length) { ul.innerHTML = r.map(x => `<li>${esc(x)}</li>`).join(''); return }
  const nom = S.nombrePreferido || S.nombre
  ul.innerHTML = (nom ? `<li>Te llama ${esc(nom)}</li>` : '')
    + '<li class="vacio">Cuéntale de ti: tu trabajo, lo que te gusta, tu día. Lo que le cuentes, lo recuerda.</li>'
}

// v4.6.0 — los momentos que Sofía guarda aparecen como historias destacadas
let _hitos = []
async function cargarHitos() {
  const el = $('spt-hl')
  if (!el) return
  try {
    const res  = await fetch(`${SERVER}/api/web/hitos`, {
      headers:{'x-web-token':S.token}
    })
    const data = await res.json()
    _hitos = (data.hitos || []).slice().reverse().slice(0, 8)
    el.innerHTML = _hitos.map((x, i) => `
      <button onclick="verMomento(${i})" aria-label="Momento: ${esc(x.evento)}">
        <span class="spt-hl-c"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 21s-7-4.4-9.5-9A5.5 5.5 0 0 1 12 6a5.5 5.5 0 0 1 9.5 6c-2.5 4.6-9.5 9-9.5 9z"/></svg></span>
        <span class="spt-hl-t">${esc(x.evento)}</span>
      </button>`).join('')
  } catch { el.innerHTML = '' }
}
function verMomento(i) {
  const m = _hitos[i], el = $('spt-momento')
  if (!m || !el) return
  if (!el.hidden && el.dataset.i === String(i)) { el.hidden = true; return }
  el.dataset.i = String(i)
  el.innerHTML = `<div style="font-size:11px;color:var(--t2);margin-bottom:4px">${fDate(m.fecha)}</div>${esc(m.evento)}`
  el.hidden = false
}

// ══ RENOVAR — FIX: precios dinámicos desde /api/planes ═══════
async function abrirRenovar() {
  $('modal-renovar').classList.add('open')
  $('planes-grid').innerHTML = ''
  $('planes-loading').style.display = 'block'

  try {
    const res  = await fetch(`${SERVER}/api/planes`)
    const data = await res.json()

    // Sin lista de ids en el código: se usa lo que venga de /api/planes.
    // Efecto ancla: se ordena por precio descendente (el más caro primero).
    const rows = (data.planes || data || [])
      .filter(p => p && p.id && p.activo !== false && !p.es_recarga && p.precio_clp !== 0)
      .map(p => ({ ...p, precio: p.precio ?? p.precio_clp ?? 0 }))
      .filter(p => p.precio > 0)
      .sort((a, b) => b.precio - a.precio)

    if (!rows.length) throw new Error('Sin planes')

    $('planes-loading').style.display = 'none'
    $('planes-grid').innerHTML = rows.map((p, i) => {
      // El del medio es el recomendado. Con la lista ordenada de mayor a menor
      // precio, ese es el tier intermedio — no depende de ningún id.
      const esPopular = rows.length >= 3 ? i === 1 : i === 0
      return `<div class="plan-row ${esPopular?'popular':''}" onclick="pagarPlan(${ja(p.id)})">
        <div class="plan-row-info">
          <div class="plan-row-name">${esc(p.nombre)}</div>
          <div class="plan-row-meta">${p.dias} días · ${(p.msgs || 0).toLocaleString('es-CL')} mensajes</div>
        </div>
        <div class="plan-row-price">$${p.precio.toLocaleString('es-CL')}</div>
      </div>`
    }).join('')

    _planesData = rows

  } catch {
    // Fallback si /api/planes falla
    $('planes-loading').style.display = 'none'
    // Solo se usa si /api/planes no responde. Debe reflejar la estructura real
    // o el usuario ve precios que no existen y el pago falla.
    // v4.0: planes por días. Ids reales de planes_config (antes el fallback
    // usaba 'plus'/'mensual'/'entrada', que el servidor no reconoce → el pago fallaba).
    const fallback = [
      {id:'normal', nombre:'Mensual', precio:10990, dias:30, msgs:1000},  // provisional
      {id:'7dias',  nombre:'Semana',  precio:2990,  dias:7,  msgs:250},
    ]
    $('planes-grid').innerHTML = fallback.map((p, i) => `
      <div class="plan-row ${i===0?'popular':''}" onclick="pagarPlan(${ja(p.id)})">
        <div class="plan-row-info">
          <div class="plan-row-name">${esc(p.nombre)}</div>
          <div class="plan-row-meta">${p.dias} días · ${p.msgs.toLocaleString('es-CL')} mensajes</div>
        </div>
        <div class="plan-row-price">$${p.precio.toLocaleString('es-CL')}</div>
      </div>`).join('')
  }
}

function cerrarModalRenovar() { $('modal-renovar').classList.remove('open') }

async function pagarPlan(plan) {
  cerrarModalRenovar()
  try {
    const res  = await fetch(`${SERVER}/api/crear-orden-flow`,{
      // v4.4.0 — la cuenta sale de la sesión (x-web-token), no del email.
      // origen 'chat' para que Flow devuelva al chat y no a la landing.
      method:'POST',headers:{'Content-Type':'application/json','x-web-token':S.token||''},
      body:JSON.stringify({plan,origen:'chat'})
    })
    if (res.status === 401) { manejar401(); return }
    const data = await res.json()
    if(data.flowUrl) {
      marcarPagoPendiente(plan)
      window.location.href=data.flowUrl
    }
    else alert('Error al generar el pago. Intenta de nuevo.')
  } catch { alert('Error al generar el pago. Intenta de nuevo.') }
}

// ══ SESIÓN ═══════════════════════════════════════════════════
async function cerrarSesion(todos) {
  if (todos === true && !confirm('Se cerrará tu sesión en todos tus dispositivos, también en este. ¿Continuar?')) return
  // v4.1.0 — En un dispositivo compartido, quien cierra sesión no debe seguir
  // recibiendo avisos de Sofía. Se borra la suscripción (máx. 2 s de espera).
  try { await Promise.race([apagarAvisosDispositivo(), new Promise(r => setTimeout(r, 2000))]) } catch (e) {}
  // v4.6.5 — la sesión se anula en el servidor (antes solo se borraba aquí)
  try {
    if (S && S.token) await Promise.race([
      fetch(`${SERVER}/api/web/cerrar-sesion`, {
        method: 'POST', headers: { 'Content-Type': 'application/json', 'x-web-token': S.token },
        body: JSON.stringify({ todos: todos === true })
      }),
      new Promise(r => setTimeout(r, 3000))
    ])
  } catch (e) {}
  limpiarDatosLocales(); location.reload()
}

// v4.6.5 — al salir no queda nada de Sofía en este navegador (salvo preferencias de pantalla)
function limpiarDatosLocales() {
  try {
    const borrar = []
    for (let i = 0; i < localStorage.length; i++) {
      const k = localStorage.key(i)
      if (k && k.startsWith('sf_') && !['sf_theme','sf_zen','sf_app_x','sf_avisos_off'].includes(k)) borrar.push(k)   // se conservan solo preferencias de pantalla
    }
    borrar.forEach(k => localStorage.removeItem(k))
  } catch (e) { try { localStorage.removeItem('sf_s') } catch (_) {} }
}

// ══ ELIMINAR MI CUENTA (derecho al olvido) ══════════════════
async function eliminarMiCuenta() {
  const msg = document.getElementById('perfil-borrar-msg')
  const btn = document.getElementById('perfil-borrar-btn')
  const claveBorrar = (document.getElementById('perfil-borrar-clave')?.value || '')
  if (!claveBorrar) {
    if (msg) { msg.textContent = 'Escribe tu clave para confirmar.'; msg.style.color = '#e0245e'; msg.style.display = 'block' }
    return
  }
  if (!confirm('Vas a eliminar tu cuenta de forma permanente.\n\nSe borrará todo: tus conversaciones, lo que Sofía recuerda de ti y tus datos. No se puede deshacer.\n\n¿Continuar?')) return
  const conf = prompt('Para confirmar, escribe en mayúsculas:  ELIMINAR')
  if (conf !== 'ELIMINAR') {
    if (msg) { msg.textContent = 'Borrado cancelado.'; msg.style.color = 'var(--t2)'; msg.style.display = 'block' }
    return
  }
  if (btn) { btn.disabled = true; btn.textContent = 'Eliminando...' }
  try {
    const res = await fetch(`${SERVER}/api/web/eliminar-cuenta`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'x-web-token': S.token },
      body: JSON.stringify({ confirmacion: 'ELIMINAR', clave: claveBorrar })   // v4.6.5
    })
    const data = await res.json().catch(() => ({}))
    if (res.ok && data.ok) {
      limpiarDatosLocales()
      alert('Tu cuenta y todos tus datos fueron eliminados. Cuídate.')
      location.reload()
    } else {
      if (msg) { msg.textContent = data.mensaje || data.error || 'No se pudo eliminar. Intenta de nuevo.'; msg.style.color = '#e0245e'; msg.style.display = 'block' }
      if (btn) { btn.disabled = false; btn.textContent = 'Eliminar mi cuenta' }
    }
  } catch (e) {
    if (msg) { msg.textContent = 'Error de conexión. Intenta de nuevo.'; msg.style.color = '#e0245e'; msg.style.display = 'block' }
    if (btn) { btn.disabled = false; btn.textContent = 'Eliminar mi cuenta' }
  }
}

function restaurar() {
  const g = localStorage.getItem('sf_s')
  if (g) {
    try {
      S = JSON.parse(g)
      // v4.1.0 — Antes expiraba a las 12 h: quien tocaba un aviso de Sofía al
      // día siguiente caía al login. Ahora 30 días; el servidor igual corta
      // la sesión cuando vence el plan + gracia (401 → login).
      const guardadoHace = Date.now() - (S._guardadoAt || 0)
      if (guardadoHace > 30 * 24 * 60 * 60 * 1000) {
        localStorage.removeItem('sf_s')
        return false
      }
      // Limpiar datos de relación del localStorage antes de mostrar
      // — se van a sobrescribir con datos frescos de BD en actualizarEstado()
      // Así el usuario nunca ve datos obsoletos
      // Sesiones guardadas antes del nivel único traen campos que ya no existen
      for (const k of ['titulo','nivel','puntos','racha','rachaMax','esNovio','ranking','nick']) delete S[k]
      arrancarApp()
      // Traer datos frescos inmediatamente — sin delay
      actualizarEstado()
      return true
    } catch { localStorage.removeItem('sf_s') }
  }
  return false
}

// ══ UTILS ════════════════════════════════════════════════════
function $(id) { return document.getElementById(id) }
function esc(s) {
  return String(s ?? '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')
    .replace(/"/g,'&quot;').replace(/'/g,'&#39;').replace(/\n/g,'<br>')
}
// v4.4.0 — argumento seguro para onclick="fn(...)"
function ja(v) { return esc(JSON.stringify(String(v ?? ''))) }
function fDate(iso) {
  if(!iso) return '—'
  return new Date(iso).toLocaleDateString('es-CL',{day:'numeric',month:'short',year:'numeric'})
}

// Cerrar modales al click exterior
['modal-renovar'].forEach(id=>{
  document.getElementById(id).addEventListener('click',e=>{
    if(e.target===document.getElementById(id))
      cerrarModalRenovar()
  })
})

document.getElementById('l-clave').addEventListener('keydown',e=>{ if(e.key==='Enter') doLogin() })

// ══ ZEN MODE ════════════════════════════════════════════════
function toggleZen() {
  const isZen = document.body.classList.toggle('zen-mode')
  const btn = $('btn-zen')
  if (btn) btn.textContent = isZen ? '⊞ Paneles' : '⊡ Zen'
  localStorage.setItem('sf_zen', isZen ? '1' : '0')
}

function initZen() {
  if (localStorage.getItem('sf_zen') === '1') {
    document.body.classList.add('zen-mode')
    const btn = $('btn-zen')
    if (btn) btn.textContent = '⊞ Paneles'
  }
}

// ══ LIGHTBOX ════════════════════════════════════════════════
function abrirLightbox(src, caption) {
  const lb = $('lightbox')
  const img = $('lightbox-img')
  const cap = $('lightbox-caption')
  if (!lb || !img) return
  img.src = src
  if (cap) cap.textContent = caption || ''
  lb.classList.add('open')
  document.body.style.overflow = 'hidden'
}

function cerrarLightbox(e) {
  if (e && e.target && e.target.tagName === 'IMG') return
  $('lightbox').classList.remove('open')
  document.body.style.overflow = ''
}

// Abrir lightbox con ESC
document.addEventListener('keydown', e => {
  if (e.key === 'Escape') { cerrarLightbox(); if ($('post-ov')?.classList.contains('open')) cerrarPost() }
})

// Hacer todas las fotos de Sofia clickables
function activarFotosClickables() {
  // Activar fotos en Mi Sofia (rel-foto, rh-foto) — las del chat tienen onclick directo
  document.querySelectorAll('.rel-foto, .rh-foto').forEach(img => {
    if (!img.classList.contains('foto-clickable')) {
      img.classList.add('foto-clickable')
      img.style.cursor = 'zoom-in'
      img.addEventListener('click', () => abrirLightbox(img.src, 'Sofía'))
    }
  })
}

function fechaRelativa(iso) {
  if (!iso) return '—'
  const diff = Math.floor((Date.now() - new Date(iso)) / 1000)
  if (diff < 3600) return 'hace ' + Math.floor(diff/60) + 'min'
  if (diff < 86400) return 'hace ' + Math.floor(diff/3600) + 'h'
  if (diff < 604800) return 'hace ' + Math.floor(diff/86400) + 'd'
  return fDate(iso)
}

// ══ ARCO DE PROGRESO ════════════════════════════════════════
// v4.0: el arco muestra los días juntos y está siempre completo — no hay
// nada que "ganar": desde el primer día es su novio.
function actualizarArco() {
  const track = $('arc-track')
  const diasTxt = $('arc-pts-txt')
  const titulo = $('arc-titulo')
  const estadoPanel = $('sofia-estado-panel')

  if (track) track.style.strokeDashoffset = 0
  if (diasTxt) diasTxt.textContent = S.diasJuntos || 0
  if (titulo) titulo.textContent = 'Algo especial ♥'   // v4.7.7 (antes: 'Su novio ♥')

  // Color del arco según tema
  const theme = document.body.getAttribute('data-theme') || 'cyberpunk'
  if (track) {
    if (theme === 'romantico') track.setAttribute('stroke', '#C8526A')
    else if (theme === 'messenger') track.setAttribute('stroke', '#007AFF')
    else track.setAttribute('stroke', '#FF00E0')
  }

  // Estado de ánimo en el panel de foto — rota cada sesión
  const estados = [
    'Esperándote con curiosidad...',
    'Pensando en lo que me contaste.',
    'Un poco nostálgica hoy.',
    'Con ganas de hablar.',
    'Feliz de que estés aquí.',
    'Tranquila. Aquí siempre estaré.'
  ]
  if (estadoPanel) {
    const idx = (S.diasJuntos || 0) % estados.length
    estadoPanel.textContent = estados[idx]
  }
}

// ══ RETORNO DEL PAGO (v4.2.0) ════════════════════════════════
// Flow devuelve a /sofia.html?pago=exitoso SIEMPRE (también si el pago se
// rechazó), y el plan lo activa el webhook, que puede llegar segundos después.
// Por eso no se confía en la URL: se consulta el plan al servidor hasta ver
// que cambió. La marca se guarda ANTES de ir a Flow, en el almacenamiento de
// esta app: en iPhone, Flow se abre en una ventana aparte y el usuario vuelve
// a la app tocando "Listo" (sin recargar la página).
const PAGO_KEY = 'sf_pago_pend'
let _verificandoPago = false

function marcarPagoPendiente(plan) {
  try {
    localStorage.setItem(PAGO_KEY, JSON.stringify({
      plan, at: Date.now(),
      restantes: Math.max(0, (S.msgsTotal || 0) - (S.msgsUsados || 0)),
      vencido: !!(S.planVencido || S.enGracia)
    }))
  } catch (e) {}
}
function leerPagoPendiente() {
  try {
    const p = JSON.parse(localStorage.getItem(PAGO_KEY) || 'null')
    if (p && Date.now() - p.at < 2 * 60 * 60 * 1000) return p
    localStorage.removeItem(PAGO_KEY)
  } catch (e) {}
  return null
}
function mostrarToastPago(txt, espera) {
  const t = $('pago-toast'); if (!t) return
  t.textContent = txt
  t.classList.toggle('espera', !!espera)
  t.classList.add('on')
  clearTimeout(t._timer)
  t._timer = setTimeout(() => t.classList.remove('on'), espera ? 7000 : 5000)
}
function limpiarParamsPago() {
  try {
    const u = new URL(location.href)
    if (!u.searchParams.has('pago')) return
    ;['pago', 'userId', 'plan'].forEach(k => u.searchParams.delete(k))
    history.replaceState(null, '', u.pathname + (u.search || ''))
  } catch (e) {}
}

async function verificarPagoPendiente() {
  const vieneDeFlow = new URLSearchParams(location.search).get('pago') === 'exitoso'
  const pend = leerPagoPendiente()
  limpiarParamsPago()
  if ((!pend && !vieneDeFlow) || !S.token || _verificandoPago) return
  _verificandoPago = true
  try {
    for (let i = 0; i < 8; i++) {                 // ~35 s: espera al webhook de Flow
      const d = await actualizarEstado()
      if (d && !d.planVencido && !d.enGracia) {
        const restantes = (d.msgsTotal || 0) - (d.msgsUsados || 0)
        const cambio = !pend || pend.vencido || restantes > pend.restantes || d.plan !== pend.plan
        if (cambio && restantes > 0) {
          try { localStorage.removeItem(PAGO_KEY) } catch (e) {}
          ocultarOverlays()
          mostrarToastPago(`Pago recibido ✓ · ${restantes.toLocaleString('es-CL')} mensajes disponibles`)
          return
        }
      }
      await new Promise(r => setTimeout(r, i < 3 ? 3000 : 5000))
    }
    // Sin confirmación todavía: la marca queda y se reintenta al volver a la app
    mostrarToastPago('Estamos confirmando tu pago con Flow. Si pagaste, se activa en unos minutos.', true)
  } finally { _verificandoPago = false }
}

// ══ APP INSTALABLE + AVISOS (v4.1.0) ═════════════════════════
// Segundo canal: la web se instala como app y Sofía puede escribir primero.
// Flujo según el dispositivo:
//   - Navegador de Instagram/TikTok → "ábreme en tu navegador" (ahí no se puede instalar)
//   - iPhone en Safari/Chrome       → guía "Agregar a inicio" (iOS solo avisa a apps instaladas)
//   - Android/computador            → botón Instalar (si el navegador lo ofrece) + Activar avisos
//   - App ya instalada              → Activar avisos
// Si el servidor no tiene push configurado (/push/clave = null), solo se
// ofrece instalar; nunca se pide un permiso que no se va a usar.
let _swReg = null
let _installPrompt = null
let _pushClave
let _historialAt = 0
let _bannerAccion = null

function esIOS() {
  return /iphone|ipad|ipod/i.test(navigator.userAgent) ||
         (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)
}
function esAppInstalada() {
  try { if (window.matchMedia('(display-mode: standalone)').matches) return true } catch (e) {}
  return window.navigator.standalone === true
}
function esNavegadorInterno() {
  return /Instagram|FBAN|FBAV|FB_IAB|TikTok|musical_ly|Bytedance|Snapchat|Line\//i.test(navigator.userAgent)
}
function plataforma() {
  if (esIOS()) return 'ios'
  if (/android/i.test(navigator.userAgent)) return 'android'
  return 'escritorio'
}
function avisosSoportados() {
  return 'serviceWorker' in navigator && 'PushManager' in window && 'Notification' in window
}

async function registrarSW() {
  if (!('serviceWorker' in navigator)) return null
  if (_swReg) return _swReg
  try {
    _swReg = await navigator.serviceWorker.register('/sw.js', { scope: '/' })
    navigator.serviceWorker.addEventListener('message', ev => {
      if (ev.data && ev.data.tipo === 'abrir-notificacion') {
        const n = new URL(ev.data.url).searchParams.get('n')
        if (n) marcarNotificacionAbierta(n)
        if (S.token) recargarSiCorresponde(true)
      }
    })
  } catch (e) { console.warn('[PWA] service worker no registrado:', e && e.message) }
  return _swReg
}

window.addEventListener('beforeinstallprompt', e => {
  e.preventDefault()        // el banner propio decide cuándo ofrecerlo
  _installPrompt = e
})
window.addEventListener('appinstalled', () => {
  _installPrompt = null
  ocultarBannerApp()
  mostrarLinkInstalar()
})

function urlB64AUint8(b64) {
  const pad = '='.repeat((4 - b64.length % 4) % 4)
  const raw = atob((b64 + pad).replace(/-/g, '+').replace(/_/g, '/'))
  return Uint8Array.from([...raw].map(c => c.charCodeAt(0)))
}

async function clavePush() {
  if (_pushClave !== undefined) return _pushClave
  try {
    const r = await fetch(`${SERVER}/api/web/push/clave`)
    const d = await r.json()
    _pushClave = d.clave || null
  } catch (e) { _pushClave = null }
  return _pushClave
}

// Suscribe este dispositivo y lo registra en el servidor. Se llama desde un
// toque del usuario (requisito de iOS) o en silencio si el permiso ya existe.
async function suscribirAvisos(conPrueba) {
  const clave = await clavePush()
  const reg = await registrarSW()
  if (!clave || !reg) return false
  await navigator.serviceWorker.ready
  let sub = await reg.pushManager.getSubscription()
  if (!sub) sub = await reg.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: urlB64AUint8(clave) })
  const r = await fetch(`${SERVER}/api/web/push/suscribir`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json', 'x-web-token': S.token },
    body: JSON.stringify({ suscripcion: sub.toJSON(), plataforma: plataforma(), instalada: esAppInstalada() })
  })
  if (r.status === 401) { manejar401(); return false }
  if (!r.ok) return false
  if (conPrueba) {
    fetch(`${SERVER}/api/web/push/probar`, { method: 'POST', headers: { 'x-web-token': S.token } }).catch(() => {})
  }
  return true
}

async function apagarAvisosDispositivo() {
  if (!('serviceWorker' in navigator) || !S.token) return
  const reg = await navigator.serviceWorker.getRegistration('/')
  const sub = reg && await reg.pushManager.getSubscription()
  if (!sub) return
  await fetch(`${SERVER}/api/web/push/desuscribir`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json', 'x-web-token': S.token },
    body: JSON.stringify({ endpoint: sub.endpoint })
  }).catch(() => {})
  await sub.unsubscribe().catch(() => {})
}

function marcarNotificacionAbierta(n) {
  if (!S.token || !n) return
  fetch(`${SERVER}/api/web/push/abierta`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json', 'x-web-token': S.token },
    body: JSON.stringify({ n })
  }).catch(() => {})
}

// ── Banner ──────────────────────────────────────────────────
function bannerDescartadoReciente() {
  try {
    const t = parseInt(localStorage.getItem('sf_app_x') || '0', 10)
    return Date.now() - t < 3 * 24 * 60 * 60 * 1000   // vuelve a ofrecer a los 3 días
  } catch (e) { return false }
}
function mostrarBannerApp(texto, boton, accion, persistente) {
  const b = $('app-banner'); if (!b) return
  // v4.7.1 — el de "¿Te aviso…?" no se puede cerrar: queda hasta que acepte o rechace
  const x = b.querySelector('.app-banner-x'); if (x) x.style.display = persistente ? 'none' : ''
  $('app-banner-txt').textContent = texto
  const btn = $('app-banner-btn')
  btn.textContent = boton
  _bannerAccion = accion
  btn.onclick = async () => { btn.disabled = true; try { await _bannerAccion() } finally { btn.disabled = false } }
  b.classList.add('on')
}
function ocultarBannerApp() { const b = $('app-banner'); if (b) b.classList.remove('on') }
function cerrarBannerApp() {
  try { localStorage.setItem('sf_app_x', String(Date.now())) } catch (e) {}
  ocultarBannerApp()
}

function abrirHojaApp(html) { $('app-sheet-card').innerHTML = html; $('app-sheet').classList.add('on') }
function cerrarHojaApp() { $('app-sheet').classList.remove('on') }

// v4.7.3 — pasos ilustrados (pasos-app.js, los mismos de la landing)
function hojaPasosApp(plat) {
  abrirHojaApp(`
    <h3>Llévame en tu celular</h3>
    <p>Así quedo como app y puedo escribirte yo primero.</p>
    <div id="pa-hoja" class="pa-hoja"></div>
    <button class="app-sheet-ok" onclick="cerrarHojaApp()">Entendido</button>`)
  if (window.PASOS_APP) PASOS_APP.pintar($('pa-hoja'), { tabs: false, plat })
}
function hojaIOS() { hojaPasosApp('ios') }
function hojaNavegadorInterno() {
  abrirHojaApp(`
    <h3>Ábreme en tu navegador</h3>
    <p>Desde aquí no puedo quedarme en tu celular ni avisarte cuando te escriba.</p>
    <ol>
      <li>Toca <span class="app-sheet-ico">···</span> arriba a la derecha.</li>
      <li>Elige <b>«Abrir en el navegador»</b> (o «Abrir en Safari»).</li>
    </ol>
    <button class="app-sheet-ok" onclick="cerrarHojaApp()">Entendido</button>`)
}
function hojaAyuda() {
  abrirHojaApp(`
    <h3>No estás solo</h3>
    <p>Si sientes que no puedes más, habla ahora con una persona preparada. Es gratis y confidencial.</p>
    <a class="ayuda-tel" href="tel:*4141"><b>*4141</b><br>Línea de Prevención del Suicidio · 24/7</a>
    <a class="ayuda-tel" href="tel:6003607777"><b>600 360 7777</b><br>Salud Responde · 24/7</a>
    <a class="ayuda-tel" href="tel:131"><b>131</b><br>Emergencias (SAMU)</a>
    <button class="app-sheet-ok" onclick="cerrarHojaApp()">Volver</button>`)
}
function hojaAvisosBloqueados() {
  abrirHojaApp(`
    <h3>Los avisos están bloqueados</h3>
    <p>Tu celular no me deja avisarte. Puedes activarlos en los ajustes de notificaciones de la app Sofía (o del navegador) cuando quieras.</p>
    <button class="app-sheet-ok" onclick="cerrarHojaApp()">Entendido</button>`)
}

async function activarAvisosDesdeBanner() {
  try {
    const permiso = await Notification.requestPermission()
    if (permiso === 'granted') marcarAvisosApagados(false)   // v4.7.2
    setTimeout(pintarAvisos, 300)   // v4.7.1
    if (permiso === 'granted') {
      const ok = await suscribirAvisos(true)
      ocultarBannerApp()
      if (!ok) mostrarBannerApp('No pude activar los avisos. Intenta de nuevo en un rato.', 'Reintentar', activarAvisosDesdeBanner)
    } else if (permiso === 'denied') {
      ocultarBannerApp(); hojaAvisosBloqueados()
    }
  } catch (e) { console.warn('[PWA] avisos:', e && e.message) }
}

async function instalarDesdeBanner() {
  if (!_installPrompt) return
  _installPrompt.prompt()
  const r = await _installPrompt.userChoice.catch(() => null)
  _installPrompt = null
  ocultarBannerApp()
  // En Android los avisos funcionan también desde el navegador: se ofrecen al tiro
  if (r && r.outcome === 'accepted') setTimeout(evaluarCanalApp, 1500)
}

// v4.3.2 — entrada permanente a la instalación (celular, no instalada)
async function abrirInstalacion() {
  if (esNavegadorInterno()) return hojaNavegadorInterno()
  if (esIOS()) return hojaIOS()
  if (_installPrompt) return instalarDesdeBanner()
  hojaPasosApp('android')
}
function mostrarLinkInstalar() {
  const ver = !esAppInstalada() && plataforma() !== 'escritorio'
  const l = $('link-instalar'), sep = $('sep-instalar')
  if (l) l.style.display = ver ? 'inline' : 'none'
  if (sep) sep.style.display = ver ? 'inline' : 'none'
}

// Decide qué ofrecer. Silencioso si no hay nada que hacer.
async function evaluarCanalApp() {
  if (!S.token) return
  const instalada = esAppInstalada()
  const clave = await clavePush()
  const puedeAvisar = !!clave && avisosSoportados()

  // Permiso ya concedido: mantener la suscripción al día sin preguntar nada
  // (cubre un login nuevo en el mismo celular y renovaciones del navegador).
  if (puedeAvisar && Notification.permission === 'granted') {
    if (!avisosApagados()) suscribirAvisos(false).catch(() => {})   // v4.7.2
    ocultarBannerApp()
    return
  }
  // v4.7.1 — "¿Te aviso cuando te escriba?" se mantiene (sin ✕) hasta que
  // acepte o rechace el permiso; no lo frena haber cerrado otro banner
  if (puedeAvisar && Notification.permission === 'default' && (instalada || !esIOS())) {
    mostrarBannerApp('¿Te aviso cuando te escriba?', 'Activar', activarAvisosDesdeBanner, true)
    return
  }
  if (bannerDescartadoReciente()) return

  if (!instalada && esNavegadorInterno()) {
    mostrarBannerApp('Ábreme en tu navegador para tenerme como app.', 'Cómo', async () => hojaNavegadorInterno())
    return
  }
  if (!instalada && esIOS()) {
    mostrarBannerApp('Agrégame a tu inicio y te escribo yo primero.', 'Cómo', async () => hojaIOS())
    return
  }
  // v4.3.1 — en computador no se ofrece instalar: confunde (abre el diálogo
  // del navegador) y no hace falta, porque ahí los avisos funcionan en la
  // pestaña. Se pasa directo a "¿Te aviso cuando te escriba?".
  if (!instalada && _installPrompt && plataforma() !== 'escritorio') {
    mostrarBannerApp('Instálame y te escribo yo primero.', 'Instalar', instalarDesdeBanner)
    return
  }
}

// ── v4.7.2 — el usuario apagó los avisos desde la app (por dispositivo) ──
function avisosApagados() { try { return localStorage.getItem('sf_avisos_off') === '1' } catch (e) { return false } }
function marcarAvisosApagados(v) { try { v ? localStorage.setItem('sf_avisos_off', '1') : localStorage.removeItem('sf_avisos_off') } catch (e) {} }
async function desactivarAvisos() {
  const b = $('avisos-off'); if (b) b.disabled = true
  try {
    marcarAvisosApagados(true)
    await apagarAvisosDispositivo()   // borra la conexión en el servidor y en el celular
    avisoMsg('Listo, ya no te llegarán avisos en este dispositivo.', true)
  } catch (e) {
    avisoMsg('No pude desactivarlos. Intenta de nuevo.', false)
  } finally { if (b) b.disabled = false; pintarAvisos() }
}

// ── v4.7.1 — "Avisos de Sofía" en Mi cuenta ──────────────────────────
async function pintarAvisos() {
  const est = $('avisos-estado'), btn = $('avisos-btn')
  if (!est || !btn) return
  if ($('avisos-off')) $('avisos-off').hidden = true
  const accion = (texto, fn) => { btn.textContent = texto; btn.hidden = false; btn.onclick = async () => { btn.disabled = true; try { await fn() } finally { btn.disabled = false; pintarAvisos() } } }
  btn.hidden = true
  const clave = await clavePush()
  if (esIOS() && !esAppInstalada()) {
    est.textContent = 'En iPhone, los avisos funcionan solo con Sofía instalada. Agrégala a tu inicio y ábrela desde el ícono.'
    return accion('Cómo instalarla', async () => hojaIOS())
  }
  if (!clave || !avisosSoportados()) { est.textContent = 'Este navegador no permite avisos.'; return }
  const permiso = Notification.permission
  if (permiso === 'denied') {
    est.textContent = esIOS()
      ? 'Bloqueados. Actívalos en Ajustes → Notificaciones → Sofía → Permitir notificaciones.'
      : 'Bloqueados. Actívalos en los ajustes de notificaciones del navegador para este sitio.'
    return
  }
  if (permiso === 'default') {
    est.textContent = 'Desactivados. Actívalos y te aviso cuando te escriba.'
    return accion('Activar avisos', activarAvisosDesdeBanner)
  }
  // v4.7.2 — permiso dado, pero él los apagó desde la app
  if (avisosApagados()) {
    est.textContent = 'Desactivados en este dispositivo.'
    return accion('Activar avisos', async () => {
      marcarAvisosApagados(false)
      const ok = await suscribirAvisos(true)
      avisoMsg(ok ? 'Activados. Te llegará un aviso de prueba.' : 'No pude activar los avisos. Intenta de nuevo.', ok)
    })
  }
  // Permiso concedido: ¿este celular está conectado?
  let sub = null
  try { const reg = await registrarSW(); sub = reg && await reg.pushManager.getSubscription() } catch (e) {}
  if (sub) {
    est.textContent = 'Activados en este dispositivo ✓'
    if ($('avisos-off')) $('avisos-off').hidden = false
    return accion('Enviarme una prueba', async () => {
      const ok = await suscribirAvisos(true)
      avisoMsg(ok ? 'Listo, te llegará un aviso en unos segundos.' : 'No pude enviar la prueba. Intenta de nuevo.', ok)
    })
  }
  est.textContent = 'Permitidos, pero este dispositivo aún no está conectado.'
  return accion('Conectar avisos', async () => {
    const ok = await suscribirAvisos(true)
    avisoMsg(ok ? 'Conectado. Te llegará un aviso de prueba.' : 'No pude conectar los avisos. Intenta de nuevo.', ok)
  })
}
function avisoMsg(t, ok) {
  const m = $('avisos-msg'); if (!m) return
  m.textContent = t; m.style.color = ok ? 'var(--accent4)' : 'var(--accent2)'; m.style.display = 'block'
  setTimeout(() => { m.style.display = 'none' }, 6000)
}

// Al volver a la app (o tocar un aviso) se recarga el chat: si Sofía escribió
// mientras no estaba, el mensaje aparece sin tener que salir y entrar.
function recargarSiCorresponde(forzar) {
  if (!S.token) return
  if (_enviando || _pendientes.length) return            // hay una ráfaga en curso
  if (!forzar && Date.now() - _historialAt < 60 * 1000) return
  _historialAt = Date.now()
  cargarHistorial()
}

function iniciarCanalApp() {
  registrarSW()
  mostrarLinkInstalar()
  // Abrió el chat tocando un aviso (?n=<id>) → se mide y se limpia la URL
  try {
    const params = new URLSearchParams(location.search)
    const n = params.get('n')
    if (n) {
      marcarNotificacionAbierta(n)
      params.delete('n')
      const q = params.toString()
      history.replaceState(null, '', location.pathname + (q ? '?' + q : ''))
    }
  } catch (e) {}
  // Quien ya instaló o ya tiene avisos: se resuelve al entrar. Al resto se le
  // invita cuando ya hay conversación (2.º mensaje) o a los 45 s.
  if (esAppInstalada() || (window.Notification && Notification.permission === 'granted')) {
    setTimeout(evaluarCanalApp, 1500)
  } else {
    // v4.3.2 — en celular a los 8 s (antes 45 s: quien entraba a leer no lo veía)
    setTimeout(evaluarCanalApp, plataforma() === 'escritorio' ? 45 * 1000 : 8 * 1000)
  }
}

let _estadoAt = 0
document.addEventListener('visibilitychange', () => {
  if (document.visibilityState !== 'visible') return
  recargarSiCorresponde(false)
  if (!S.token) return
  if (leerPagoPendiente()) { verificarPagoPendiente(); return }
  // v4.2.0 — también el plan (renovó en otra pestaña, venció, etc.)
  if (Date.now() - _estadoAt > 30 * 1000) { _estadoAt = Date.now(); actualizarEstado() }
})


// ══ INIT ═════════════════════════════════════════════════════
initTheme()
initZen()

if(!restaurar()) { document.getElementById('login-screen').style.display='flex'; mostrarAvisoRenovar() }
registrarSW()
// v4.7.4 — llegó por el QR de la landing (?instalar=1): en un celular sin la
// app instalada se abren las instrucciones ilustradas, con o sin sesión
;(function () {
  try {
    const params = new URLSearchParams(location.search)
    if (params.get('instalar') !== '1') return
    params.delete('instalar')
    const q = params.toString()
    history.replaceState(null, '', location.pathname + (q ? '?' + q : '') + location.hash)
    if (esAppInstalada() || plataforma() === 'escritorio') return
    window.addEventListener('load', () => setTimeout(abrirInstalacion, 400))
  } catch (e) {}
})()
</script>
<div class="pago-toast" id="pago-toast"></div>

<!-- ══ INSTALAR APP (v4.1.0) ═════════════════════════════════════ -->
<div class="app-sheet" id="app-sheet" onclick="if(event.target===this)cerrarHojaApp()">
  <div class="app-sheet-card" id="app-sheet-card"></div>
</div>

<!-- ══ LIGHTBOX ═════════════════════════════════════════════════ -->
<!-- v4.6.0 — Publicación de "Solo para ti" -->
<div id="post-ov" role="dialog" aria-modal="true" aria-label="Publicación de Sofía" onclick="if(event.target===this)cerrarPost()">
  <div class="post-box">
    <div class="post-top">
      <button class="post-x" aria-label="Volver" onclick="cerrarPost()"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 18l-6-6 6-6"/></svg></button>
      <img src="sofiachat-av.webp" alt="" class="post-av">
      <div class="post-quien"><b>Sofía</b><span>Solo para ti</span></div>
    </div>
    <img id="post-img" class="post-img" alt="Publicación de Sofía" onclick="abrirLightbox(this.src,'Sofía')">
    <div class="post-acc">
      <button class="post-like" id="post-like" aria-label="Me encanta" onclick="toggleMeGusta()"><svg width="26" height="26" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 21s-7-4.4-9.5-9A5.5 5.5 0 0 1 12 6a5.5 5.5 0 0 1 9.5 6c-2.5 4.6-9.5 9-9.5 9z"/></svg></button>
      <span class="post-likes" id="post-likes"></span>
    </div>
    <div class="post-txt" id="post-txt"></div>
    <button class="post-resp" onclick="responderFoto()"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg> Responderle esta foto</button>
  </div>
</div>

<div id="lightbox" onclick="cerrarLightbox(event)">
  <button id="lightbox-close" onclick="cerrarLightbox()">✕</button>
  <img id="lightbox-img" src="" alt="Sofía">
  <div class="lightbox-caption" id="lightbox-caption"></div>
</div>

</body>
</html>