/* ─── Tipografía ──────────────────────────────────────────────────────────
   Fraunces (serif editorial, variable) para títulos/marca — Inter (sans,
   variable) para todo lo demás. Autohospedadas en /fonts (mismo origen,
   sin tocar la CSP ni sumar un CDN externo). Un solo archivo por familia
   cubre todo el rango de peso que se usa (son fuentes variables). */
@font-face{
  font-family:"Fraunces";
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url("/fonts/fraunces-variable.woff2") format("woff2");
}
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("/fonts/inter-variable.woff2") format("woff2");
}

:root{
  --font-marca:"Fraunces",Georgia,serif;
  --font-texto:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  /* Editorial cálido: papel casi blanco, tinta cálida, acento en latón —
     nada de gris azulado ni degradé arcoíris. */
  --primary:#2f5d50;
  --primary-dark:#1f4038;
  --primary-rgb:47,93,80;
  --accent:#b5824a;
  --accent-2:#d4af7a;
  --accent-rgb:181,130,74;
  --bg:#faf8f4;
  --card:#ffffff;
  --border:#e7e0d3;
  --text:#24211b;
  --text-muted:#83796a;
  --success:#3d7a52; --success-bg:rgba(61,122,82,.09);
  --warning:#a8763a; --warning-bg:rgba(168,118,58,.09);
  --danger:#a13e3e; --danger-bg:rgba(161,62,62,.08);
  --gradient-vitalis:linear-gradient(135deg,var(--primary-dark),var(--primary));

  --radius:10px;
  --radius-sm:7px;
  --sombra:0 1px 2px rgba(36,33,27,.04);
}

/* ─── Tema "Symphomed Dental" (tinta azul apagado + latón) ──────────────── */
body.tema-dental{
  --primary:#5b84a8;
  --primary-dark:#3d5f7d;
  --primary-rgb:91,132,168;
  --accent:#c9a05f;
  --accent-2:#dfc088;
  --accent-rgb:201,160,95;
  --bg:#12181f;
  --card:#1a222c;
  --border:#2b3542;
  --text:#eef1f4;
  --text-muted:#8d9aa8;
  --success:#5a9d6e; --success-bg:rgba(90,157,110,.14);
  --warning:#c99a52; --warning-bg:rgba(201,154,82,.14);
  --danger:#c26262; --danger-bg:rgba(194,98,98,.14);
  --gradient-vitalis:linear-gradient(135deg,var(--primary-dark),var(--primary));
}
body.tema-dental input,body.tema-dental select,body.tema-dental textarea{background:#1c2530;}
body.tema-dental button.secondary{background:rgba(91,132,168,.14);color:var(--accent-2);}
body.tema-dental .segmento.h0{background:#1c2530;}
body.tema-dental .segmento.h1{background:rgba(201,160,95,.14);}
body.tema-dental .brief-card{background:linear-gradient(135deg,#1a2732,#151e27);}

/* ─── Tema "Symphomed Face" (rosa ceniza + latón) ────────────────────────── */
body.tema-estetica{
  --primary:#a8567e;
  --primary-dark:#7d3f5f;
  --primary-rgb:168,86,126;
  --accent:#c9a05f;
  --accent-2:#dfc088;
  --accent-rgb:201,160,95;
  --bg:#181113;
  --card:#231a1e;
  --border:#382a2f;
  --text:#f1e8ea;
  --text-muted:#a8949a;
  --success:#5a9d6e; --success-bg:rgba(90,157,110,.14);
  --warning:#c99a52; --warning-bg:rgba(201,154,82,.14);
  --danger:#c26262; --danger-bg:rgba(194,98,98,.14);
  --gradient-vitalis:linear-gradient(135deg,var(--primary-dark),var(--primary));
}
body.tema-estetica input,body.tema-estetica select,body.tema-estetica textarea{background:#271c21;}
body.tema-estetica button.secondary{background:rgba(168,86,126,.16);color:var(--accent-2);}
body.tema-estetica .segmento.h0{background:#271c21;}
body.tema-estetica .segmento.h1{background:rgba(201,160,95,.14);}
body.tema-estetica .brief-card{background:linear-gradient(135deg,#241a1f,#1c1418);}

/* ─── Tema "Symphomed Visión" (índigo apagado + latón) ───────────────────── */
body.tema-oftalmologia{
  --primary:#5c6394;
  --primary-dark:#40456b;
  --primary-rgb:92,99,148;
  --accent:#c9a05f;
  --accent-2:#dfc088;
  --accent-rgb:201,160,95;
  --bg:#12121a;
  --card:#1a1a26;
  --border:#2a2a3a;
  --text:#e9e9f0;
  --text-muted:#9797a8;
  --success:#5a9d6e; --success-bg:rgba(90,157,110,.14);
  --warning:#c99a52; --warning-bg:rgba(201,154,82,.14);
  --danger:#c26262; --danger-bg:rgba(194,98,98,.14);
  --gradient-vitalis:linear-gradient(135deg,var(--primary-dark),var(--primary));
}
body.tema-oftalmologia input,body.tema-oftalmologia select,body.tema-oftalmologia textarea{background:#1c1c29;}
body.tema-oftalmologia button.secondary{background:rgba(92,99,148,.16);color:var(--accent-2);}
body.tema-oftalmologia .segmento.h0{background:#1c1c29;}
body.tema-oftalmologia .segmento.h1{background:rgba(201,160,95,.14);}
body.tema-oftalmologia .brief-card{background:linear-gradient(135deg,#1b1b28,#151520);}

/* ─── Tema "Symphomed Veterinaria" (verde bosque apagado + ámbar) ────────── */
body.tema-veterinaria{
  --primary:#4a7d54;
  --primary-dark:#345c3c;
  --primary-rgb:74,125,84;
  --accent:#c9944f;
  --accent-2:#dbb37e;
  --accent-rgb:201,148,79;
  --bg:#12160f;
  --card:#1a2116;
  --border:#2c3627;
  --text:#edf1e8;
  --text-muted:#99a38f;
  --success:#5a9d6e; --success-bg:rgba(90,157,110,.14);
  --warning:#c99a52; --warning-bg:rgba(201,154,82,.14);
  --danger:#c26262; --danger-bg:rgba(194,98,98,.14);
  --gradient-vitalis:linear-gradient(135deg,var(--primary-dark),var(--primary));
}
body.tema-veterinaria input,body.tema-veterinaria select,body.tema-veterinaria textarea{background:#1d2519;}
body.tema-veterinaria button.secondary{background:rgba(74,125,84,.16);color:var(--accent-2);}
body.tema-veterinaria .segmento.h0{background:#1d2519;}
body.tema-veterinaria .segmento.h1{background:rgba(201,148,79,.14);}
body.tema-veterinaria .brief-card{background:linear-gradient(135deg,#1a2318,#161d13);}

/* ─── Tema "Symphomed Obstetricia" (terracota apagado + latón) ───────────── */
body.tema-ginecologia{
  --primary:#bd6b4f;
  --primary-dark:#8f4f39;
  --primary-rgb:189,107,79;
  --accent:#c9a05f;
  --accent-2:#dfc088;
  --accent-rgb:201,160,95;
  --bg:#161210;
  --card:#221b18;
  --border:#372c27;
  --text:#f1e9e4;
  --text-muted:#a89890;
  --success:#5a9d6e; --success-bg:rgba(90,157,110,.14);
  --warning:#c99a52; --warning-bg:rgba(201,154,82,.14);
  --danger:#c26262; --danger-bg:rgba(194,98,98,.14);
  --gradient-vitalis:linear-gradient(135deg,var(--primary-dark),var(--primary));
}
body.tema-ginecologia input,body.tema-ginecologia select,body.tema-ginecologia textarea{background:#271e1a;}
body.tema-ginecologia button.secondary{background:rgba(189,107,79,.16);color:var(--accent-2);}

/* Symphomed Pediatría — verde azulado suave con acento durazno: la única
   rama donde el que mira la pantalla muchas veces es la madre, no el
   médico, así que se busca cercanía antes que aire clínico. */
body.tema-pediatria{
  --primary:#3f9aa8;
  --primary-dark:#2c6f7a;
  --primary-rgb:63,154,168;
  --accent:#e79f6d;
  --accent-2:#f2bf96;
  --accent-rgb:231,159,109;
  --bg:#101718;
  --card:#182325;
  --border:#27383a;
  --text:#e8f1f2;
  --text-muted:#93a7a9;
  --success:#5aa87e; --success-bg:rgba(90,168,126,.14);
  --warning:#d9a05c; --warning-bg:rgba(217,160,92,.14);
  --danger:#c96a6a; --danger-bg:rgba(201,106,106,.14);
  --gradient-vitalis:linear-gradient(135deg,var(--primary-dark),var(--primary));
}
body.tema-pediatria input,body.tema-pediatria select,body.tema-pediatria textarea{background:#1c292b;}
body.tema-pediatria button.secondary{background:rgba(63,154,168,.16);color:var(--accent-2);}
body.tema-pediatria .segmento.h0{background:#1c292b;}
body.tema-pediatria .segmento.h1{background:rgba(231,159,109,.14);}
body.tema-pediatria .brief-card{background:linear-gradient(135deg,#162224,#121b1c);}

/* Symphomed Neurodesarrollo — violeta suave. Es la rama donde más veces mira
   la pantalla una madre y no un médico, y donde el mapa sensorial usa color
   para significar cosas: por eso la base es tranquila y de bajo contraste,
   para que los estados del mapa se lean solos. */
body.tema-neuro{
  --primary:#7c6bc4;
  --primary-dark:#584a94;
  --primary-rgb:124,107,196;
  --accent:#d99a6c;
  --accent-2:#ecc0a0;
  --accent-rgb:217,154,108;
  --bg:#131218;
  --card:#1e1c26;
  --border:#302d3d;
  --text:#eeecf4;
  --text-muted:#9c97ac;
  --success:#5fa47e; --success-bg:rgba(95,164,126,.14);
  --warning:#d4a05e; --warning-bg:rgba(212,160,94,.14);
  --danger:#c96f7e; --danger-bg:rgba(201,111,126,.14);
  --gradient-vitalis:linear-gradient(135deg,var(--primary-dark),var(--primary));
}
body.tema-neuro input,body.tema-neuro select,body.tema-neuro textarea{background:#242231;}
body.tema-neuro button.secondary{background:rgba(124,107,196,.16);color:var(--accent-2);}
body.tema-neuro .segmento.h0{background:#242231;}
body.tema-neuro .segmento.h1{background:rgba(217,154,108,.14);}
body.tema-neuro .brief-card{background:linear-gradient(135deg,#1d1b26,#17161e);}


body.tema-ginecologia .segmento.h0{background:#271e1a;}
body.tema-ginecologia .segmento.h1{background:rgba(201,160,95,.14);}
body.tema-ginecologia .brief-card{background:linear-gradient(135deg,#241c18,#1c1512);}

*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:var(--font-texto);background:var(--bg);color:var(--text);min-height:100vh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased;}
.header{background:var(--card);padding:16px 18px;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;}
.header .brand{display:flex;align-items:center;gap:11px;}
.header .logo{width:34px;height:34px;object-fit:contain;}
.header h1{font-family:var(--font-marca);font-weight:600;font-size:19px;color:var(--text);letter-spacing:.01em;}
.header p{font-size:11.5px;color:var(--text-muted);margin-top:1px;letter-spacing:.01em;}
.header button{background:none;border:1px solid var(--border);color:var(--text-muted);border-radius:var(--radius-sm);padding:6px 13px;font-size:12px;font-family:var(--font-texto);font-weight:500;transition:border-color .15s ease,color .15s ease;}
.header button:hover{border-color:var(--primary);color:var(--primary);}
.wrap{max-width:480px;width:100%;margin:0 auto;padding:16px;flex:1;}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:14px;box-shadow:var(--sombra);}
label{display:block;font-size:11.5px;font-weight:600;color:var(--text-muted);margin-bottom:6px;margin-top:14px;letter-spacing:.02em;text-transform:uppercase;}
label:first-child{margin-top:0;}
input,select,textarea{width:100%;background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-sm);padding:11px 12px;font-size:14px;font-family:var(--font-texto);transition:border-color .15s ease;}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(var(--primary-rgb),.12);}
textarea{resize:vertical;}
button{font-family:var(--font-texto);cursor:pointer;}
button.primary{width:100%;background:var(--gradient-vitalis);color:#fff;border:none;border-radius:var(--radius-sm);padding:13px;font-size:14.5px;font-weight:600;letter-spacing:.01em;margin-top:18px;transition:transform .1s ease,opacity .15s ease,box-shadow .15s ease;box-shadow:0 2px 8px rgba(var(--primary-rgb),.18);}
button.primary:disabled{opacity:.5;box-shadow:none;}
button.primary:active:not(:disabled){transform:scale(.98);}
button.secondary{width:100%;background:rgba(var(--primary-rgb),.08);border:1px solid transparent;color:var(--primary);border-radius:var(--radius-sm);padding:12px;font-size:13.5px;margin-top:10px;font-weight:600;transition:transform .1s ease,background .15s ease;}
button.secondary:active{transform:scale(.98);}
button.link{background:none;border:none;color:var(--primary);font-size:13px;font-weight:500;margin-top:16px;width:100%;text-align:center;}
.error{background:var(--danger-bg);border:1px solid rgba(var(--primary-rgb),0);color:var(--danger);border-radius:var(--radius-sm);padding:10px 12px;font-size:13px;margin-top:14px;}
.exito{background:var(--success-bg);border:1px solid rgba(var(--primary-rgb),0);color:var(--success);border-radius:var(--radius-sm);padding:10px 12px;font-size:13px;margin-top:14px;font-weight:600;}
.hint{font-size:12px;color:var(--text-muted);margin-top:8px;line-height:1.5;}
.item{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;margin-bottom:9px;box-shadow:var(--sombra);cursor:pointer;transition:border-color .15s ease;}
.item:hover{border-color:rgba(var(--primary-rgb),.4);}
.item .top{display:flex;justify-content:space-between;align-items:center;}
.item .nombre{font-size:14.5px;font-weight:600;}
.item .fecha{font-size:11px;color:var(--text-muted);margin-top:4px;}
.item .preview{font-size:12.5px;color:var(--text-muted);margin-top:6px;}
.item-paciente{display:flex;align-items:center;gap:12px;}
.item-action{display:inline-block;margin-top:8px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px 12px;font-size:12px;font-weight:600;color:var(--primary);}
.badge{font-size:10.5px;padding:3px 10px;border-radius:20px;white-space:nowrap;font-weight:600;letter-spacing:.02em;}
.badge-procesando{background:var(--warning-bg);color:var(--warning);}
.badge-completado{background:var(--success-bg);color:var(--success);}
.badge-error{background:var(--danger-bg);color:var(--danger);}
.empty{color:var(--text-muted);text-align:center;padding:50px 20px;font-size:13px;}
.loading{display:flex;flex-direction:column;align-items:center;gap:14px;padding:60px 20px;color:var(--text-muted);font-size:13px;}
.spinner{width:36px;height:36px;border-radius:50%;background:conic-gradient(from 0deg,var(--primary-dark),var(--primary),var(--accent),var(--primary),var(--primary-dark));animation:girar .9s linear infinite;-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));}
@keyframes girar{to{transform:rotate(360deg);}}
.file-label{display:block;text-align:center;border:1px dashed var(--border);border-radius:var(--radius-sm);padding:14px;font-size:13px;color:var(--text-muted);margin-top:10px;cursor:pointer;transition:border-color .15s ease;}
.file-label:hover{border-color:var(--primary);}
.segmento{border-radius:var(--radius);padding:10px 14px;margin-bottom:10px;max-width:88%;}
.segmento.h0{background:rgba(var(--primary-rgb),.07);margin-right:auto;}
.segmento.h1{background:rgba(var(--accent-rgb),.1);margin-left:auto;}
.segmento .quien{font-size:11px;color:var(--text-muted);margin-bottom:4px;font-weight:600;}
.segmento .texto{font-size:14px;line-height:1.4;}
.back{background:none;border:none;color:var(--primary);font-size:13px;margin-bottom:14px;font-weight:600;}
/* Grid fijo de 4 columnas: con 8 pestañas eso da exactamente 2 filas
   completas, siempre — a diferencia de una tira que scrollea, acá nunca
   queda una pestaña escondida fuera de la pantalla sin que se note. */
.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:5px;margin-bottom:16px;}
.tab{display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:none;padding:10px 2px;font-size:10.5px;font-weight:600;color:var(--text-muted);border-radius:var(--radius-sm);line-height:1.15;transition:background .15s ease,color .15s ease;font-family:var(--font-texto);}
.tab .tab-icono{font-size:16px;line-height:1;position:relative;}
.tab .tab-icono svg{width:18px;height:18px;display:block;}
/* Contador sobre el ícono (recordatorios pendientes): la info que antes
   ocupaba una tarjeta entera arriba del dashboard. */
.tab-globo{position:absolute;top:-6px;left:11px;min-width:15px;height:15px;padding:0 3px;
  border-radius:8px;background:var(--danger);color:#fff;font-size:9.5px;font-weight:700;
  line-height:15px;text-align:center;font-style:normal;}
.tab.activo{background:var(--gradient-vitalis);color:#fff;}
.seccion-titulo{font-family:var(--font-marca);font-size:13.5px;font-weight:600;color:var(--primary);margin:20px 0 9px;letter-spacing:.01em;}
.nota-titulo{font-family:var(--font-marca);font-size:15px;font-weight:600;color:var(--text);margin-bottom:10px;}
.nota-campo{font-size:13px;line-height:1.6;margin-bottom:8px;}
.nota-campo b{color:var(--text);font-weight:600;}
/* Filas de "qué aplicar al confirmar": cada una es una casilla marcada por
   defecto, que el médico desmarca si la IA entendió mal. */
.conf-fila{padding:10px 0;border-bottom:1px solid var(--border);}
.conf-fila:last-of-type{border-bottom:none;}
/* Estas etiquetas son frases completas, no títulos de campo: se sacan el
   mayúsculas/tracking que trae el label global, pensado para rótulos cortos. */
.conf-check{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;line-height:1.5;cursor:pointer;margin:0;
  text-transform:none;letter-spacing:normal;font-weight:400;color:var(--text);}
.conf-check input[type=checkbox]{width:17px;height:17px;margin:1px 0 0 0;flex-shrink:0;accent-color:var(--primary);cursor:pointer;}
.conf-check b{font-weight:600;}
.conf-fila .hint{margin:6px 0 4px 26px;}
.conf-fila input:not([type=checkbox]),.conf-fila label:not(.conf-check){margin-left:26px;width:calc(100% - 26px);}
/* Medicamentos de la nota: en pantalla angosta la dosis y la frecuencia no
   entran al lado del nombre, así que bajan a una segunda línea. */
.med-row{flex-wrap:wrap;}
.med-row .nf-med-nombre{min-width:100%;}
@media(min-width:520px){.med-row .nf-med-nombre{min-width:0;}}
.paciente-info{font-size:13px;color:var(--text-muted);margin-top:4px;line-height:1.5;}
.avatar-card{text-align:center;}
.avatar{width:58px;height:58px;border-radius:50%;background:var(--gradient-vitalis);color:#fff;font-family:var(--font-marca);font-size:20px;font-weight:600;display:flex;align-items:center;justify-content:center;margin:0 auto 10px;box-shadow:0 3px 10px rgba(var(--primary-rgb),.25);flex:0 0 auto;}
.avatar-sm{width:46px;height:46px;font-size:15px;margin:0;}
.avatar-xs{width:38px;height:38px;font-size:13px;margin:0;box-shadow:none;}
.stats-row{display:flex;gap:10px;margin-bottom:14px;}
.stat{flex:1;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px 8px;text-align:center;box-shadow:var(--sombra);}
.stat-num{font-family:var(--font-marca);font-size:19px;font-weight:600;color:var(--primary);}
.stat-lbl{font-size:10.5px;color:var(--text-muted);margin-top:3px;letter-spacing:.02em;text-transform:uppercase;}
.dato-row{font-size:13.5px;padding:9px 0;border-bottom:1px solid var(--border);}
.dato-row:last-child{border-bottom:none;}

/* Ficha del paciente: identidad + contacto + notas en un solo bloque
   compacto (antes eran 3 tarjetas blancas idénticas seguidas). */
.ficha-header{display:flex;align-items:center;gap:14px;}
.ficha-datos{margin-top:14px;padding-top:2px;border-top:1px solid var(--border);}

/* El Brief Clínico es lo primero que un médico quiere ver de un vistazo:
   más peso visual que el resto (franja de color + título más grande). */
.brief-card{background:linear-gradient(135deg,rgba(var(--primary-rgb),.06),rgba(var(--accent-rgb),.06));border:1px solid rgba(var(--primary-rgb),.18);border-left:3px solid var(--primary);}
.brief-card .nota-titulo{font-size:16px;}
.brief-alerta{color:var(--danger);}

/* Tarjetas de apoyo/secundarias: mismo contenido que antes pero con menos
   peso visual, para que no compitan con el Brief Clínico por la atención. */
.card-secundaria{background:transparent;border:1px dashed var(--border);box-shadow:none;}

/* ─── Panel "escuchando": el logo de Symphomed late con el volumen real del
   micrófono (más fuerte cuando detecta voz, casi quieto en silencio) ──── */
.listen-panel{display:none;background:linear-gradient(160deg,var(--primary-dark),rgba(0,0,0,.55)),var(--primary-dark);background-blend-mode:multiply;border-radius:16px;padding:26px 18px 22px;text-align:center;color:#fff;margin-bottom:16px;}
.listen-orb{position:relative;width:108px;height:108px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;}
.listen-ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(var(--accent-rgb),.65);pointer-events:none;
  transform:scale(calc(1 + var(--nivel,0) * .5));
  opacity:calc(var(--nivel,0) * .85);
  transition:transform .12s ease-out,opacity .12s ease-out;
}
.listen-ring-2{border-color:rgba(255,255,255,.4);
  transform:scale(calc(1.18 + var(--nivel,0) * .78));
  opacity:calc(var(--nivel,0) * .5);
}
.listen-logo{position:relative;z-index:1;width:66px;height:66px;border-radius:50%;background:#fff;padding:9px;object-fit:contain;
  transform:scale(calc(1 + var(--nivel,0) * .2));
  box-shadow:0 0 calc(8px + var(--nivel,0) * 26px) calc(1px + var(--nivel,0) * 9px) rgba(var(--accent-rgb),calc(.4 + var(--nivel,0) * .4));
  transition:transform .1s ease-out,box-shadow .1s ease-out;
  animation:respirarLogo 2.8s ease-in-out infinite;
}
@keyframes respirarLogo{0%,100%{filter:brightness(1);}50%{filter:brightness(1.06);}}
.listen-time{font-family:var(--font-marca);font-size:25px;margin-top:6px;letter-spacing:.02em;font-weight:600;}
.listen-label{font-size:12px;opacity:.75;margin-top:2px;letter-spacing:.02em;}
.live-caption{font-size:14px;line-height:1.5;color:#fff;opacity:.9;margin-top:14px;text-align:left;min-height:20px;max-height:120px;overflow-y:auto;}

/* ─── Botón de grabar: círculo con degradé de marca, "respira" suave en
   reposo para no sentirse estático, y un pulso más marcado al grabar ──── */
.rec-box{text-align:center;padding:10px 0 4px;}
.rec-btn{position:relative;width:84px;height:84px;border-radius:50%;border:none;background:var(--gradient-vitalis);color:#fff;margin:6px auto;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(var(--primary-rgb),.3),0 0 0 6px rgba(var(--primary-rgb),.08);transition:transform .15s ease,box-shadow .3s ease;}
.rec-btn svg{width:28px;height:28px;position:relative;z-index:1;}
.rec-btn:active{transform:scale(.93);}
.rec-btn:not(.recording){animation:respirarBtn 3s ease-in-out infinite;}
@keyframes respirarBtn{0%,100%{box-shadow:0 6px 18px rgba(var(--primary-rgb),.3),0 0 0 6px rgba(var(--primary-rgb),.08);}50%{box-shadow:0 6px 20px rgba(var(--primary-rgb),.4),0 0 0 10px rgba(var(--primary-rgb),.04);}}
.rec-btn.recording{background:linear-gradient(135deg,#b8534a,#8a3d36);animation:pulseBtn 1.5s ease-out infinite;}
@keyframes pulseBtn{0%{box-shadow:0 6px 18px rgba(161,62,62,.35),0 0 0 0 rgba(161,62,62,.4);}70%{box-shadow:0 6px 18px rgba(161,62,62,.35),0 0 0 18px rgba(161,62,62,0);}100%{box-shadow:0 6px 18px rgba(161,62,62,.35),0 0 0 0 rgba(161,62,62,0);}}
.rec-status{font-size:12.5px;color:var(--text-muted);margin-top:8px;}

.footer{text-align:center;font-family:var(--font-marca);font-size:11px;letter-spacing:.03em;color:var(--text-muted);padding:18px 16px 22px;}

/* ─── Transición de entrada: cada vez que se pinta una pantalla nueva
   (app.innerHTML = ...), estos son los bloques que se crean de cero, así
   que la animación se dispara sola en cada cambio de pantalla — sin tocar
   el JS de cada vista. ───────────────────────────────────────────────── */
/* Algunas pantallas se repintan solas cada pocos segundos (agenda
   esperando el QR de WhatsApp, kardex mientras se genera el brief
   clínico...) y eso vuelve a disparar esta animación en todas las
   tarjetas — por eso queda sutil (opacidad, sin desplazamiento): se nota
   como "entrada" la primera vez, y como un parpadeo casi invisible en los
   refrescos automáticos, en vez de un fundido brusco cada vez. */
@keyframes entrar{from{opacity:.5;}to{opacity:1;}}
.card,.item,.loading,.stat,.avatar-card,.empty,.error{animation:entrar .25s ease both;}

/* ─── Evolución clínica: chips de tipo + gráfico de tendencia ──────────── */
.chip-row{display:flex;gap:6px;overflow-x:auto;margin-bottom:14px;padding-bottom:2px;}
.chip{flex:0 0 auto;background:var(--card);border:1px solid var(--border);color:var(--text-muted);border-radius:16px;padding:7px 14px;font-size:12px;font-weight:600;white-space:nowrap;transition:background .15s ease,color .15s ease,border-color .15s ease;}
.chip.activo{background:var(--primary);border-color:var(--primary);color:#fff;}
.chart-legend{display:flex;gap:14px;font-size:11px;color:var(--text-muted);margin-top:8px;}
.chart-legend span{display:inline-flex;align-items:center;gap:5px;}
.chart-legend i{width:8px;height:8px;border-radius:50%;display:inline-block;}

/* ─── Memoria Clínica Conversacional: chat de preguntas sobre el paciente ── */
#memoriaChat{max-height:260px;overflow-y:auto;margin-bottom:12px;}
.memoria-pregunta{font-size:13px;font-weight:600;margin-top:12px;}
.memoria-respuesta{font-size:13px;color:var(--text-muted);line-height:1.55;margin-top:4px;padding-left:10px;border-left:2px solid var(--accent-2);}
.mic-btn{flex:0 0 auto;width:44px;height:44px;border-radius:50%;border:1px solid var(--border);background:var(--card);color:var(--primary);font-size:17px;display:flex;align-items:center;justify-content:center;transition:border-color .15s ease;}
.mic-btn:disabled{opacity:.4;}
.mic-btn.escuchando{background:var(--danger);border-color:var(--danger);color:#fff;animation:pulse 1.6s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(161,62,62,.4);}70%{box-shadow:0 0 0 12px rgba(161,62,62,0);}100%{box-shadow:0 0 0 0 rgba(161,62,62,0);}}

/* ─── Receta Digital ─────────────────────────────────────────────────── */
.rec-row{border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px;margin-top:10px;}
.rec-row .quitar-fila{background:none;border:none;color:var(--danger);font-size:12px;font-weight:600;margin-top:8px;}

/* ─── Selector de día en chips — lo usa tanto la reserva pública (elegir
   horario libre) como el calendario de Agenda del médico (elegir qué día
   ver) ──────────────────────────────────────────────────────────────── */
.reserva-dias{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-top:10px;}
.reserva-dia-chip{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:2px;width:56px;padding:10px 4px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);position:relative;transition:background .15s ease,border-color .15s ease;}
.reserva-dia-chip.activo{background:var(--gradient-vitalis);border-color:transparent;}
.reserva-dia-chip.activo *{color:#fff;}
.reserva-dia-semana{font-size:10px;text-transform:uppercase;color:var(--text-muted);font-weight:600;letter-spacing:.02em;}
.reserva-dia-numero{font-family:var(--font-marca);font-size:19px;font-weight:600;}
.reserva-dia-mes{font-size:10px;color:var(--text-muted);text-transform:uppercase;}
.reserva-dia-badge{font-size:10px;font-weight:700;color:var(--primary);background:var(--card);border-radius:8px;padding:0 6px;line-height:1.5;}
.reserva-dia-chip.activo .reserva-dia-badge{color:var(--primary);background:#fff;}
.reserva-horas{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.reserva-hora-chip{flex:0 0 auto;padding:9px 14px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:13px;font-weight:600;transition:background .15s ease;}
.reserva-hora-chip.activo{background:var(--gradient-vitalis);border-color:transparent;color:#fff;}

/* ─── Plan de tratamiento / presupuesto ────────────────────────────────── */
.plan-resumen{display:flex;gap:8px;margin:10px 0 14px;}
.plan-resumen>div{flex:1;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:12px 6px;text-align:center;}
.plan-resumen-num{font-family:var(--font-marca);font-size:15px;font-weight:600;}
.plan-resumen-lbl{font-size:10px;color:var(--text-muted);text-transform:uppercase;margin-top:2px;letter-spacing:.02em;}

@media print{
  .no-imprimir{display:none !important;}
  body{background:#fff;}
  .wrap{padding:0;max-width:100%;}
  #recetaHoja{box-shadow:none;border:none;padding:0 !important;}
}

/* ─── Odontograma ─────────────────────────────────────────────────────── */
.pieza-dental rect{transition:opacity .1s ease;}
.pieza-dental:hover rect{opacity:.8;}
.odonto-leyenda{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 14px;margin-top:16px;}
.odonto-leyenda-item{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--text-muted);}
.odonto-leyenda-item i{display:inline-block;width:10px;height:10px;border-radius:3px;}

.odonto-timeline{position:relative;padding-left:38px;margin-top:10px;}
.odonto-timeline::before{content:"";position:absolute;left:15px;top:4px;bottom:4px;width:2px;background:var(--border);}
.odonto-timeline-item{position:relative;margin-bottom:16px;}
.odonto-timeline-item:last-child{margin-bottom:0;}
.odonto-timeline-icono{position:absolute;left:-38px;top:0;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;box-shadow:0 0 0 3px var(--card);}
.odonto-timeline-fecha{font-size:11px;color:var(--text-muted);}
.odonto-timeline-titulo{font-size:14px;font-weight:600;margin-top:1px;}

/* ─── Vista de escritorio (≥1024px, con sesión activa) ───────────────────
   Reusa los mismos tokens de color/tipografía de siempre (incluidos los 5
   temas por especialidad, que ya definen --primary/--card/--border/etc.)
   así que el sidebar y el contenido heredan la identidad visual sin tocar
   nada más — ver escritorio.js para cómo se arma/activa. */
.escr-shell{display:none;min-height:100vh;}
.escr-sidebar{width:230px;flex:0 0 auto;background:var(--card);border-right:1px solid var(--border);padding:20px 14px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;}
.escr-marca{display:flex;align-items:center;gap:10px;padding:0 8px 20px;}
.escr-logo{width:30px;height:30px;object-fit:contain;}
.escr-marca span{font-family:var(--font-marca);font-weight:600;font-size:16.5px;color:var(--text);letter-spacing:.01em;}
.escr-nav{display:flex;flex-direction:column;gap:2px;flex:1;}
.escr-nav-item{display:flex;align-items:center;gap:11px;background:none;border:none;color:var(--text-muted);font-family:var(--font-texto);font-size:13.5px;font-weight:600;padding:11px 12px;border-radius:var(--radius-sm);text-align:left;transition:background .15s ease,color .15s ease;}
.escr-nav-item:hover{background:rgba(var(--primary-rgb),.07);color:var(--text);}
.escr-nav-item.activo{background:var(--gradient-vitalis);color:#fff;}
.escr-nav-icono{width:18px;height:18px;flex:0 0 auto;display:flex;}
.escr-nav-icono svg{width:18px;height:18px;}
.escr-salir{background:none;border:1px solid var(--border);color:var(--text-muted);font-size:12.5px;font-weight:600;padding:10px;border-radius:var(--radius-sm);margin-top:10px;transition:border-color .15s ease,color .15s ease;}
.escr-salir:hover{border-color:var(--danger);color:var(--danger);}
.escr-main{flex:1;min-width:0;display:flex;flex-direction:column;}
.escr-topbar{display:flex;justify-content:space-between;align-items:center;padding:18px 32px;border-bottom:1px solid var(--border);background:var(--card);position:sticky;top:0;z-index:5;}
.escr-topbar-titulo{font-family:var(--font-marca);font-size:19px;font-weight:600;color:var(--text);}
.escr-topbar-usuario{font-size:13px;color:var(--text-muted);font-weight:500;}
.escr-content{flex:1;padding:28px 32px;max-width:1180px;width:100%;}
.escr-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px;}
.escr-stat{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--sombra);}
.escr-stat-valor{font-family:var(--font-marca);font-size:28px;font-weight:600;color:var(--primary);}
.escr-stat-label{font-size:12px;color:var(--text-muted);margin-top:4px;font-weight:500;}
.escr-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.escr-acciones{display:flex;flex-direction:column;}
.escr-lista{display:flex;flex-direction:column;gap:2px;}
.escr-lista-item{display:flex;align-items:center;gap:12px;padding:10px 8px;border-radius:var(--radius-sm);}
.escr-lista-item-click{cursor:pointer;transition:background .15s ease;}
.escr-lista-item-click:hover{background:rgba(var(--primary-rgb),.06);}
.escr-lista-item-error{cursor:pointer;background:var(--danger-bg);}
.escr-lista-hora{font-size:12.5px;font-weight:700;color:var(--primary);min-width:44px;}
.escr-lista-titulo{font-size:13.5px;font-weight:600;}
.escr-lista-sub{font-size:11.5px;color:var(--text-muted);margin-top:1px;}
.escr-barras{display:flex;align-items:flex-end;gap:14px;height:140px;padding-top:8px;}
.escr-barra-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;}
.escr-barra{width:100%;max-width:34px;background:var(--gradient-vitalis);border-radius:5px 5px 0 0;min-height:4px;}
.escr-barra-valor{font-size:11px;font-weight:700;color:var(--text-muted);margin-bottom:4px;}
.escr-barra-label{font-size:11px;color:var(--text-muted);margin-top:6px;text-transform:capitalize;}

@media (max-width:1279px){
  .escr-grid-2{grid-template-columns:1fr;}
  .escr-stats{grid-template-columns:repeat(2,1fr);}
}

/* ─── Preguntale a Symphomed ─────────────────────────────────────────────── */
/* El "?" del encabezado: mismo peso visual que "Salir", sin competirle. */
.btn-ayuda{width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:700;background:transparent;border:1px solid var(--border);color:var(--text-muted);
  cursor:pointer;padding:0;transition:border-color .15s ease,color .15s ease;}
.btn-ayuda:hover{border-color:var(--primary);color:var(--primary);}

/* Panel flotante: en celular ocupa casi toda la pantalla, en escritorio se
   ancla abajo a la derecha para no tapar lo que el médico está mirando. */
.asistente-panel{position:fixed;z-index:60;display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--border);box-shadow:0 12px 40px rgba(0,0,0,.35);
  inset:auto 0 0 0;height:min(78vh,560px);border-radius:16px 16px 0 0;}
@media(min-width:720px){
  .asistente-panel{inset:auto 20px 20px auto;width:400px;height:min(70vh,600px);border-radius:16px;}
}
.asistente-cabecera{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;
  padding:14px 16px;border-bottom:1px solid var(--border);}
.asistente-titulo{font-family:var(--font-titulo,inherit);font-weight:700;font-size:15px;color:var(--primary);}
.asistente-sub{font-size:11.5px;color:var(--text-muted);margin-top:2px;}
.asistente-cerrar{background:transparent;border:none;color:var(--text-muted);font-size:17px;cursor:pointer;padding:2px 6px;width:auto;}

.asistente-mensajes{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px;}
.asistente-vacio{text-align:center;color:var(--text-muted);font-size:13px;line-height:1.5;margin:auto 0;}
.asistente-sugerencia{display:block;width:100%;text-align:left;margin:0 0 7px;padding:9px 12px;font-size:12.5px;
  background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);cursor:pointer;}
.asistente-sugerencia:hover{border-color:var(--primary);}

.asistente-msg{max-width:86%;padding:9px 12px;border-radius:13px;font-size:13.5px;line-height:1.55;white-space:normal;}
.asistente-msg-yo{align-self:flex-end;background:var(--primary);color:#fff;border-bottom-right-radius:4px;}
.asistente-msg-ia{align-self:flex-start;background:var(--bg);border:1px solid var(--border);border-bottom-left-radius:4px;}

/* Los tres puntitos mientras piensa */
.asistente-puntos{display:inline-flex;gap:4px;align-items:center;height:16px;}
.asistente-puntos i{width:6px;height:6px;border-radius:50%;background:var(--text-muted);animation:asist-latir 1.2s infinite;}
.asistente-puntos i:nth-child(2){animation-delay:.18s;}
.asistente-puntos i:nth-child(3){animation-delay:.36s;}
@keyframes asist-latir{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.asistente-pie{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--border);}
.asistente-pie input{margin:0;flex:1;}
.asistente-pie button{margin:0;width:auto;padding:11px 16px;white-space:nowrap;}

/* ═══ HOJA MEMBRETADA DE INFORMES ═══════════════════════════════════════
   La hoja se dibuja siempre en claro, aunque Symphomed esté en tema oscuro:
   es un documento que se imprime en papel y que el paciente va a mirar
   fuera de la app. Un informe médico en fondo negro no lo lee nadie. */
.inf-barra{display:flex;gap:8px;padding:10px;background:#15151a;justify-content:flex-end;z-index:2}
.inf-hoja{
  background:#fff;color:#1a1a1a;max-width:820px;margin:16px auto 40px;padding:34px 38px;
  border-radius:4px;box-shadow:0 6px 28px rgba(0,0,0,.35);
  font-family:Georgia,"Times New Roman",serif;font-size:14px;line-height:1.55;
}
.inf-cabecera{display:flex;align-items:center;gap:16px;border-bottom:2px solid #1a1a1a;padding-bottom:14px}
.inf-logo{max-height:64px;max-width:150px;object-fit:contain}
.inf-nombre-centro{font-size:20px;font-weight:700;letter-spacing:.3px}
.inf-datos-centro{font-size:12px;color:#555;margin-top:2px}
.inf-titulo{text-align:center;font-size:17px;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin:20px 0 14px}
.inf-datos{width:100%;border-collapse:collapse;margin-bottom:20px;font-size:13px}
.inf-datos td{border:1px solid #d4d4d4;padding:7px 10px;width:50%;vertical-align:top}
.inf-datos b{font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:#666;font-weight:700}
.inf-bloque{margin-bottom:16px}
.inf-bloque h3{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:#444;
  border-bottom:1px solid #ddd;padding-bottom:3px;margin:0 0 7px}
.inf-bloque p{margin:0;text-align:justify}
.inf-imagenes{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.inf-imagenes figure{margin:0;text-align:center}
.inf-imagenes img{width:100%;background:#000;border:1px solid #ccc;border-radius:3px;
  max-height:270px;object-fit:contain}
.inf-imagenes figcaption{font-size:11px;color:#666;margin-top:3px}
.inf-firma{margin-top:38px;text-align:center;page-break-inside:avoid}
.inf-firma img{max-height:58px;display:block;margin:0 auto -6px}
.inf-linea{width:230px;border-top:1px solid #1a1a1a;margin:0 auto 5px}
.inf-profesional{font-size:12.5px;line-height:1.4}
.inf-pie-firma{font-size:10px;color:#777;margin-top:6px}
.inf-pie{margin-top:26px;border-top:1px solid #ddd;padding-top:9px;font-size:10.5px;color:#666;text-align:center}
.inf-verificacion{margin-top:4px;font-size:9.5px;color:#888}

@media print{
  .inf-hoja{box-shadow:none;margin:0;padding:0;max-width:none;border-radius:0}
  #hojaInforme{position:static !important;background:#fff !important;overflow:visible !important}
  .inf-bloque,.inf-imagenes figure{page-break-inside:avoid}
  @page{margin:14mm}
}
@media(max-width:640px){
  .inf-hoja{padding:20px 16px;margin:8px;font-size:13px}
  .inf-cabecera{flex-direction:column;text-align:center;gap:8px}
  .inf-datos td{display:block;width:auto;border-bottom:none}
  .inf-datos tr:last-child td:last-child{border-bottom:1px solid #d4d4d4}
}

/* ══════════════════════════════════════════════════════════════════════════
   SYMPHOMED FACE — consola de análisis facial
   ──────────────────────────────────────────────────────────────────────────
   Tema oscuro propio: es la única pantalla del sistema donde lo que importa
   es la foto, y un fondo claro alrededor de una cara cambia cómo se percibe
   la piel. Todo con tokens propios (--vf-*) para no tocar el resto de la app.
   ══════════════════════════════════════════════════════════════════════════ */
.vf-capa{
  --vf-fondo:#0b0d12; --vf-panel:#11141b; --vf-borde:#1e2430;
  --vf-texto:#e8ebf0; --vf-suave:#93a1b5; --vf-acento:#38bdf8; --vf-verde:#2dd4bf;
  position:fixed; inset:0; z-index:9500; overflow-y:auto;
  background:var(--vf-fondo); color:var(--vf-texto);
  font-size:14px; line-height:1.5;
}
.vf-cargando{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;min-height:70vh;color:var(--vf-suave);font-size:13.5px}

.vf-shell{display:grid;grid-template-columns:250px minmax(0,1fr) 330px;
  gap:14px;padding:14px;max-width:1700px;margin:0 auto;align-items:start}
@media (max-width:1200px){ .vf-shell{grid-template-columns:1fr} }

/* ─── Lateral ─────────────────────────────────────────────────────────── */
.vf-lateral{background:var(--vf-panel);border:1px solid var(--vf-borde);border-radius:14px;
  padding:14px;display:flex;flex-direction:column;gap:16px;position:sticky;top:14px}
@media (max-width:1200px){ .vf-lateral{position:static} }
.vf-marca{display:flex;align-items:center;gap:10px}
.vf-marca-icono{width:36px;height:36px;border-radius:10px;flex:0 0 36px;
  background:linear-gradient(135deg,var(--vf-acento),var(--vf-verde));
  color:#04121b;font-weight:800;font-size:19px;display:flex;align-items:center;justify-content:center}
.vf-marca-nombre{font-weight:700;letter-spacing:.06em;font-size:13.5px}
.vf-marca-sub{font-size:11px;color:var(--vf-acento);letter-spacing:.03em}
.vf-paciente{background:#0d1017;border:1px solid var(--vf-borde);border-radius:10px;padding:10px 12px}
.vf-paciente-tit{font-size:10px;text-transform:uppercase;letter-spacing:.13em;color:var(--vf-suave);opacity:.75}
.vf-paciente-nombre{font-weight:600;margin-top:3px}
.vf-paciente-datos{font-size:11.5px;color:var(--vf-suave)}
.vf-lateral-tit{font-size:10px;text-transform:uppercase;letter-spacing:.13em;
  color:var(--vf-suave);opacity:.75;margin-bottom:8px}
.vf-tira{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:7px}
.vf-tira-item{all:unset;cursor:pointer;text-align:center;font-size:9.5px;
  color:var(--vf-suave);position:relative;display:block}
.vf-tira-foto{aspect-ratio:3/4;border-radius:7px;overflow:hidden;background:#000;
  border:2px solid transparent;margin-bottom:3px}
.vf-tira-foto img{width:100%;height:100%;object-fit:cover;display:block}
.vf-tira-activa .vf-tira-foto{border-color:var(--vf-acento)}
.vf-tira-activa{color:var(--vf-texto)}
.vf-tira-punto{position:absolute;top:4px;right:4px;width:7px;height:7px;border-radius:50%;
  background:#e0a95c;box-shadow:0 0 0 2px rgba(0,0,0,.5)}
.vf-proc-lista{display:flex;flex-direction:column;gap:7px}
.vf-proc{background:#0d1017;border:1px solid var(--vf-borde);border-radius:8px;padding:7px 9px}
.vf-proc-nombre{font-size:12px}
.vf-proc-meta{font-size:10.5px;color:var(--vf-suave);margin-top:1px}

/* ─── Centro ──────────────────────────────────────────────────────────── */
.vf-principal{display:flex;flex-direction:column;gap:12px;min-width:0}
.vf-cabecera{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.vf-cabecera h1{font-size:20px;margin:0;font-weight:700;letter-spacing:-.01em}
.vf-cabecera p{margin:2px 0 0;font-size:12.5px;color:var(--vf-suave)}
.vf-cabecera-acciones{display:flex;gap:8px;flex-wrap:wrap}
.vf-visor-caja{background:var(--vf-panel);border:1px solid var(--vf-borde);
  border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:10px}
.vf-barra{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.vf-barra-grupo{display:flex;gap:6px;flex-wrap:wrap}
.vf-vista-nombre{font-size:12px;color:var(--vf-suave)}
.vf-visor{position:relative;background:#05070b;border-radius:10px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;touch-action:none;cursor:grab;
  min-height:300px;max-height:72vh}
.vf-visor:active{cursor:grabbing}
.vf-visor canvas{display:block;max-width:100%;max-height:72vh;width:auto;height:auto}
@media (max-width:900px){
  .vf-visor{max-height:48vh}
  .vf-visor canvas{max-height:48vh}
}
.vf-visor #vfCapaDibujo{position:absolute;inset:0;margin:auto;pointer-events:none}
.vf-etiqueta{position:absolute;left:10px;top:10px;font-size:11px;background:rgba(0,0,0,.6);
  padding:3px 9px;border-radius:20px;pointer-events:none;letter-spacing:.06em}
.vf-sello{position:absolute;left:0;right:0;bottom:8px;text-align:center;font-size:11px;
  letter-spacing:.13em;text-shadow:0 1px 4px #000;pointer-events:none;opacity:.9}
.vf-aviso-marcar{font-size:11.5px;background:#221d10;border:1px solid #4a3f1c;
  color:#e6d5a4;padding:8px 11px;border-radius:9px;line-height:1.55}
.vf-aviso-marcar a{color:#ffd76e}
.vf-giro{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--vf-borde);padding-top:10px}
.vf-giro-presets{display:flex;justify-content:space-between;gap:4px;flex-wrap:wrap}
.vf-giro-presets button{all:unset;cursor:pointer;font-size:10.5px;color:var(--vf-acento);
  padding:3px 6px;border-radius:6px;letter-spacing:.02em}
.vf-giro-presets button:hover{background:#182231}
.vf-giro-presets .vf-preset-activo{color:var(--vf-texto);font-weight:700;background:#182231}
.vf-giro-barra{display:flex;align-items:center;gap:10px}
.vf-giro-barra input[type=range]{flex:1;accent-color:var(--vf-acento)}
.vf-giro-pie{display:flex;justify-content:space-between;font-size:11px;color:var(--vf-suave)}
.vf-giro-pie span:first-child{font-variant-numeric:tabular-nums;color:var(--vf-acento);font-weight:700}

/* ─── Métricas ────────────────────────────────────────────────────────── */
.vf-metricas{display:flex;flex-direction:column;gap:12px;min-width:0}
.vf-zonas{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.vf-zona{all:unset;cursor:pointer;text-align:center;font-size:11px;padding:7px 4px;
  border-radius:9px;background:var(--vf-panel);border:1px solid var(--vf-borde);color:var(--vf-suave)}
.vf-zona span{display:block;font-size:15px;margin-bottom:1px}
.vf-zona-activa{border-color:var(--vf-verde);color:var(--vf-texto);background:#0f1d1e}
.vf-panel{background:var(--vf-panel);border:1px solid var(--vf-borde);border-radius:14px;padding:13px}
.vf-panel-tit{font-size:10px;text-transform:uppercase;letter-spacing:.13em;
  color:var(--vf-suave);opacity:.8;margin-bottom:9px;font-weight:600}
.vf-subtit{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--vf-suave);
  opacity:.7;margin:14px 0 6px}
.vf-medida{padding:7px 0;border-bottom:1px solid var(--vf-borde)}
.vf-medida:last-child{border-bottom:none}
.vf-medida-fila{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.vf-medida-label{font-size:12.5px}
.vf-medida-valor{font-size:15px;font-variant-numeric:tabular-nums;white-space:nowrap}
.vf-medida-fuera .vf-medida-valor{color:#e0a95c}
.vf-mm{color:#7fd1a8}
.vf-medida-rango{font-size:10px;color:var(--vf-suave);opacity:.65;text-align:right}
.vf-medida-ayuda{font-size:10.5px;color:var(--vf-suave);opacity:.6;line-height:1.45;margin-top:2px}
.vf-sim-numero{font-size:30px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
.vf-sim-numero span{font-size:13px;opacity:.45;font-weight:400}
.vf-nota{font-size:11px;color:var(--vf-suave);line-height:1.55;margin:8px 0 0}
.vf-nota-borde{border-top:1px solid var(--vf-borde);padding-top:9px;margin-top:12px}
.vf-callout{font-size:11px;background:#221d10;border:1px solid #4a3f1c;color:#e6d5a4;
  padding:8px 10px;border-radius:9px;line-height:1.55;margin-top:10px}
.vf-callout a{color:#ffd76e}

/* ─── Controles ───────────────────────────────────────────────────────── */
.vf-btn{all:unset;cursor:pointer;box-sizing:border-box;display:inline-flex;align-items:center;
  justify-content:center;gap:6px;font-size:12.5px;padding:8px 13px;border-radius:9px;
  background:#182231;border:1px solid var(--vf-borde);color:var(--vf-texto)}
.vf-btn:hover{background:#1e2937}
.vf-btn[disabled]{opacity:.5;cursor:default}
.vf-btn-primario{background:var(--vf-acento);border-color:var(--vf-acento);color:#04121b;font-weight:600}
.vf-btn-primario:hover{background:#5bc9fa}
.vf-btn-borde{background:transparent;width:100%;margin-top:8px}
.vf-btn-redondo{all:unset;cursor:pointer;width:32px;height:32px;border-radius:9px;
  background:#182231;border:1px solid var(--vf-borde);color:var(--vf-texto);
  display:flex;align-items:center;justify-content:center;font-size:11px}
.vf-chip{all:unset;cursor:pointer;font-size:11.5px;padding:5px 10px;border-radius:8px;
  background:#182231;border:1px solid var(--vf-borde);color:var(--vf-suave)}
.vf-chip:hover{color:var(--vf-texto)}
.vf-chip-activo{background:#0f2b31;border-color:var(--vf-verde);color:#9df0e2}
.vf-capa input[type=number]{background:#0d1017;border:1px solid var(--vf-borde);
  color:var(--vf-texto);border-radius:8px;padding:7px 9px}

/* ─── Avisos ──────────────────────────────────────────────────────────── */
.vf-avisos{position:fixed;bottom:14px;right:14px;z-index:9900;display:flex;
  flex-direction:column-reverse;gap:7px;pointer-events:none}
.vf-aviso{font-size:12px;padding:9px 13px;border-radius:10px;background:#11141b;
  border:1px solid var(--vf-verde);color:#9df0e2;box-shadow:0 8px 24px rgba(0,0,0,.5);
  opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s;max-width:320px}
.vf-aviso-visible{opacity:1;transform:none}
.vf-aviso-ambar{border-color:#8a6d2f;color:#e6d5a4}
.vf-control{margin:10px 0}
.vf-control-fila{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:3px}
.vf-control-fila span:last-child{color:var(--vf-suave);font-variant-numeric:tabular-nums}
.vf-control input[type=range]{width:100%;accent-color:var(--vf-acento)}
.vf-chip[disabled]{opacity:.4;cursor:default}

/* ══════════════════════════════════════════════════════════════════════════
   SIMULADOR 2.5D a pantalla completa
   ──────────────────────────────────────────────────────────────────────────
   En una sola columna el lienzo se comía la altura entera y los controles
   quedaban abajo, fuera de la vista: había que hacer scroll para mover un
   deslizador y volver a subir para ver el efecto, que es exactamente lo que
   no se puede hacer con un paciente al lado. En pantalla ancha van en dos
   columnas, y en angosta el lienzo se limita por ALTURA para que el giro y
   los botones entren en la misma pantalla que la cara.
   ══════════════════════════════════════════════════════════════════════════ */
#simulador25d{--s25-panel:#0f0f14;--s25-borde:#26262f;color:#eee}
.s25-cab{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:10px 14px;background:var(--s25-panel);position:sticky;top:0;z-index:3;
  border-bottom:1px solid var(--s25-borde)}
.s25-cab-tit{font-weight:600}
.s25-cab-sub{font-size:12px;opacity:.65}

.s25-cuerpo{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:14px;
  padding:14px;max-width:1500px;margin:0 auto;align-items:start}
@media (max-width:900px){ .s25-cuerpo{grid-template-columns:1fr;gap:10px;padding:10px} }

.s25-col-foto{position:sticky;top:56px;display:flex;flex-direction:column;gap:10px}
@media (max-width:900px){ .s25-col-foto{position:static} }
.s25-visor{position:relative;background:#0b0b0f;border-radius:12px;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.s25-visor canvas{display:block;max-width:100%;max-height:calc(100vh - 260px);
  width:auto;height:auto;touch-action:none;cursor:ew-resize}
@media (max-width:900px){ .s25-visor canvas{max-height:46vh} }
.s25-sello{position:absolute;left:0;right:0;bottom:8px;text-align:center;color:#fff;
  font-size:12px;letter-spacing:.14em;text-shadow:0 1px 4px #000;pointer-events:none;opacity:.9}
.s25-etiqueta{position:absolute;left:10px;top:10px;color:#fff;font-size:12px;
  background:rgba(0,0,0,.55);padding:3px 9px;border-radius:20px;pointer-events:none}

.s25-giro{background:var(--s25-panel);border:1px solid var(--s25-borde);
  border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:9px}
.s25-giro-barra{display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:center;font-size:12px}
.s25-giro-barra span{opacity:.7}
.s25-giro-barra span:last-child{min-width:42px;text-align:right;font-variant-numeric:tabular-nums}
.s25-presets{display:flex;gap:6px;flex-wrap:wrap}
.s25-presets .visor-btn{font-size:11.5px;padding:4px 9px}
.s25-aviso{font-size:11.5px;background:#2a2410;border:1px solid #574a19;color:#e8d9a8;
  padding:8px 10px;border-radius:8px;line-height:1.5}
.s25-aviso a{color:#ffd76e}

.s25-col-controles{background:var(--s25-panel);border:1px solid var(--s25-borde);
  border-radius:12px;padding:12px;max-height:calc(100vh - 90px);overflow-y:auto}
@media (max-width:900px){ .s25-col-controles{max-height:none;overflow:visible;padding-bottom:26px} }
.s25-acciones{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.s25-btn-primario{background:var(--primary);color:#fff}
.s25-nota{font-size:11.5px;opacity:.6;line-height:1.55;margin:0 0 14px}
.s25-nota-borde{border-top:1px solid var(--s25-borde);padding-top:12px;margin-top:4px;margin-bottom:0}
.s25-grupo{margin-bottom:16px}
.s25-grupo-tit{font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.55;margin-bottom:8px}
.s25-control{margin-bottom:11px}
.s25-control-fila{display:grid;grid-template-columns:1fr auto;gap:8px;font-size:13px;margin-bottom:3px}
.s25-control-fila i{opacity:.45;font-size:11px;font-style:normal}
.s25-control-fila span:last-child{opacity:.6;font-variant-numeric:tabular-nums}
.s25-control input[type=range]{width:100%}
.s25-control-ayuda{font-size:11px;opacity:.5;margin-top:2px}

/* .visor-btn no estaba definido en ninguna hoja: eran botones nativos del
   navegador, que sobre una capa oscura salen blancos y desentonan. Se estila
   SOLO dentro del simulador — la misma clase se usa en las hojas de informe,
   que son claras y se romperían con un estilo oscuro global. */
#simulador25d .visor-btn{
  background:#1c1c24;color:#e8e8ee;border:1px solid #33333f;border-radius:9px;
  padding:7px 12px;font-size:12.5px;font-family:inherit;cursor:pointer;line-height:1.2}
#simulador25d .visor-btn:hover{background:#26262f}
#simulador25d .s25-btn-primario{
  background:var(--primary);border-color:var(--primary);color:#fff;font-weight:600}

/* Symphomed Face — editor de anotaciones */
.vf-editor-nota{position:fixed;z-index:9950;width:260px;background:#11141b;
  border:1px solid #2b3444;border-radius:11px;padding:10px;
  box-shadow:0 12px 34px rgba(0,0,0,.6);color:#e8ebf0}
.vf-editor-nota input{width:100%;box-sizing:border-box;background:#0d1017;
  border:1px solid #2b3444;color:#e8ebf0;border-radius:8px;padding:8px 9px;font-size:13px}
.vf-editor-acciones{display:flex;gap:6px;margin-top:8px}
.vf-editor-acciones button{all:unset;cursor:pointer;flex:1;text-align:center;font-size:12px;
  padding:6px 0;border-radius:7px;background:#182231;border:1px solid #2b3444}
.vf-editor-acciones button[data-guardar]{background:#38bdf8;border-color:#38bdf8;color:#04121b;font-weight:600}
.vf-editor-sugerencias{display:flex;gap:4px;flex-wrap:wrap;margin-top:8px}
.vf-editor-sugerencias button{all:unset;cursor:pointer;font-size:10.5px;padding:3px 7px;
  border-radius:6px;background:#0d1017;border:1px solid #2b3444;color:#93a1b5}
.vf-editor-sugerencias button:hover{color:#e8ebf0}
.vf-nota-item{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;
  padding:7px 0;border-bottom:1px solid var(--vf-borde)}
.vf-nota-item:last-of-type{border-bottom:none}
.vf-nota-texto{font-size:12.5px;line-height:1.35}
.vf-nota-meta{font-size:10.5px;color:var(--vf-suave);opacity:.7;margin-top:2px}
.vf-nota-borrar{all:unset;cursor:pointer;color:var(--vf-suave);font-size:12px;padding:2px 5px;border-radius:5px}
.vf-nota-borrar:hover{color:#f08a8a;background:#241419}
.vf-editor-pie{font-size:10.5px;color:#93a1b5;margin-top:7px;line-height:1.4}
.vf-nota-cuerpo{cursor:pointer;flex:1;min-width:0;border-radius:6px;padding:2px 4px;margin:-2px -4px}
.vf-nota-cuerpo:hover{background:#182231}

/* ─── Panel de clínica (varios consultorios) ─────────────────────────────
   Tablas y no tarjetas: el administrador compara siete filas entre sí, y
   para comparar hace falta que los números estén alineados en columna. */
.clin-tabla-caja { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.clin-tabla { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 460px; }
.clin-tabla th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted); font-weight: 600; padding: 0 10px 8px 0;
  border-bottom: 1.5px solid var(--border); white-space: nowrap;
}
.clin-tabla td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--border); vertical-align: top; }
.clin-tabla th.num, .clin-tabla td.num {
  text-align: right; padding-right: 0;
  /* Los dígitos tienen que ocupar todos lo mismo o las columnas no se
     pueden leer de un vistazo. */
  font-variant-numeric: tabular-nums;
}
.clin-tabla td.num { font-weight: 600; }
.clin-tabla .hint { font-size: 11px; }
.clin-ocupado { color: var(--primary); }

.clin-chip {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.clin-chip-empleado { background: var(--primary); color: #fff; }
/* El que alquila se ve distinto a propósito: de él NO se muestra
   facturación, y conviene que se note en la fila. */
.clin-chip-alquila { background: var(--border); color: var(--text-muted); }

/* ─── Saldo prepago ──────────────────────────────────────────────────────
   El monto grande porque es lo único que el médico viene a mirar acá: si le
   alcanza o no para seguir trabajando hoy. */
.saldo-monto {
  font-family: var(--font-marca); font-size: 30px; font-weight: 600;
  line-height: 1.1; margin: 4px 0 0; font-variant-numeric: tabular-nums;
}
.saldo-aviso {
  margin: 12px 0 0; padding: 10px 12px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--warning) 14%, transparent);
  border-left: 3px solid var(--warning);
  font-size: 12.5px; line-height: 1.5;
}
.saldo-aviso.saldo-aviso-grave {
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  border-left-color: var(--danger);
}
/* El aviso de arriba del panel: aparece SOLO cuando queda poco. Una barra
   permanente con el saldo se deja de ver justo antes de que importe. */
.saldo-aviso-panel { border-color: var(--warning); }
.saldo-aviso-panel.saldo-aviso-grave { border-color: var(--danger); }

/* ─── Recarga: dónde pagar ───────────────────────────────────────────────
   El QR grande y centrado porque se escanea desde otro teléfono: chico no
   sirve para nada. */
.recarga-qr {
  display: block; width: 100%; max-width: 260px; margin: 0 auto 12px;
  border-radius: var(--radius-sm); background: #fff; padding: 8px;
}
.recarga-datos { margin: 0 0 4px; }
.recarga-fila {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13px;
}
.recarga-fila:last-child { border-bottom: none; }
.recarga-fila span { color: var(--text-muted); }
/* Los datos de la cuenta se copian a mano: que se puedan seleccionar y que
   los dígitos no bailen. */
.recarga-fila b { text-align: right; user-select: all; font-variant-numeric: tabular-nums; }

/* Cada aviso de pago en la cola del operador. Separados a propósito: son
   decisiones de una en una, no una lista para barrer. */
.op-solicitud { margin-top: 10px; }
.op-solicitud + .op-solicitud { margin-top: 14px; }

/* Fila de edición de un médico: va escondida abajo de la suya, con un
   fondo distinto para que se lea como "esto es de la fila de arriba" y no
   como un médico más. */
.clin-fila-edicion > td {
  background: var(--bg-suave, rgba(127, 127, 127, .07));
  padding: 12px 12px 14px;
  border-bottom: 2px solid var(--border);
}
.clin-fila-edicion label:first-child { margin-top: 0; }

/* Agenda unificada: el día de los siete consultorios en una sola lista.
   Las flechas quedan a los costados de la fecha, que es lo que se mira. */
.clin-agenda-dias {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 12px;
}
.clin-agenda-dias button {
  width: auto; margin: 0; padding: 7px 12px; font-size: 12px; white-space: nowrap;
}
.clin-agenda-fecha { text-align: center; font-size: 13px; line-height: 1.3; }
.clin-agenda-fecha > div:first-child { text-transform: capitalize; }
/* Ya pasó: se atenúa para que la próxima cita sea la primera fila que el
   ojo encuentra, sin tener que buscar la hora actual. */
.clin-fila-atendida { opacity: .55; }

@media (max-width: 420px) {
  .clin-agenda-dias button { padding: 7px 9px; font-size: 11px; }
}

/* ─── Aviso de alergias (persona compartida en una clínica) ──────────────
   Va arriba de las pestañas del Kardex y con el color de peligro: una
   alergia que hay que buscar no protege a nadie. El odontólogo que va a
   recetar tiene que verla sin haberla buscado. */
.persona-alergias {
  background: var(--danger); color: #fff;
  border-radius: 10px; padding: 10px 14px; margin-bottom: 12px;
}
.persona-alergias-titulo { font-weight: 700; font-size: 13px; letter-spacing: .02em; }
.persona-alergias-lista { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.persona-alergias-lista span {
  background: rgba(255, 255, 255, .22); border-radius: 999px;
  padding: 2px 10px; font-size: 13px; font-weight: 600;
}

/* ─── REGISTRO ────────────────────────────────────────────────────────────
   La primera pantalla que ve alguien que no nos conoce. Usa los mismos
   tokens que el resto (Fraunces para la marca, papel cálido, acento latón):
   una pantalla de bienvenida con su propia paleta se lee como otro producto. */
.reg-card{max-width:420px;margin:0 auto;padding:26px 22px;}
.reg-marca{font-family:var(--font-marca);font-size:26px;font-weight:600;color:var(--primary);text-align:center;letter-spacing:-.01em;}

.reg-pasos{display:flex;gap:6px;justify-content:center;margin:16px 0 20px;}
.reg-paso{width:34px;height:3px;border-radius:2px;background:var(--border);transition:background .25s ease;}
.reg-paso.activo{background:var(--primary);}
.reg-paso.hecho{background:var(--accent);}

.reg-titulo{font-family:var(--font-marca);font-size:19px;font-weight:600;color:var(--text);text-align:center;line-height:1.3;}
.reg-bajada{font-size:13px;color:var(--text-muted);text-align:center;line-height:1.55;margin:7px 0 20px;}

/* Barra de fuerza de la contraseña: se llena mientras se escribe, en vez de
   avisar al enviar cuando ya hay que volver a corregir. */
.reg-fuerza{height:3px;background:var(--border);border-radius:2px;overflow:hidden;margin-top:8px;}
.reg-fuerza span{display:block;height:100%;width:0;border-radius:2px;transition:width .2s ease,background .2s ease;}
.reg-fuerza span.n1{width:33%;background:var(--danger);}
.reg-fuerza span.n2{width:66%;background:var(--warning);}
.reg-fuerza span.n3{width:100%;background:var(--success);}

.reg-card textarea{width:100%;box-sizing:border-box;font-family:var(--font-texto);font-size:14px;padding:11px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--card);color:var(--text);resize:vertical;}

/* La pantalla de después: la cuenta no entra al instante, así que esto tiene
   que contar qué falta. */
.reg-listo{text-align:center;}
.reg-tilde{width:52px;height:52px;margin:4px auto 16px;border-radius:50%;background:var(--success-bg);color:var(--success);font-size:26px;display:flex;align-items:center;justify-content:center;}
.reg-pasos-lista{text-align:left;margin:22px 0 6px;}
.reg-item{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-top:1px solid var(--border);}
.reg-item:first-child{border-top:none;}
.reg-item .hint{margin-top:3px;}
.reg-num{flex:0 0 24px;height:24px;border-radius:50%;background:var(--bg);border:1px solid var(--border);color:var(--text-muted);font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;}
.reg-num.hecho{background:var(--success-bg);border-color:transparent;color:var(--success);}
.reg-num.ahora{background:var(--primary);border-color:transparent;color:#fff;}

/* ─── SOLICITUDES DE CUENTA (panel de quien aprueba) ───────────────────── */
.sol-item{border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px;margin-bottom:10px;background:var(--card);}
.sol-nombre{font-weight:600;font-size:14.5px;}
.sol-datos{font-size:12.5px;color:var(--text-muted);margin-top:5px;line-height:1.6;}
.sol-matricula{font-family:var(--font-texto);font-weight:600;color:var(--text);}
.sol-mensaje{font-size:13px;background:var(--bg);border-radius:var(--radius-sm);padding:9px 11px;margin-top:9px;line-height:1.5;}
.sol-acciones{display:flex;gap:8px;margin-top:12px;}
.sol-acciones button{margin:0;width:auto;flex:1;padding:9px;font-size:13px;}

/* ─── PLANES ──────────────────────────────────────────────────────────────
   Dos opciones que se tocan. No es una tabla comparativa con veinte filas:
   el médico ya sabe qué hace Symphomed, lo único que elige es cómo paga. */
.plan-opcion{border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px;margin-top:8px;cursor:pointer;background:var(--card);transition:border-color .15s ease,transform .1s ease;}
.plan-opcion:hover{border-color:var(--primary);}
.plan-opcion:active{transform:scale(.99);}
.plan-nombre{font-weight:600;font-size:14.5px;}
.plan-precio{font-family:var(--font-marca);font-size:22px;font-weight:600;color:var(--primary);margin-top:2px;letter-spacing:-.01em;}