/* ============================================================
   apariencia.css — Modo oscuro y tamaño de letra (v113, 08/10/2026)

   Pedido del Titular (08/10, 22:52): «mucho contraste entre el blanco y negro
   en la parte de los neurotransmisores… soy más amigo de lo oscuro porque
   muchos pacientes lo van a ver de noche… que no canse la vista», y un botón
   para agrandar la letra, amigable para todas las edades.

   - El tema lo decide /js/apariencia.js en <html data-tema="oscuro|claro">:
     si la persona no eligió, OSCURO (v123, pedido del Titular del 09/10; antes
     seguía al celular y a la hora). El claro queda para quien lo elige.
   - La letra: <html data-letra="1|2|3"> (112 %, 125 %, 140 %).
   - Colores oscuros cálidos (no negro puro) y texto crema (no blanco puro):
     menos encandilamiento de noche.

   CÓMO ESTÁ ESCRITO (para que no se rompan los estados de cada botón):
   cada ajuste empieza con  html:where([data-tema="oscuro"])  — eso suma
   exactamente «un poquito» de prioridad (la de una etiqueta) sobre la regla
   original. Así el ajuste le gana a la regla base del componente, pero NO a sus
   estados (elegido, activo, error, deshabilitado), que siguen funcionando con
   sus colores. Los estados que traen fondo claro se ajustan aparte, uno por uno.
   Revisado con una auditoría automática de contraste en las 30 páginas públicas.
   ============================================================ */

/* ---------- Tamaño de letra ---------- */
html[data-letra="1"]{font-size:112.5%}
html[data-letra="2"]{font-size:125%}
html[data-letra="3"]{font-size:140%}
/* Con letra grande, que nada se salga del ancho del celular */
html[data-letra] footer .guias-pie a{white-space:normal}
html[data-letra] main :is(p,li,td,dd){overflow-wrap:break-word}

/* ---------- Neurotransmisores: menos «blanco y negro», en los dos temas ---------- */
.neuro-sec::before{background:linear-gradient(180deg,var(--paper,#FBF7F2) 0,rgba(37,23,6,0.66) 44px,rgba(37,23,6,0.66) calc(100% - 44px),var(--paper,#FBF7F2) 100%)!important}
.neuro-sec h2,.neuro-sec h3{color:#F3ECE4!important}
.neuro-sec .sec-head p,.neuro-sec .nt-card p{color:rgba(243,236,228,.84)!important}
.neuro-sec .nt-nota{color:rgba(243,236,228,.72)!important}
.neuro-sec .nt-card{background:rgba(255,246,236,.06)!important;border-color:rgba(255,236,220,.14)!important}

/* ---------- v123: modo CLARO = portada toda blanca (pedido del Titular, 09/10) ----------
   «La parte de las neuronas que está en oscuro tendría que pasar a una versión blanca.
   Tendría que ser todo blanco.» En el modo claro, la cabecera con neuronas y la sección
   de los medicamentos pasan a fondo papel: la misma imagen, invertida (neuronas oscuras
   sobre blanco) y muy suave, con el texto oscuro. En el modo oscuro quedan como estaban. */
html[data-tema="claro"] .hero-neuro{background:var(--paper,#FBF7F2)!important;color:var(--ink,#2A2622);isolation:isolate}
html[data-tema="claro"] .hero-neuro::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url(/img/hero-neuronal.jpg) right center/cover no-repeat;
  background-image:image-set(url(/img/hero-neuronal.webp) type("image/webp"),url(/img/hero-neuronal.jpg) type("image/jpeg"));
  filter:invert(1) hue-rotate(180deg) saturate(.85);opacity:.55}
html[data-tema="claro"] .hero-neuro::before{z-index:1;background:linear-gradient(90deg,rgba(251,247,242,.97) 0%,rgba(251,247,242,.86) 50%,rgba(251,247,242,.45) 100%)}
html[data-tema="claro"] .hero-neuro .hero{z-index:2}
html[data-tema="claro"] .hero-neuro .hero h1{color:var(--ink,#2A2622)}
html[data-tema="claro"] .hero-neuro .hero p.lede{color:var(--ink-soft,#5A524A)}
html[data-tema="claro"] .hero-neuro .eyebrow{color:var(--accent,#C1553B)}
html[data-tema="claro"] .hero-neuro .btn-ghost{color:var(--ink,#2A2622);border-color:rgba(42,38,34,.55)}
html[data-tema="claro"] .hero-neuro .btn-ghost:hover{background:var(--ink,#2A2622);color:#fff}
@media (max-width:600px){
  html[data-tema="claro"] .hero-neuro::after{background-image:url(/img/hero-neuronal-movil.jpg);background-image:image-set(url(/img/hero-neuronal-movil.webp) type("image/webp"),url(/img/hero-neuronal-movil.jpg) type("image/jpeg"));background-position:center bottom}
  html[data-tema="claro"] .hero-neuro::before{background:linear-gradient(180deg,rgba(251,247,242,.97) 0%,rgba(251,247,242,.88) 60%,rgba(251,247,242,.5) 100%)}
}
/* Medicamentos y neurotransmisores, en blanco */
html[data-tema="claro"] .neuro-sec{background:var(--paper,#FBF7F2)!important;color:var(--ink,#2A2622);isolation:isolate}
html[data-tema="claro"] .neuro-sec::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url(/img/sinapsis.jpg) center/cover no-repeat;
  background-image:image-set(url(/img/sinapsis.webp) type("image/webp"),url(/img/sinapsis.jpg) type("image/jpeg"));
  filter:invert(1) hue-rotate(180deg) saturate(.85);opacity:.32}
html[data-tema="claro"] .neuro-sec::before{z-index:1;background:linear-gradient(180deg,var(--paper,#FBF7F2) 0,rgba(251,247,242,.84) 44px,rgba(251,247,242,.84) calc(100% - 44px),var(--paper,#FBF7F2) 100%)!important}
html[data-tema="claro"] .neuro-sec .wrap{z-index:2}
html[data-tema="claro"] .neuro-sec h2,html[data-tema="claro"] .neuro-sec h3{color:var(--ink,#2A2622)!important}
html[data-tema="claro"] .neuro-sec .eyebrow{color:var(--accent,#C1553B)}
html[data-tema="claro"] .neuro-sec .sec-head p,html[data-tema="claro"] .neuro-sec .nt-card p{color:var(--ink-soft,#5A524A)!important}
html[data-tema="claro"] .neuro-sec .nt-nota{color:var(--ink-soft,#5A524A)!important}
html[data-tema="claro"] .neuro-sec .nt-card{background:rgba(255,255,255,.88)!important;border-color:var(--line,#EDE3D8)!important;box-shadow:0 1px 3px rgba(42,38,34,.06)}
html[data-tema="claro"] .neuro-sec .nt-card .nt-farm{color:#9A4A2E}
html[data-tema="claro"] .neuro-sec .nt-mol{color:#C1553B}
html[data-tema="claro"] .neuro-sec :is(.nt-dopamina,.nt-glutamato) .nt-mol{color:#A86F0C}
html[data-tema="claro"] .neuro-sec :is(.nt-gaba,.nt-melatonina) .nt-mol{color:#90672F}
html[data-tema="claro"] .neuro-sec .nt-noradrenalina .nt-mol{color:#805204}

/* ---------- Controles (en la franja del idioma, arriba) ---------- */
.apariencia{display:inline-flex;gap:4px;align-items:center;margin-right:auto}
.apariencia button{border:1px solid var(--line,#EDE3D8);background:transparent;color:var(--ink-soft,#6B6259);border-radius:999px;min-width:30px;height:26px;padding:0 9px;font:inherit;font-size:.78rem;font-weight:700;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:4px}
.apariencia button:hover{border-color:var(--accent,#C1553B);color:var(--accent,#C1553B)}
.apariencia button:focus-visible{outline:3px solid #E9B44C;outline-offset:2px}
.apariencia button:disabled{opacity:.4;cursor:default}
.apariencia .ap-tema svg{width:15px;height:15px}
.apariencia .ap-txt{font-weight:600}
@media (max-width:480px){.apariencia .ap-txt{display:none}}
.barra-idioma{gap:8px}

/* ---------- v123: «?» de la traducción, al lado de los idiomas ----------
   Reemplaza la franja «Traducción de cortesía…» que aparecía arriba de todo al
   cambiar de idioma (al Titular le molestaba). Al tocarlo, la nota en letra chica. */
.barra-idioma .selector-idioma .idioma-nota-btn{flex:0 0 auto!important;width:22px;height:22px;min-width:22px!important;padding:0!important;border-radius:50%;border:1px solid var(--line,#EDE3D8);background:transparent;color:var(--muted,#6B6259);font:inherit;font-size:.72rem!important;font-weight:700;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;align-self:center}
.barra-idioma .selector-idioma .idioma-nota-btn:hover,
.barra-idioma .selector-idioma .idioma-nota-btn[aria-expanded="true"]{border-color:var(--accent,#C1553B);color:var(--accent,#C1553B)}
.barra-idioma .selector-idioma .idioma-nota-btn:focus-visible{outline:3px solid #E9B44C;outline-offset:2px}
.nota-idioma{position:absolute;z-index:1150;font-size:.72rem;line-height:1.45;color:var(--ink-soft,#6B6259);background:var(--paper,#FBF7F2);border:1px solid var(--line,#EDE3D8);border-radius:10px;padding:8px 10px;box-shadow:0 6px 18px rgba(0,0,0,0.12);text-align:left}
.nota-idioma[hidden]{display:none}
@media print{.nota-idioma,.idioma-nota-btn{display:none!important}}
/* Con el «?» de más, la franja del celular se ajusta para seguir entrando en una línea. */
@media (max-width:400px){
  .barra-idioma{gap:6px}
  .apariencia{gap:3px}
  .apariencia button{min-width:28px;padding:0 6px}
  .barra-idioma .selector-idioma{gap:3px}
  .barra-idioma .selector-idioma .idioma-nota-btn{width:20px;height:20px;min-width:20px!important}
}
@media (max-width:340px){
  .barra-idioma{padding-left:4px!important;padding-right:4px!important}
  .barra-idioma .selector-idioma button{padding-left:2px!important;padding-right:2px!important}
}
html:where([data-tema="oscuro"]) .nota-idioma{background:var(--sup);color:var(--ink-soft);border-color:var(--line);box-shadow:0 8px 24px rgba(0,0,0,0.45)}
html:where([data-tema="oscuro"]) .barra-idioma .selector-idioma .idioma-nota-btn{background:var(--sup);border-color:var(--line);color:var(--ink-soft)}

/* ============================================================
   MODO OSCURO
   ============================================================ */
html[data-tema="oscuro"]{
  color-scheme:dark;
  /* v151 (17/10/2026): paleta «Ámbar nocturno», elegida por el Titular: todo en ámbar, como
     la luz de noche del celular, sin azules ni violetas (antes el fondo era #1B120A, violáceo). */
  --paper:#0F0B06;
  --ink:#FFE3B3;
  --ink-soft:#E6C28C;
  --muted:#E6C28C;
  --line:#3B2C17;
  --linea:#3B2C17;   /* guías */
  --white:#1A130A;
  --sup:#1A130A;     /* tarjetas */
  --sup2:#150F08;    /* fondos suaves, campos */
  --sup3:#251A0E;    /* al pasar el mouse */
  --tenue:#B8955F;   /* fechas, notas al pie */
  --enlace:#FFB347;
  --titulo:#FFC266;  /* lo que en claro es granate */
  --granate:#FFC266;
  --granate-oscuro:#FFB347;
  /* Agenda: los mismos significados (verde = turno común, amarillo = urgencia,
     rojo = emergencia), en tonos de semáforo que se leen sobre negro. */
  --agenda-verde:#CDD25E;
  --agenda-verde-suave:#22220C;
  --agenda-amarillo:#FFC247;
  --agenda-amarillo-suave:#2B200C;
  --agenda-rojo:#FF7A4A;
  --agenda-rojo-suave:#2F150B;
  --ok:#CDD25E;
  --sage-dark:#FFC266;
}
html:where([data-tema="oscuro"]) body{background:var(--paper);color:var(--ink)}
html:where([data-tema="oscuro"]) a:not([class]){color:var(--enlace)}
html:where([data-tema="oscuro"]) ::placeholder{color:#8F8378}

/* Barras de arriba y abajo */
html[data-tema="oscuro"] header{background:rgba(15,11,6,.95)!important;border-bottom-color:var(--line)}
html:where([data-tema="oscuro"]) .site-bar{background:rgba(15,11,6,.95);border-bottom-color:var(--line)}
html:where([data-tema="oscuro"]) .site-bar .brand{color:var(--ink)}
html[data-tema="oscuro"] footer{background:#090603!important;color:#C9BFB5}
html:where([data-tema="oscuro"]) .nav-links a{color:var(--ink-soft)}
html:where([data-tema="oscuro"]) .barra-idioma{background:var(--paper);border-bottom-color:var(--line)}
html:where([data-tema="oscuro"]) .selector-idioma button{background:var(--sup);color:var(--ink-soft);border-color:var(--line)}
html:where([data-tema="oscuro"]) .selector-idioma button.activo{background:#362718;color:#F2A07B;border-color:#C1553B}
html:where([data-tema="oscuro"]) .aviso-idioma{background:#281F17;color:var(--ink-soft);border-bottom-color:var(--line)}
html:where([data-tema="oscuro"]) #sugerenciaIdioma{box-shadow:0 0 0 1px #4D3A1F,0 8px 24px rgba(0,0,0,0.45)}
/* Relojes del mundo: chips oscuros (antes eran blancos y encandilaban) */
html:where([data-tema="oscuro"]) .reloj-mundial{background:#150F08;border-bottom-color:var(--line);color:var(--ink-soft)}
html:where([data-tema="oscuro"]) .reloj-item{background:var(--sup);border-color:var(--line);color:var(--ink)}
html:where([data-tema="oscuro"]) .reloj-item.utc{background:#251A0E}
html:where([data-tema="oscuro"]) .reloj-fecha{color:var(--tenue)}

/* ---------- Portada ---------- */
/* Secciones con trama neuronal (solo la portada: su <main> no tiene clase). */
html:where([data-tema="oscuro"]) main#contenido:not([class]) > section:nth-of-type(odd){background-color:#150F08!important}
html:where([data-tema="oscuro"]) .ahorro{background:#2F2114;color:#9EE0B6}
html:where([data-tema="oscuro"]) .video-presentacion .vp-poster{color:#FBF7F2}
html:where([data-tema="oscuro"]) .video-presentacion .vp-play{background:#FBF7F2}
html:where([data-tema="oscuro"]) .video-presentacion .vp-nota a{color:var(--enlace)}
html:where([data-tema="oscuro"]) #snd-panel{background:var(--sup);border-color:var(--line);color:var(--ink)}
html:where([data-tema="oscuro"]) #snd-panel h4{color:#D9AF7D}
html:where([data-tema="oscuro"]) #snd-panel p.hint,html:where([data-tema="oscuro"]) .snd-note{color:var(--tenue)}
html:where([data-tema="oscuro"]) .snd-btn{background:var(--sup2);color:var(--ink);border-color:#4E3F2E}
html:where([data-tema="oscuro"]) .snd-btn:hover:not(.active){background:var(--sup3)}

/* ---------- Tarjetas y superficies (la regla base de cada una) ---------- */
html:where([data-tema="oscuro"]) .container,
html:where([data-tema="oscuro"]) .card,
html:where([data-tema="oscuro"]) .info-card,
html:where([data-tema="oscuro"]) .form-card,
html:where([data-tema="oscuro"]) .bank-details,
html:where([data-tema="oscuro"]) .indice,
html:where([data-tema="oscuro"]) .op-card,
html:where([data-tema="oscuro"]) .step,
html:where([data-tema="oscuro"]) .pago-box,
html:where([data-tema="oscuro"]) details.opcional,
html:where([data-tema="oscuro"]) .otras-guias li a,
html:where([data-tema="oscuro"]) #guias li a,
html:where([data-tema="oscuro"]) .cuestionario .cq-seccion,
html:where([data-tema="oscuro"]) .cuestionario .cq-sugerencias,
html:where([data-tema="oscuro"]) .lista-opciones{background:var(--sup);border-color:var(--line);color:var(--ink);box-shadow:none}
html:where([data-tema="oscuro"]) .slot-btn{background:var(--sup2);border-color:var(--line);color:var(--ink)}
html:where([data-tema="oscuro"]) .slot-btn:hover:not(.selected){background:var(--sup3);color:var(--ink)}
html:where([data-tema="oscuro"]) .lista-opciones button{background:var(--sup);color:var(--ink);border-bottom-color:var(--line)}
html:where([data-tema="oscuro"]) .lista-opciones button:hover,
html:where([data-tema="oscuro"]) .lista-opciones button:focus{background:var(--sup3)}
html:where([data-tema="oscuro"]) .lista-opciones .dep,
html:where([data-tema="oscuro"]) .lista-opciones small{color:var(--tenue)}
html:where([data-tema="oscuro"]) .pestanas button:hover{background:var(--sup3)}
html:where([data-tema="oscuro"]) .cuestionario .cq-op{background:var(--sup2);border-color:#4D3A1F;color:var(--ink)}
html:where([data-tema="oscuro"]) .cuestionario .cq-op:has(input:checked){background:#362718;border-color:#C1553B}
html:where([data-tema="oscuro"]) .cuestionario .cq-sugerencias button{border-bottom-color:var(--line);color:var(--ink)}
html:where([data-tema="oscuro"]) .cuestionario .cq-sugerencias button:hover{background:var(--sup3)}
html:where([data-tema="oscuro"]) .cuestionario .cq-intro{color:var(--ink-soft)}
html:where([data-tema="oscuro"]) .cuestionario .cq-cuenta,
html:where([data-tema="oscuro"]) .cuestionario .cq-extremos,
html:where([data-tema="oscuro"]) .cuestionario .cq-limpiar{color:var(--tenue)}
html:where([data-tema="oscuro"]) .cuestionario .cq-codigo{color:var(--agenda-verde)}
html:where([data-tema="oscuro"]) .cuestionario .cq-quitar{color:#F4A6A6}
html:where([data-tema="oscuro"]) .btn-sec:hover{background:var(--sup3)}

/* Botones para entrar con Google, Microsoft, Apple: tema oscuro de cada marca */
html:where([data-tema="oscuro"]) .btn-social,
html:where([data-tema="oscuro"]) .btn-google{background:#191109;color:#E3E3E3;border-color:#8E918F}
html:where([data-tema="oscuro"]) .btn-social:hover,
html:where([data-tema="oscuro"]) .btn-google:hover{background:#261D15;color:#E3E3E3}
html:where([data-tema="oscuro"]) .btn-social small{color:#B5B0AA}
html:where([data-tema="oscuro"]) .btn-social-apple{background:#000000;color:#fff;border-color:#8E918F}
html:where([data-tema="oscuro"]) .btn-social-apple:hover{background:#222;color:#fff}

/* ---------- Campos de formularios ---------- */
html:where([data-tema="oscuro"]) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=submit]):not([type=button]):not([type=file]),select,textarea){background:var(--sup2);color:var(--ink);border-color:#4D3A1F}
html:where([data-tema="oscuro"]) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=submit]):not([type=button]):not([type=file]),select,textarea):focus{border-color:var(--accent,#C1553B)}
html:where([data-tema="oscuro"]) select option{background:#1A130A;color:var(--ink)}
html:where([data-tema="oscuro"]) .ayuda-globo{background:#251A0E;border-color:var(--line);color:var(--ink)}

/* ---------- Avisos: cada uno conserva su sentido (atención, error, bien) ---------- */
html:where([data-tema="oscuro"]) .msg{background:var(--sup2);border-color:var(--line);color:var(--ink)}
html:where([data-tema="oscuro"]) :is(.aviso-911,.destacado,.estado.pendiente,.nota-email,.aviso,.alerta-911,.op-reglas,.nov-ayuda){background:#2E2617;border-color:#5C4A22;color:#F1DDB0}
html:where([data-tema="oscuro"]) :is(.critico,.msg.mal,.op-error,.resultado.mal,.nov-news-msg.mal),
html:where([data-tema="oscuro"]) #resultado.mal{background:#2F1D0A;border-color:#6B2E33;color:#F4C9C9}
html:where([data-tema="oscuro"]) :is(.msg.ok,.op-ok,.op-aviso,.resultado.ok,.nov-news-msg.ok,.estado.aprobado),
html:where([data-tema="oscuro"]) #resultado.ok{background:#2F2114;border-color:#2F5A3B;color:#C3E6CD}
html:where([data-tema="oscuro"]) :is(.estado.cancelado,.estado.rechazado){background:#251A0E;color:#CFC6BE}
html:where([data-tema="oscuro"]) .resultado.riesgo{background:#2F1D0A;color:#F4C9C9}
html:where([data-tema="oscuro"]) .resultado .rotulo{background:#3A2E14;color:#F1C66E}
/* «No recibimos pagos desde Mercado Pago»: el rojo se mantiene, el texto se aclara */
html:where([data-tema="oscuro"]) .aviso-sin-mp,
html:where([data-tema="oscuro"]) .pago-box .aviso-sin-mp{background:#2F1D0A}
html:where([data-tema="oscuro"]) .aviso-sin-mp p,
html:where([data-tema="oscuro"]) .pago-box .aviso-sin-mp p{color:#F4C9C9}
html:where([data-tema="oscuro"]) .aviso-sin-mp strong,
html:where([data-tema="oscuro"]) .pago-box .aviso-sin-mp strong{color:#FF9A8F}
html:where([data-tema="oscuro"]) .nota-email .nota-email-botones .nota-email-no{background:var(--sup);color:var(--ink);border-color:var(--line)}
html:where([data-tema="oscuro"]) .nota-email .nota-email-mal,
html:where([data-tema="oscuro"]) .tel-estado.mal,
html:where([data-tema="oscuro"]) .hint.mal{color:#F4A6A6}
html:where([data-tema="oscuro"]) .tel-estado.aviso,
html:where([data-tema="oscuro"]) .hint.aviso{color:#F1C66E}
html:where([data-tema="oscuro"]) .tel-estado.bien,
html:where([data-tema="oscuro"]) .hint.bien{color:#7FD6A0}
html:where([data-tema="oscuro"]) .verif-box{background:#2C2013}

/* Títulos y destacados en granate: en oscuro, rosado cálido legible */
html:where([data-tema="oscuro"]) .legal h1,
html:where([data-tema="oscuro"]) .legal h2,
html:where([data-tema="oscuro"]) #guias li b,
html:where([data-tema="oscuro"]) .otras-guias li b,
html:where([data-tema="oscuro"]) .acceso-titulo{color:var(--titulo)}
html:where([data-tema="oscuro"]) .legal .btn.secundario{color:var(--titulo);border-color:var(--titulo)}

/* ---------- Agenda (turnos) ---------- */
html:where([data-tema="oscuro"]) .agenda-chip,
html:where([data-tema="oscuro"]) .agenda-nav,
html:where([data-tema="oscuro"]) .agenda-hora{background:var(--sup);border-color:#4D3A1F;color:var(--ink)}
html:where([data-tema="oscuro"]) .agenda-celda{background:var(--sup);border-color:var(--line);color:var(--ink)}
html:where([data-tema="oscuro"]) .agenda-celda.vacia{background:none}
html:where([data-tema="oscuro"]) .agenda-celda .n{color:var(--ink)}
html:where([data-tema="oscuro"]) .agenda-celda .c{color:#B8ACA2}
html:where([data-tema="oscuro"]) .agenda-celda[disabled]:not(.vacia){background:#150F08;border-color:#3B2C17}
html:where([data-tema="oscuro"]) .agenda-celda[disabled] .n{color:#8F8378}
html:where([data-tema="oscuro"]) .agenda-nav[disabled]{background:#1A130A;color:#5E5359;border-color:#3B2C17}
html:where([data-tema="oscuro"]) .agenda-hora[disabled]{color:#8F8378;border-color:var(--line)}
html:where([data-tema="oscuro"]) .agenda-celda.abierto,
html:where([data-tema="oscuro"]) .agenda-chip.servicio:focus-visible{outline-color:#E9B44C}
html:where([data-tema="oscuro"]) .agenda-chip.servicio.base{border-color:#2F5A3B}
html:where([data-tema="oscuro"]) .agenda-chip.servicio.urgencia{border-color:#6B5626}
html:where([data-tema="oscuro"]) .agenda-hora.elegida{color:#0F0B06}
html:where([data-tema="oscuro"]) .agenda-encabezado,
html:where([data-tema="oscuro"]) .agenda-leyenda,
html:where([data-tema="oscuro"]) .agenda-ayuda,
html:where([data-tema="oscuro"]) .agenda-cargando{color:var(--tenue)}
html:where([data-tema="oscuro"]) .agenda-nota-seguimiento{border-color:#2F5A3B;color:#C3E6CD}
html:where([data-tema="oscuro"]) .agenda-reglas{color:var(--tenue)}
html:where([data-tema="oscuro"]) .agenda-zona{background:#281F17;border-color:var(--line);color:var(--ink-soft)}

/* ---------- Pedir turno: cajas que se agregan con JavaScript ---------- */
html:where([data-tema="oscuro"]) #cuestBox{background:#281D11;border-color:#9C3D55}
html:where([data-tema="oscuro"]) #ppResumen{background:#2B2614}
/* v118: código de descuento (checkout) */
html:where([data-tema="oscuro"]) .codigo-box{background:#2B2413;border-color:#E9B44C}
html:where([data-tema="oscuro"]) .codigo-fila input{background:var(--sup2);color:var(--ink);border-color:var(--linea)}
html:where([data-tema="oscuro"]) .codigo-estado.ok{color:#5CC98F}
html:where([data-tema="oscuro"]) .codigo-estado.mal{color:#F0888E}
html:where([data-tema="oscuro"]) .codigo-link{color:var(--enlace)}
html:where([data-tema="oscuro"]) #cobLista{background:var(--sup);border-color:var(--line)}
html:where([data-tema="oscuro"]) #cobLista button{background:var(--sup);border-bottom-color:var(--line);color:var(--ink)}
html:where([data-tema="oscuro"]) #cobLista button:hover,
html:where([data-tema="oscuro"]) #cobLista button:focus{background:var(--sup3)}
html:where([data-tema="oscuro"]) #cobLista .cob-cod,
html:where([data-tema="oscuro"]) #cobElegida button{color:var(--titulo)}
html:where([data-tema="oscuro"]) #cobLista small{color:var(--tenue)}
html:where([data-tema="oscuro"]) #cobElegida{background:var(--sup2);border-color:#4D3A1F}
html:where([data-tema="oscuro"]) .sugerencias-dom,
html:where([data-tema="oscuro"]) .sugerencias-dom button{background:var(--sup);color:var(--ink);border-color:var(--line)}
html:where([data-tema="oscuro"]) .sugerencias-dom button:hover,
html:where([data-tema="oscuro"]) .sugerencias-dom button:focus{background:var(--sup3)}
html:where([data-tema="oscuro"]) .sugerencias-dom small{color:var(--tenue)}

/* ---------- Páginas puntuales ---------- */
/* Entrar */
html:where([data-tema="oscuro"]) .acceso{background:var(--sup);border-color:var(--line)}
/* Hacé tu pregunta */
html:where([data-tema="oscuro"]) main.pregunta .quien,
html:where([data-tema="oscuro"]) main.pregunta .caja{background:var(--sup);border-color:var(--line)}
/* Preguntas frecuentes (paquetes y respuestas) */
html:where([data-tema="oscuro"]) .paq{background:var(--sup);border-color:#4D3A1F}
html:where([data-tema="oscuro"]) .paq[aria-pressed="true"]{background:#362718;border-color:#C1553B}
html:where([data-tema="oscuro"]) .paq .precio{color:var(--ink)}
html:where([data-tema="oscuro"]) .paq small,
html:where([data-tema="oscuro"]) .resp .pend{color:var(--tenue)}
html:where([data-tema="oscuro"]) .banco{background:var(--sup2);border-color:var(--line)}
html:where([data-tema="oscuro"]) .resp{background:var(--sup);border-color:var(--line)}
/* Guías: firma del autor */
html:where([data-tema="oscuro"]) .firma{color:var(--ink-soft)}
html:where([data-tema="oscuro"]) .firma b{color:var(--ink)}
html:where([data-tema="oscuro"]) .firma .fechas{color:var(--tenue)}
/* Novedades */
html:where([data-tema="oscuro"]) .novedades h2{color:var(--titulo)}
html:where([data-tema="oscuro"]) .novedades h3{color:var(--ink)}
html:where([data-tema="oscuro"]) .nov-indice a{background:var(--sup);color:var(--titulo)}
html:where([data-tema="oscuro"]) .nov-bloque{background:var(--sup)}
html:where([data-tema="oscuro"]) .nov-destacado{background:#2B2414}
html:where([data-tema="oscuro"]) .nota,
html:where([data-tema="oscuro"]) .cg{border-top-color:var(--line)}
html:where([data-tema="oscuro"]) .nota-t,
html:where([data-tema="oscuro"]) .cg a{color:var(--ink)}
html:where([data-tema="oscuro"]) .nota-t:hover{color:var(--titulo)}
html:where([data-tema="oscuro"]) .nota-r{color:#D8CEC4}
html:where([data-tema="oscuro"]) .nota-orig{color:var(--tenue)}
html:where([data-tema="oscuro"]) .nota-ia{color:#F1C66E}
html:where([data-tema="oscuro"]) .efe-hoy{background:#2E2617}
html:where([data-tema="oscuro"]) .efe-det,
html:where([data-tema="oscuro"]) .efe-mes{color:#D0C5BB}
html:where([data-tema="oscuro"]) .efe-ayuda,
html:where([data-tema="oscuro"]) .temas b{color:var(--titulo)}
html:where([data-tema="oscuro"]) .temas li{background:var(--sup3);color:var(--ink)}
html:where([data-tema="oscuro"]) .cg-chip{background:var(--sup3);color:var(--titulo)}

/* ---------- GermanIAI (asistente) ---------- */
/* v152: la píldora es #gi-lanzador («¿Te ayudo?» + micrófono); antes, #gi-burbuja sola. */
html:where([data-tema="oscuro"]) #gi-lanzador{box-shadow:0 0 0 1px #4D3A1F,0 6px 20px rgba(0,0,0,0.45)}
html:where([data-tema="oscuro"]) #gi-panel{background:#150F08;border-color:var(--line);box-shadow:0 18px 50px rgba(0,0,0,0.55)}
html:where([data-tema="oscuro"]) .gi-msg{color:var(--ink)}
html:where([data-tema="oscuro"]) .gi-msg.yo{background:#3B2C17;color:#F3ECE4}
html:where([data-tema="oscuro"]) .gi-msg.el{background:var(--sup);border-color:var(--line)}
html:where([data-tema="oscuro"]) .gi-msg.el.crisis,
html:where([data-tema="oscuro"]) .gi-msg.el.urgencia{background:#2F1D0A}
html:where([data-tema="oscuro"]) .gi-msg.el.clinico{background:#2B2413}
html:where([data-tema="oscuro"]) .gi-msg.el.limite,
html:where([data-tema="oscuro"]) .gi-msg.el.paga{background:#2C2013}
html:where([data-tema="oscuro"]) .gi-util{color:var(--tenue)}
html:where([data-tema="oscuro"]) .gi-cupo,
html:where([data-tema="oscuro"]) .gi-pie,
html:where([data-tema="oscuro"]) .gi-voz-bar small{color:#9C9087}
html:where([data-tema="oscuro"]) .gi-sug button{background:var(--sup);color:var(--ink);border-color:var(--line)}
html:where([data-tema="oscuro"]) .gi-sug button:hover{border-color:#C1553B;color:var(--enlace)}
html:where([data-tema="oscuro"]) .gi-form{background:#150F08;border-top-color:var(--line)}
html:where([data-tema="oscuro"]) .gi-form .gi-micbtn{background:var(--sup)}
html:where([data-tema="oscuro"]) .gi-form .gi-micbtn:hover{background:#281F17}
html:where([data-tema="oscuro"]) .gi-form .gi-micbtn.escucha{background:#C1553B;color:#fff}
html:where([data-tema="oscuro"]) .gi-voz-bar{background:#281F17;border-top-color:var(--line);color:var(--ink)}

/* ---------- Ventana de WhatsApp (elegir número) ---------- */
html:where([data-tema="oscuro"]) .dg-wa-panel{background:#150F08;color:var(--ink);border-color:var(--line);box-shadow:0 12px 36px rgba(0,0,0,0.55)}
html:where([data-tema="oscuro"]) .dg-wa-cab strong{color:#5FD3A8}
html:where([data-tema="oscuro"]) .dg-wa-cerrar{color:var(--ink-soft)}
html:where([data-tema="oscuro"]) .dg-wa-cerrar:hover,
html:where([data-tema="oscuro"]) .dg-wa-cerrar:focus-visible{background:var(--sup3);color:var(--ink)}
html:where([data-tema="oscuro"]) .dg-wa-op{background:#2C2013;border-color:#2F5A3B;color:var(--ink)}
html:where([data-tema="oscuro"]) .dg-wa-op:hover,
html:where([data-tema="oscuro"]) .dg-wa-op:focus-visible{background:#3A2917;border-color:#25D366}
html:where([data-tema="oscuro"]) .dg-wa-op.tres{background:var(--sup);border-color:var(--line)}
html:where([data-tema="oscuro"]) .dg-wa-op.tres .dg-wa-ico{color:var(--tenue)}
html:where([data-tema="oscuro"]) .dg-wa-nota{color:var(--tenue)}

/* ---------- Logo, QR y detalles ---------- */
/* Logo de letras oscuras: en oscuro se aclara con un filtro (las letras quedan crema).
   Funciona con el logo de cada idioma, que /js/idioma.js va cambiando. */
html[data-tema="oscuro"] :is(img[src*="/img/logo-"]:not([src*="logo-oscuro"]),img[src$="logo-dohmenger.png"]){filter:invert(1) hue-rotate(180deg) brightness(1.04)}
/* El QR del segundo paso queda blanco para que se pueda escanear. */
html:where([data-tema="oscuro"]) .qr-totp{background:#fff}
html:where([data-tema="oscuro"]) .dg-ingresar{box-shadow:0 2px 10px rgba(0,0,0,0.4)}


/* ============================================================
   v151 (17/10/2026) — «Ámbar nocturno» en el resto de lo oscuro
   ============================================================ */
/* Títulos en ámbar (los de la portada, las guías y el panel). */
html[data-tema="oscuro"] :is(h1,h2){color:var(--titulo)}
/* Panel: los botones de letra (admin-letra.js) y «Computadora» (vista.js) venían en blanco. */
html[data-tema="oscuro"] .dg-letra-t{color:var(--tenue)}
html[data-tema="oscuro"] .dg-letra button,html[data-tema="oscuro"] .dg-letra button:disabled{background:var(--sup2);color:var(--ink);border-color:var(--line)}
html[data-tema="oscuro"] .dg-letra button:hover{background:var(--sup3);color:var(--ink)}
html[data-tema="oscuro"] .dg-letra-valor{color:var(--ink)}

/* v151.1 (17/10/2026): el botón de Google viene en un iframe claro; con la página en
   «color-scheme: dark», Chrome le pinta un rectángulo blanco detrás. Con el contenedor en
   «light» el fondo queda transparente; y en oscuro se usa el botón negro oficial de Google. */
html[data-tema="oscuro"] :is(#botonGoogle,.social-slot){color-scheme:light}

/* ============================================================
   v170 (18/10/2026): LAS NEURONAS DE FONDO EN TODAS LAS PÁGINAS
   Pedido del Titular (18/10, 07:39): «todas las páginas, los términos y condiciones,
   todo, tienen que tener las neuronas en el fondo, dibujando todo».
   Una sola capa fija detrás de todo (body::before): no recibe clics, no se mueve con
   el texto y no cambia el color de nada. Las tarjetas y las secciones conservan su
   fondo, apenas traslúcido, para que el dibujo se adivine detrás sin restar contraste.
   - Oscuro («Ámbar nocturno»): la red neuronal ámbar del sitio, suave.
   - Claro: la misma imagen invertida (neuronas oscuras sobre papel), muy suave; sin
     azules ni violetas, como pidió el Titular.
   - Celular: la versión vertical de la imagen. Impresión: sin fondo.
   ============================================================ */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:url(/img/hero-neuronal-ambar.jpg) center/cover no-repeat;
  background-image:image-set(url(/img/hero-neuronal-ambar.webp) type("image/webp"),url(/img/hero-neuronal-ambar.jpg) type("image/jpeg"));
  filter:invert(1) hue-rotate(180deg) saturate(.9);opacity:.3}
html:where([data-tema="oscuro"]) body::before{filter:none;opacity:.5}
@media (max-width:600px){
  body::before{background-image:url(/img/hero-neuronal-movil-ambar.jpg);background-image:image-set(url(/img/hero-neuronal-movil-ambar.webp) type("image/webp"),url(/img/hero-neuronal-movil-ambar.jpg) type("image/jpeg"))}
}
@media print{body::before{display:none}}
/* Que el dibujo se vea también detrás de las tarjetas grandes y de las franjas de la portada */
.container{background:rgba(255,255,255,.9)}
html:where([data-tema="oscuro"]) .container{background:rgba(26,19,10,.88)}
main#contenido:not([class]) > section:nth-of-type(odd){background-color:rgba(243,238,232,.84)}
html:where([data-tema="oscuro"]) main#contenido:not([class]) > section:nth-of-type(odd){background-color:rgba(21,15,8,.82)!important}