/* =====================================================================
   Temas de la interfaz del gestor (docs/gestor-dashboard.md, principio 8).

   Lo cargan LAS CUATRO páginas del gestor (index, editor, proyecto y
   validacion), después de tailwind.css. Lo que la persona eligió en "Ajustes
   de la interfaz" (gestor-ajustes.js) llega como atributos de <html>:
     data-tema="oscuro|claro|contraste"
     data-reducir-movimiento="1"
     style="--interfaz-escala: 1 | 1.25 | 1.5"
   y un script chico del <head> los pone ANTES de pintar, para que no parpadee
   el tema oscuro (mismo truco que /shared/ajustes-lectura.js).

   "Oscuro" es el diseño de siempre: no remapea nada. Claro y contraste
   reescriben las utilidades de Tailwind que usa el gestor, igual que
   mapas/mapas.css lo hace bajo html.visor-mapas[data-libro-tema=...]; aquí
   el atributo alcanza porque este CSS solo lo cargan páginas del gestor.
   Los valores de claro son los de mapas.css (papel cálido y texto casi negro:
   el blanco puro encandila a quien tiene fotofobia o baja visión).

   Contrastes (medidos): texto principal ≥ 7:1 en los tres temas; bordes de
   campos y foco ≥ 3:1. Los separadores decorativos de las tarjetas (#ccc
   sobre blanco) no llevan información: el contenido se identifica por su
   texto, no por el borde.

   Tampoco se tocan los blancos que NO son tema: el recuadro blanco del
   código QR (bg-white sin text-black) tiene que seguir siendo blanco para
   que el lector lo lea.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Tamaño de letra y movimiento: valen en los tres temas.
   Todo el gestor está en rem, así que escalar la raíz escala todo.
   --------------------------------------------------------------------- */
html { font-size: calc(100% * var(--interfaz-escala, 1)); }

html[data-reducir-movimiento="1"] *,
html[data-reducir-movimiento="1"] ::before,
html[data-reducir-movimiento="1"] ::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
}

/* Ocultar una sección es solo navegación (preferencia de la persona). Con
   !important para que ningún módulo que le quite `hidden` la vuelva a mostrar. */
[data-oculta-por-preferencia] { display: none !important; }

/* =====================================================================
   TEMA CLARO
   ===================================================================== */
html[data-tema="claro"] {
    --brand-blue: #0a4a66;
    --brand-purple: #5b21b6;
    --bg-dark: #fbfaf5;
    color-scheme: light;
}
html[data-tema="claro"] body { background-color: #fbfaf5; color: #111; }

/* Superficies: tarjetas, campos, cabecera, pie y diálogos pasan a blanco. */
html[data-tema="claro"] :is(.bg-black, .bg-brand-black, .bg-black\/10, .bg-black\/20, .bg-black\/30, .bg-black\/40, .bg-black\/50, .bg-black\/60, .bg-black\/80, .bg-\[\#111\], .bg-\[\#0a0a0a\], .bg-\[\#1a1a1a\]) {
    background-color: #fff;
}
/* Bloques y botones secundarios: un escalón más oscuro que el papel. */
html[data-tema="claro"] :is(.bg-white\/5, .bg-white\/10, .bg-white\/15, .bg-white\/20) { background-color: #ecebe3; }
html[data-tema="claro"] :is(.hover\:bg-white\/5:hover, .hover\:bg-white\/10:hover, .hover\:bg-white\/15:hover, .hover\:bg-white\/20:hover, .hover\:bg-black\/50:hover) { background-color: #dcdbd0; }
/* Un botón o enlace con relleno gris pálido y sin borde se perdería contra el
   papel: se le da borde. */
html[data-tema="claro"] :is(button, a, label)[class*="bg-white/"]:not([class*="border"]) {
    border: 1px solid #8a8a80;
}

/* Bordes. Los de campos (white/20, /30) llegan a 3:1; los de tarjetas son separadores. */
html[data-tema="claro"] :is(.border-white\/5, .border-white\/10, .border-white\/15, .hover\:border-white\/20:hover) { border-color: #ccc; }
html[data-tema="claro"] :is(.border-white\/20, .border-white\/30, .border-black) { border-color: #8a8a80; }

/* Texto. text-brand-gray y los grises de Tailwind van a un gris oscuro. */
html[data-tema="claro"] :is(.text-white, .text-brand-white, .text-gray-100, .text-gray-200) { color: #111; }
html[data-tema="claro"] .hover\:text-white:hover { color: #000; }
html[data-tema="claro"] :is(.text-brand-gray, .text-gray-300, .text-gray-400, .text-gray-500) { color: #45443f; }
html[data-tema="claro"] .hover\:text-brand-gray:hover { color: #111; }
html[data-tema="claro"] :is(.placeholder-gray-500)::placeholder { color: #6b6a63; }
html[data-tema="claro"] .text-black { color: #000; }

/* Colores de estado: los tonos claros (300) son para fondo oscuro; acá van los oscuros. */
html[data-tema="claro"] :is(.text-cyan-200, .text-cyan-300, .text-cyan-400, .text-cyan-500, .text-sky-200, .text-sky-300) { color: #0a4a66; }
html[data-tema="claro"] :is(.text-purple-100, .text-purple-200, .text-purple-300, .text-purple-400, .text-violet-300) { color: #5b21b6; }
html[data-tema="claro"] :is(.text-fuchsia-300) { color: #86198f; }
html[data-tema="claro"] :is(.text-blue-300) { color: #1e40af; }
html[data-tema="claro"] :is(.text-amber-100, .text-amber-200, .text-amber-300, .text-amber-400, .text-amber-500) { color: #6b4200; }
html[data-tema="claro"] :is(.text-orange-300) { color: #8a3b00; }
html[data-tema="claro"] :is(.text-emerald-200, .text-emerald-300, .text-emerald-400, .text-green-400) { color: #0b5230; }
html[data-tema="claro"] :is(.text-red-200, .text-red-300, .text-red-400) { color: #8f1818; }
html[data-tema="claro"] .hover\:text-red-300:hover { color: #7f1d1d; }
/* El semáforo del auditor pone su color en línea (gestor-auditor.js): se
   reconoce por el valor y se oscurece para el papel. */
html[data-tema="claro"] [style*="239, 68, 68"] { color: #8f1818 !important; }
html[data-tema="claro"] [style*="245, 158, 11"] { color: #6b4200 !important; }
html[data-tema="claro"] [style*="16, 185, 129"] { color: #0b5230 !important; }

/* Rellenos translúcidos de color: tintes pálidos, con el mismo criterio que mapas.css. */
html[data-tema="claro"] :is(.bg-cyan-400\/10, .bg-cyan-400\/20, .bg-cyan-500\/20, .bg-cyan-600\/10, .bg-cyan-600\/20, .bg-cyan-950\/40, .bg-sky-500\/20, .bg-blue-500\/20) { background-color: #e3f1f6; }
html[data-tema="claro"] :is(.hover\:bg-cyan-400\/10:hover, .hover\:bg-cyan-600\/40:hover) { background-color: #cbe5ee; }
html[data-tema="claro"] :is(.bg-purple-500\/10, .bg-purple-500\/20, .bg-purple-600\/20, .bg-purple-600\/30, .bg-violet-500\/20, .bg-fuchsia-500\/20) { background-color: #efe9fb; }
html[data-tema="claro"] :is(.hover\:bg-purple-600\/40:hover, .hover\:bg-purple-600\/50:hover) { background-color: #ddd0f5; }
html[data-tema="claro"] :is(.bg-amber-400\/10, .bg-amber-500\/5, .bg-amber-500\/10, .bg-amber-500\/20, .bg-amber-950\/20, .bg-amber-950\/40, .hover\:bg-amber-500\/40:hover, .bg-orange-500\/20) { background-color: #fdf3dc; }
html[data-tema="claro"] :is(.bg-emerald-400\/10, .bg-emerald-500\/5, .bg-emerald-500\/10, .bg-emerald-500\/20, .bg-emerald-600\/20, .bg-emerald-950\/40, .hover\:bg-emerald-600\/30:hover) { background-color: #e3f4ea; }
html[data-tema="claro"] :is(.bg-red-400\/10, .bg-red-500\/10, .bg-red-500\/20, .bg-red-950\/40) { background-color: #fde8e8; }
html[data-tema="claro"] :is(.hover\:bg-red-400\/10:hover, .hover\:bg-red-400\/20:hover, .hover\:bg-red-500\/20:hover, .hover\:bg-red-500\/30:hover) { background-color: #fbd0d0; }
html[data-tema="claro"] :is(.border-cyan-400, .border-cyan-400\/30, .border-cyan-500\/20, .border-cyan-500\/30, .hover\:border-cyan-500:hover) { border-color: #5d95ad; }
html[data-tema="claro"] :is(.border-purple-500\/20, .border-purple-500\/30, .border-purple-500\/40, .hover\:border-purple-500:hover) { border-color: #8b6cc9; }
html[data-tema="claro"] :is(.border-amber-400\/20, .border-amber-400\/30, .border-amber-400\/50, .border-amber-500, .border-amber-500\/20, .border-amber-500\/30, .border-amber-500\/40) { border-color: #b8860b; }
html[data-tema="claro"] :is(.border-emerald-400, .border-emerald-500\/30, .border-emerald-500\/40) { border-color: #2f8a5a; }
html[data-tema="claro"] :is(.border-red-500\/30, .border-red-500\/40) { border-color: #c04a4a; }

/* Botones de color sólido con letra blanca: se oscurecen para sostener el 7:1 y
   el texto vuelve a blanco (la regla de .text-white de arriba lo habría vuelto negro). */
html[data-tema="claro"] :is(.bg-cyan-600, .hover\:bg-cyan-500:hover) { background-color: #0a5a78; color: #fff; }
html[data-tema="claro"] :is(.bg-purple-600, .hover\:bg-purple-500:hover) { background-color: #5b21b6; color: #fff; }
html[data-tema="claro"] .bg-red-500\/80 { background-color: #8f1818; color: #fff; }
html[data-tema="claro"] :is(.bg-cyan-600, .bg-purple-600, .bg-red-500\/80) :is(.text-white, span) { color: #fff; }

/* Botón principal de la interfaz oscura (bg-white text-black): en claro pasa a
   fondo casi negro con letra blanca, así sigue siendo el botón que más pesa.
   El bg-white SIN text-black (el recuadro del QR) no se toca. */
html[data-tema="claro"] .bg-white.text-black { background-color: #1c1c1c; color: #fff; }
html[data-tema="claro"] .bg-white.text-black:hover,
html[data-tema="claro"] .bg-white.text-black.hover\:bg-gray-200:hover { background-color: #3a3a36; }
/* Foco del botón principal: un anillo del mismo color que el botón se confundiría
   con él; se deja un hueco de papel entre los dos. */
html[data-tema="claro"] .bg-white.text-black:focus-visible { box-shadow: 0 0 0 2px #fbfaf5, 0 0 0 6px #111; }

/* Foco: el anillo de Tailwind (ring-white) es blanco sobre blanco en este tema. */
html[data-tema="claro"] :is(:focus, :focus-visible, :focus-within) { --tw-ring-color: #111; }
html[data-tema="claro"] :focus-visible { outline-color: #111; }
html[data-tema="claro"] .acc-toggle:focus-visible { box-shadow: 0 0 0 4px #111; }
html[data-tema="claro"] .accessible-focus:focus-visible { outline-color: #005f99 !important; }

/* Piezas con CSS propio dentro de index.html y editor.css. */
html[data-tema="claro"] .acc { border-color: #ccc; background-color: #fff; }
html[data-tema="claro"] .acc-toggle:hover { color: #000; }
html[data-tema="claro"] #decl-vista a { color: #0a4a66; }
html[data-tema="claro"] .form-input { background-color: #fff; color: #111; border-color: #8a8a80; }
html[data-tema="claro"] .tab-btn:not(.active) { color: #45443f; }
html[data-tema="claro"] .tab-btn.active { color: #0a4a66; border-bottom-color: #0a4a66; }
html[data-tema="claro"] #btn-ia.active-ia { background-color: #5b21b6; color: #fff; }
html[data-tema="claro"] .node-tab:not(.node-tab-activa) { color: #45443f; }
html[data-tema="claro"] .node-tab:hover { color: #000; }
html[data-tema="claro"] .node-tab.node-tab-activa { color: #0a4a66; border-bottom-color: #0a4a66; }
html[data-tema="claro"] .node-tab:focus-visible { outline-color: #0a4a66; }
html[data-tema="claro"] .text-gray-500 { color: #45443f; }
html[data-tema="claro"] ::-webkit-scrollbar-track { background: #ecebe3; }
html[data-tema="claro"] ::-webkit-scrollbar-thumb { background: #b5b4ab; }

/* Campos nativos: texto oscuro sobre blanco aunque no lleven clase de Tailwind. */
html[data-tema="claro"] :is(input, textarea, select):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) {
    background-color: #fff; color: #111; border-color: #8a8a80;
}
html[data-tema="claro"] dialog { color: #111; }

/* Informe de validación (validacion.html, /shared/informe-validacion.css): sus
   textos son claros sobre fondo oscuro; acá se invierten lo justo para leerlo. */
html[data-tema="claro"] .inf-raiz { color: #111; }
html[data-tema="claro"] .inf-raiz a { color: #0a4a66; }
html[data-tema="claro"] :is(.inf-suave, .inf-datos dt, .inf-tabla thead th) { color: #45443f; }
html[data-tema="claro"] .inf-alerta { color: #7f1d1d; background: #fde8e8; border-color: #8f1818; }
html[data-tema="claro"] .inf-boton { color: #111; background: #ecebe3; border-color: #8a8a80; }
html[data-tema="claro"] .inf-boton:hover { background: #dcdbd0; }
html[data-tema="claro"] .inf-boton-primario { color: #fff; background: #1c1c1c; border-color: #1c1c1c; }
html[data-tema="claro"] .inf-boton-primario:hover { background: #3a3a36; }
html[data-tema="claro"] .inf-raiz :is(input, select, textarea) { color: #111; background: #fff; border-color: #8a8a80; }
html[data-tema="claro"] .inf-tabla :is(th, td) { border-top-color: #ccc; }
/* Las tarjetas del informe son un negro translúcido sobre el fondo oscuro: sobre papel
   quedarían grises y el texto oscuro no las leería. El borde izquierdo de cada hallazgo
   (su severidad) se conserva: por eso se pintan solo los otros tres lados. */
html[data-tema="claro"] :is(.inf-seccion, .inf-hallazgo) {
    background: #fff;
    border-top-color: #ccc; border-right-color: #ccc; border-bottom-color: #ccc;
}
html[data-tema="claro"] .inf-seccion { border-left-color: #ccc; }
html[data-tema="claro"] .inf-sev-bloqueante { color: #8f1818; }
html[data-tema="claro"] .inf-sev-grave { color: #8a3b00; }
html[data-tema="claro"] .inf-sev-molesto { color: #6b4200; }
html[data-tema="claro"] .inf-hallazgo-bloqueante { border-left-color: #8f1818; }
html[data-tema="claro"] .inf-hallazgo-grave { border-left-color: #c2410c; }
html[data-tema="claro"] .inf-hallazgo-molesto { border-left-color: #b8860b; }

/* =====================================================================
   TEMA ALTO CONTRASTE
   Negro puro, texto blanco, bordes blancos, enlaces y foco amarillo.
   Nada semitransparente: todo relleno translúcido pasa a negro sólido y se
   le pone borde para que el bloque se vea sin depender del color.
   ===================================================================== */
html[data-tema="contraste"] {
    --brand-blue: #ffd400;
    --brand-purple: #ffd400;
    --bg-dark: #000;
    color-scheme: dark;
}
html[data-tema="contraste"] body { background-color: #000; color: #fff; }

html[data-tema="contraste"] :is(.bg-brand-green, .bg-black, .bg-brand-black, .bg-black\/10, .bg-black\/20, .bg-black\/30, .bg-black\/40, .bg-black\/50, .bg-black\/60, .bg-black\/80, .bg-\[\#111\], .bg-\[\#0a0a0a\], .bg-\[\#1a1a1a\], .bg-white\/5, .bg-white\/10, .bg-white\/15, .bg-white\/20, .bg-cyan-400\/10, .bg-cyan-400\/20, .bg-cyan-500\/20, .bg-cyan-600\/10, .bg-cyan-600\/20, .bg-cyan-950\/40, .bg-sky-500\/20, .bg-blue-500\/20, .bg-purple-500\/10, .bg-purple-500\/20, .bg-purple-600\/20, .bg-purple-600\/30, .bg-violet-500\/20, .bg-fuchsia-500\/20, .bg-amber-400\/10, .bg-amber-500\/5, .bg-amber-500\/10, .bg-amber-500\/20, .bg-amber-950\/20, .bg-amber-950\/40, .bg-orange-500\/20, .bg-emerald-400\/10, .bg-emerald-500\/5, .bg-emerald-500\/10, .bg-emerald-500\/20, .bg-emerald-600\/20, .bg-emerald-950\/40, .bg-red-400\/10, .bg-red-500\/10, .bg-red-500\/20, .bg-red-950\/40) {
    background-color: #000;
}
/* Pasar el mouse: un gris sólido, no un translúcido. */
html[data-tema="contraste"] :is(.hover\:bg-white\/5:hover, .hover\:bg-white\/10:hover, .hover\:bg-white\/15:hover, .hover\:bg-white\/20:hover, .hover\:bg-black\/50:hover, .hover\:bg-cyan-400\/10:hover, .hover\:bg-cyan-600\/40:hover, .hover\:bg-purple-600\/40:hover, .hover\:bg-purple-600\/50:hover, .hover\:bg-amber-500\/40:hover, .hover\:bg-emerald-600\/30:hover, .hover\:bg-red-400\/10:hover, .hover\:bg-red-400\/20:hover, .hover\:bg-red-500\/20:hover, .hover\:bg-red-500\/30:hover),
html[data-tema="contraste"] button:hover:not([class*="bg-white"]):not([class*="bg-cyan-5"]):not([class*="bg-cyan-6"]):not([class*="bg-purple-5"]):not([class*="bg-purple-6"]):not([class*="bg-emerald-"]) {
    background-color: #333;
}

/* Bordes: todos visibles. Los de acento (cian, violeta, esmeralda, celeste) van en
   amarillo; los de aviso conservan un tono claro. */
html[data-tema="contraste"] :is([class*="border-white"], [class*="border-black"], [class*="border-gray"]) { border-color: #fff; }
html[data-tema="contraste"] :is([class*="border-cyan"], [class*="border-purple"], [class*="border-emerald"], [class*="border-sky"]) { border-color: #ffd400; }
html[data-tema="contraste"] [class*="border-red"] { border-color: #f87171; }
html[data-tema="contraste"] [class*="border-amber"], html[data-tema="contraste"] [class*="border-orange"] { border-color: #fbbf24; }
/* Un bloque con relleno translúcido y sin borde propio se vería solo por el color: se le da borde. */
html[data-tema="contraste"] :is([class*="bg-white/"], [class*="bg-black/"], [class*="bg-cyan-"][class*="/"], [class*="bg-purple-"][class*="/"], [class*="bg-amber-"], [class*="bg-orange-"], [class*="bg-emerald-"][class*="/"], [class*="bg-red-"][class*="/"], [class*="bg-sky-"], [class*="bg-blue-"], [class*="bg-violet-"], [class*="bg-fuchsia-"]):not([class*="border"]):not(.acc-toggle):not([class*="bg-transparent"]) {
    border: 1px solid #fff;
}
html[data-tema="contraste"] :is(button, a, label)[class*="bg-"]:not([class*="border"]):not(.acc-toggle) { border-width: 2px; }

/* Texto: todo blanco; los acentos (cian, violeta, celeste…) en amarillo, igual que los enlaces. */
html[data-tema="contraste"] :is(.text-white, .text-brand-white, .text-brand-gray, .text-gray-100, .text-gray-200, .text-gray-300, .text-gray-400, .text-gray-500) { color: #fff; }
html[data-tema="contraste"] :is(.text-cyan-200, .text-cyan-300, .text-cyan-400, .text-cyan-500, .text-sky-200, .text-sky-300, .text-purple-100, .text-purple-200, .text-purple-300, .text-purple-400, .text-violet-300, .text-fuchsia-300, .text-blue-300) { color: #ffd400; }
html[data-tema="contraste"] :is(.placeholder-gray-500)::placeholder { color: #d0d0d0; }
html[data-tema="contraste"] :is(.hover\:text-red-300:hover) { color: #fecaca; }
/* El semáforo del auditor (color en línea): sobre negro los tres tonos ya pasan 7:1. */

/* Con más especificidad que los grupos de texto de arriba, que si no lo pisan. */
html[data-tema="contraste"] a:not([class*="bg-"]) { color: #ffd400; text-decoration: underline; }
html[data-tema="contraste"] a:not([class*="bg-"]):hover { color: #fff; }
html[data-tema="contraste"] :is(h1, h2, h3, h4, h5, h6) { color: #fff; }

/* Botones de acción (relleno de color sólido): amarillo con letra negra. El
   bg-white text-black ya es blanco con letra negra: se deja como está. */
html[data-tema="contraste"] :is(.bg-cyan-500, .bg-cyan-600, .bg-purple-500, .bg-purple-600, .bg-emerald-500, .hover\:bg-cyan-400:hover, .hover\:bg-cyan-500:hover, .hover\:bg-purple-400:hover, .hover\:bg-purple-500:hover, .hover\:bg-emerald-400:hover) {
    background-color: #ffd400; color: #000;
}
html[data-tema="contraste"] .bg-red-500\/80 { background-color: #fff; color: #000; }
html[data-tema="contraste"] :is(.bg-cyan-500, .bg-cyan-600, .bg-purple-500, .bg-purple-600, .bg-emerald-500, .bg-red-500\/80) :is(.text-white, span) { color: #000; }
/* Pestañas y pasos "activos" por clase del editor. */
html[data-tema="contraste"] .tab-btn { color: #fff; }
html[data-tema="contraste"] .tab-btn.active { color: #ffd400; border-bottom-color: #ffd400; border-bottom-width: 4px; }
html[data-tema="contraste"] .node-tab { color: #fff; }
html[data-tema="contraste"] .node-tab.node-tab-activa { color: #ffd400; border-bottom-color: #ffd400; border-bottom-width: 4px; }
html[data-tema="contraste"] #btn-ia.active-ia { background-color: #ffd400; color: #000; }
html[data-tema="contraste"] .text-gray-500 { color: #fff; }

/* Foco: amarillo, grueso, también en el anillo de Tailwind (ring-white / ring-black). */
html[data-tema="contraste"] :is(:focus, :focus-visible, :focus-within) { --tw-ring-color: #ffd400; }
html[data-tema="contraste"] :focus-visible { outline: 3px solid #ffd400; outline-offset: 2px; }
html[data-tema="contraste"] .acc-toggle:focus-visible { box-shadow: 0 0 0 4px #ffd400; }
html[data-tema="contraste"] .accessible-focus:focus-visible { outline-color: #ffd400 !important; }

/* Piezas con CSS propio. */
html[data-tema="contraste"] .acc { border: 2px solid #fff; background-color: #000; }
html[data-tema="contraste"] .acc-toggle:hover { color: #ffd400; }
html[data-tema="contraste"] #decl-vista a { color: #ffd400; }
html[data-tema="contraste"] .form-input { background-color: #000; color: #fff; border: 2px solid #fff; }
html[data-tema="contraste"] ::-webkit-scrollbar-track { background: #000; }
html[data-tema="contraste"] ::-webkit-scrollbar-thumb { background: #fff; }
html[data-tema="contraste"] :is(input, textarea, select):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) {
    background-color: #000; color: #fff; border: 2px solid #fff;
}
html[data-tema="contraste"] dialog { background-color: #000; color: #fff; border: 2px solid #fff; }
html[data-tema="contraste"] dialog::backdrop { background-color: #000; }

/* Informe de validación. */
html[data-tema="contraste"] .inf-raiz a { color: #ffd400; }
html[data-tema="contraste"] :is(.inf-suave, .inf-datos dt, .inf-tabla thead th) { color: #fff; }
html[data-tema="contraste"] .inf-alerta { color: #fff; background: #000; border-color: #f87171; }
html[data-tema="contraste"] .inf-boton { color: #fff; background: #000; border-color: #fff; }
html[data-tema="contraste"] .inf-boton:hover { background: #333; }
html[data-tema="contraste"] .inf-boton-primario { color: #000; background: #ffd400; border-color: #ffd400; }
html[data-tema="contraste"] .inf-tabla :is(th, td) { border-top-color: #fff; }