/* ══════════════════════════════════════════════════════════════════════
   SOFÍA — LENGUAJE VISUAL COMPARTIDO (v10.1)

   Por qué existe este archivo. Las tarjetas lindas de la app (Repaso,
   Entrevista, Sala de reunión) estaban escritas TRES VECES, cada una con
   sus colores a mano: 16, 19 y 77 reglas CSS casi gemelas. Sumar la cuarta
   copiando habría sido la cuarta duplicación.

   Acá vive el patrón UNA vez. Cada tarjeta solo elige su color.
   Además unifica los tokens: la app y el Gym usaban los MISMOS colores con
   nombres distintos (--surface vs --bg2, --accent vs --acc1), así que eran
   hermanos que nunca se habían conocido.
   ══════════════════════════════════════════════════════════════════════ */

: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; --violet:#8B5CF6; --cyan:#06B6D4;
  --border:rgba(31,36,48,0.10); --border2:rgba(31,36,48,0.18);
  --border-accent:rgba(99,102,241,0.30);
  --radius:16px; --radius-sm:10px;

  /* Alias del Gym: nombres viejos que siguen funcionando mientras dure la
     migración. No agregar usos nuevos — se van a borrar. */
  --bg2:#FFFFFF; --bg3:#F3EEE5; --bg4:#EAE2D6;
  --txt:#1F2430; --txt2:#55606F; --txt3:#94a0b0;
  --acc1:#6366F1; --acc2:#8B5CF6; --acc3:#10B981;
  --acc4:#0284C7; --acc5:#F43F5E; --acc6:#06B6D4;
}

/* ── TARJETA DESTACADA ────────────────────────────────────────────────
   La anatomía es siempre la misma: fondo oscuro en degradé, un resplandor
   en la esquina, una chapita opcional, cabecera con ícono + título, y una
   barra de acción abajo. El COLOR es lo único que cambia, y cambia por una
   razón: que de un vistazo sepas qué tipo de cosa es antes de leer.
       frío  → hablar con alguien (Repaso, Entrevista, Reunión)
       cálido → entrenar solo     (Gimnasio)
   ─────────────────────────────────────────────────────────────────────── */
.sfc{position:relative;padding:18px;border-radius:18px;overflow:hidden;cursor:pointer;
  box-shadow:0 14px 36px var(--sfc-shadow,rgba(14,20,36,.34));
  background:linear-gradient(135deg,var(--sfc-1) 0%,var(--sfc-2) 55%,var(--sfc-3) 100%);
  transition:transform .16s,box-shadow .16s;}
.sfc:hover{transform:translateY(-2px);box-shadow:0 20px 46px var(--sfc-shadow-hi,rgba(14,20,36,.44));}
.sfc:focus-visible{outline:2px solid #fff;outline-offset:3px;}

.sfc-glow{position:absolute;top:-56px;right:-40px;width:186px;height:186px;border-radius:50%;
  pointer-events:none;background:radial-gradient(circle,var(--sfc-glow),transparent 66%);}

.sfc-badge{position:absolute;top:14px;right:14px;font-size:9.5px;font-weight:800;
  letter-spacing:.1em;padding:3px 9px;border-radius:100px;
  color:var(--sfc-badge-ink);background:var(--sfc-accent);}

.sfc-head{position:relative;display:flex;gap:13px;align-items:flex-start;}
.sfc-ic{flex-shrink:0;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.17);color:var(--sfc-accent);}
.sfc-ic svg{width:23px;height:23px;}
.sfc-title{font-family:'Space Grotesk',sans-serif;font-size:17px;font-weight:700;color:#fff;
  letter-spacing:-.01em;line-height:1.2;}
.sfc:has(.sfc-badge) .sfc-title{padding-right:48px;}
.sfc-sub{font-size:12.5px;line-height:1.45;margin-top:3px;color:var(--sfc-sub);}

.sfc-pulse{position:relative;display:inline-flex;align-items:center;gap:6px;margin-top:12px;
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--sfc-accent);}
.sfc-pulse i{width:7px;height:7px;border-radius:50%;background:currentColor;animation:sfcPulse 1.6s infinite;}
@keyframes sfcPulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.35;transform:scale(.75);}}

.sfc-go{position:relative;margin-top:12px;text-align:center;background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.20);border-radius:12px;padding:11px;
  font-family:'Space Grotesk',sans-serif;font-size:13.5px;font-weight:700;color:#fff;}
.sfc:hover .sfc-go{background:rgba(255,255,255,.17);}

/* Las cuatro familias. Cada una existe para NO confundirse con las otras. */
.sfc-violeta{--sfc-1:#4A3FC9;--sfc-2:#6D5AE6;--sfc-3:#8B5CF6;
  --sfc-accent:#F7E39B;--sfc-badge-ink:#2A2154;--sfc-sub:rgba(255,255,255,.84);
  --sfc-glow:rgba(255,255,255,.16);--sfc-shadow:rgba(91,79,224,.30);--sfc-shadow-hi:rgba(91,79,224,.40);}
.sfc-navy{--sfc-1:#0E1424;--sfc-2:#1B2440;--sfc-3:#243056;
  --sfc-accent:#AFC0FF;--sfc-badge-ink:#0E1424;--sfc-sub:rgba(206,214,236,.86);
  --sfc-glow:rgba(96,120,220,.34);--sfc-shadow:rgba(14,20,36,.34);--sfc-shadow-hi:rgba(14,20,36,.44);}
.sfc-navy .sfc-badge{background:#F7E39B;}
.sfc-teal{--sfc-1:#0D1F26;--sfc-2:#12333A;--sfc-3:#1B4A50;
  --sfc-accent:#7FE3CD;--sfc-badge-ink:#06231F;--sfc-sub:rgba(198,222,222,.88);
  --sfc-glow:rgba(74,222,196,.26);--sfc-shadow:rgba(13,31,38,.34);--sfc-shadow-hi:rgba(13,31,38,.44);}
.sfc-bronce{--sfc-1:#1C1408;--sfc-2:#3A2714;--sfc-3:#5A3D1B;
  --sfc-accent:#FFD79A;--sfc-badge-ink:#2A1C08;--sfc-sub:rgba(238,224,201,.88);
  --sfc-glow:rgba(245,184,92,.32);--sfc-shadow:rgba(40,26,8,.34);--sfc-shadow-hi:rgba(40,26,8,.44);}
.sfc-bronce .sfc-pulse{color:#F5B85C;}
/* Vino (v11.2) — cálido como el bronce (las dos son "entrenar solo"), pero
   distinto de un vistazo: el Gimnasio es dorado, la Escucha predictiva es
   borravino. Ningún otro color del set está en esta zona del espectro. */
.sfc-vino{--sfc-1:#24101A;--sfc-2:#3E1626;--sfc-3:#5C2036;
  --sfc-accent:#F3A9C0;--sfc-badge-ink:#2A0E18;--sfc-sub:rgba(240,212,222,.88);
  --sfc-glow:rgba(233,84,126,.24);--sfc-shadow:rgba(36,16,26,.34);--sfc-shadow-hi:rgba(36,16,26,.44);}
.sfc-vino .sfc-pulse{color:#F3A9C0;}

/* ── VARIANTES v12.8 ──────────────────────────────────────────────────
   sfc-static: tarjeta-formulario (tiene controles adentro, no ES un botón).
   sfc-mini:   tarjeta-fila compacta, para accesos secundarios. */
.sfc-static{cursor:default;}
.sfc-static:hover{transform:none;box-shadow:0 14px 36px var(--sfc-shadow,rgba(14,20,36,.34));}

.sfc-mini{padding:13px 16px;}
.sfc-mini .sfc-head{align-items:center;}
.sfc-mini .sfc-ic{width:38px;height:38px;border-radius:11px;}
.sfc-mini .sfc-ic svg{width:20px;height:20px;}
.sfc-mini .sfc-title{font-size:15px;}
.sfc-mini .sfc-sub{font-size:12px;}
.sfc-mini .sfc-arr{margin-left:auto;flex-shrink:0;font-family:'Space Grotesk',sans-serif;
  font-size:17px;font-weight:700;color:var(--sfc-accent);}

/* ── CONTROLES DENTRO DE UNA TARJETA OSCURA (v12.8) ───────────────────
   La tarjeta "Charla con Sofía" absorbe modo, escenario y velocidad, que
   antes eran bloques claros sueltos. Acá se re-visten para fondo oscuro
   sin tocar su HTML ni su lógica: mismo id, misma clase, otro traje. */
.sfc .mode-grid{margin:14px 0 0;}
.sfc .mode-card{background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.15);}
.sfc .mode-card:hover{border-color:rgba(255,255,255,.34);}
.sfc .mode-card.selected{background:rgba(255,255,255,.13);border-color:var(--sfc-accent);}
.sfc .mode-title{color:#fff;}
.sfc .mode-desc{color:rgba(255,255,255,.72);}
.sfc .mode-badge{background:var(--sfc-accent);color:var(--sfc-badge-ink);}

.sfc .section-label{color:rgba(255,255,255,.65);margin-top:14px;}
.sfc .scenario-card{background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.15);}
.sfc .scenario-card:hover{border-color:rgba(255,255,255,.34);}
.sfc .scenario-card.selected{background:rgba(255,255,255,.13);border-color:var(--sfc-accent);}
.sfc .sc-name{color:#fff;}
.sfc .sc-desc{color:rgba(255,255,255,.72);}
.sfc .sc-arr{color:var(--sfc-accent);}

.sfc .speed-setup{background:transparent;border:1px solid rgba(255,255,255,.15);
  margin:14px 0 0;padding:10px 12px;}
.sfc .speed-setup-lbl{margin:0 0 8px;text-align:left;color:rgba(255,255,255,.72);}
.sfc .speed-live-btn{flex-direction:row;padding:8px 6px;font-size:16px;gap:6px;
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.15);color:rgba(255,255,255,.75);}
.sfc .speed-live-btn:hover{border-color:rgba(255,255,255,.34);}
.sfc .speed-live-btn.selected{background:rgba(255,255,255,.13);
  border-color:var(--sfc-accent);color:var(--sfc-accent);}

.sfc .btn-start{margin-top:14px;
  background:linear-gradient(160deg,#FBEDBC,var(--sfc-accent) 60%,#E0C267);
  color:var(--sfc-badge-ink);box-shadow:0 10px 26px rgba(0,0,0,.28);}
.sfc .btn-start:disabled{opacity:.5;cursor:default;}

/* El panel claro dentro del Desayuno: el reproductor conserva sus estilos.
   Fondo sólido: el original era translúcido y sobre bronce oscuro el guion
   (texto oscuro) quedaba ilegible. */
.sfc .brk-card{margin:12px 0 0;background:rgba(255,252,246,.97);
  border-color:rgba(255,255,255,.4);}
.sfc .brk-intro-txt:empty{display:none;}
.sfc .brk-intro-txt{margin-top:10px;}
.sfc .mem-btn.solid{background:var(--sfc-accent);border-color:var(--sfc-accent);
  color:var(--sfc-badge-ink);font-weight:700;}

@media (prefers-reduced-motion:reduce){
  .sfc,.sfc:hover{transition:none;transform:none;}
  .sfc-pulse i{animation:none;}
}

/* v13.14 — devolución: hasta 3 correcciones con el porqué (devolucion.js) */
.fb-fix{margin:6px 0 8px;padding-left:10px;border-left:2px solid var(--border,#E4E1D8)}
.fb-fix .fb-why{color:var(--text-muted,#5B6172);margin-top:2px;font-size:13px}
.fb-repaso{color:var(--accent,#5B6DD8);margin-top:6px;font-size:12px}


/* ── Repaso inteligente, v13.31: la tarjeta comunica sola ──
   "dichas hoy" en verde cuando hay avance; las pendientes sin tildes, con la
   forma vieja como pista; y un mensaje claro cuando no queda nada. */
.srs-n.srs-green{color:#6EE7B7;}
.srs-empty{position:relative;background:rgba(255,255,255,.10);border:1px dashed rgba(255,255,255,.30);border-radius:9px;
  padding:11px 12px;font-size:13px;color:rgba(255,255,255,.92);line-height:1.45;text-align:center;}

/* Chips del Repaso (v13.35/v13.37): la frase se lee ENTERA (el .srs-chip del
   monolito la cortaba con "…" y nowrap; una frase que tenés que practicar no
   puede estar recortada). #srs-preview le gana al <style> del monolito. */
#srs-preview .srs-chip{display:flex;align-items:center;gap:10px;white-space:normal;overflow:visible;text-overflow:clip;}
#srs-preview .srs-chip .srs-t{flex:1;min-width:0;overflow-wrap:break-word;}
#srs-preview .srs-chip small{display:block;font-size:11px;color:rgba(255,255,255,.62);margin-top:2px;font-weight:500;}

/* Misión cumplida (v13.34): el tilde tiene que VERSE — pedido de Roberto: el
   verde lavado sobre fondo claro se perdía con el color de la letra. El #id
   le gana al <style> del monolito, que carga después de esta hoja. */
#mission-badge{color:#fff;background:#059669;border-color:#059669;}
#mission-card.done{opacity:1;border-color:rgba(5,150,105,.45);}
#mission-card.done .mission-title{color:#059669;}

/* Charla del desayuno (v13.38): las frases del panel se tocan para preguntar. */
.brk-ask{cursor:pointer;}
.brk-ask:hover{background:var(--surface2);}
.brk-eq{color:var(--text-muted);font-weight:400;}

/* v13.39 (pedido de Roberto): cuando Sofía habla, el círculo GRANDE se enciende
   con el mismo azul del avatar chiquito de la cabecera. #id le gana al
   .viz-ava.speaking del <style> del monolito. */
#viz-ava.speaking{box-shadow:0 0 0 5px var(--accent),0 0 0 14px var(--accent-dim),0 0 44px rgba(99,102,241,.5);animation:avaPulse 1.5s infinite;}