/* ENARM EDGE — Design Tokens v2
   Evolución del sistema original (estilo Apple), añadiendo:
   - Tipografía: Inter Tight (UI) + Fraunces (serif acentos médicos)
   - Paleta extendida con tonos suaves para diagnóstico
   - Sombras más sutiles (capa 1, 2, 3)
   - Curvas de animación nombradas
*/
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Surfaces — El tono "Off-white" de Apple */
  --bg: #f5f5f7;
  --surface: #ffffff;
  --surface-2: #f0f0f5; /* Más distinción del fondo */
  --surface-3: #e8e8ed; /* Más distinción de surface-2 */
  --line: rgba(0, 0, 0, 0.1); /* Bordes más visibles */
  --line-strong: rgba(0, 0, 0, 0.15); /* Bordes más fuertes */

  /* Texto */
  --ink: #1d1d1f;
  --ink-2: #424245;
  --ink-3: #86868b;
  --ink-on-accent: #ffffff;

  /* Acento — "Azul Edge" (rediseño 27-sep-2026, ver docs/SISTEMA_DISENO.md). Azul profundo: calma y concentración,
     distinto del turquesa de AMIA y del rosa anterior. Contraste con blanco 5.9:1 (WCAG AA). */
  --accent: #2f5bea;
  --accent-deep: #1f45c7;
  --accent-soft: #e6ecfd;
  --accent-tint: #f3f6fe;
  --accent-2: #7c3aed;   /* segundo color de los degradados (cambia con el color elegido) */
  
  /* Mesh Gradients — Estilo iPhone con colores difuminados (ADIÓS AZUL) */
  --mesh-blue: none;   /* tarjetas limpias: sin difuminados de color de fondo */
               
  --mesh-vibrant: radial-gradient(at 0% 0%, rgba(47, 91, 234, 0.22) 0%, transparent 60%), 
                  radial-gradient(at 100% 0%, rgba(162, 155, 254, 0.15) 0%, transparent 60%),
                  radial-gradient(at 50% 100%, rgba(100, 210, 255, 0.1) 0%, transparent 60%),
                  #0a0b12; /* Fondo oscuro profundo que resalta el texto y se integra en modo oscuro */

  /* Especialidades — Tonos Pastel Difuminados (Inspirados en acabados iPhone 15/16) */
  --sp-medint: #af52de;     --sp-medint-soft: #f9f2ff; /* Medicina Interna a Púrpura (para evitar el azul) */
  --sp-cir:    #ff6b6b;     --sp-cir-soft:    #fff5f5; /* Soft Red */
  --sp-ped:    #7bed9f;     --sp-ped-soft:    #f1fcf4; /* Mint Green */
  --sp-gin:    #ff9ff3;     --sp-gin-soft:    #fff5fe; /* Soft Pink */
  --sp-neu:    #a29bfe;     --sp-neu-soft:    #f5f4ff; /* Soft Purple */
  --sp-gas:    #fab1a0;     --sp-gas-soft:    #fff6f4; /* Soft Orange */
  --sp-psi:    #5e5ce6;     --sp-psi-soft:    #f5f5ff; /* Indigo */
  --sp-urg:    #81ecec;     --sp-urg-soft:    #f2ffff; /* Soft Teal */
  --sp-epi:    #8e8e93;     --sp-epi-soft:    #f8f8fa; /* Gris claro distinto para Epidemiología */
  --sp-atls:   #f97316;     --sp-atls-soft:   #fff7ed; /* Naranja ATLS */
  --sp-oft:    #0891b2;     --sp-oft-soft:    #ecfeff; /* Cyan Oftalmología */
  --sp-uro:    #2563eb;     --sp-uro-soft:    #eff6ff; /* Azul Urología */
  --sp-oto:    #4f46e5;     --sp-oto-soft:    #eef2ff; /* Indigo Otorrino */
  --sp-tyo:    #d97706;     --sp-tyo-soft:    #fffbeb; /* Amber Traumatología */
  --sp-reuma:  #10b981;     --sp-reuma-soft:  #ecfdf5; /* Esmeralda Reumatología */
  --sp-inf:    #eab308;     --sp-inf-soft:    #fefce8; /* Amarillo Infectología */

  /* Sub-especialidades de Medicina Interna */
  --sp-cardio:   #e11d48;   --sp-cardio-soft:   #fff1f5; /* Rosa Cardiología */
  --sp-gastro:   #b45309;   --sp-gastro-soft:   #fef3c7; /* Ámbar Gastroenterología */
  --sp-neumo:    #0284c7;   --sp-neumo-soft:    #e0f2fe; /* Azul cielo Neumología */
  --sp-hemato:   #be185d;   --sp-hemato-soft:   #fdf2f8; /* Rosa oscuro Hematología */
  --sp-nefro:    #2563eb;   --sp-nefro-soft:    #dbeafe; /* Azul Nefrología */
  --sp-endocrin: #7c3aed;   --sp-endocrin-soft: #ede9fe; /* Violeta Endocrinología */
  --sp-onco:     #475569;   --sp-onco-soft:     #f1f5f9; /* Gris azulado Oncología */
  --sp-geria:    #059669;   --sp-geria-soft:    #d1fae5; /* Esmeralda Geriatría */
  --sp-hepato:   #c2410c;   --sp-hepato-soft:   #ffedd5; /* Naranja oscuro Hepatología */
  --sp-der:      #ea580c;   --sp-der-soft:      #fff7ed; /* Naranja Dermatología */

  /* Estado */
  --ok: #34c759;            --ok-soft: #f2fff5;
  --warn: #ff9500;          --warn-soft: #fff9f0;
  --err: #ff3b30;           --err-soft: #fff2f1;

  /* Sombra */
  --sh-1: 0 1px 2px rgba(14,20,36,.05), 0 0 0 1px rgba(14,20,36,.04);
  --sh-2: 0 4px 14px rgba(14,20,36,.06), 0 1px 2px rgba(14,20,36,.04);
  --sh-3: 0 24px 56px -16px rgba(14,20,36,.18), 0 4px 12px rgba(14,20,36,.06);
  --sh-pop: 0 8px 20px -4px color-mix(in srgb, var(--accent), transparent 70%);

  /* Radios */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  /* Tipografía */
  --font-ui: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Fraunces', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Curvas */
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --ease-smooth: cubic-bezier(.4,0,.2,1);
}

/* Modo oscuro (opcional vía data-theme) */
[data-theme="dark"], [data-theme="dark"] :root {
  --bg: #000000;
  --surface: #1c1c1e;    /* Apple Dark Surface */
  --surface-2: #2c2c2e;  /* Apple Dark Elevation 1 */
  --surface-3: #3a3a3c;  /* Apple Dark Elevation 2 */
  --line: #38383a;
  --line-strong: #48484a;
  --ink: #f8fafc;        /* Blanco hueso para lectura */
  --ink-2: #cbd5e1;      /* Gris claro */
  --ink-3: #7c8499;

  /* Specialty Soft Colors - Dark Mode Refined */
  --sp-medint-soft: #1a2547;
  --sp-cir-soft:    #2d141a;
  --sp-ped-soft:    #0d2a1f;
  --sp-gin-soft:    #2d1420;
  --sp-neu-soft:    #1a142d;
  --sp-gas-soft:    #2a220d;
  --sp-psi-soft:    #25142d;
  --sp-urg-soft:    #0d222a;
  --sp-atls-soft:   #2d1a0d;
  --sp-epi-soft:    #1e1b4b;
  --sp-oft-soft:    #083344;
  --sp-uro-soft:    #1e3a8a;
  --sp-oto-soft:    #1e1b4b;
  --sp-tyo-soft:    #451a03;
  --sp-reuma-soft:  #065f46;
  --sp-inf-soft:    #854d09;

  /* Sub-especialidades — modo oscuro */
  --sp-cardio-soft:   #2d0a14;
  --sp-gastro-soft:   #2c1a08;
  --sp-neumo-soft:    #072338;
  --sp-hemato-soft:   #2d0c1e;
  --sp-nefro-soft:    #0c1838;
  --sp-endocrin-soft: #1c0f38;
  --sp-onco-soft:     #1a2030;
  --sp-geria-soft:    #02261a;
  --sp-hepato-soft:   #2c0e04;
  --sp-der-soft:      #2c1008;

  /* Status Soft Colors - Dark Mode Refined */
  --ok-soft:   #0d2a1f;
  --warn-soft: #2a220d;
  --err-soft:  #2d141a;

  --accent: #6b8cff;   /* más claro en fondo oscuro (contraste 6:1) */
  --accent-soft: #172448;
  --accent-tint: #111a33;
  --sh-1: 0 1px 2px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.04);
  --sh-2: 0 4px 14px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
  --sh-3: 0 24px 56px -16px rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.3);
}

/* Modos Dinámicos por Especialidad */
.mode-general { --accent: #2f5bea; --accent-soft: #e6ecfd; --accent-tint: #f3f6fe; }
.mode-medint { --accent: var(--sp-medint); --accent-soft: var(--sp-medint-soft); --accent-tint: var(--sp-medint-soft); }
.mode-cir    { --accent: var(--sp-cir);    --accent-soft: var(--sp-cir-soft);    --accent-tint: var(--sp-cir-soft); }
.mode-ped    { --accent: var(--sp-ped);    --accent-soft: var(--sp-ped-soft);    --accent-tint: var(--sp-ped-soft); }
.mode-gin    { --accent: var(--sp-gin);    --accent-soft: var(--sp-gin-soft);    --accent-tint: var(--sp-gin-soft); }
.mode-epi    { --accent: var(--sp-epi);    --accent-soft: var(--sp-epi-soft);    --accent-tint: var(--sp-epi-soft); }
.mode-neu    { --accent: var(--sp-neu);    --accent-soft: var(--sp-neu-soft);    --accent-tint: var(--sp-neu-soft); }
.mode-gas    { --accent: var(--sp-gas);    --accent-soft: var(--sp-gas-soft);    --accent-tint: var(--sp-gas-soft); }
.mode-psi    { --accent: var(--sp-psi);    --accent-soft: var(--sp-psi-soft);    --accent-tint: var(--sp-psi-soft); }
.mode-urg    { --accent: var(--sp-urg);    --accent-soft: var(--sp-urg-soft);    --accent-tint: var(--sp-urg-soft); }
.mode-atls   { --accent: var(--sp-atls);   --accent-soft: var(--sp-atls-soft);   --accent-tint: var(--sp-atls-soft); }
.mode-oft    { --accent: var(--sp-oft);    --accent-soft: var(--sp-oft-soft);    --accent-tint: var(--sp-oft-soft); }
.mode-uro    { --accent: var(--sp-uro);    --accent-soft: var(--sp-uro-soft);    --accent-tint: var(--sp-uro-soft); }
.mode-oto    { --accent: var(--sp-oto);    --accent-soft: var(--sp-oto-soft);    --accent-tint: var(--sp-oto-soft); }
.mode-tyo    { --accent: var(--sp-tyo);    --accent-soft: var(--sp-tyo-soft);    --accent-tint: var(--sp-tyo-soft); }
.mode-reuma   { --accent: var(--sp-reuma);  --accent-soft: var(--sp-reuma-soft);  --accent-tint: var(--sp-reuma-soft); }
.mode-inf    { --accent: var(--sp-inf);    --accent-soft: var(--sp-inf-soft);    --accent-tint: var(--sp-inf-soft); }
/* Sub-especialidades */
.mode-cardio   { --accent: var(--sp-cardio);   --accent-soft: var(--sp-cardio-soft);   --accent-tint: var(--sp-cardio-soft); }
.mode-gastro   { --accent: var(--sp-gastro);   --accent-soft: var(--sp-gastro-soft);   --accent-tint: var(--sp-gastro-soft); }
.mode-neumo    { --accent: var(--sp-neumo);    --accent-soft: var(--sp-neumo-soft);    --accent-tint: var(--sp-neumo-soft); }
.mode-hemato   { --accent: var(--sp-hemato);   --accent-soft: var(--sp-hemato-soft);   --accent-tint: var(--sp-hemato-soft); }
.mode-nefro    { --accent: var(--sp-nefro);    --accent-soft: var(--sp-nefro-soft);    --accent-tint: var(--sp-nefro-soft); }
.mode-endocrin { --accent: var(--sp-endocrin); --accent-soft: var(--sp-endocrin-soft); --accent-tint: var(--sp-endocrin-soft); }
.mode-onco     { --accent: var(--sp-onco);     --accent-soft: var(--sp-onco-soft);     --accent-tint: var(--sp-onco-soft); }
.mode-geria    { --accent: var(--sp-geria);    --accent-soft: var(--sp-geria-soft);    --accent-tint: var(--sp-geria-soft); }
.mode-hepato   { --accent: var(--sp-hepato);   --accent-soft: var(--sp-hepato-soft);   --accent-tint: var(--sp-hepato-soft); }
.mode-der      { --accent: var(--sp-der);      --accent-soft: var(--sp-der-soft);      --accent-tint: var(--sp-der-soft); }

/* Color de la página (29-sep-2026): el alumno elige el color principal (botón "Color" junto a "Oscuro" y Mi perfil → Apariencia).
   Va en <html data-acento="…"> y cambia el acento del modo general; los modos por especialidad conservan su color (ayudan a
   ubicarse). Sin atributo = azul. Contraste revisado (WCAG): en claro, texto blanco sobre el color ≥ 5:1 y el color sobre el fondo
   ≥ 4.7:1; en oscuro, el mismo equilibrio que el azul original (≈3:1 con blanco, ≈6:1 sobre el fondo). Lista en window.ACENTOS. */
:root[data-acento="indigo"],   [data-acento="indigo"] .mode-general   { --accent: #4f46e5; --accent-deep: #4338ca; --accent-soft: #e0e7ff; --accent-tint: #f5f6ff; --accent-2: #7c3aed; }
:root[data-acento="violeta"],  [data-acento="violeta"] .mode-general  { --accent: #7c3aed; --accent-deep: #6d28d9; --accent-soft: #ede9fe; --accent-tint: #f8f5ff; --accent-2: #c026d3; }
:root[data-acento="turquesa"], [data-acento="turquesa"] .mode-general { --accent: #0f766e; --accent-deep: #115e59; --accent-soft: #ccfbf1; --accent-tint: #effdfa; --accent-2: #0369a1; }
:root[data-acento="verde"],    [data-acento="verde"] .mode-general    { --accent: #15803d; --accent-deep: #166534; --accent-soft: #dcfce7; --accent-tint: #f1fdf4; --accent-2: #0f766e; }
:root[data-acento="rosa"],     [data-acento="rosa"] .mode-general     { --accent: #be185d; --accent-deep: #9d174d; --accent-soft: #fce7f3; --accent-tint: #fdf2f8; --accent-2: #9333ea; }
:root[data-acento="naranja"],  [data-acento="naranja"] .mode-general  { --accent: #c2410c; --accent-deep: #9a3412; --accent-soft: #ffedd5; --accent-tint: #fff7ed; --accent-2: #be185d; }
:root[data-acento="grafito"],  [data-acento="grafito"] .mode-general  { --accent: #374151; --accent-deep: #1f2937; --accent-soft: #e5e7eb; --accent-tint: #f4f5f7; --accent-2: #1f2937; }
:root[data-theme="dark"][data-acento="indigo"],   [data-theme="dark"][data-acento="indigo"] .mode-general   { --accent: #7c83ff; --accent-soft: #1e1b4b; --accent-tint: #14132e; }
:root[data-theme="dark"][data-acento="violeta"],  [data-theme="dark"][data-acento="violeta"] .mode-general  { --accent: #9b6cf5; --accent-soft: #2e1065; --accent-tint: #1b1033; }
:root[data-theme="dark"][data-acento="turquesa"], [data-theme="dark"][data-acento="turquesa"] .mode-general { --accent: #14a394; --accent-soft: #073b37; --accent-tint: #0a2523; }
:root[data-theme="dark"][data-acento="verde"],    [data-theme="dark"][data-acento="verde"] .mode-general    { --accent: #22a352; --accent-soft: #0b3a1d; --accent-tint: #0a2414; }
:root[data-theme="dark"][data-acento="rosa"],     [data-theme="dark"][data-acento="rosa"] .mode-general     { --accent: #e8559a; --accent-soft: #4a0d2a; --accent-tint: #2a0b1b; }
:root[data-theme="dark"][data-acento="naranja"],  [data-theme="dark"][data-acento="naranja"] .mode-general  { --accent: #e8702a; --accent-soft: #45190a; --accent-tint: #2a1308; }
:root[data-theme="dark"][data-acento="grafito"],  [data-theme="dark"][data-acento="grafito"] .mode-general  { --accent: #8a94a6; --accent-soft: #2a2f3a; --accent-tint: #1a1d24; }
.muestras-color { display: flex; flex-wrap: wrap; gap: 8px; }
.muestra-color { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line); cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; }
.muestra-color.elegida { box-shadow: 0 0 0 2px var(--ink); }
@media (max-width: 1024px) { .muestra-color { width: 44px; height: 44px; } }

/* Dark mode overrides para clases de modo — necesario porque .mode-X sobreescribe --accent-tint
   con colores claros y [data-theme="dark"] solo no puede pisarlos por especificidad */
[data-theme="dark"] .mode-general  { --accent: #6b8cff; --accent-tint: #111a33; --accent-soft: #172448; }
[data-theme="dark"] .mode-medint   { --accent-tint: var(--sp-medint-soft); --accent-soft: var(--sp-medint-soft); }
[data-theme="dark"] .mode-cir      { --accent-tint: var(--sp-cir-soft);    --accent-soft: var(--sp-cir-soft); }
[data-theme="dark"] .mode-ped      { --accent-tint: var(--sp-ped-soft);    --accent-soft: var(--sp-ped-soft); }
[data-theme="dark"] .mode-gin      { --accent-tint: var(--sp-gin-soft);    --accent-soft: var(--sp-gin-soft); }
[data-theme="dark"] .mode-epi      { --accent-tint: var(--sp-epi-soft);    --accent-soft: var(--sp-epi-soft); }
[data-theme="dark"] .mode-neu      { --accent-tint: var(--sp-neu-soft);    --accent-soft: var(--sp-neu-soft); }
[data-theme="dark"] .mode-gas      { --accent-tint: var(--sp-gas-soft);    --accent-soft: var(--sp-gas-soft); }
[data-theme="dark"] .mode-psi      { --accent-tint: var(--sp-psi-soft);    --accent-soft: var(--sp-psi-soft); }
[data-theme="dark"] .mode-urg      { --accent-tint: var(--sp-urg-soft);    --accent-soft: var(--sp-urg-soft); }
[data-theme="dark"] .mode-atls     { --accent-tint: var(--sp-atls-soft);   --accent-soft: var(--sp-atls-soft); }
[data-theme="dark"] .mode-oft      { --accent-tint: var(--sp-oft-soft);    --accent-soft: var(--sp-oft-soft); }
[data-theme="dark"] .mode-uro      { --accent-tint: var(--sp-uro-soft);    --accent-soft: var(--sp-uro-soft); }
[data-theme="dark"] .mode-oto      { --accent-tint: var(--sp-oto-soft);    --accent-soft: var(--sp-oto-soft); }
[data-theme="dark"] .mode-tyo      { --accent-tint: var(--sp-tyo-soft);    --accent-soft: var(--sp-tyo-soft); }
[data-theme="dark"] .mode-reuma    { --accent-tint: var(--sp-reuma-soft);  --accent-soft: var(--sp-reuma-soft); }
[data-theme="dark"] .mode-inf      { --accent-tint: var(--sp-inf-soft);    --accent-soft: var(--sp-inf-soft); }
[data-theme="dark"] .mode-cardio   { --accent-tint: var(--sp-cardio-soft);   --accent-soft: var(--sp-cardio-soft); }
[data-theme="dark"] .mode-gastro   { --accent-tint: var(--sp-gastro-soft);   --accent-soft: var(--sp-gastro-soft); }
[data-theme="dark"] .mode-neumo    { --accent-tint: var(--sp-neumo-soft);    --accent-soft: var(--sp-neumo-soft); }
[data-theme="dark"] .mode-hemato   { --accent-tint: var(--sp-hemato-soft);   --accent-soft: var(--sp-hemato-soft); }
[data-theme="dark"] .mode-nefro    { --accent-tint: var(--sp-nefro-soft);    --accent-soft: var(--sp-nefro-soft); }
[data-theme="dark"] .mode-endocrin { --accent-tint: var(--sp-endocrin-soft); --accent-soft: var(--sp-endocrin-soft); }
[data-theme="dark"] .mode-onco     { --accent-tint: var(--sp-onco-soft);     --accent-soft: var(--sp-onco-soft); }
[data-theme="dark"] .mode-geria    { --accent-tint: var(--sp-geria-soft);    --accent-soft: var(--sp-geria-soft); }
[data-theme="dark"] .mode-hepato   { --accent-tint: var(--sp-hepato-soft);   --accent-soft: var(--sp-hepato-soft); }
[data-theme="dark"] .mode-der      { --accent-tint: var(--sp-der-soft);      --accent-soft: var(--sp-der-soft); }

[data-theme="dark"] .screen-pill {
  background: var(--surface-2);
  color: var(--ink);
}

/* Asegurar que el fondo del body siempre use el token */
body {
  background-color: var(--bg);
  color: var(--ink);
  transition: background-color 0.2s ease;
}

/* Corregir inputs que a veces se quedan blancos en navegadores antiguos */
input, select, textarea {
  background-color: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
}

/* Forzar que las tarjetas usen la variable surface en modo oscuro */
.card {
  background-color: var(--surface);
  background-image: var(--mesh-blue); /* Sutil difuminado en todas las tarjetas */
  color: var(--ink);
  border: 1px solid var(--line);
}

/* Reset suave */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button, input, textarea, select {
  color: inherit;
  font: inherit;
}
button { font-family: inherit; }
::selection { background: var(--accent); color: white; }

/* Utilidades comunes */
.serif { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em; }
.mono { font-family: var(--font-mono); }
.eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Animación global de entrada de pantalla */
@keyframes screenIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.screen-in { animation: screenIn .5s var(--ease-out) both; }

/* Animaciones de retroalimentación inmediata */
@keyframes successPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); box-shadow: 0 0 20px var(--ok-soft); }
  100% { transform: scale(1); }
}

@keyframes errorShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}

.anim-success { animation: successPop 0.4s var(--ease-spring); }
.anim-error { animation: errorShake 0.4s var(--ease-out); }

/* Scrollbar discreta */
.scroll-area::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll-area::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; }
.scroll-area::-webkit-scrollbar-track { background: transparent; }

/* Botón base */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .18s var(--ease-spring), box-shadow .18s var(--ease-out), background .18s, color .18s, border-color .18s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(.98); }
.btn-primary {
  background: var(--ink);
  color: white;
}
.btn-primary:hover { box-shadow: 0 8px 20px -8px var(--ink); transform: translateY(-1px); }
.btn-accent {
  background: var(--accent);
  color: white;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.btn-accent:hover { box-shadow: var(--sh-pop); transform: translateY(-1px); }
.btn-ghost {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}
.btn-ghost:hover { background: var(--surface-2); border-color: var(--line-strong); }
.btn-sm { padding: 6px 12px; font-size: 13px; border-radius: var(--r-sm); }
.btn-lg { padding: 14px 22px; font-size: 15px; }

/* Tarjeta base */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}

/* Chips */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  background: var(--surface-2);
  color: var(--ink-2);
  border: 1px solid var(--line);
}
.chip-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Campo de formulario (inputs y textareas de login, onboarding y edición de temas). Antes solo existía dentro de
   tweaks-panel.jsx, que la app no carga: los campos salían sin estilo y angostísimos. */
.twk-field {
  appearance: none; display: block; width: 100%; box-sizing: border-box;
  padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-sm, 8px);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; outline: none;
  transition: border-color .15s;
}
textarea.twk-field { padding: 10px 12px; line-height: 1.5; resize: vertical; }
input.twk-field, select.twk-field { min-height: 40px; }
/* Elegir archivo: botón cómodo de tocar (el nativo mide ~27 px) */
input[type=file] { min-height: 44px; max-width: 100%; font-family: inherit; font-size: 14px; color: var(--ink-2); }
input[type=file]::file-selector-button { min-height: 40px; padding: 8px 14px; margin-right: 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.twk-field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft, rgba(99,102,241,.15)); }

/* Simulador: caso a la izquierda, pregunta y opciones a la derecha; todo cabe en la pantalla sin desplazar la página.
   Si un caso es muy largo, se desplaza solo esa columna. En pantallas angostas o bajas vuelve a una sola columna. */
.sim-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.sim-col { max-height: calc(100vh - 150px); overflow-y: auto; }
@media (max-width: 1100px), (max-height: 560px) {
  .sim-grid { grid-template-columns: 1fr; }
  .sim-col { max-height: none; overflow: visible; }
}

/* Barra progreso */
.bar { height: 6px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .6s var(--ease-out); }

/* ═══ Celular y tableta ══════════════════════════════════════════════════════
   Hasta 1024 px: barra superior (☰, sección, buscar, racha), menú deslizable y barra inferior con las 5 secciones
   principales al alcance del pulgar. Hasta 640 px (celular): todo en una columna y botones más grandes para el dedo.
   Las rejillas con estilo en línea se acomodan solas; una rejilla que NO debe cambiar lleva la clase .grid-keep y una
   fila que debe deslizarse de lado lleva .fila-desliza. */
.barra-superior { position: sticky; top: 0; z-index: 900; display: flex; align-items: center; gap: 4px; height: 54px; padding: 0 6px;
  background: var(--surface); border-bottom: 1px solid var(--line); box-sizing: content-box; padding-top: env(safe-area-inset-top); }
.barra-btn { width: 44px; height: 44px; border: none; background: transparent; border-radius: 12px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.barra-btn:active { background: var(--surface-2); }
.barra-titulo { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; cursor: pointer; }
.barra-titulo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-racha { border: 1px solid var(--line); background: var(--surface-2); border-radius: 999px; padding: 7px 11px; font-weight: 700; font-size: 13px; color: var(--ink); font-family: inherit; flex-shrink: 0; cursor: pointer; }
.barra-inferior { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--surface); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -4px 18px rgba(0,0,0,.06); }
.barra-inferior button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 60px; border: none;
  background: transparent; font-size: 11px; font-weight: 600; color: var(--ink-3); font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.barra-inferior button.activo { color: var(--accent); }
.barra-inferior button.activo span { font-weight: 800; }
.cajon-fondo { position: fixed; inset: 0; z-index: 3000; background: rgba(10,10,20,.45); animation: fadeInOverlay .15s ease; }
.cajon { position: absolute; top: 0; bottom: 0; left: 0; width: min(300px, 86vw); background: var(--surface); box-shadow: 0 0 40px rgba(0,0,0,.25);
  animation: cajonEntra .2s ease-out; overflow-y: auto; }
.cajon aside { width: 100% !important; height: auto !important; min-height: 100%; border-right: none !important; position: static !important; }
@keyframes cajonEntra { from { transform: translateX(-100%); } to { transform: none; } }

.app-compacta { flex-direction: column; }
.app-compacta .main-content { height: auto !important; overflow: visible !important; min-width: 0; }
.con-barras .main-content { padding: 14px 16px 90px !important; min-height: calc(100vh - 54px); overflow-x: hidden !important; }
.app-compacta .solo-escritorio { display: none !important; }
.fila-desliza::-webkit-scrollbar { display: none; }

/* en pantallas táctiles no se muestran las ayudas de teclado */
@media (hover: none) and (pointer: coarse) {
  .solo-teclado { display: none !important; }
}

@media (max-width: 1024px) {
  .hero-visual { display: none !important; }
  .main-content [style*="grid-column: span"] { grid-column: auto !important; }
  .main-content [style*="grid-template-columns: repeat(6"]:not(.grid-keep) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-rows: auto !important; }
  .fila-desliza { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
}

@media (max-width: 640px) {
  /* una columna (las rejillas de 4 quedan en 2x2: indicadores y botones de calificar) */
  .main-content [style*="grid-template-columns"]:not(.grid-keep) { grid-template-columns: minmax(0, 1fr) !important; }
  .main-content [style*="grid-template-columns: repeat(4, 1fr)"]:not(.grid-keep),
  .main-content [style*="grid-template-columns: repeat(4, minmax(0, 1fr))"]:not(.grid-keep) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .main-content [style*="grid-auto-rows"]:not(.grid-keep) { grid-auto-rows: auto !important; }
  .main-content h1 { font-size: clamp(22px, 7vw, 30px) !important; line-height: 1.15 !important; }
  .main-content section[style] { padding-left: 16px !important; padding-right: 16px !important; }
  .main-content .page-header { gap: 10px !important; }
  .main-content .page-header > :last-child:not(:first-child) { width: 100%; }
  .btn { min-height: 42px; }
  .btn-sm { min-height: 36px; }
  input, select, textarea { font-size: 16px !important; }   /* sin esto el iPhone hace zoom al escribir */
  .main-content .card { border-radius: 16px; }
  .sim-col { max-height: none !important; }
}

/* Auditoría de celular (29-sep-2026, tests/auditoria_movil.py): todo lo que se toca mide al menos 44 px de alto (Apple pide 44,
   Google 48), la barra inferior se lee sin forzar la vista y el texto corrido va a la izquierda: justificado en una columna
   angosta abría huecos enormes entre palabras. */
@media (max-width: 640px) {
  .btn, .btn-sm { min-height: 44px; }
  button.chip { min-height: 40px; padding: 8px 14px; font-size: 13px; }
  .twk-field, input.twk-field, select.twk-field { min-height: 44px; }
  .texto-corrido { text-align: left !important; }
  .solo-con-imagenes-vacio { display: none !important; }
  /* filtros en una fila que se desliza y el buscador a todo lo ancho, debajo (Especialidades, lista de temas) */
  .fila-filtros > .fila-desliza button { min-height: 44px; flex-shrink: 0; }
  .fila-filtros .caja-buscar { flex: 1 1 100%; min-height: 44px; box-sizing: border-box; }
  .fila-filtros .caja-buscar input { width: 100% !important; }
  .cabecera-con-buscador { flex-direction: column; align-items: stretch !important; gap: 12px !important; }
  .cabecera-con-buscador .caja-buscar { width: auto !important; margin-bottom: 0 !important; min-height: 44px; box-sizing: border-box; }
  /* pie de las páginas públicas, "Inicia sesión / Regístrate", "+ Seleccionar más especialidades" */
  .enlace-pie { padding: 11px 0 !important; min-height: 44px; }
  .enlace-toggle { min-height: 44px; padding: 10px 8px !important; }
  /* portada: los dos botones principales a todo lo ancho, uno debajo del otro */
  .ctas-portada > button { flex: 1 1 100%; }
  /* opciones de la pregunta del día y especialidades del simulador (2 por renglón) */
  .opcion-pdd { min-height: 44px; padding: 10px 12px !important; font-size: 14px !important; }
  .rejilla-especialidades { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .boton-especialidad { min-height: 48px; }
}
.botones-llamar { display: none; }
@media (max-width: 1024px) {
  .botones-llamar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
  .botones-llamar .btn { flex: 1 1 200px; min-height: 44px; text-decoration: none; }
  .barra-racha { min-height: 44px; padding: 9px 13px; }
  .barra-inferior button { font-size: 12px; }
}

/* inicio de sesión en celular y tableta: solo el formulario, con scroll normal */
@media (max-width: 1024px) {
  .pantalla-login { grid-template-columns: minmax(0, 1fr) !important; height: auto !important; min-height: 100vh; overflow: visible !important; }
  .pantalla-login .login-lado { display: none !important; }
}
@media (max-width: 640px) { .pantalla-login .login-form { padding: 20px 18px 40px !important; justify-content: flex-start !important; border-left: none !important; } }
@media (max-width: 640px) {
  .oculto-celular { display: none !important; }
  .main-content [style*="padding: 10px 20px"] { padding-left: 12px !important; padding-right: 12px !important; gap: 10px !important; }
}

/* tablas dentro de las secciones de un tema (escalas, criterios, dosis…) */
.tabla-tema-marco { overflow-x: auto; margin: 4px 0 20px; border: 1px solid var(--line); border-radius: 10px; }
.tabla-tema { border-collapse: collapse; width: 100%; font-size: 13.5px; line-height: 1.45; text-align: left; }
.tabla-tema th { background: var(--accent-tint); color: var(--ink); font-weight: 700; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tabla-tema td { padding: 7px 10px; border-top: 1px solid var(--line); vertical-align: top; color: var(--ink-2); }
.tabla-tema tbody tr:nth-child(even) td { background: var(--surface-2); }
@media (max-width: 640px) { .tabla-tema { font-size: 12.5px; } .tabla-tema td, .tabla-tema th { min-width: 110px; } }

/* tema en tableta y celular: la columna de imágenes, progreso y notas va debajo del contenido */
@media (max-width: 1024px) { .tema-grid { grid-template-columns: minmax(0, 1fr) !important; } }
/* simulador en celular: botones arriba y la barra de avance en su propio renglón */
@media (max-width: 640px) {
  .sim-cabecera { flex-wrap: wrap; gap: 8px !important; padding-left: 10px !important; padding-right: 10px !important; }
  .sim-cabecera > div[style*="flex: 1"] { order: 10; flex: 1 1 100% !important; }
}
@media (max-width: 1024px) { .main-content section[style] { overflow-x: clip; } }

/* ═══ Rediseño 27-sep-2026 (docs/SISTEMA_DISENO.md) ═══════════════════════════════════════════════════════════
   Páginas hub, navegación de 5 secciones, entradas escalonadas y Bienestar. Toda animación: 150-500 ms, con propósito,
   y se apaga con "reducir movimiento" del sistema. */

/* Entrada escalonada: cada tarjeta lleva style={{'--i': n}} */
@keyframes aparecer { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.aparece { animation: aparecer .5s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 55ms); }

/* Encabezado grande de cada sección (estilo Apple: título enorme, subtítulo gris) */
.hub-titulo { font-size: clamp(30px, 4vw, 44px); font-weight: 800; letter-spacing: -0.022em; line-height: 1.05; margin: 0; color: var(--ink); }
.hub-sub { margin: 8px 0 0; font-size: 16px; color: var(--ink-3); max-width: 640px; line-height: 1.5; }

/* Tarjeta de hub: icono en cuadro suave, título, una línea, flecha que avanza al pasar el cursor */
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.hub-card { display: flex; align-items: center; gap: 18px; padding: 22px 22px; text-align: left; width: 100%; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); color: var(--ink);
  font-family: inherit; transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .25s; position: relative; }
.hub-card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.hub-card:active { transform: translateY(0) scale(.99); }
.hub-card:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 2px; }
.hub-card .hub-ico { width: 52px; height: 52px; border-radius: 15px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: var(--accent-tint); border: 1px solid var(--accent-soft); transition: transform .3s var(--ease-spring); }
.hub-card:hover .hub-ico { transform: scale(1.06) rotate(-3deg); }
.hub-card .hub-t { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hub-card .hub-d { font-size: 14px; color: var(--ink-3); margin-top: 3px; line-height: 1.45; }
.hub-card .hub-flecha { margin-left: auto; opacity: .45; transition: transform .25s var(--ease-out), opacity .25s; flex-shrink: 0; }
.hub-card:hover .hub-flecha { transform: translateX(4px); opacity: 1; }
.hub-card.destacada { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%); color: white; border-color: transparent; }
.hub-card.destacada .hub-d { color: rgba(255,255,255,.82); }
.hub-card.destacada .hub-ico { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.22); }
.hub-card.destacada .hub-flecha { opacity: .9; }
.pastilla { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700;
  letter-spacing: .02em; background: var(--accent-soft); color: var(--accent); }
.hub-card.destacada .pastilla { background: rgba(255,255,255,.2); color: white; }

/* Navegación lateral nueva: 5 secciones grandes, sin emojis */
.nav-sec { width: 100%; display: flex; align-items: center; gap: 12px; padding: 11px 12px; border: none; border-radius: 12px; cursor: pointer;
  background: transparent; color: var(--ink-2); font-family: inherit; font-size: 15px; font-weight: 500; text-align: left;
  transition: background .18s, color .18s; position: relative; }
.nav-sec:hover { background: var(--surface-2); color: var(--ink); }
.nav-sec.activa { background: var(--accent-tint); color: var(--accent); font-weight: 700; box-shadow: inset 0 0 0 1px var(--accent-soft); }
.nav-sec .punto { margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* Bienestar: círculo que respira */
.respira-circulo { width: 190px; height: 190px; border-radius: 50%; margin: 10px auto;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--accent) 35%, white), var(--accent));
  box-shadow: 0 20px 60px -18px color-mix(in srgb, var(--accent) 70%, transparent);
  display: flex; align-items: center; justify-content: center; color: white; font-weight: 800; font-size: 34px;
  transform: scale(.62); transition-property: transform; transition-timing-function: cubic-bezier(.45,.05,.55,.95); }
.respira-circulo.grande { transform: scale(1); }
.opcion-carita { font-size: 30px; padding: 14px 0; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); cursor: pointer;
  transition: transform .2s var(--ease-spring), background .2s, border-color .2s; }
.opcion-carita:hover { transform: translateY(-2px); }
.opcion-carita.elegida { background: var(--accent-tint); border-color: var(--accent); transform: scale(1.06); }

/* Botón flotante (Director / respiración rápida) */
.flotante { position: fixed; right: 26px; bottom: 26px; z-index: 800; }
.con-barras .flotante { bottom: 84px; right: 16px; }

/* «Reducir movimiento» (Windows con las animaciones apagadas, ajuste del celular): MENOS movimiento, no cero (2-oct-2026). Antes se
   apagaba todo, hasta los cambios al pasar el cursor, y la página se veía muerta (así la veía el dueño). Ahora: las entradas son solo
   desvanecidos, sin desplazamientos ni vaivenes (los de la portada se quitan en su sección), y las transiciones quedan cortas. */
@media (prefers-reduced-motion: reduce) {
  html, * { scroll-behavior: auto !important; }
  .screen-in, .aparece { animation-name: aparecerSuave !important; animation-duration: .3s !important; }
  *, *::before, *::after { transition-duration: .15s !important; }
  .respira-circulo { transition-duration: .01ms !important; }
}
@keyframes aparecerSuave { from { opacity: 0; } to { opacity: 1; } }

/* Tonos de tarjeta (identidad propia, 27-sep-2026): cada tarjeta hub lleva su color en el icono (degradado, icono blanco)
   y una línea de color arriba al pasar el cursor. Se asignan en orden (HubTarjeta: prop "tono" o por índice). */
.tono-azul    { --t1: #2f5bea; --t2: #5b7cff; }
.tono-violeta { --t1: #7c3aed; --t2: #a78bfa; }
.tono-verde   { --t1: #059669; --t2: #34d399; }
.tono-ambar   { --t1: #d97706; --t2: #fbbf24; }
.tono-coral   { --t1: #e11d48; --t2: #fb7185; }
.tono-cielo   { --t1: #0284c7; --t2: #38bdf8; }
.hub-card[class*="tono-"] .hub-ico { background: linear-gradient(135deg, var(--t1), var(--t2)); border: none; box-shadow: 0 8px 18px -8px var(--t1); }
.hub-card[class*="tono-"]::before { content: ''; position: absolute; left: 22px; right: 22px; top: 0; height: 3px; border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--t1), var(--t2)); opacity: 0; transition: opacity .25s; }
.hub-card[class*="tono-"]:hover::before { opacity: 1; }
.hub-card[class*="tono-"]:hover { border-color: color-mix(in srgb, var(--t1) 35%, var(--line)); }
.hub-card.destacada[class*="tono-"] { background: linear-gradient(135deg, var(--t1), color-mix(in srgb, var(--t1) 70%, black)); }
.hub-card.destacada[class*="tono-"] .hub-ico { background: rgba(255,255,255,.18); box-shadow: none; }

/* Receta del día (Mi día): encabezado con franja de color y "Rx" */
.receta { position: relative; overflow: hidden; }
.receta-cabeza { padding: 22px 24px 14px; background: linear-gradient(120deg, var(--accent-tint) 0%, color-mix(in srgb, var(--accent-2) 8%, var(--surface)) 100%);
  border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 16px; }
.receta-rx { width: 54px; height: 54px; border-radius: 16px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: white; font: 800 24px/1 Georgia, serif; font-style: italic; box-shadow: 0 10px 22px -10px var(--accent); }
.indicacion { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface);
  cursor: pointer; text-align: left; font-family: inherit; color: var(--ink); transition: transform .2s var(--ease-out), box-shadow .2s, border-color .2s; }
.indicacion:hover { transform: translateX(3px); box-shadow: var(--sh-1); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.indicacion .num { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--accent); color: var(--accent); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; flex-shrink: 0; }
[data-theme="dark"] .receta-cabeza { background: linear-gradient(120deg, var(--accent-tint), var(--surface-2)); }

/* Bienestar en la barra lateral: verde calma, separado de las secciones de estudio */
.nav-bienestar { border: 1px dashed color-mix(in srgb, #059669 40%, var(--line)); }
.nav-bienestar .nav-bien-ico { width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #059669, #34d399); flex-shrink: 0; }
.nav-bienestar.activa { background: color-mix(in srgb, #059669 10%, var(--surface)); color: #047857; box-shadow: inset 0 0 0 1px color-mix(in srgb, #059669 30%, transparent); }
/* iconos de color en la barra lateral (cada sección con su tono, igual que Bienestar) */
.nav-ico { width: 28px; height: 28px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: linear-gradient(135deg, var(--t1), var(--t2)); box-shadow: 0 4px 10px -5px var(--t1); transition: transform .25s var(--ease-spring); }
.nav-sec:hover .nav-ico { transform: scale(1.08) rotate(-4deg); }
.nav-sec:not(.activa) .nav-ico { filter: saturate(.85); }
/* Ventana de bienvenida del primer inicio de sesión (el panel se ve difuminado detrás) */
.bienvenida-fondo { position: fixed; inset: 0; z-index: 2500; background: rgba(15, 18, 35, .45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: flex-start; justify-content: center; padding: 4vh 16px; overflow-y: auto; animation: fadeInOverlay .25s ease; }
.bienvenida-ventana { width: min(680px, 100%); background: var(--surface); border-radius: 26px; box-shadow: 0 40px 90px -30px rgba(0,0,0,.45);
  padding: 34px 36px 30px; animation: aparecer .45s var(--ease-out) both; }
.bienvenida-ventana h1 { font-size: 32px !important; }
@media (max-width: 640px) { .bienvenida-ventana { padding: 22px 18px; border-radius: 20px; } }
@keyframes fadeInOverlay { from { opacity: 0; } to { opacity: 1; } }

/* ═══ Internado Edge (27-sep-2026) ═══ Misma estructura y componentes, con acento verde azulado y secciones propias. */
.modo-internado, [data-modo="internado"] { --accent: #0d9488; --accent-deep: #0f766e; --accent-soft: #ccfbf1; --accent-tint: #f0fdfa; --rx2: #0ea5e9; }
[data-theme="dark"] [data-modo="internado"], [data-theme="dark"].modo-internado { --accent: #2dd4bf; --accent-soft: #0f3b37; --accent-tint: #0b2825; }
[data-modo="internado"] .receta-rx, [data-modo="internado"] .btn-rx { background: linear-gradient(135deg, var(--accent), var(--rx2)) !important; }
[data-modo="internado"] .receta-cabeza { background: linear-gradient(120deg, var(--accent-tint) 0%, color-mix(in srgb, #0ea5e9 8%, var(--surface)) 100%); }
/* selector ENARM Edge | Internado Edge (inicio de sesión y Mi perfil) */
.selector-modo { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); margin-bottom: 20px; }
.selector-modo button { border: none; background: transparent; border-radius: 12px; padding: 9px 10px; cursor: pointer; font-family: inherit; text-align: left; color: var(--ink-2); transition: background .2s, box-shadow .2s, color .2s; }
.selector-modo button b { display: block; font-size: 14px; }
.selector-modo button span { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }
.selector-modo button.activo { background: var(--surface); box-shadow: var(--sh-1); }
.selector-modo button.activo.modo-enarm b { color: #2f5bea; }
.selector-modo button.activo.modo-internado b { color: #0d9488; }

/* ── Selector de dos o tres apartados (ficha del hospital: Reseñas | Así es la sede) ── */
.segmento { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.segmento button { flex: 1; border: none; background: transparent; border-radius: 9px; padding: 7px 10px; cursor: pointer; font-family: inherit;
  font-size: 13px; font-weight: 600; color: var(--ink-3); transition: background .2s, box-shadow .2s, color .2s; }
.segmento button.activo { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); }

/* ── Galería de fotos de «Así es la sede»: se desliza con el dedo, una foto por vista ── */
.galeria-sede { position: relative; border-radius: 12px; overflow: hidden; background: var(--surface-2); }
.galeria-sede-pista { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.galeria-sede-pista::-webkit-scrollbar { display: none; }
.galeria-sede-pista a { flex: 0 0 100%; scroll-snap-align: center; }
.galeria-sede-pista img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.galeria-sede-puntos { position: absolute; bottom: 8px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; }
.galeria-sede-puntos button { width: 7px; height: 7px; padding: 0; border-radius: 50%; border: none; cursor: pointer; background: rgba(255,255,255,.55); transition: width .2s, background .2s; }
.galeria-sede-puntos button.activo { width: 18px; border-radius: 4px; background: #fff; }

/* ── Mi semana (screens-plan.jsx): un renglón por día ── */
.dia-plan { display: grid; grid-template-columns: 92px 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 16px; }
@media (max-width: 560px) {
  .dia-plan { grid-template-columns: 72px minmax(0, 1fr) auto; gap: 10px; padding: 12px; }
  .dia-plan .dia-plan-ico { display: none !important; }
}

/* ═══ Biblioteca (29-sep-2026, screens-biblioteca.jsx): estantes con portadas ═══════════════════════════════════════
   Cada libro trae su tramo de repisa; con separación horizontal 0 los tramos forman una repisa continua por renglón. */
.biblioteca-fondo { background: linear-gradient(180deg, color-mix(in srgb, #c89a64 10%, var(--surface)), var(--surface)); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px 10px 30px; }
.estante { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); column-gap: 0; row-gap: 30px; }
.libro { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; background: none; border: none; cursor: pointer; font-family: inherit; color: var(--ink); text-align: center; min-width: 0; }
.libro-marco { position: relative; width: 100%; display: flex; justify-content: center; padding: 0 12px 14px; box-sizing: border-box; }
.libro-marco::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: linear-gradient(#c28a52, #8a5a2e 70%, #6e4522);
  box-shadow: 0 8px 10px -6px rgba(0,0,0,.35); }
.libro-tapa { position: relative; z-index: 1; width: 100%; max-width: 118px; aspect-ratio: 3 / 4; border-radius: 3px 6px 6px 3px; overflow: hidden; background: #f4f1ea;
  box-shadow: 0 10px 16px -8px rgba(0,0,0,.5), 0 2px 4px rgba(0,0,0,.2); transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out); }
.libro-tapa::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 8px; z-index: 2; background: linear-gradient(90deg, rgba(0,0,0,.3), rgba(255,255,255,.14) 60%, rgba(0,0,0,.06)); }
.libro-tapa img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.libro:hover .libro-tapa, .libro:focus-visible .libro-tapa { transform: translateY(-5px) rotate(-1.2deg); box-shadow: 0 18px 24px -10px rgba(0,0,0,.55), 0 3px 6px rgba(0,0,0,.2); }
.libro:focus-visible { outline: none; }
.libro:focus-visible .libro-titulo { text-decoration: underline; }
.libro-titulo { font-size: 12.5px; font-weight: 600; line-height: 1.3; padding: 0 8px; overflow-wrap: anywhere; max-width: 100%; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.libro-candado { position: absolute; right: 6px; top: 6px; z-index: 2; background: rgba(255,255,255,.92); border-radius: 999px; padding: 3px 6px; font-size: 13px; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.libro:has(.libro-candado) .libro-tapa > :not(.libro-candado) { filter: grayscale(.6) opacity(.75); }
.libro-meta { font-size: 12px; color: var(--ink-3); padding: 0 6px; }
.libro-generado { width: 100%; height: 100%; box-sizing: border-box; padding: 12px 10px 10px 16px; display: flex; flex-direction: column; justify-content: space-between; color: #fff; text-align: left; }
.lg-marca { font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.lg-titulo { font-family: var(--font-serif, Georgia, serif); font-size: 13px; font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.lg-pie { font-size: 10px; font-weight: 700; opacity: .9; border-top: 1px solid rgba(255,255,255,.35); padding-top: 5px; }
@media (max-width: 640px) {
  .biblioteca-fondo { padding: 18px 2px 24px; }
  .estante { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 24px; }
  .libro-marco { padding: 0 8px 12px; }
  .libro-marco::after { height: 12px; }
  .libro-titulo { font-size: 12px; padding: 0 4px; }
}

/* ─── Pagar un plan (2-oct-2026): transferencia SPEI verificada con Banxico, Conekta u otro medio ─── */
.pago-pestanas { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.pago-pestana { flex: 1 1 120px; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 52px; padding: 8px 10px; border-radius: var(--r-md); border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
.pago-pestana small { font-weight: 500; font-size: 12px; color: var(--ink-3); }
.pago-pestana.activa { border-color: var(--accent); background: var(--accent-tint, var(--surface-2)); color: var(--accent); }
.pago-pasos { display: flex; flex-direction: column; gap: 10px; }
.pago-paso { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14.5px; margin-top: 6px; }
.pago-num { flex: 0 0 26px; height: 26px; border-radius: 999px; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.cuentas-spei { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.cuenta-spei { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 58px; padding: 10px 12px; border-radius: var(--r-md); border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.cuenta-spei span { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cuenta-spei small { font-size: 12px; color: var(--ink-3); }
.cuenta-spei.elegida { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft, rgba(99,102,241,.15)); }
.cuenta-spei:disabled { opacity: .45; cursor: not-allowed; }
.datos-transferencia { border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; background: var(--surface-2); }
.dato-copiable { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); min-height: 44px; }
.datos-transferencia .eyebrow + .dato-copiable { border-top: none; }
.dato-etiqueta { flex: 0 0 96px; font-size: 12.5px; color: var(--ink-3); }
.dato-valor { flex: 1; min-width: 0; font-size: 15px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.pago-nota { font-size: 13px; line-height: 1.5; color: var(--ink-2); margin-top: 8px; }
.pago-ayuda { font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
.pago-aviso { font-size: 13.5px; line-height: 1.45; color: var(--danger, #dc2626); background: var(--danger-soft, rgba(220,38,38,.08)); border-radius: var(--r-sm); padding: 8px 10px; }
.pago-instrucciones { white-space: pre-wrap; font-size: 13.5px; line-height: 1.55; background: var(--surface-2); border-radius: var(--r-md); padding: 10px 12px; border: 1px solid var(--line); }
.pago-estado { text-align: center; padding: 6px 0; display: flex; flex-direction: column; align-items: center; }
.pago-icono { font-size: 40px; line-height: 1; min-height: 44px; display: flex; align-items: center; }
.pago-titulo { font-weight: 800; font-size: 18px; margin: 10px 0 6px; }
.pago-texto { font-size: 14px; line-height: 1.55; color: var(--ink-2); max-width: 46ch; }
.pago-dato { font-size: 13px; color: var(--ink-2); margin-top: 8px; overflow-wrap: anywhere; }
.pago-ok .pago-titulo { color: var(--ok, #16a34a); }
.pago-mal .pago-titulo { color: var(--danger, #dc2626); }
.pago-girando { width: 34px; height: 34px; border-radius: 999px; border: 4px solid var(--line); border-top-color: var(--accent); animation: pagoGira 0.9s linear infinite; }
@keyframes pagoGira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pago-girando { animation-duration: 3s; } }
@media (max-width: 640px) { .dato-etiqueta { flex-basis: 82px; } .pago-titulo { font-size: 17px; } .pago-columnas > :last-child { order: -1; } }   /* en el celular, primero el pago */