/* ═══════════════════════════════════════════════════════════════════════════
   CONTENIDO DE LOS TEMAS · MODO OSCURO
   ═══════════════════════════════════════════════════════════════════════════

   QUE ARREGLA
   Las seis hojas del contenido (`content-tema*.css`, `subrayado`, `tutor`) no
   tenian NI UNA regla de modo oscuro. Con el oscuro activado, un tema se leia
   en CLARO dentro de una interfaz oscura: `.entry-content` conservaba su fondo
   `#f5f7fa` y su texto `#333`, y las cajas de aviso seguian en amarillo palido.
   La pantalla donde el alumno pasa las horas era la unica que no cambiaba.

   POR QUE NO SE VEIA: el fondo literal `#f5f7fa` es casi identico al `--papel`
   del tema claro (`#F4F6FA`), asi que en claro parecia correcto por pura
   coincidencia. Solo se notaba al encender el oscuro.

   COMO SE ARREGLA
   El contenido de los temas tiene su PROPIO vocabulario de tokens, `--tc-*`,
   declarado en `content-tema.css` con ambito `.entry-content` (es el tercer
   sistema de tokens del theme, ademas de `tokens.css` y `shell.css`). Aqui solo
   se le dan valores oscuros a ese vocabulario y a las cajas de aviso. Las
   superficies que estaban a pelo ya se pasaron a tokens `--tema-*`, definidos
   en `tokens-canon.css` con su valor claro y su valor oscuro.

   TODO VA BAJO `:root.dark`: el modo claro no puede cambiar por definicion, y
   quitar el fichero del encolado revierte la funcion entera.

   ⚠️ El HTML de los 1.102 temas NO se toca. Todo entra por selectores
   descendientes de `.entry-content`.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── El vocabulario propio del contenido ──────────────────────────────────
   Son los 73 usos de `var(--tc-*)` de content-tema.css. Dandoles valor aqui,
   todo lo que ya leia de ellos se oscurece sin tocar una regla mas. */
:root.dark .entry-content {
	--tc-bg:      var(--tema-lectura);
	--tc-white:   var(--tema-panel);
	--tc-light:   var(--tema-suave);

	/* `--tc-dark` se usaba como color de TEXTO y de cabecera de tabla: en
	   oscuro tiene que aclararse, no oscurecerse mas. */
	--tc-dark:    var(--tema-texto-2);

	/* Los acentos suben de luminosidad para que se vean sobre fondo oscuro.
	   El matiz se conserva: son los colores con los que el autor escribio los
	   temas y sirven de codigo visual (azul = concepto, verde = correcto). */
	--tc-primary:   #6FA8D8;
	--tc-secondary: #71B3E5;
	--tc-accent:    #5FC98A;
	/* `--tc-accent-ink` es el verde para letra: en claro es oscuro (#1C7C44)
	   porque va sobre cajas claras; en oscuro tiene que ser lo contrario. */
	--tc-accent-ink: #7FD1A0;
	--tc-warning:   #E8AE4A;
	--tc-danger:    #EF7C72;

	/* Las sombras no funcionan sobre fondo oscuro: se sustituyen por un filete,
	   que es lo que separa de verdad ahi. */
	--tc-shadow:    0 0 0 1px var(--tema-filete);
	--tc-shadow-lg: 0 0 0 1px var(--tema-filete-2);
}


/* ── Cajas de aviso ───────────────────────────────────────────────────────
   Hay DOS generaciones con la misma clase y semantica distinta: en
   `content-tema.css` `.alert-exam` es ambar y `.alert-warning` roja, mientras
   que en `content-tema-v3.css` `.alert-exam` es verde y `.alert-warning` ambar.
   Se respeta lo que hace cada una en claro y solo se lleva a oscuro, porque
   unificar la semantica cambiaria el significado de cajas ya escritas en 1.102
   temas. (Queda anotado como cosa a decidir, no a arreglar por sorpresa.)

   ⚠️ No basta con oscurecer el fondo: estas cajas llevan el texto en un tono
   MUY oscuro del mismo matiz (`#0a3d24`, `#5c2e07`, `#721c24`), que sobre
   fondo oscuro es ilegible. Fondo y texto se cambian juntos, siempre. */

/* v3/v4 — la generacion vigente */
:root.dark .entry-content .alert-exam {
	background: var(--av-ok-bg);
	color: var(--av-ok-ink);
	border-color: var(--av-ok-ink);
}
:root.dark .entry-content .alert-info,
:root.dark .entry-content .alerta {
	background: var(--av-info-bg);
	color: var(--av-info-ink);
	border-color: var(--av-info-ink);
}
:root.dark .entry-content .alert-warning {
	background: var(--av-aviso-bg);
	color: var(--av-aviso-ink);
	border-color: var(--av-aviso-ink);
}
:root.dark .entry-content .alert-important {
	background: var(--av-aviso-bg);
	color: var(--av-aviso-ink);
	border-color: var(--av-aviso-ink);
}

/* content-tema.css — la generacion antigua reparte los colores distinto y pone
   el color del rotulo en un ::before. Se cubre para que no quede un titulo
   oscuro sobre la caja oscura. */
:root.dark .entry-content .alert-exam::before      { color: var(--av-aviso-ink); }
:root.dark .entry-content .alert-important::before { color: var(--av-ok-ink); }
:root.dark .entry-content .alert-warning::before   { color: var(--av-error-ink); }
:root.dark .entry-content .alert-info::before      { color: var(--av-info-ink); }


/* ── Codigo, tablas y citas ───────────────────────────────────────────────
   Lo que quedaba con fondo claro fijo dentro del cuerpo del tema. */
:root.dark .entry-content pre,
:root.dark .entry-content code,
:root.dark .entry-content blockquote {
	background: var(--tema-suave);
	color: var(--tema-texto);
	border-color: var(--tema-filete);
}
:root.dark .entry-content th {
	background: var(--tema-suave);
	color: var(--tema-texto);
}


/* ── Imagenes ─────────────────────────────────────────────────────────────
   Los esquemas y las figuras de los temas son PNG con fondo blanco. En una
   pagina oscura una figura asi es un rectangulo deslumbrante, asi que se le
   pone un marco claro propio: se lee bien y no se toca el fichero.
   ⛔ NO se les baja el brillo ni se invierten: son diagramas clinicos y una
   imagen medica alterada puede llevar a leer mal un dato. */
:root.dark .entry-content img:not([src*=".svg"]) {
	background: #ffffff;
	border-radius: var(--radio-1);
}


/* ═══════════════════════════════════════════════════════════════════════════
   CAJAS DEL CONTENIDO — la lista completa
   ═══════════════════════════════════════════════════════════════════════════
   El primer bloque de este fichero solo cubria las clases `.alert-*`, y eso
   dejaba fuera 42 reglas mas con fondo claro repartidas por las cuatro
   generaciones de plantilla. En oscuro, esas cajas conservaban su fondo
   luminoso mientras el texto se aclaraba: medido en un tema de Medico de
   Familia, `.warning-box` daba 1,09:1 y `.highlight-box` 1,18:1. Ilegibles.

   Se agrupan por MATIZ, que es lo que significan: verde correcto, azul
   informacion, ambar atencion, rojo peligro, violeta caso practico. Y van en
   el MISMO orden de cascada que en claro (content-tema, luego v3, luego v4)
   para que, donde una clase esta definida dos veces con colores distintos
   —`.key-concept`, `.important-box`, `.tip-box`—, gane la misma que gana hoy.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── content-tema.css (plantilla A/B) ─────────────────────────────────────── */
:root.dark .entry-content .success,
:root.dark .entry-content .success-box,
:root.dark .entry-content .tip-box,
:root.dark .entry-content .correct-answer,
:root.dark .entry-content .explanation,
:root.dark .entry-content .question-explanation,
:root.dark .entry-content .option.correct,
:root.dark .entry-content .option.show-correct {
	background: var(--av-ok-bg);
	color: var(--av-ok-ink);
	border-color: var(--av-ok-ink);
}
:root.dark .entry-content .info-box,
:root.dark .entry-content .intro-box,
:root.dark .entry-content .sas-practice {
	background: var(--av-info-bg);
	color: var(--av-info-ink);
	border-color: var(--av-info-ink);
}
:root.dark .entry-content tr:hover td,
:root.dark .entry-content .option:hover {
	background: var(--av-info-bg);
}
:root.dark .entry-content .highlight,
:root.dark .entry-content .highlight-box,
:root.dark .entry-content .bolsa-negra,
:root.dark .entry-content .bolsa-blanca,
:root.dark .entry-content .key-concept {
	background: var(--av-aviso-bg);
	color: var(--av-aviso-ink);
	border-color: var(--av-aviso-ink);
}
:root.dark .entry-content .important,
:root.dark .entry-content .warning-box,
:root.dark .entry-content .danger-box,
:root.dark .entry-content .important-box,
:root.dark .entry-content .wrong-answers,
:root.dark .entry-content .option.incorrect {
	background: var(--av-error-bg);
	color: var(--av-error-ink);
	border-color: var(--av-error-ink);
}
:root.dark .entry-content .exam-question {
	background: var(--av-nota-bg);
	color: var(--av-nota-ink);
	border-color: var(--av-nota-ink);
}

/* ── content-tema-v3.css ──────────────────────────────────────────────────── */
:root.dark .entry-content .respuesta-correcta,
:root.dark .entry-content .explanation-box,
:root.dark .entry-content .opt-btn.correct {
	background: var(--av-ok-bg);
	color: var(--av-ok-ink);
	border-color: var(--av-ok-ink);
}
:root.dark .entry-content .opt-btn.incorrect {
	background: var(--av-error-bg);
	color: var(--av-error-ink);
	border-color: var(--av-error-ink);
}

/* ── content-tema-v4.css (gana sobre las de arriba donde coinciden) ───────── */
:root.dark .entry-content .key-concept,
:root.dark .entry-content .btn-success:hover,
:root.dark .entry-content .escq-btn-show:hover {
	background: var(--av-ok-bg);
	color: var(--av-ok-ink);
	border-color: var(--av-ok-ink);
}
:root.dark .entry-content .tip-box,
:root.dark .entry-content .sas-practice {
	background: var(--av-info-bg);
	color: var(--av-info-ink);
	border-color: var(--av-info-ink);
}
:root.dark .entry-content .important-box,
:root.dark .entry-content .warning {
	background: var(--av-aviso-bg);
	color: var(--av-aviso-ink);
	border-color: var(--av-aviso-ink);
}
:root.dark .entry-content .prohibido {
	background: var(--av-error-bg);
	color: var(--av-error-ink);
	border-color: var(--av-error-ink);
}
:root.dark .entry-content .caso-practico {
	background: var(--av-nota-bg);
	color: var(--av-nota-ink);
	border-color: var(--av-nota-ink);
}


/* ── Subrayado del alumno ─────────────────────────────────────────────────
   ⛔ AQUI NO SE OSCURECE EL FONDO. Un subrayado es una marca de rotulador que
   el propio alumno ha puesto: si se apaga, deja de cumplir su funcion. Lo que
   se hace es forzar TEXTO OSCURO encima, que es como se lee un rotulador de
   verdad, en vez de dejar el texto claro del tema sobre amarillo. */
:root.dark .entry-content mark.escapa-hl,
:root.dark mark.escapa-hl {
	color: #17212B;
	-webkit-text-fill-color: #17212B;
}
/* Las muestras de color de la barra y el contador son testigos de color: se
   quedan como estan, solo se les asegura texto legible encima. */
:root.dark .escapa-sub-bar button[data-c],
:root.dark .estudio-chip--res {
	color: #17212B;
}


/* ── Botones de los temas ─────────────────────────────────────────────────
   `.btn-primary` y `.btn-success` llevan `color: white` sobre `--tc-secondary`
   y `--tc-accent`. Esos dos acentos se ACLARAN en oscuro para que se lean como
   texto sobre el fondo oscuro, y entonces el blanco encima se queda corto:
   medido, 2,26:1 y 2,06:1. Lo que toca no es reoscurecer el acento —haria
   ilegible el texto de los enlaces— sino poner tinta oscura sobre el boton,
   que es lo que se hace con un boton de color claro. */
/* `.btn-primary` se queda con fondo claro (`--tc-secondary` aclarado), asi que
   pide tinta oscura. `.btn-success` es distinto: su fondo ya NO es el acento
   aclarado sino el verde oscuro `--tc-accent-ink` del modo claro, asi que
   ponerle tinta oscura lo haria ilegible. Se le fija fondo y letra a mano:
   blanco sobre #1C7C44 da 5,23:1 y se lee como un boton verde normal. */
:root.dark .entry-content .btn-primary {
	color: #17212B;
}
:root.dark .entry-content .btn-success {
	background: #1C7C44;
	color: #ffffff;
}


/* ── Enfasis y subtitulos DENTRO de las cajas ─────────────────────────────
   Las cajas del contenido llevan dentro `strong`, `h3` y similares con su
   propio color saturado y OSCURO —pensado para el fondo claro de la caja—.
   Al oscurecer la caja, ese color se queda: medido, un `strong` en #8a6300
   sobre la caja verde daba 2,97:1 y un `h3` en #6d28d9 sobre la violeta,
   2,40:1. Heredando el color de la caja se resuelven todos de una vez y sin
   inventar un tono nuevo por cada caso.
   ⛔ Los enlaces NO se incluyen: tienen que seguir distinguiendose del texto. */
:root.dark .entry-content :is(
	.success, .success-box, .tip-box, .correct-answer, .explanation,
	.question-explanation, .info-box, .intro-box, .sas-practice,
	.highlight, .highlight-box, .bolsa-negra, .bolsa-blanca, .key-concept,
	.important, .warning-box, .danger-box, .important-box, .wrong-answers,
	.exam-question, .respuesta-correcta, .explanation-box, .warning,
	.prohibido, .caso-practico, .alert, .alerta
) :is(strong, b, em, i, h3, h4, h5, h6, .explanation-title) {
	color: inherit;
}