/* =========================================================================
   styles.css — Sistema de diseño Neuro-Chroma.

   Principio: cero emisión agresiva. Fondo azul noche casi negro, superficies
   de vidrio, acentos pastel desaturados. Nada satura por encima del 60 % en
   la interfaz; el único color vivo (coral) queda reservado al S.O.S. y a la
   esfera objetivo del ejercicio de atención.
   ========================================================================= */

:root {
  /* --- tokens cromáticos --- */
  --bg: #050811;
  --bg-veil: #030509;
  --surface: rgba(15, 23, 42, 0.6);
  --surface-hi: rgba(30, 41, 59, 0.66);
  --border: rgba(255, 255, 255, 0.08);
  --border-hi: rgba(255, 255, 255, 0.14);

  /* V2.1 — acentos más vivos, pedidos expresamente. El cian y el violeta
     de marca pasan a ser los protagonistas; los pastel anteriores quedan
     como versión suave para textos largos, donde saturar cansa la vista. */
  --cyan: #00d2e0;
  --violet: #8a2be2;
  --lavender: #a78bfa;
  --indigo: #6366f1;
  --cyan-soft: #a5f3fc;
  --lavender-soft: #a5b4fc;
  --cream: #fde68a;
  --coral: #ef4444;

  --txt: #e8edf7;
  --txt-soft: #b6c2d9;
  --muted: #7d8aa3;

  /* --- escala tipográfica armónica (razón 1.25) --- */
  --t-xs: 0.75rem;    /* 12px  etiquetas */
  --t-sm: 0.8125rem;  /* 13px  secundario */
  --t-base: 0.9375rem;/* 15px  cuerpo */
  --t-md: 1.0625rem;  /* 17px  destacado */
  --t-lg: 1.3125rem;  /* 21px  títulos de hoja */
  --t-xl: 1.625rem;   /* 26px  cifras */
  --t-2xl: 2.5rem;    /* 40px  cifra grande */

  /* --- movimiento --- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 300ms;

  --r-sm: 14px;
  --r: 20px;
  --r-lg: 28px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; overscroll-behavior: none; }

body {
  background:
    radial-gradient(820px 560px at 50% -8%, rgba(129, 140, 248, 0.10) 0%, transparent 62%),
    radial-gradient(680px 520px at 92% 104%, rgba(165, 243, 252, 0.06) 0%, transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--txt);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, sans-serif;
  font-size: var(--t-base);
  line-height: 1.6;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, input, select { font: inherit; color: inherit; }
button { border: 0; background: none; cursor: pointer; }
h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
p { margin: 0; }

#app {
  max-width: 540px;
  margin: 0 auto;
  padding: calc(22px + var(--safe-t)) 18px calc(100px + var(--safe-b));
  min-height: 100%;
}
.view { display: none; animation: enter 420ms var(--ease); }
#app[data-view='home'] .view[data-name='home'],
#app[data-view='session'] .view[data-name='session'],
#app[data-view='now'] .view[data-name='now'],
#app[data-view='dopamine'] .view[data-name='dopamine'],
#app[data-view='academy'] .view[data-name='academy'],
#app[data-view='progress'] .view[data-name='progress'],
#app[data-view='settings'] .view[data-name='settings'] { display: block; }
@keyframes enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* --- superficie de vidrio, el material base del sistema ------------------ */
.glass, .card, .goal, .form, .toggle-row, .rem, .stat, .sos-row, .sheet-box, .note {
  background: var(--surface);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  border: 1px solid var(--border);
}

/* --- cabeceras y texto --------------------------------------------------- */
.top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.brand { font-size: var(--t-md); letter-spacing: 0.01em; }
.brand span { color: var(--cyan); }
.greet { font-size: var(--t-sm); color: var(--muted); }
.lead { font-size: var(--t-base); color: var(--txt-soft); margin-bottom: 20px; }
.section-title {
  font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); margin: 30px 0 13px;
}
.foot-note, .hint { font-size: var(--t-sm); color: var(--muted); line-height: 1.65; }
.foot-note { margin-top: 20px; }
.hint { margin-top: 10px; }
.note { border-radius: var(--r-sm); padding: 15px; font-size: var(--t-sm); color: var(--muted); margin-top: 22px; border-color: rgba(254, 243, 199, 0.16); }
.link { color: var(--muted); font-size: var(--t-sm); text-decoration: underline; padding: 8px; transition: color var(--dur) var(--ease); }
.link:hover { color: var(--txt-soft); }
.link.gold { color: var(--cream); text-decoration: none; font-weight: 600; }

/* --- S.O.S.: único elemento con coral, y controlado ---------------------- */
.sos {
  position: relative; width: 100%; display: flex; align-items: center; gap: 16px; text-align: left;
  padding: 20px; border-radius: var(--r-lg); margin-bottom: 20px; overflow: hidden;
  background:
    radial-gradient(120% 140% at 0% 50%, rgba(239, 68, 68, 0.14) 0%, transparent 58%),
    var(--surface-hi);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  border: 1px solid rgba(239, 68, 68, 0.24);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.sos:hover { border-color: rgba(239, 68, 68, 0.4); box-shadow: 0 12px 40px rgba(239, 68, 68, 0.12); }
.sos:active { transform: scale(0.98); }
.sos-orb {
  position: relative; flex: 0 0 52px; height: 52px; border-radius: 50%;
  /* coral con opacidad controlada: se lee como urgencia, no como alarma */
  background: radial-gradient(circle at 34% 30%, rgba(255, 226, 226, 0.85), rgba(239, 68, 68, 0.62) 58%, rgba(153, 27, 27, 0.7));
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.18);
  animation: breathe 5.5s var(--ease) infinite;
}
.sos-orb.big { width: 70px; height: 70px; margin: 0 auto 18px; flex: none; }
@keyframes breathe {
  0%, 100% { transform: scale(0.86); opacity: 0.82; }
  50% { transform: scale(1); opacity: 1; }
}
.sos-txt strong { display: block; font-size: var(--t-md); margin-bottom: 3px; letter-spacing: -0.01em; }
.sos-txt small { color: var(--txt-soft); font-size: var(--t-sm); }

/* --- objetivo diario ----------------------------------------------------- */
.goal { border-radius: var(--r); padding: 16px 17px 14px; transition: border-color var(--dur) var(--ease); }
.goal-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; font-size: var(--t-base); }
.goal-pct { font-size: var(--t-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.goal-track { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.goal-fill {
  height: 100%; width: 0; border-radius: 99px;
  background: linear-gradient(90deg, var(--cyan), var(--indigo));
  transition: width 900ms var(--ease);
}
.goal.done { border-color: rgba(254, 243, 199, 0.32); }
.goal.done .goal-fill { background: linear-gradient(90deg, var(--cream), #fcd34d); }
.goal.done .goal-pct { color: var(--cream); }
.goal-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 9px; font-size: var(--t-xs); color: var(--muted); }

/* --- tarjetas ------------------------------------------------------------ */
.cards { display: flex; flex-direction: column; gap: 10px; }
.card {
  width: 100%; display: flex; align-items: center; gap: 15px; text-align: left;
  padding: 15px 16px; border-radius: var(--r);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card:hover { background: var(--surface-hi); border-color: var(--border-hi); }
.card:active { transform: scale(0.985); }
.card-ic, .card-rhythm {
  flex: 0 0 52px; height: 52px; border-radius: var(--r-sm); display: grid; place-items: center;
  font-size: var(--t-sm); font-weight: 700; color: #0b1020; letter-spacing: 0.01em;
  background: linear-gradient(145deg, var(--cyan), var(--indigo));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.card-ic { font-size: var(--t-lg); }
.card[data-accent='2'] .card-rhythm { background: linear-gradient(145deg, #bef5fc, var(--cyan)); }
.card[data-accent='3'] .card-rhythm { background: linear-gradient(145deg, var(--lavender), var(--indigo)); }
.card[data-accent='4'] .card-rhythm { background: linear-gradient(145deg, var(--cream), #fcd7a4); }
.card[data-accent='5'] .card-rhythm { background: linear-gradient(145deg, var(--indigo), #6366f1); }
.card-body { flex: 1; min-width: 0; }
.card-body strong { display: block; font-size: var(--t-base); font-weight: 600; margin-bottom: 2px; }
.card-body small { display: block; font-size: var(--t-sm); color: var(--muted); line-height: 1.5; }
.chev { color: var(--muted); opacity: 0.45; font-size: var(--t-lg); transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.card:hover .chev { opacity: 0.8; transform: translateX(2px); }

/* --- sesión -------------------------------------------------------------- */
.session { text-align: center; }
.session-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.session-id strong { display: block; font-size: var(--t-base); }
.session-id small { font-size: var(--t-xs); color: var(--muted); }
.icon-btn {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  font-size: var(--t-md); color: var(--muted);
  background: var(--surface); border: 1px solid var(--border);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.icon-btn:hover { color: var(--txt-soft); border-color: var(--border-hi); }
.icon-btn:active { transform: scale(0.94); }
.icon-btn.on { color: var(--cyan); border-color: rgba(165, 243, 252, 0.4); }

.stage { position: relative; width: 100%; aspect-ratio: 1 / 1; max-height: 60vh; margin: 4px auto 0; }
#canvas { width: 100%; height: 100%; display: block; touch-action: manipulation; }

.anchor {
  min-height: 32px; font-size: var(--t-lg); font-weight: 500; color: var(--cream);
  letter-spacing: 0.01em; opacity: 0; transform: translateY(6px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); margin-bottom: 8px;
}
.anchor.show { opacity: 1; transform: none; }

.meta { display: flex; justify-content: center; gap: 26px; font-size: var(--t-sm); color: var(--muted); margin-bottom: 12px; }
.meta b { color: var(--txt); font-weight: 600; font-variant-numeric: tabular-nums; }
.timeline { height: 3px; border-radius: 99px; background: rgba(255, 255, 255, 0.06); margin-bottom: 20px; overflow: hidden; }
.timeline-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--cyan), var(--indigo)); transition: width 320ms linear; }

.setup { text-align: left; margin-bottom: 20px; }
.field-label { display: block; font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 9px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 9px 15px; border-radius: 99px; font-size: var(--t-sm); color: var(--muted);
  background: var(--surface); border: 1px solid var(--border);
  transition: all var(--dur) var(--ease);
}
.chip:hover { border-color: var(--border-hi); color: var(--txt-soft); }
.chip.on { background: rgba(165, 243, 252, 0.12); border-color: rgba(165, 243, 252, 0.42); color: var(--cyan); }

/* --- barra del carrusel de gimnasia cognitiva ---------------------------- */
.gym-bar { margin: 6px 0 2px; }
.gym-bar[hidden] { display: none; }
.scroller {
  flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.scroller::-webkit-scrollbar { display: none; }
.scroller .chip { flex: 0 0 auto; }
.gym-bar .hint { text-align: left; margin-top: 8px; min-height: 34px; }
#gym-toggle { margin-top: 8px; }

/* --- paisajes sonoros ---------------------------------------------------- */
.scape {
  padding: 12px 14px; border-radius: var(--r-sm); margin-bottom: 9px;
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.scape.on { border-color: rgba(165, 243, 252, 0.42); background: rgba(165, 243, 252, 0.06); }
.scape-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.scape-head strong { font-size: var(--t-base); font-weight: 600; }
.scape small { display: block; font-size: var(--t-xs); color: var(--muted); margin-top: 5px; line-height: 1.5; }
.scape input { margin-top: 9px; font-size: var(--t-sm); }

.controls { display: flex; justify-content: center; gap: 12px; }
.btn {
  padding: 15px 32px; border-radius: 99px; font-size: var(--t-base); font-weight: 600;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn.primary {
  color: #0a1020;
  background: linear-gradient(135deg, var(--cyan), var(--lavender));
  box-shadow: 0 10px 30px rgba(165, 180, 252, 0.18);
}
.btn.primary:hover { box-shadow: 0 12px 36px rgba(165, 180, 252, 0.28); }
.btn.ghost {
  color: var(--txt-soft); font-weight: 500;
  background: var(--surface); border: 1px solid var(--border);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.btn.ghost:hover { border-color: var(--border-hi); }
.btn.full { width: 100%; display: block; margin-top: 10px; }

/* --- formularios --------------------------------------------------------- */
.form { border-radius: var(--r); padding: 17px; margin-bottom: 12px; }
.field { margin-bottom: 17px; }
.field:last-child { margin-bottom: 0; }
input[type='time'], input[type='text'], input[type='tel'], select {
  width: 100%; padding: 12px 14px; border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
input:focus, select:focus { outline: none; border-color: rgba(165, 243, 252, 0.45); background: rgba(255, 255, 255, 0.06); }
input[type='time'] { font-size: var(--t-xl); font-weight: 300; font-variant-numeric: tabular-nums; }
select option { background: #0d1424; }
input[type='range'] { width: 100%; accent-color: var(--cyan); }
.days { display: flex; gap: 6px; }
.day {
  flex: 1; padding: 10px 0; border-radius: 12px; font-size: var(--t-sm); color: var(--muted);
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border);
  transition: all var(--dur) var(--ease);
}
.day.on { background: rgba(165, 243, 252, 0.12); border-color: rgba(165, 243, 252, 0.42); color: var(--cyan); }

.toggle-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 15px 16px; border-radius: var(--r-sm); margin-bottom: 9px;
  transition: border-color var(--dur) var(--ease);
}
.toggle-row:hover { border-color: var(--border-hi); }
.toggle-row span { font-size: var(--t-base); }
.toggle-row small { display: block; font-size: var(--t-xs); color: var(--muted); margin-top: 2px; line-height: 1.5; }
.switch {
  flex: 0 0 48px; height: 28px; border-radius: 99px; position: relative;
  background: rgba(255, 255, 255, 0.1); transition: background var(--dur) var(--ease);
}
.switch::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  transition: transform var(--dur) var(--ease);
}
.switch.on { background: linear-gradient(90deg, var(--cyan), var(--lavender)); }
.switch.on::after { transform: translateX(20px); }

/* --- recordatorios e historial ------------------------------------------- */
.rem { border-radius: var(--r); padding: 14px 16px; margin-bottom: 9px; transition: opacity var(--dur) var(--ease); }
.rem-top { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }
.rem-time { font-size: var(--t-xl); font-weight: 300; font-variant-numeric: tabular-nums; }
.rem .switch { margin-left: auto; }
.rem strong { display: block; font-size: var(--t-base); }
.rem small { font-size: var(--t-xs); color: var(--muted); }
.rem.off { opacity: 0.42; }
.del { color: var(--muted); opacity: 0.5; padding: 6px; transition: opacity var(--dur) var(--ease); }
.del:hover { opacity: 1; }

.sos-row { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: var(--r-sm); margin-bottom: 8px; font-size: var(--t-sm); color: var(--txt-soft); }
.sos-row .delta { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.delta.down { color: var(--cyan); }
.delta.same { color: var(--muted); }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 16px; }
.stat { padding: 17px 8px; border-radius: var(--r-sm); text-align: center; }
.stat b { display: block; font-size: var(--t-xl); font-weight: 200; font-variant-numeric: tabular-nums; }
.stat small { font-size: 0.625rem; color: var(--muted); letter-spacing: 0.1em; }
.week { display: flex; gap: 5px; }
.week > div { flex: 1; text-align: center; }
.week-bar { height: 60px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); display: flex; align-items: flex-end; overflow: hidden; margin-bottom: 6px; }
.week-fill { width: 100%; border-radius: 10px; background: linear-gradient(180deg, var(--cyan), var(--indigo)); transition: height 600ms var(--ease); }
.week-fill.gold { background: linear-gradient(180deg, var(--cream), #fcd34d); }
.week small { font-size: 0.6875rem; color: var(--muted); }
.empty { text-align: center; color: var(--muted); font-size: var(--t-sm); padding: 24px 12px; line-height: 1.7; }

/* --- navegación ---------------------------------------------------------- */
.nav {
  position: fixed; inset: auto 0 0 0; z-index: 40; display: flex; justify-content: center; gap: 4px;
  padding: 8px 10px calc(10px + var(--safe-b));
  background: rgba(5, 8, 17, 0.72);
  backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-top: 1px solid var(--border);
  transition: transform 380ms var(--ease);
}
.nav button {
  flex: 1; max-width: 96px; display: grid; gap: 3px; justify-items: center;
  padding: 8px 2px; border-radius: var(--r-sm); font-size: 0.625rem; color: var(--muted);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav button[data-go='dopamine'].on { color: #e879f9; background: rgba(232, 121, 249, 0.08); }
.nav .ic { font-size: var(--t-md); line-height: 1; }
.nav button.on { color: var(--cyan); background: rgba(165, 243, 252, 0.07); }
.nav.hidden { transform: translateY(140%); }

/* --- capas modales ------------------------------------------------------- */
.sheet {
  position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 22px;
  background: rgba(3, 5, 9, 0.8);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  animation: enter 320ms var(--ease);
}
.sheet[hidden] { display: none; }
.sheet-box {
  width: 100%; max-width: 380px; max-height: 86vh; overflow-y: auto; text-align: center;
  padding: 30px 24px; border-radius: var(--r-lg);
  background: linear-gradient(165deg, rgba(30, 41, 59, 0.82), rgba(15, 23, 42, 0.88));
  border-color: var(--border-hi);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.6);
  animation: pop 380ms var(--ease);
}
@keyframes pop { from { transform: scale(0.94) translateY(8px); } to { transform: none; } }
.sheet-box.tall { text-align: left; }
.sheet-box h2 { font-size: var(--t-lg); margin-bottom: 9px; }
.sheet-box > p { font-size: var(--t-sm); color: var(--txt-soft); margin-bottom: 20px; }

.mode {
  width: 100%; text-align: left; padding: 16px; border-radius: var(--r-sm); margin-bottom: 10px;
  background: var(--surface); border: 1px solid var(--border);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.mode:hover { background: var(--surface-hi); border-color: rgba(165, 243, 252, 0.35); }
.mode:active { transform: scale(0.98); }
.mode strong { display: block; font-size: var(--t-base); margin-bottom: 2px; }
.mode small { color: var(--muted); font-size: var(--t-sm); }

.suds-val { font-size: var(--t-2xl); font-weight: 200; font-variant-numeric: tabular-nums; color: var(--cyan); }
.suds-scale { display: flex; justify-content: space-between; font-size: var(--t-xs); color: var(--muted); margin: 8px 0 20px; }

.triggers { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 14px; }
.trigger {
  padding: 15px 8px; border-radius: var(--r-sm); font-size: var(--t-sm);
  background: var(--surface); border: 1px solid var(--border);
  transition: all var(--dur) var(--ease);
}
.trigger:hover { border-color: rgba(165, 243, 252, 0.35); background: var(--surface-hi); }
.trigger .tic { display: block; font-size: var(--t-lg); margin-bottom: 4px; }

.victory .crest { font-size: 2.75rem; color: var(--cream); margin-bottom: 12px; animation: breathe 4s var(--ease) infinite; }
.victory h2 { color: var(--cream); }
.quote {
  margin: 0 0 20px; padding: 20px 18px; border-radius: var(--r);
  background: rgba(254, 243, 199, 0.06); border: 1px solid rgba(254, 243, 199, 0.2);
}
.quote blockquote { margin: 0; font-size: var(--t-md); line-height: 1.6; }
.quote figcaption { margin-top: 12px; font-size: var(--t-sm); color: var(--cream); }

#sym-body p { font-size: var(--t-base); color: var(--txt-soft); line-height: 1.7; margin-bottom: 14px; }
#sym-body p:first-child { color: var(--txt); }

.toast {
  position: fixed; left: 50%; bottom: calc(88px + var(--safe-b)); transform: translate(-50%, 16px);
  max-width: calc(100% - 36px); padding: 12px 20px; border-radius: 99px; font-size: var(--t-sm); text-align: center;
  background: rgba(30, 41, 59, 0.9); border: 1px solid var(--border-hi);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  z-index: 80; opacity: 0; pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* --- modo ojos cerrados --------------------------------------------------
   Ningún navegador puede bajar el brillo del panel. Lo que sí puede es
   apagar todo lo que emite: capa casi opaca y canvas en silencio. */
.dim { position: fixed; inset: 0; z-index: 60; background: var(--bg-veil); opacity: 0; transition: opacity 1.2s var(--ease); }
.dim[hidden] { display: none; }
body.quiet { background: var(--bg-veil); }
body.quiet .nav { transform: translateY(140%); }

/* --- "¿En qué me beneficia?" ---------------------------------------------
   El cerebro ansioso pide saber antes de entregarse. La invitación va
   siempre visible bajo los controles, nunca escondida en un menú. */
.benefit-cta {
  width: 100%; margin-top: 22px; padding: 14px 16px; border-radius: var(--r);
  display: flex; align-items: center; justify-content: center; gap: 9px;
  font-size: var(--t-sm); color: var(--txt-soft);
  background: var(--surface); border: 1px solid var(--border);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.benefit-cta[hidden] { display: none; }
.benefit-cta:hover { border-color: rgba(254, 243, 199, 0.35); color: var(--txt); }
.benefit-ic { color: var(--cream); font-size: var(--t-md); }

.ben-block { margin-bottom: 16px; }
.ben-tag {
  display: inline-block; font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
.ben-block p { font-size: var(--t-base); line-height: 1.65; color: var(--txt-soft); }
.ben-block.safe {
  padding: 14px 15px; border-radius: var(--r-sm);
  background: rgba(165, 243, 252, 0.05); border: 1px solid rgba(165, 243, 252, 0.18);
}
.ben-block.safe .ben-tag { color: var(--cyan); }
.ben-block.safe p { color: var(--txt); }

/* --- Dopamine: el único rincón donde el color sí sube ------------------- */
.dopa-brand { font-size: var(--t-lg); }
.dopa-brand span {
  background: linear-gradient(90deg, #22d3ee, #a855f7, #ec4899);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.dopa-stage { max-height: 46vh; margin-bottom: 6px; }
#canvas-dopa { width: 100%; height: 100%; display: block; }
.dopa .lead { color: var(--txt); font-size: var(--t-md); line-height: 1.5; }
.btn.dopa-btn {
  color: #0b0510;
  background: linear-gradient(120deg, #22d3ee, #a855f7 55%, #ec4899);
  box-shadow: 0 10px 34px rgba(168, 85, 247, 0.28);
}

/* --- pistas de "ahora" --------------------------------------------------- */
.now-card .card-ic { background: linear-gradient(150deg, #c39ae0, #8f9ee0); }
.dopa-card .card-ic { background: linear-gradient(150deg, #22d3ee, #a855f7 55%, #ec4899); color: #0b0510; }
.now-card.playing { border-color: rgba(195, 154, 224, 0.45); background: rgba(195, 154, 224, 0.07); }

/* =========================================================================
   V2 — componentes añadidos. Todo lo de abajo es aditivo: reutiliza los
   mismos tokens, superficies de vidrio y radios del sistema, y no
   redefine ninguna regla anterior.
   ========================================================================= */

/* --- botón flotante de rescate ------------------------------------------- */
.fab {
  position: fixed; right: 16px; bottom: calc(78px + var(--safe-b)); z-index: 55;
  width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 36% 30%, rgba(165, 243, 252, 0.22), rgba(15, 23, 42, 0.92));
  border: 1px solid rgba(165, 243, 252, 0.42);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 8px 30px rgba(129, 140, 248, 0.28), 0 0 0 rgba(165, 243, 252, 0.4);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.fab:active { transform: scale(0.92); }
.fab-txt { font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.08em; color: var(--cyan); }
.fab-ring {
  position: absolute; inset: -1px; border-radius: 50%;
  border: 1px solid rgba(165, 243, 252, 0.5);
  animation: fabPulse 3.6s var(--ease) infinite;
}
@keyframes fabPulse {
  0% { transform: scale(1); opacity: 0.7; }
  70% { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}
/* dentro de una sesión el botón estorba: se aparta con una clase, que es
   más fiable que depender del orden de hermanos en el DOM */
.fab.away { transform: translateY(140%); opacity: 0; pointer-events: none; }

/* --- mapa corporal -------------------------------------------------------- */
.bodymap {
  border-radius: var(--r); padding: 10px; margin-bottom: 4px;
  background: var(--surface); border: 1px solid var(--border);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.bodymap svg { width: 100%; max-height: 46vh; display: block; }
.bm-figure * { fill: rgba(232, 237, 247, 0.05); stroke: rgba(232, 237, 247, 0.14); stroke-width: 0.5; }
.bm-zone {
  fill: rgba(165, 243, 252, 0.1); stroke: rgba(165, 243, 252, 0.45); stroke-width: 0.6;
  cursor: pointer; transition: fill var(--dur) var(--ease), stroke var(--dur) var(--ease);
}
.bm-zone:hover, .bm-zone:focus-visible { fill: rgba(165, 243, 252, 0.24); stroke: var(--cyan); }
.bm-zone.seen { stroke: rgba(110, 231, 183, 0.55); }
.bm-label { fill: var(--muted); font-size: 3.4px; text-anchor: middle; pointer-events: none; }

/* --- diario de preocupaciones -------------------------------------------- */
.worry {
  padding: 14px 15px; border-radius: var(--r-sm); margin-bottom: 9px;
  background: var(--surface); border: 1px solid var(--border);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.worry-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.worry-date { font-size: var(--t-xs); color: var(--muted); }
.worry-prob { font-size: var(--t-sm); color: var(--lavender); font-variant-numeric: tabular-nums; }
.worry p { font-size: var(--t-base); line-height: 1.55; margin-bottom: 10px; }
.worry-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.worry-verdict {
  display: inline-block; padding: 6px 12px; border-radius: 99px; font-size: var(--t-xs); font-weight: 600;
}
.worry-verdict.no { background: rgba(110, 231, 183, 0.14); color: #6ee7b7; }
.worry-verdict.si { background: rgba(214, 169, 122, 0.14); color: var(--cream); }
.worry-real { font-size: var(--t-sm); color: var(--muted); margin-top: 8px; font-style: italic; }

/* --- minijuego ------------------------------------------------------------ */
.game-stage { width: 100%; aspect-ratio: 1 / 1; max-height: 52vh; margin: 4px 0 12px; }
#canvas-game { width: 100%; height: 100%; display: block; touch-action: manipulation; }

/* =========================================================================
   V2.1 — identidad de marca y acentos vivos
   ========================================================================= */

/* --- logo en la cabecera -------------------------------------------------- */
.brandmark { display: flex; align-items: center; gap: 9px; }
.brandmark img { width: 52px; height: 34px; filter: drop-shadow(0 0 12px rgba(0, 210, 224, 0.4)); }
.wordmark { font-size: var(--t-md); font-weight: 600; letter-spacing: -0.01em; }
.wordmark b { font-weight: 600; color: var(--txt); }
.wordmark span {
  font-weight: 600;
  background: linear-gradient(90deg, var(--cyan), var(--violet));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* --- realces con el cian y el violeta de marca --------------------------- */
.brand span { color: var(--cyan); }
.chip.on { background: rgba(0, 210, 224, 0.16); border-color: rgba(0, 210, 224, 0.55); color: var(--cyan); }
.day.on { background: rgba(0, 210, 224, 0.16); border-color: rgba(0, 210, 224, 0.55); color: var(--cyan); }
.nav button.on { color: var(--cyan); background: rgba(0, 210, 224, 0.1); }
.goal-fill { background: linear-gradient(90deg, var(--cyan), var(--violet)); }
.week-fill { background: linear-gradient(180deg, var(--cyan), var(--violet)); }
.timeline-fill { background: linear-gradient(90deg, var(--cyan), var(--violet)); }
.switch.on { background: linear-gradient(90deg, var(--cyan), var(--lavender)); }
.btn.primary {
  color: #04121a;
  background: linear-gradient(135deg, var(--cyan), var(--lavender));
  box-shadow: 0 10px 30px rgba(0, 210, 224, 0.26);
}
.btn.primary:hover { box-shadow: 0 12px 38px rgba(138, 43, 226, 0.3); }
.card-ic, .card-rhythm { background: linear-gradient(145deg, var(--cyan), var(--indigo)); color: #04121a; }
.card[data-accent='2'] .card-rhythm { background: linear-gradient(145deg, #22d3ee, var(--cyan)); }
.card[data-accent='3'] .card-rhythm { background: linear-gradient(145deg, var(--lavender), var(--violet)); }
.card[data-accent='4'] .card-rhythm { background: linear-gradient(145deg, var(--cream), #f59e0b); }
.card[data-accent='5'] .card-rhythm { background: linear-gradient(145deg, var(--indigo), var(--violet)); }
.fab {
  border-color: rgba(0, 210, 224, 0.6);
  background: radial-gradient(circle at 36% 30%, rgba(0, 210, 224, 0.3), rgba(138, 43, 226, 0.16) 60%, rgba(10, 14, 26, 0.94));
  box-shadow: 0 8px 32px rgba(138, 43, 226, 0.35);
}
.fab-txt { color: #eafeff; }
.fab-ring { border-color: rgba(0, 210, 224, 0.7); }
.bm-zone { fill: rgba(0, 210, 224, 0.12); stroke: rgba(0, 210, 224, 0.55); }
.bm-zone:hover, .bm-zone:focus-visible { fill: rgba(0, 210, 224, 0.26); stroke: var(--cyan); }
.scape.on { border-color: rgba(0, 210, 224, 0.5); background: rgba(0, 210, 224, 0.07); }
:focus-visible { outline-color: var(--cyan); }

/* El texto largo sigue usando los tonos suaves: un cian saturado en un
   párrafo de cinco líneas cansa la vista y aquí se lee mucho. */
.ben-block.safe { background: rgba(0, 210, 224, 0.06); border-color: rgba(0, 210, 224, 0.22); }
.ben-block.safe .ben-tag { color: var(--cyan-soft); }
.anchor { color: var(--cyan-soft); }

/* --- apertura de marca ---------------------------------------------------
   Aparece y se va en menos de un segundo. No es una pantalla de carga: la
   app ya está lista detrás, esto solo pone cara a la marca. */
.splash {
  position: fixed; inset: 0; z-index: 95; display: grid; place-content: center; justify-items: center; gap: 6px;
  background: radial-gradient(circle at 50% 45%, #0d1424 0%, #050811 70%);
  animation: splashIn 420ms var(--ease);
}
.splash img { width: min(62vw, 240px); height: auto; animation: splashPulse 1.6s var(--ease); }
.splash-word { font-size: var(--t-lg); letter-spacing: -0.01em; }
.splash-word b { font-weight: 600; color: var(--txt); }
.splash-word span {
  font-weight: 600;
  background: linear-gradient(90deg, var(--cyan), var(--violet));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.splash.out { opacity: 0; pointer-events: none; transition: opacity 480ms var(--ease); }
@keyframes splashIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes splashPulse { 0% { transform: scale(0.92); opacity: 0.5; } 100% { transform: scale(1); opacity: 1; } }

.welcome-logo { display: block; margin: 0 auto 14px; }
.welcome-dots { display: flex; justify-content: center; gap: 7px; margin: 18px 0 16px; }
.welcome-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); transition: background var(--dur) var(--ease), width var(--dur) var(--ease); }
.welcome-dots i.on { width: 20px; border-radius: 99px; background: linear-gradient(90deg, var(--cyan), var(--violet)); }

/* =========================================================================
   SOL DEL S.O.S.
   Volumen sin WebGL: el 3D sale de dos sombras internas opuestas —una
   oscurece el borde inferior derecho (oscurecimiento del limbo, lo que hace
   que una esfera se lea como esfera) y otra rellena de luz la parte alta—.
   La corona gira en 26 s y la respiración dura 6: a esa velocidad el ojo lo
   registra como algo vivo, no como una alarma parpadeando. Paleta ámbar y
   oro, cero rojo saturado.
   ========================================================================= */
.sos-orb {
  flex: 0 0 58px; height: 58px;
  background:
    radial-gradient(circle at 38% 30%,
      #fffdf6 0%, #ffeec2 11%, #ffcb68 32%, #ffa23c 58%, #e0640d 82%, #7d3406 100%);
  box-shadow:
    0 0 0 1px rgba(255, 214, 140, 0.4),
    0 0 20px 2px rgba(255, 150, 50, 0.34),
    0 0 52px 10px rgba(255, 180, 80, 0.16),
    inset -8px -10px 22px rgba(96, 34, 4, 0.72),
    inset 6px 8px 14px rgba(255, 244, 214, 0.34);
  animation: sunBreathe 6s var(--ease) infinite;
}
.sos-orb.big { width: 76px; height: 76px; }

/* Corona difusa, no rayos.
   Los picos de un gradiente cónico se leen como destello de cámara o sol de
   dibujo animado: llamativos, pero nerviosos. Un sol visto entre neblina
   —halo cálido y continuo— sigue siendo inconfundible y además tranquiliza,
   que es lo que se busca aquí. La capa que gira queda muy por debajo del
   umbral de atención: solo aporta que "esté vivo". */
.sos-orb::before {
  content: ''; position: absolute; inset: -34%; border-radius: 50%;
  background:
    radial-gradient(circle,
      rgba(255, 206, 120, 0) 38%,
      rgba(255, 196, 104, 0.28) 50%,
      rgba(255, 168, 66, 0.14) 62%,
      rgba(255, 150, 50, 0.05) 74%,
      transparent 86%),
    conic-gradient(from 0deg,
      rgba(255, 214, 150, 0.1), rgba(255, 180, 90, 0.02) 60deg,
      rgba(255, 214, 150, 0.09) 130deg, rgba(255, 180, 90, 0.02) 200deg,
      rgba(255, 214, 150, 0.1) 280deg, rgba(255, 180, 90, 0.02) 340deg,
      rgba(255, 214, 150, 0.1));
  filter: blur(7px);
  animation: sunSpin 42s linear infinite;
  pointer-events: none;
}

/* Superficie: la textura de plasma generada en canvas (SunTexture.js) girando
   muy despacio. Si por lo que sea no se generó, --sun-tex no existe y queda
   solo el degradado de reserva, que sigue siendo un sol presentable. */
.sos-orb::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background-image: var(--sun-tex);
  background-size: cover;
  background-position: center;
  animation: sunRotate 90s linear infinite;
  pointer-events: none;
  opacity: 0.96;
}
/* filo luminoso del borde, por encima de la textura */
.sos-orb { border: 1px solid rgba(255, 226, 176, 0.5); }
@keyframes sunRotate { to { transform: rotate(360deg); } }

/* --- sol en video --------------------------------------------------------
   El video real manda cuando puede reproducirse. Entra con un fundido en
   cuanto empieza a sonar la primera imagen; si el navegador bloquea la
   reproducción automática (modo ahorro de datos, por ejemplo), nunca llega
   a opacidad 1 y debajo sigue el sol dibujado, que ya es presentable.
   Va por encima de la textura pero por debajo del filo del borde. */
.sun-vid {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: 50%;
  opacity: 0; transition: opacity 700ms var(--ease);
  pointer-events: none;
  /* el limbo brillante y el volumen los sigue poniendo el CSS de abajo */
  mask: radial-gradient(circle, #000 0 96%, transparent 100%);
  -webkit-mask: radial-gradient(circle, #000 0 96%, transparent 100%);
}
.sun-vid.on { opacity: 1; }
.sos-orb:has(.sun-vid.on)::after { opacity: 0; } /* la textura se retira */

@keyframes sunBreathe {
  0%, 100% { transform: scale(0.9); filter: saturate(0.95) brightness(0.96); }
  50% { transform: scale(1); filter: saturate(1.08) brightness(1.06); }
}
@keyframes sunSpin { to { transform: rotate(360deg); } }
@keyframes sunPlasma {
  0% { transform: scale(1) rotate(0deg); opacity: 0.85; }
  100% { transform: scale(1.06) rotate(8deg); opacity: 1; }
}

/* la tarjeta acompaña en ámbar: sigue leyéndose como urgencia, pero cálida */
.sos {
  background:
    radial-gradient(130% 150% at 0% 50%, rgba(255, 160, 60, 0.16) 0%, transparent 60%),
    var(--surface-hi);
  border-color: rgba(255, 179, 71, 0.3);
}
.sos:hover { border-color: rgba(255, 179, 71, 0.5); box-shadow: 0 12px 44px rgba(255, 150, 50, 0.16); }

@media (prefers-reduced-motion: reduce) {
  .sos-orb, .sos-orb::before, .sos-orb::after { animation: none; }
}

/* --- accesibilidad ------------------------------------------------------- */
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
@supports not (backdrop-filter: blur(1px)) {
  .glass, .card, .goal, .form, .toggle-row, .rem, .stat, .sos-row, .sheet-box, .nav, .toast { background: rgba(15, 23, 42, 0.92); }
}