/* ==========================================================================
   Modo oscuro de todo el sitio (24-oct-2026) · web pública, aula, comunidad y panel
   La preferencia es UNA ('sistema' | 'light' | 'dark', localStorage['dreo-tema']): marca.js pone <html data-theme> antes de pintar
   y F.tema (comun.js) la cambia. Los tokens oscuros viven en liz.css (:root[data-theme="dark"]); aquí va lo que las hojas de cada
   zona traen escrito a mano en claro (#FFFFFF, #EAF3FF…) y el botón sol/luna. Dre UI en oscuro: suelo negro de verdad, widgets
   #1C1C1E, azul Luz solo en el detalle, texto casi blanco. Va la última (index.html, después de liza.css).
   ========================================================================== */

/* ── 0. Antes de que marca.js ponga data-theme: el sistema manda (sin destello blanco) ── */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) { color-scheme: dark; background: #000000; }
  html:not([data-theme]) body { background: #000000; color: #F5F5F7; }
}

/* ── 1. El botón sol/luna y el segmentado Claro · Oscuro · Auto ─────────── */
.tema-boton::before { content: ""; position: absolute; inset: -3px; border-radius: inherit; } /* 44 px de zona táctil aunque se vea de 38 */
.tema-boton > svg { transition: transform .35s var(--curva-muelle); }
@media (hover: hover) { .tema-boton:hover > svg { transform: rotate(-18deg); } }
.tema-fila { flex-wrap: wrap; row-gap: 10px; }
.tema-fila .cuerpo { flex: 1 0 auto; min-width: auto; } /* «Apariencia» nunca se corta: si no cabe, el segmentado baja */
.tema-seg { margin-left: auto; padding: 2px; grid-auto-columns: auto; }
.tema-seg button { min-height: 40px; padding: 0 11px; font-size: 13px; }
.tema-seg button::before { content: ""; position: absolute; inset: -2px 0; } /* 44 px de alto para el dedo */
@media (prefers-reduced-motion: reduce) { .tema-boton > svg { transition: none; } }

/* ── 2. Superficies que flotan: un escalón más claro que el suelo (como iOS) ── */
html[data-theme="dark"] .hoja { --suelo: #111113; --widget: #1C1C1E; --widget-2: #2C2C2E; background: #111113; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 -20px 60px -20px rgba(0, 0, 0, .9); }
html[data-theme="dark"] .velo { background: rgba(0, 0, 0, .7); }
html[data-theme="dark"] .menu-movil { box-shadow: 0 1px 0 rgba(255, 255, 255, .08), 0 30px 50px -30px rgba(0, 0, 0, .9); }
html[data-theme="dark"] .btn-sec { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 1px var(--linea), 0 10px 22px -14px var(--sombra); }
html[data-theme="dark"] .redondo { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 1px var(--linea); }
html[data-theme="dark"] .vidrio { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px var(--linea), 0 14px 34px -20px var(--sombra); }
html[data-theme="dark"] .tono-cristal { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px var(--linea), 0 10px 22px -12px var(--sombra); }
html[data-theme="dark"] .caja-error { background: #2A1414; box-shadow: inset 0 0 0 1px rgba(255, 105, 97, .3); }
html[data-theme="dark"] .insignia.solida { background: #3A3A3C; }
html[data-theme="dark"] .entrada::placeholder { color: #8E8E93; }

/* ── 3. Web pública: secciones y barras ─────────────────────────────────── */
html[data-theme="dark"][data-zona="sitio"] body { background: #000000; }
html[data-theme="dark"] .fondo-blanco,
html[data-theme="dark"] .dw-hero,
html[data-theme="dark"] .dw-sec-dock { background: #000000; }
html[data-theme="dark"] .dw-web .fondo-suelo, html[data-theme="dark"] main.fondo-suelo { background: #0B0B0D; }
html[data-theme="dark"] .fondo-cielo { background: linear-gradient(180deg, #0A1E3D 0%, #050B16 100%); }
html[data-theme="dark"] .fondo-noche { background: #000000; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -1px 0 rgba(255, 255, 255, .08); }
html[data-theme="dark"] .dw-barra { background: color-mix(in srgb, #000000 78%, transparent); }
html[data-theme="dark"] .dw-pie { background: #000000; }
html[data-theme="dark"] .dw-filtros-barra,
html[data-theme="dark"] .mt-chips-barra { background: color-mix(in srgb, #000000 82%, transparent); }
@media (max-width: 899px) { html[data-theme="dark"] .mt-pagar { background: color-mix(in srgb, #000000 86%, transparent); } } /* 26-oct: en escritorio no es barra: sin el recuadro negro detrás del botón */
html[data-theme="dark"] .dw-hero-foto img { box-shadow: 0 0 0 1px var(--linea), 0 40px 80px -40px rgba(0, 0, 0, .9); }
html[data-theme="dark"] .dw-video-marco { box-shadow: 0 0 0 1px var(--linea), 0 30px 60px -30px rgba(0, 0, 0, .9); }
html[data-theme="dark"] .hero-tienda { background: linear-gradient(180deg, #0B1E36 0%, #000000 100%); }
html[data-theme="dark"] .gracias-liz { background: radial-gradient(70% 50% at 50% 0%, #0B1E36 0%, transparent 70%), #000000; }
html[data-theme="dark"] .insc-cerrada { background: linear-gradient(180deg, #0B1E36 0%, #000000 100%); }
html[data-theme="dark"] .insc-cerrada .h1 em { color: var(--luz); }
html[data-theme="dark"] .tt-boot { background: linear-gradient(180deg, #0B1E36 0%, #111113 100%); }

/* Lo elegido va en blanco (Dre UI Negro): filtros y chips */
html[data-theme="dark"] .dw-filtro[aria-pressed="true"],
html[data-theme="dark"] .dw-filtro[aria-current="true"],
html[data-theme="dark"] .mt-chip[aria-pressed="true"] { color: #0B0B0F; background: #F5F5F7; }
/* Tienda (24-oct): la etiqueta «Pronto» y las apps sobre el video van igual en los dos modos; el «Próximamente» sobre el gris del widget */
html[data-theme="dark"] .dw-pack-estado { background: var(--widget-2); color: #D1D1D6; }
html[data-theme="dark"] .mt-chip { background: var(--widget); }

/* Insignias y chips con color fijo */
html[data-theme="dark"] .insignia.suave { color: #D1D1D6; background: #0B1E36; }
html[data-theme="dark"] .insignia.vendido,
html[data-theme="dark"] .mt-plan-ins,
html[data-theme="dark"] .o-ins { color: #0B0B0F; background: var(--luz); }
html[data-theme="dark"] .mt-gratis-cta { color: var(--texto); }
html[data-theme="dark"] .mt-casa-puntos li { background: var(--widget-2); }
html[data-theme="dark"] .fx-resultado,
html[data-theme="dark"] .mp-aviso { background: #0B1E36; }
html[data-theme="dark"] .paso-n { color: var(--luz); }

/* ── 4. Pago, carrito y gracias (mt-*, mp-*, transf-*) ─────────────────── */
html[data-theme="dark"] .opcion-radio:has(input:checked),
html[data-theme="dark"] .mp-opcion:has(input:checked),
html[data-theme="dark"] .mp-cuenta:has(input:checked),
html[data-theme="dark"] .mt-plan:has(input:checked) { background: #0B1E36; box-shadow: inset 0 0 0 2px var(--luz); }
html[data-theme="dark"] .opcion-radio input { accent-color: var(--luz); }
html[data-theme="dark"] .mp-opcion:has(input:checked) .mp-punto { box-shadow: inset 0 0 0 7px var(--luz); background: #000000; }
html[data-theme="dark"] .mp-punto { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .32); }
html[data-theme="dark"] .mp-cuenta { background: var(--widget); }
html[data-theme="dark"] .mp-cuenta:has(input:checked) svg { color: var(--luz); }
html[data-theme="dark"] .mp-pronto { background: var(--widget-2); }
html[data-theme="dark"] .mp-logo { box-shadow: 0 0 0 1px rgba(255, 255, 255, .16); }
html[data-theme="dark"] .bumps { background: var(--widget); }
html[data-theme="dark"] .bump { background: var(--widget-2); }
html[data-theme="dark"] .bump:has(input:checked) { background: #0D2A1A; }
html[data-theme="dark"] .transf-monto { background: #0B1E36; box-shadow: inset 0 0 0 1px #1F5FAF; }
html[data-theme="dark"] .transf-monto .tr-copiar { background: var(--widget-2); }
html[data-theme="dark"] .casa-plan:last-child { background: #0B1E36; box-shadow: inset 0 0 0 2px #1F5FAF; }
html[data-theme="dark"] .pago-ya { background: #0D2A1A; box-shadow: inset 0 0 0 1px rgba(48, 209, 88, .25); }
html[data-theme="dark"] .mt-error { color: #FF8A80; }
html[data-theme="dark"] .campo.mt-mal .entrada { background: #2A1414; box-shadow: inset 0 0 0 2px #FF6961; }
html[data-theme="dark"] .mt-ficha-foto .portada.subida { background: var(--widget-2); }
html[data-theme="dark"] .pv-x { background: rgba(28, 28, 30, .94); color: var(--texto); }

/* ── 5. Contraste de 4.5:1 en los dos modos (texto chico) ──────────────── */
/* Botón azul: el centro del degradado baja un punto para que la letra blanca pase de 4.3 a 4.8:1.
   En claro, el azul de letra y el verde del precio bajan un tono (4.2 → 4.9:1 sobre los fondos tintados y el gris; el oscuro tiene los suyos). */
:root { --degradado-boton: linear-gradient(135deg, #3D9BFF 0%, #0F6AF5 48%, #0B57D0 100%); --acento: #0B63D9; --ok: #087A45; }
:root:not([data-theme="dark"]) .bisel { --texto-3: #56565B; } /* el gris de metadatos sobre el resplandor azul del bisel */
:root:not([data-theme="dark"]) .bisel .kicker { color: #0A55BD; }
.dw-pildora-precio { background: rgba(0, 0, 0, .26); }
.avatar { background: linear-gradient(150deg, #1570EE, #0A4AB5); } /* iniciales blancas a 4.6:1 o más en todo el círculo */
/* Insignias: la letra un tono más oscura en claro y más clara en oscuro (el fondo tintado se queda).
   :where() deja la especificidad igual a la de liz.css para no pisar .neutro, .solida (letra blanca), .suave… */
.insignia { color: #0C5BC8; }
.insignia.ok:where(:not(.solida)) { color: #076338; }
.insignia.urgente:where(:not(.solida)) { color: #AA1A1A; }
:where(:root[data-theme="dark"]) .insignia { color: #6FB6FF; }
:where(:root[data-theme="dark"]) .insignia.ok:where(:not(.solida)) { color: #30D158; }
:where(:root[data-theme="dark"]) .insignia.urgente:where(:not(.solida)) { color: #FF8A80; }
:root[data-theme="dark"] { --texto-3: #AEAEB2; } /* (misma especificidad que liz.css y va después) */
/* El destacado del panel (azul Luz con letra casi negra): lo secundario también oscuro */
.pn-destacado .pn-pie, .pn-destacado .texto-2, .pn-destacado .pn-cuenta span { color: rgba(18, 18, 18, .85); }
.pn-destacado .texto-3 { color: rgba(18, 18, 18, .75); }

/* ── 6. Comunidad en oscuro: lo que lleva letra blanca sobre azul usa el azul de botón (el Luz es para letra) ── */
html[data-theme="dark"] :is(.cc-logo, .cc-nv, .g-gif-ic, .cc-nivel.actual .cc-nivel-n, .g-perfil-nivel-n, .cc-noti-marca, .cc-adm-tabs a[aria-current="page"], .cc-adm-btns .redondo.activo, .cc-prog-n, .cc-op-logo, .cc-nuevas) { background: #0B63D9; }
html[data-theme="dark"] .cc-chip.activo { color: #0B0B0F; background: #F5F5F7; box-shadow: none; }
html[data-theme="dark"] .bisel .kicker { color: #7DBEFF; } /* sobre el resplandor azul del bisel */