/* Sofía — estilos de la app principal (v13.48).
   Salieron del monolito small_talk_simulator.html tal cual, en el mismo orden
   (después de escritorio.css, como estaban): −818 líneas en el archivo grande. */
:root {
  --bg:#FAF7F2; --surface:#FFFFFF; --surface2:#F3EEE5; --surface3:#EAE2D6;
  --accent:#6366F1; --accent2:#4F46E5; --accent-dim:rgba(99,102,241,0.12);
  --text:#1F2430; --text-muted:#55606F; --text-dim:#94a0b0;
  --green:#059669; --blue:#0284C7; --red:#DC2626;
  --border:rgba(31,36,48,0.10); --border-accent:rgba(99,102,241,0.30);
  --radius:16px; --radius-sm:10px;
}
*{margin:0;padding:0;box-sizing:border-box;}
/* ANTI PULL-TO-REFRESH (v6.0): en el celular, deslizar el dedo hacia abajo
   recargaba la página y CORTABA la llamada. `overscroll-behavior-y: contain`
   desactiva ese gesto del navegador sin afectar el scroll normal del chat. */
html,body{overscroll-behavior-y:contain;}
body{background:var(--bg);color:var(--text);font-family:'Inter',sans-serif;font-size:15px;line-height:1.6;min-height:100vh;}
.screen{display:none;min-height:100vh;}
.screen.active{display:flex;flex-direction:column;}

#screen-welcome{align-items:center;justify-content:center;padding:40px 20px;
  background:radial-gradient(ellipse 80% 50% at 50% 0%,rgba(99,102,241,0.1) 0%,transparent 65%);}
.welcome-inner{max-width:480px;width:100%;text-align:center;}
.logo-badge{display:inline-flex;align-items:center;gap:8px;background:var(--accent-dim);border:1px solid var(--border-accent);border-radius:100px;padding:7px 18px;font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;letter-spacing:0.1em;color:var(--accent);text-transform:uppercase;margin-bottom:32px;}
.welcome-title{font-family:'Space Grotesk',sans-serif;font-size:clamp(36px,9vw,58px);font-weight:700;line-height:1.02;letter-spacing:-0.025em;margin-bottom:8px;}
.welcome-title .hi{color:var(--accent);display:block;}
.welcome-title .by-line{display:block;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);margin-top:10px;}
.welcome-title{margin-top:6px;}
.welcome-sub{color:var(--text-muted);font-size:15px;margin-bottom:32px;line-height:1.7;}
.welcome-sub strong{color:var(--text);font-weight:500;}

/* v12.8: .coach-card eliminada del todo (estaba oculta desde v6.2 — Sofía ya
   es el héroe). mount() es null-safe, así que borrar el nodo no rompe nada. */

.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:24px;}
.mode-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:16px;cursor:pointer;transition:all .2s;text-align:left;}
.mode-card:hover{border-color:var(--border-accent);transform:translateY(-1px);}
.mode-card.selected{border-color:var(--accent);background:var(--surface2);}
.mode-icon{font-size:24px;margin-bottom:8px;}
.mode-title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:14px;margin-bottom:3px;}
.mode-desc{color:var(--text-muted);font-size:11.5px;line-height:1.5;}
.mode-badge{display:inline-block;background:var(--accent-dim);color:var(--accent);font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:100px;margin-top:6px;}

.who-starts{display:none;gap:8px;margin-bottom:20px;}
.who-starts.show{display:flex;}
.who-btn{flex:1;padding:12px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);color:var(--text-muted);cursor:pointer;transition:all .2s;font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:600;text-align:center;}
.who-btn:hover{border-color:var(--border-accent);}
.who-btn.selected{border-color:var(--accent);background:var(--accent-dim);color:var(--accent);}

.section-label{font-family:'Space Grotesk',sans-serif;font-size:11.5px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:12px;text-align:left;display:flex;align-items:center;gap:8px;}
.section-label::after{content:'';flex:1;height:1.5px;background:linear-gradient(90deg,var(--border-accent),transparent);border-radius:2px;}
.scenario-grid{display:flex;flex-direction:column;gap:8px;margin-bottom:24px;}
.scenario-card{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 18px;cursor:pointer;transition:all 0.2s;text-align:left;position:relative;overflow:hidden;}
.scenario-card:hover{border-color:var(--border-accent);transform:translateY(-1px);}
.scenario-card.selected{border-color:var(--accent);background:var(--surface2);}
.sc-icon{font-size:20px;width:32px;text-align:center;flex-shrink:0;}
.sc-info{flex:1;}
.sc-name{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14px;margin-bottom:1px;}
.sc-desc{color:var(--text-muted);font-size:12px;}
.sc-arr{color:var(--text-dim);transition:all 0.2s;}
.scenario-card:hover .sc-arr,.scenario-card.selected .sc-arr{color:var(--accent);transform:translateX(3px);}

.btn-start{width:100%;padding:16px;background:var(--accent);color:white;border:none;border-radius:var(--radius);font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:700;cursor:pointer;transition:all 0.2s;}
.btn-start:hover{background:var(--accent2);transform:translateY(-2px);box-shadow:0 10px 28px rgba(99,102,241,0.35);}
.btn-start:disabled{opacity:0.35;cursor:not-allowed;transform:none;box-shadow:none;}

#screen-voice{flex-direction:column;height:100vh;overflow:hidden;}
.voice-header{position:relative;background:var(--surface);border-bottom:1px solid var(--border);padding:14px 20px;display:flex;align-items:center;gap:14px;flex-shrink:0;}
.back-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:22px;padding:2px 6px;transition:color 0.2s;line-height:1;}
.back-btn:hover{color:var(--text);}
.hdr-ava{width:40px;height:40px;border-radius:50%;background:transparent;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:box-shadow 0.3s;overflow:hidden;}
.hdr-ava.speaking{box-shadow:0 0 0 3px var(--accent),0 0 0 6px var(--accent-dim);animation:avaPulse 1.5s infinite;}
@keyframes avaPulse{0%,100%{box-shadow:0 0 0 3px var(--accent),0 0 0 6px var(--accent-dim);}50%{box-shadow:0 0 0 4px var(--accent),0 0 0 12px rgba(99,102,241,0.04);}}
.hdr-info{flex:1;min-width:0;}   /* min-width:0 = deja que el texto se recorte en vez de empujar */
.hdr-name{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hdr-status{font-size:12px;display:flex;align-items:center;gap:5px;white-space:nowrap;overflow:hidden;}
.hdr-status span{overflow:hidden;text-overflow:ellipsis;}
.hdr-status.online{color:var(--green);}
.hdr-status.connecting{color:var(--accent);}
.hdr-status.error{color:var(--red);}
.hdr-dot{width:6px;height:6px;border-radius:50%;display:inline-block;background:currentColor;}
.hdr-dot.blink{animation:blink 1s infinite;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:0.2;}}
.hdr-pill{background:var(--accent-dim);border:1px solid var(--border-accent);color:var(--accent);font-size:11px;font-weight:600;padding:5px 12px;border-radius:100px;font-family:'Space Grotesk',sans-serif;}
/* Velocidad de voz — vive en la pantalla PREVIA a la llamada (no dentro de
   la charla: ElevenLabs solo aplica tts.speed al conectar, ver changeSpeedLive) */
.speed-setup{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;margin:18px 0;}
.speed-setup-lbl{font-size:12.5px;font-weight:600;color:var(--text-muted);margin-bottom:10px;text-align:center;}
.speed-live{display:flex;gap:8px;}
.speed-live-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;background:var(--surface2);border:1.5px solid var(--border);border-radius:12px;padding:10px 6px;cursor:pointer;font-size:22px;transition:all .15s;color:var(--text-muted);}
.speed-live-btn span{font-size:11px;font-weight:600;}
.speed-live-btn:hover{border-color:var(--border-accent);}
.speed-live-btn.selected{background:var(--accent-dim);border-color:var(--accent);color:var(--accent);}
@media(max-width:640px){
  .hdr-pill{display:none;}
  .voice-header{flex-wrap:wrap;gap:6px;}
}
.end-btn{background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.25);color:var(--red);font-size:12px;font-weight:600;padding:7px 14px;border-radius:100px;cursor:pointer;transition:all 0.2s;font-family:'Space Grotesk',sans-serif;}
.end-btn:hover{background:rgba(239,68,68,0.2);}

.voice-main{flex:1;display:flex;overflow:hidden;min-height:0;}
.voice-left{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0;}
/* v9.0 — el avatar YA NO es intocable. Con 230px fijos se comía media pantalla
   y el chat quedaba en 20px: no se podía leer lo que Sofía dice mientras hablás.
   Ahora escala con la altura disponible y el chat tiene un piso garantizado. */
.voice-viz{flex-shrink:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:14px 20px 6px;background:radial-gradient(ellipse 60% 60% at 50% 50%,rgba(99,102,241,0.04) 0%,transparent 70%);}

.viz-ava{width:clamp(88px,24vh,230px);height:clamp(88px,24vh,230px);flex-shrink:0;border-radius:50%;background:transparent;display:flex;align-items:center;justify-content:center;position:relative;transition:transform 0.3s;box-shadow:0 14px 38px rgba(99,102,241,0.20);overflow:hidden;}
.viz-ava.speaking{transform:scale(1.03);}
/* ROSTRO FOTOGRÁFICO (v5.9) — FIX del titileo.
   v5.8 apilaba los 3 fotogramas y cruzaba opacidades: durante el cruce las dos
   quedaban semitransparentes a la vez y el fondo de la página se filtraba entre
   medio → TODA la cara pestañeaba. Ahora la cara CERRADA es una base SIEMPRE
   opaca (nunca se desvanece) y solo las bocas entreabierta/abierta van encima
   como capas que aparecen/desaparecen. Nunca hay un hueco por donde se cuele el
   fondo → cero titileo; el único cambio visible es la boca, sobre una cara fija.
   El fondo del círculo se pinta con el mismo tono oscuro de la foto por si algún
   borde antialias quedara visible. */
.sph{position:relative;width:100%;height:100%;border-radius:50%;overflow:hidden;background:#1a1413;}
.sph-f{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.sph-ov{opacity:0;transition:opacity .07s linear;}   /* capas de boca; la base no lleva esto */
.sph-ov.on{opacity:1;}
.viz-ava::before{content:'';position:absolute;width:89%;height:89%;border-radius:50%;border:2px solid rgba(255,255,255,0.55);opacity:0;transition:opacity 0.3s;}
.viz-ava.speaking::before{opacity:1;animation:ring 2s ease-in-out infinite;}
.viz-ava::after{content:'';position:absolute;width:96.5%;height:96.5%;border-radius:50%;border:1px solid rgba(255,255,255,0.35);opacity:0;transition:opacity 0.3s;}
.sofia-photo{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;}
.sofia-svg{width:100%;height:100%;display:block;border-radius:50%;}
.viz-ava.speaking::after{opacity:0.4;animation:ring 2s ease-in-out infinite 0.35s;}
@keyframes ring{0%,100%{transform:scale(1);opacity:0.6;}50%{transform:scale(1.06);opacity:0.15;}}

.sbars{display:flex;gap:4px;align-items:center;height:28px;}
.sbar{width:4px;border-radius:4px;background:var(--accent);height:4px;}
.sbar.ca{animation:cbar 0.8s ease-in-out infinite;}
.sbar:nth-child(2).ca{animation-delay:.12s;}.sbar:nth-child(3).ca{animation-delay:.24s;}.sbar:nth-child(4).ca{animation-delay:.12s;}.sbar:nth-child(5).ca{animation-delay:.06s;}
.sbar.ua{animation:ubar 0.6s ease-in-out infinite;background:var(--blue);}
.sbar:nth-child(2).ua{animation-delay:.1s;}.sbar:nth-child(3).ua{animation-delay:.2s;}.sbar:nth-child(4).ua{animation-delay:.1s;}
@keyframes cbar{0%,100%{height:4px;}50%{height:26px;}}
@keyframes ubar{0%,100%{height:4px;}30%{height:20px;}60%{height:12px;}}

.viz-lbl{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14px;color:var(--text-muted);text-align:center;min-height:22px;transition:color 0.3s;}
.viz-lbl.on{color:var(--text);}

/* CHAT DE BURBUJAS — reemplaza el viejo slot único (tr-box) que mostraba solo
   el último mensaje en 14px gris. Ahora se ve el historial completo, con
   texto grande (18px) y bien oscuro (#14161C) para máxima legibilidad. */
.chat-list{flex:1;min-height:130px;overflow-y:auto;padding:6px 20px 14px;display:flex;flex-direction:column;gap:12px;-webkit-overflow-scrolling:touch;}
.chat-empty{margin:auto;text-align:center;color:var(--text-dim);font-size:14px;font-style:italic;padding:20px;}
.msg{max-width:84%;animation:msgIn .25s ease;}
.msg.coach{align-self:flex-start;}
.msg.user{align-self:flex-end;}
@keyframes msgIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.msg-lbl{font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:4px;}
.msg.coach .msg-lbl{color:var(--accent);}
.msg.user .msg-lbl{color:var(--blue);text-align:right;}
.msg-bubble{font-size:18px;font-weight:600;line-height:1.45;color:#14161C;padding:12px 16px;}
.msg.coach .msg-bubble{background:var(--surface2);border:1.5px solid var(--border-accent);border-radius:14px 14px 14px 4px;}
.msg.user .msg-bubble{background:#E6F1FB;border:1.5px solid rgba(2,132,199,0.35);border-radius:14px 14px 4px 14px;}

.voice-controls{background:var(--surface);border-top:1px solid var(--border);padding:12px 16px;flex-shrink:0;}
.mic-center{display:flex;flex-direction:row;align-items:center;gap:12px;margin-bottom:8px;}
.mic-big{width:52px;height:52px;border-radius:50%;background:var(--surface3);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:20px;transition:all 0.25s;position:relative;flex-shrink:0;}
.mic-big.active{background:rgba(16,185,129,0.15);border-color:var(--green);}
.mic-big.blocked{opacity:0.3;}
.mic-big.listening{background:rgba(239,68,68,0.15);border-color:var(--red);animation:micGlow 1.5s ease-in-out infinite;}
@keyframes micGlow{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,0.4);}50%{box-shadow:0 0 0 12px rgba(239,68,68,0);}}
.mic-lbl{font-size:12px;color:var(--text-dim);font-family:'Space Grotesk',sans-serif;font-weight:600;text-align:left;flex:1;line-height:1.4;}

.chips-lbl{font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-dim);margin-bottom:8px;}
.chips{display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:3px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;}
.chip{padding:8px 14px;border-radius:100px;border:1px solid var(--border);background:var(--surface2);color:var(--text-muted);font-size:12.5px;font-weight:500;cursor:pointer;transition:all 0.15s;white-space:nowrap;flex-shrink:0;}
.chip:hover{border-color:var(--border-accent);color:var(--text);background:var(--accent-dim);}

.cheat-sheet{width:196px;background:var(--surface);border-left:1px solid var(--border);padding:18px 14px;overflow-y:auto;flex-shrink:0;display:flex;flex-direction:column;gap:14px;}
.cs-title{font-family:'Space Grotesk',sans-serif;font-size:10px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-dim);margin-bottom:6px;}
.cs-tag{display:inline-block;font-size:10px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;padding:3px 8px;border-radius:100px;margin-bottom:6px;}
.cs-tag.r{background:rgba(99,102,241,0.15);color:var(--accent);}
.cs-tag.c{background:rgba(2,132,199,0.15);color:var(--blue);}
.cs-tag.a{background:rgba(16,185,129,0.15);color:var(--green);}
.cs-tag.cl{background:rgba(139,92,246,0.15);color:#8b5cf6;}
.cs-phrases{display:flex;flex-direction:column;gap:5px;}
.cs-p{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:7px 9px;font-size:11.5px;color:var(--text-muted);cursor:pointer;transition:all 0.15s;line-height:1.4;}
.cs-p:hover{border-color:var(--border-accent);color:var(--text);background:var(--accent-dim);transform:translateX(2px);}

#screen-summary{align-items:center;justify-content:center;padding:40px 20px;background:radial-gradient(ellipse 80% 50% at 50% 0%,rgba(99,102,241,0.07) 0%,transparent 65%);}
.sum-inner{max-width:480px;width:100%;text-align:center;}
.trophy{font-size:60px;display:block;margin-bottom:12px;}
.sum-title{font-family:'Space Grotesk',sans-serif;font-size:28px;font-weight:700;margin-bottom:6px;}
.sum-sub{color:var(--text-muted);font-size:15px;margin-bottom:28px;}
.sum-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px;margin-bottom:12px;text-align:left;}
.sum-card h3{font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:12px;color:var(--text-muted);}
.stat-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.sl{color:var(--text-muted);font-size:14px;}.sv{font-weight:700;font-size:14px;color:var(--accent);font-family:'Space Grotesk',sans-serif;}
.btn-row{display:flex;gap:10px;margin-top:22px;}
.btn-s{flex:1;padding:14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15px;cursor:pointer;transition:all 0.2s;}
.btn-s:hover{border-color:var(--border-accent);}
.btn-p{flex:1;padding:14px;background:var(--accent);border:none;border-radius:var(--radius);color:white;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15px;cursor:pointer;transition:all 0.2s;}
.btn-p:hover{background:var(--accent2);box-shadow:0 6px 20px rgba(99,102,241,0.3);}

.err-toast{position:fixed;top:16px;left:50%;transform:translateX(-50%);background:rgba(239,68,68,0.92);color:white;padding:12px 20px;border-radius:12px;font-size:13px;font-weight:500;z-index:999;display:none;max-width:90vw;text-align:center;backdrop-filter:blur(8px);}
.err-toast.show{display:block;animation:fadeDown 0.3s ease;}
@keyframes fadeDown{from{opacity:0;transform:translateX(-50%) translateY(-10px);}to{opacity:1;transform:translateX(-50%) translateY(0);}}
@media(max-width:640px){.cheat-sheet{display:none;}}

/* ══ GUIDED MODE — Suggestion Panel ══ */
.sugg-panel{background:var(--surface);border-top:1px solid var(--border-accent);padding:16px 20px;flex-shrink:0;display:none;max-height:280px;overflow-y:auto;}
.sugg-panel.show{display:block;animation:suggIn .3s ease;}
@keyframes suggIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
.sugg-title{font-family:'Space Grotesk',sans-serif;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:10px;display:flex;align-items:center;gap:6px;}
.sugg-loading{display:flex;align-items:center;gap:8px;color:var(--text-dim);font-size:12px;padding:10px 0;}
.sugg-spinner{width:14px;height:14px;border:2px solid var(--surface3);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.sugg-options{display:flex;flex-direction:column;gap:8px;}
.sugg-opt{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 16px;cursor:pointer;transition:all .15s;display:flex;align-items:flex-start;gap:10px;}
.sugg-opt:hover{border-color:var(--border-accent);background:var(--accent-dim);}
.sugg-opt.picked{border-color:var(--green);background:rgba(16,185,129,0.08);}
.sugg-letter{width:22px;height:22px;border-radius:6px;background:var(--surface3);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--text-muted);flex-shrink:0;font-family:'Space Grotesk',sans-serif;}
.sugg-opt:hover .sugg-letter{background:var(--accent);color:white;}
.sugg-text{font-size:13.5px;line-height:1.5;flex:1;}
.sugg-play{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:13px;padding:2px 6px;flex-shrink:0;}
.sugg-play:hover{color:var(--accent);}
.sugg-refresh{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:10px;padding:8px;background:none;border:1px dashed var(--border);border-radius:8px;color:var(--text-dim);font-size:11px;cursor:pointer;transition:all .15s;width:100%;}
.sugg-refresh:hover{border-color:var(--border-accent);color:var(--accent);}

/* Starter questions panel (when Roberto starts) */
.starter-panel{background:var(--surface);border:1px solid var(--border-accent);border-radius:var(--radius);padding:20px;margin:0 20px 16px 20px;display:none;}
.starter-panel.show{display:block;}
.starter-title{font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;color:var(--accent);margin-bottom:12px;text-align:center;}
.starter-opts{display:flex;flex-direction:column;gap:8px;}

/* Debug log toggle */
/* REGISTRO TÉCNICO (v6.6) — antes era un botón flotante `bottom:12px` con
   z-index 50, o sea JUSTO DEBAJO del menú inferior (z-index 60): quedaba tapado
   y la versión dejó de verse. Ahora el acceso vive en la pantalla principal
   (pie discreto) y en Perfil, y el panel se abre por encima del menú. */
.debug-toggle{display:none;}                 /* el flotante viejo ya no se usa */
.voice-log-btn{flex-shrink:0;width:34px;height:34px;border-radius:10px;background:var(--surface);
  border:1px solid var(--border);color:var(--text-muted);cursor:pointer;display:grid;place-items:center;
  transition:all .15s;margin-right:4px;}
.voice-log-btn:hover{border-color:var(--border-accent);color:var(--accent);}
/* El panel del registro debe verse también cuando el menú está oculto (en
   llamada): sin nav abajo, lo bajamos un poco para que no tape la cara. */
body.in-call .debug-panel{bottom:calc(18px + env(safe-area-inset-bottom));}
.app-foot{display:flex;align-items:center;justify-content:center;gap:10px;
  margin:26px 0 4px;padding-top:18px;border-top:1px solid var(--border);}
.app-foot .ver{font-family:'Space Grotesk',sans-serif;font-size:11.5px;font-weight:700;
  letter-spacing:.06em;color:var(--text-dim);}
.app-foot .logbtn{display:inline-flex;align-items:center;gap:6px;background:var(--surface);
  border:1px solid var(--border);color:var(--text-muted);font-family:inherit;font-size:11.5px;
  font-weight:600;padding:6px 12px;border-radius:100px;cursor:pointer;transition:all .15s;}
.app-foot .logbtn:hover{border-color:var(--border-accent);color:var(--accent);
  box-shadow:0 3px 10px rgba(31,36,48,.08);}

.debug-panel{position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(80px + env(safe-area-inset-bottom));   /* por ENCIMA del menú */
  width:min(94vw,460px);max-height:46vh;background:#0D1020;
  border:1px solid rgba(154,140,255,.28);border-radius:16px;padding:0;
  z-index:9500;display:none;overflow:hidden;box-shadow:0 18px 50px rgba(9,12,28,.42);}
.debug-panel.show{display:flex;flex-direction:column;}
.dbg-head{display:flex;align-items:center;gap:8px;padding:11px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);background:#141A2E;flex-shrink:0;}
.dbg-head b{font-family:'Space Grotesk',sans-serif;font-size:12.5px;font-weight:700;color:#EEF0F8;}
.dbg-head .v{font-size:11px;font-weight:700;color:#9A8CFF;background:rgba(154,140,255,.14);
  padding:2px 8px;border-radius:100px;}
.dbg-head .sp{margin-left:auto;display:flex;gap:6px;}
.dbg-head button{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  color:#C7CDE4;font-family:inherit;font-size:11px;font-weight:600;padding:5px 10px;
  border-radius:8px;cursor:pointer;transition:all .15s;}
.dbg-head button:hover{background:rgba(154,140,255,.20);color:#fff;}
.dbg-body{padding:10px 12px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:10.5px;
  line-height:1.55;color:#8FE9BC;overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch;}
.dbg-body .debug-line.err{color:#FF8B8B;}
.dbg-body .debug-line.warn{color:#FFD08A;}
.debug-line{margin-bottom:3px;white-space:pre-wrap;word-break:break-all;}
.debug-line.err{color:#f55;}
.debug-line.warn{color:#fa0;}

/* ── PROFILE MODAL (memory) ── */
/* v7.5 — EL OVERLAY es el que scrollea, no la tarjeta. En el celular `vh` mide
   el viewport GRANDE (ignora la barra del navegador): una tarjeta centrada más
   alta que lo visible dejaba la mitad de abajo fuera de pantalla y SIN forma de
   llegar a ella (así se "perdieron" 3 de los 4 puestos de la entrevista).
   align-items:flex-start + overflow-y:auto = todo el contenido siempre alcanzable. */
.profile-modal{position:fixed;inset:0;background:rgba(31,36,48,0.45);backdrop-filter:blur(6px);display:none;align-items:flex-start;justify-content:center;z-index:200;
  padding:20px 20px calc(28px + env(safe-area-inset-bottom));overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
.profile-modal.show{display:flex;}
.pf-card{background:var(--surface);border:1px solid var(--border-accent);border-radius:var(--radius);padding:28px;max-width:440px;width:100%;animation:suggIn .3s ease;}
.pf-title{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:700;margin-bottom:6px;}
/* "Cómo funciona" (v4.6) — guía de funcionalidades */
/* margin auto vertical: si entra, queda centrada como antes; si no entra, se
   apoya arriba y el overlay scrollea (nunca se recorta). */
.pf-card,.howto-card{margin-top:auto;margin-bottom:auto;}
.howto-card{background:var(--surface);border:1px solid var(--border-accent);border-radius:var(--radius);padding:24px 22px;max-width:520px;width:100%;animation:suggIn .3s ease;text-align:left;}
.howto-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:4px;}
.howto-x{margin-left:auto;background:var(--surface2);border:1px solid var(--border);color:var(--text-muted);width:32px;height:32px;border-radius:50%;font-size:16px;cursor:pointer;flex-shrink:0;line-height:1;}
.howto-x:hover{border-color:var(--border-accent);color:var(--accent);}
.howto-sub{font-size:13px;color:var(--text-muted);line-height:1.55;margin-bottom:18px;}
.ht-sec{font-family:'Space Grotesk',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);margin:18px 0 9px;}
.ht-item{display:flex;gap:12px;align-items:flex-start;background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin-bottom:8px;}
.ht-ico{font-size:20px;flex-shrink:0;line-height:1.2;}
.ht-name{font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:700;color:var(--text);margin-bottom:2px;}
.ht-desc{font-size:12.5px;color:var(--text-muted);line-height:1.5;}
.ht-desc b{color:var(--accent);font-weight:600;}
.ht-tip{background:var(--accent-dim);border:1px solid var(--border-accent);border-radius:12px;padding:12px 14px;font-size:12.5px;color:var(--text);line-height:1.55;margin-top:16px;}
.pf-sub{color:var(--text-muted);font-size:14px;margin-bottom:22px;line-height:1.6;}
.pf-field{margin-bottom:14px;}
.pf-label{font-size:12px;font-weight:600;color:var(--text-muted);margin-bottom:6px;display:block;}
.pf-input{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:11px 14px;color:var(--text);font-family:'Inter',sans-serif;font-size:14px;outline:none;transition:border-color .2s;}
.pf-input:focus{border-color:var(--accent);}
.pf-input::placeholder{color:var(--text-dim);}
.pf-save{width:100%;padding:14px;background:var(--accent);color:white;border:none;border-radius:var(--radius);font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15px;cursor:pointer;transition:all .2s;margin-top:8px;}
.pf-save:hover{background:var(--accent2);}
.profile-greeting{display:none;background:var(--accent-dim);border:1px solid var(--border-accent);border-radius:var(--radius-sm);padding:10px 16px;color:var(--accent);font-size:13px;font-weight:600;margin-bottom:14px;text-align:center;line-height:1.5;}

/* MEJORA 3 — panel de stats en la bienvenida (racha + sesiones + último tema) */
.welcome-stats{display:none;margin-bottom:22px;}
.welcome-stats.show{display:block;}
/* Racha héroe + meta semanal (mejora 3) — motivación honesta con datos reales */
.streak-hero{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--border-accent);border-radius:var(--radius);padding:14px 16px;margin-bottom:10px;text-align:left;box-shadow:0 3px 12px rgba(31,36,48,.07);}
.streak-flame{font-size:34px;line-height:1;flex-shrink:0;filter:grayscale(1);opacity:.45;}
.streak-hero.lit .streak-flame{filter:none;opacity:1;animation:flamePop .5s ease;}
@keyframes flamePop{0%{transform:scale(.6);}60%{transform:scale(1.18);}100%{transform:scale(1);}}
.streak-num{font-family:'Space Grotesk',sans-serif;font-size:30px;font-weight:700;color:var(--text);line-height:1;}
.streak-num small{font-size:12px;font-weight:600;color:var(--text-muted);}
.streak-msg{font-size:12.5px;color:var(--text-muted);line-height:1.4;margin-top:3px;}
.streak-msg b{color:var(--accent);}
.streak-msg.safe b{color:#10B981;}
.week-goal{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:11px 14px;margin-bottom:10px;text-align:left;}
.week-goal-top{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--text-muted);margin-bottom:7px;}
.week-goal-top b{color:var(--text);font-weight:600;}
.week-goal-edit{cursor:pointer;user-select:none;border:1px solid var(--border);border-radius:100px;padding:2px 9px;font-size:11px;color:var(--text-muted);background:var(--surface2);}
.week-goal-edit:hover{border-color:var(--border-accent);color:var(--accent);}
.week-bar{height:9px;background:var(--surface3);border-radius:9px;overflow:hidden;}
.week-bar-fill{height:100%;border-radius:9px;background:linear-gradient(90deg,#6366F1,#8B5CF6);transition:width .5s ease;}
.week-bar-fill.done{background:linear-gradient(90deg,#10B981,#34D399);}
.ws-row{display:flex;gap:10px;margin-bottom:10px;}
/* Misión del día (mejora 1) — la app decide por vos, cero fricción */
.mission-card{background:linear-gradient(135deg,rgba(99,102,241,0.06),rgba(139,92,246,0.05));border:1.5px solid var(--border-accent);border-radius:var(--radius);padding:15px 17px;margin-top:18px;text-align:left;box-shadow:0 4px 16px rgba(99,102,241,.10);}
/* Foco gramatical: estilos en foco.js (v13.21, tarjeta plegable) */
/* "Dónde pifiaste" en el reporte (v6.8) */
.fb-misses{margin-top:9px;display:flex;flex-direction:column;gap:7px;}
.fb-miss{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:8px 11px;
  display:flex;flex-direction:column;gap:2px;}
.fb-miss .fm-w{font-size:12.5px;color:#B4384A;text-decoration:line-through;text-decoration-color:rgba(180,56,74,.45);}
.fb-miss .fm-r{font-size:13px;color:#0F9E77;font-weight:600;}
.mission-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.mission-ico{font-size:17px;}
.mission-title{font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);}
.mission-badge{margin-left:auto;font-size:11px;font-weight:700;color:#10B981;background:rgba(16,185,129,0.12);border:1px solid rgba(16,185,129,0.35);border-radius:100px;padding:3px 10px;}
.mission-card.done{opacity:.82;}
.mission-challenge{font-size:14px;color:var(--text);line-height:1.5;font-weight:500;}
.mission-drills{margin-top:10px;display:flex;flex-direction:column;gap:6px;}
.mission-drill{display:flex;align-items:flex-start;gap:7px;background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:8px 11px;font-size:12.5px;color:var(--text);line-height:1.4;}
.mission-drill .md-ico{flex-shrink:0;}
.mission-drill b{color:var(--accent);font-weight:600;}
/* Desayuno de Sofía (mejora 2) — audio TTS diario personalizado */
.brk-card{background:linear-gradient(135deg,rgba(245,158,11,0.07),rgba(139,92,246,0.05));border:1.5px solid var(--border-accent);border-radius:var(--radius);padding:16px 18px;text-align:left;box-shadow:0 4px 16px rgba(99,102,241,.10);}
.brk-intro-txt{font-size:13px;color:var(--text-muted);line-height:1.55;}
.brk-status{font-size:12px;font-weight:600;color:var(--accent);margin-bottom:9px;display:flex;align-items:center;gap:6px;}
.brk-script{font-size:14.5px;color:var(--text);line-height:1.7;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:12px;}
/* Tus frases por dominar, resaltadas dentro del desayuno (v5.3) */
.brk-drill{background:rgba(59,130,246,.14);color:#1D4ED8;font-weight:700;border-bottom:2px solid rgba(59,130,246,.55);border-radius:4px;padding:1px 3px;}
.brk-legend{margin-top:10px;padding-top:9px;border-top:1px solid var(--border);font-size:11.5px;color:var(--text-muted);line-height:1.5;}
.brk-legend b{color:#1D4ED8;}
.brk-word{transition:background .1s;border-radius:3px;}
.brk-word.on{background:var(--accent-dim);color:var(--accent);font-weight:600;}
.brk-controls{display:flex;gap:8px;flex-wrap:wrap;}
.brk-note{font-size:11.5px;color:var(--text-dim);margin-top:10px;line-height:1.5;}
.ws-stat{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 8px;text-align:center;}
.ws-num{font-family:'Space Grotesk',sans-serif;font-size:24px;font-weight:700;color:var(--accent);line-height:1;}
.ws-num .ws-fire{font-size:18px;}
.ws-lbl{font-size:10.5px;color:var(--text-muted);margin-top:5px;letter-spacing:.02em;}
.ws-topic{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:11px 14px;display:flex;align-items:center;gap:9px;text-align:left;}
.ws-topic .ws-topic-ico{font-size:16px;flex-shrink:0;}
.ws-topic .ws-topic-txt{font-size:12.5px;color:var(--text-muted);line-height:1.45;}
.ws-topic .ws-topic-txt b{color:var(--text);font-weight:600;}
/* v12.8: .mem-controls y .speed-grid/.speed-card eliminados — sin uso en HTML */
/* Sistema de botones v4.2 — todo lo tocable se VE tocable (pedido Roberto):
   .mem-btn = secundario con peso; .mem-btn.solid = acción principal llena. */
.mem-btn{background:var(--surface);border:1.5px solid var(--border-accent);color:var(--accent);font-family:'Space Grotesk',sans-serif;font-size:12.5px;font-weight:700;padding:9px 16px;border-radius:12px;cursor:pointer;transition:all .15s;box-shadow:0 2px 8px rgba(31,36,48,.07);}
.mem-btn:hover{background:var(--accent-dim);border-color:var(--accent);transform:translateY(-1px);box-shadow:0 5px 14px rgba(99,102,241,.22);}
.mem-btn:active{transform:scale(.97);}
.mem-btn.solid{background:linear-gradient(135deg,#6366F1,#8B5CF6);border-color:transparent;color:#fff;box-shadow:0 4px 14px rgba(99,102,241,.35);}
.mem-btn.solid:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 7px 18px rgba(99,102,241,.42);}

/* Botón "💬 Ayuda" flotante ELIMINADO a pedido de Roberto (no lo usaba y
   tapaba las frases rápidas). El drawer de rescate queda en el código por si
   se reactiva, pero sin botón de entrada en mobile. */
.rescue-overlay{position:fixed;inset:0;background:rgba(31,36,48,0.40);backdrop-filter:blur(3px);z-index:120;display:none;}
.rescue-overlay.show{display:block;}
.rescue-sheet{position:fixed;left:0;right:0;bottom:0;z-index:121;background:var(--surface);
  border-top:1px solid var(--border-accent);border-radius:20px 20px 0 0;
  padding:16px 18px calc(20px + env(safe-area-inset-bottom));
  transform:translateY(100%);transition:transform .28s ease;max-height:78vh;overflow-y:auto;}
.rescue-sheet.show{transform:translateY(0);}
.rescue-handle{width:40px;height:4px;border-radius:4px;background:var(--surface3);margin:0 auto 14px;}
.rescue-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;}
.rescue-head h3{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:700;}
.rescue-close{background:none;border:none;color:var(--text-muted);font-size:24px;cursor:pointer;line-height:1;padding:0 4px;}
.rescue-sub{color:var(--text-muted);font-size:12.5px;margin-bottom:16px;}
.rescue-group{margin-bottom:16px;}
.rescue-group .cs-tag{margin-bottom:8px;}
.rescue-phrases{display:flex;flex-direction:column;gap:7px;}
.rescue-p{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:12px 14px;font-size:14px;color:var(--text);cursor:pointer;transition:all .12s;line-height:1.4;}
.rescue-p:active{background:var(--accent-dim);border-color:var(--border-accent);}
.rescue-p .rp-es{display:block;font-size:11px;color:var(--text-dim);margin-top:2px;}