/* Estilos de la plataforma de cursos (/cursos/).
   Va DESPUÉS de tailwind.css: se apoya en su "preflight" (el reseteo base:
   encabezados, listas y botones sin estilo) y encima pone lo propio. La base es
   la de /validar/ (validar.css): mismas decisiones de accesibilidad, mismos
   nombres de clase, para que quien toque una sepa dónde está en la otra.

   Decisiones de accesibilidad que están acá y no se deberían "limpiar":
   - Foco siempre visible, de alto contraste (anillo blanco + halo negro, que se
     ve sobre fondo claro y oscuro) y SIN cabecera pegada (position sticky/fixed):
     nada tapa el elemento enfocado (WCAG 2.4.11).
   - Todo lo que se toca mide al menos 44 px de alto (2.5.8 pide 24; 44 es el
     tamaño cómodo para pulso tembloroso, switch y pantallas táctiles).
   - Los bordes de campos y botones tienen contraste >= 3:1 contra el fondo
     (1.4.11); el texto >= 4.5:1 (1.4.3).
   - Nada depende solo del color: el estado activo del menú y la lección actual
     se marcan también con subrayado grueso y negrita; "Completada" es texto; los
     errores llevan la palabra "Error".
   - Tamaños en rem: el zoom de texto y el de página se respetan. A 320 px de
     ancho no hay desplazamiento horizontal (1.4.10): las filas se apilan, las
     tablas anchas se desplazan dentro de su propia región con foco y los textos
     largos se parten.
   - Sin animaciones. prefers-reduced-motion igual lo apaga todo por si se suma
     alguna después.

   Ajustes de lectura (/shared/ajustes-lectura.js): ese script solo escribe
   variables y data-* en <html>; el CSS lo pone cada visor. Acá TIÑEN el lienzo de
   la lección (.leccion-lienzo), como en el visor de materiales, no toda la página:
   el resto del panel queda siempre en oscuro. Las variables --lz-* de abajo son
   los colores del lienzo en cada tema. */

:root {
    --fondo: #050505;
    --superficie: #121212;
    --superficie-2: #1c1c1c;
    --texto: #ffffff;
    --texto-suave: #d1d5db;      /* 13:1 sobre el fondo */
    --borde: #9ca3af;            /* 7:1: borde de controles */
    --borde-suave: #4b5563;      /* solo decorativo (tarjetas) */
    --enlace: #7dd3fc;           /* 12:1 */
    --acento: #fbbf24;           /* aviso destacado */
    --error: #fca5a5;            /* 10:1 */
    --exito: #86efac;            /* 14:1 */
    --foco: #ffffff;
}

html { font-size: 100%; }

body {
    margin: 0;
    background-color: var(--fondo);
    color: var(--texto);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.65;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-wrap: break-word;
}

/* ---------- Foco ---------- */
:focus { outline: none; }
:focus-visible {
    outline: 3px solid var(--foco);
    outline-offset: 3px;
    box-shadow: 0 0 0 6px #000;
    border-radius: 4px;
}
/* Los encabezados y contenedores que reciben el foco por programa no necesitan
   anillo (se movió el foco para leerlos, no para operarlos), pero sí se deja el
   del teclado cuando llegan con Tab. */
h1:focus:not(:focus-visible), h2:focus:not(:focus-visible), main:focus:not(:focus-visible),
fieldset:focus:not(:focus-visible), [tabindex="-1"]:focus:not(:focus-visible) { outline: none; box-shadow: none; }
h1:focus-visible, [tabindex="-1"]:focus-visible { outline-offset: 6px; }

/* ---------- Estructura ---------- */
.contenedor { width: 100%; max-width: 64rem; margin-inline: auto; padding-inline: 1rem; box-sizing: border-box; }
.principal { flex: 1 0 auto; padding-block: 1.5rem 3rem; }

.omitir {
    position: absolute; left: .5rem; top: -4rem;
    background: #fff; color: #000; font-weight: 700;
    padding: .75rem 1rem; border-radius: .5rem; z-index: 10;
}
.omitir:focus { top: .5rem; }

.cabecera { border-bottom: 1px solid var(--borde-suave); background: #0a0a0a; }
.cabecera-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1.5rem; padding-block: .5rem; }
.marca { margin: 0; font-size: 1rem; }
.marca-nombre { font-weight: 800; }
.marca-detalle { color: var(--texto-suave); }

#nav-principal ul { display: flex; flex-wrap: wrap; gap: .25rem .5rem; margin: 0; padding: 0; list-style: none; }
#nav-principal a, #nav-principal button {
    display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 .75rem;
    color: var(--texto); background: none; border: 0; font: inherit; font-weight: 600; cursor: pointer;
    text-decoration: underline; text-underline-offset: 4px;
}
#nav-principal a[aria-current="page"] {
    font-weight: 800; text-decoration-thickness: 4px; text-decoration-color: var(--texto);
}
#nav-principal a[aria-current="true"] { font-weight: 800; }

.pie { border-top: 1px solid var(--borde-suave); padding-block: 1rem; margin-top: 2rem; }
.pie p { margin: .25rem 0; }

.solo-lectores {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Texto ---------- */
main h1 { font-size: 1.75rem; line-height: 1.25; font-weight: 800; margin: 0 0 1rem; }
main h2 { font-size: 1.375rem; line-height: 1.3; font-weight: 800; margin: 2rem 0 .75rem; }
main h3 { font-size: 1.125rem; line-height: 1.35; font-weight: 800; margin: 0 0 .25rem; }
main h4, main h5 { font-size: 1.0625rem; line-height: 1.35; font-weight: 800; margin: 0 0 .25rem; }
p { margin: .75rem 0; }
.texto-suave { color: var(--texto-suave); }
.texto-chico { font-size: .9375rem; }
.intro { font-size: 1.125rem; color: var(--texto-suave); max-width: 40rem; }

a { color: var(--enlace); text-decoration: underline; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 3px; }

/* ---------- Botones ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 2.75rem; padding: .5rem 1.25rem; box-sizing: border-box;
    font: inherit; font-weight: 700; line-height: 1.3; text-align: center; text-decoration: none;
    border-radius: .75rem; border: 2px solid transparent; cursor: pointer;
}
.btn-primario, a.btn-primario { background: #fff; color: #000; border-color: #fff; }
.btn-primario:hover { background: #e5e7eb; }
.btn-secundario, a.btn-secundario { background: var(--superficie-2); color: #fff; border-color: var(--borde); }
.btn-secundario:hover { background: #2a2a2a; }
.btn[aria-disabled="true"], .btn:disabled { opacity: 1; background: #2a2a2a; color: #d1d5db; border-color: var(--borde-suave); cursor: not-allowed; }
.acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }

/* ---------- Tarjetas y listas ---------- */
.tarjeta { background: var(--superficie); border: 1px solid var(--borde-suave); border-radius: 1rem; padding: 1rem 1.25rem; }
.lista-tarjetas { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .75rem; }
.tarjeta h2, .tarjeta h3 { margin: 0; }
.tarjeta h2 a, .tarjeta h3 a { color: #fff; }
.tarjeta p { margin: .25rem 0; }
.tarjeta .acciones { margin-top: .75rem; }

/* Tarjeta del catálogo: portada decorativa a un costado cuando hay, apilada en
   pantallas angostas. */
.tarjeta-curso { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
.tarjeta-curso.con-portada { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); }
@media (max-width: 40rem) { .tarjeta-curso.con-portada { grid-template-columns: minmax(0, 1fr); } }
.portada { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: .75rem; background: var(--superficie-2); }

/* Datos cortos de un curso (precio, horas, qué certifica): lista en una fila. */
ul.meta { list-style: none; margin: .5rem 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; color: var(--texto-suave); }
ul.meta li { margin: 0; }
ul.meta strong { color: #fff; }

.etiqueta-estado {
    display: inline-block; margin-top: .25rem; padding: .125rem .75rem;
    border: 2px solid var(--borde); border-radius: 999px; font-weight: 700; font-size: .9375rem; color: #fff;
}
.etiqueta-estado.atencion { border-color: var(--acento); color: var(--acento); }

.destacado { border: 3px solid var(--acento); border-radius: 1rem; padding: 1rem 1.25rem; background: #1a1505; margin-block: 1rem; }
.destacado h2 { margin-top: 0; font-size: 1.25rem; color: var(--acento); }
.destacado p:first-child { margin-top: 0; }
.destacado p:last-child { margin-bottom: 0; }

.vacio { border: 2px dashed var(--borde); border-radius: 1rem; padding: 1.25rem; color: var(--texto-suave); }

ol.programa { margin: .75rem 0; padding-left: 1.5rem; }
ol.programa li { margin: .375rem 0; }
.tipo-leccion { color: var(--texto-suave); font-size: .9375rem; }

/* Progreso: la barra es de apoyo, el dato está también en palabras ("3 de 4
   lecciones"), así que no depende de verla. */
progress { display: block; width: 100%; max-width: 24rem; height: .875rem; margin: .5rem 0 .25rem; border: 1px solid var(--borde);
    border-radius: 999px; background: #2a2a2a; overflow: hidden; -webkit-appearance: none; appearance: none; }
progress::-webkit-progress-bar { background: #2a2a2a; }
progress::-webkit-progress-value { background: #fff; }
progress::-moz-progress-bar { background: #fff; }

/* ---------- Formularios ---------- */
form { margin: 0; }
.campo { margin-top: 1.25rem; }
.campo > label, .campo > .etiqueta, legend { display: block; font-weight: 700; margin-bottom: .25rem; }
.campo .ayuda, .ayuda { color: var(--texto-suave); font-size: .9375rem; margin: .125rem 0 .5rem; }
.campo .error-campo, .error-campo { color: var(--error); font-weight: 700; margin: .375rem 0 0; }
.requerido { font-weight: 400; color: var(--texto-suave); }

input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="number"],
input[type="search"], input[type="date"], select, textarea {
    display: block; width: 100%; box-sizing: border-box; min-height: 2.75rem;
    background: #000; color: #fff; font: inherit;
    border: 2px solid var(--borde); border-radius: .75rem; padding: .5rem .875rem;
}
textarea { min-height: 7rem; resize: vertical; line-height: 1.5; }
input[readonly], textarea[readonly] { background: #151515; }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--error); border-width: 3px; }
select { padding-right: 2rem; }

fieldset { border: 2px solid var(--borde-suave); border-radius: 1rem; margin: 1.25rem 0 0; padding: .75rem 1.25rem 1.25rem; min-width: 0; }
fieldset > legend { padding: 0 .5rem; font-size: 1.0625rem; }

.opcion { display: flex; align-items: flex-start; gap: .75rem; min-height: 2.75rem; padding: .5rem 0; cursor: pointer; }
.opcion input[type="checkbox"], .opcion input[type="radio"] {
    flex: 0 0 auto; width: 1.5rem; height: 1.5rem; margin: .125rem 0 0; accent-color: #fff;
}
.opcion span { flex: 1 1 auto; min-width: 0; }
.opcion-caja { border: 2px solid var(--borde-suave); border-radius: .75rem; padding: .5rem .875rem; margin-top: .5rem; }

.resumen-errores { border: 3px solid var(--error); border-radius: 1rem; padding: 1rem 1.25rem; background: #1f0a0a; margin-bottom: 1.25rem; }
.resumen-errores p { margin: 0 0 .5rem; font-weight: 800; color: var(--error); }
.resumen-errores ul { margin: 0; padding-left: 1.25rem; }
.resumen-errores li { margin: .25rem 0; }
.resumen-errores a { color: #fff; }
.resumen-errores .resumen-extra { font-weight: 400; color: #fff; margin-top: .75rem; }

.aviso-ok { color: var(--exito); font-weight: 700; margin-top: .75rem; }
.aviso-error { color: var(--error); font-weight: 700; margin-top: .75rem; }
.aviso-info { border: 2px solid var(--borde); border-radius: .75rem; padding: .75rem 1rem; margin: 1rem 0; }

/* ---------- Diálogos ---------- */
dialog {
    background: var(--superficie); color: #fff; border: 2px solid var(--borde); border-radius: 1rem;
    padding: 1.25rem; width: min(36rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow: auto; box-sizing: border-box;
}
dialog::backdrop { background: rgba(0, 0, 0, .8); }
dialog h2 { margin: 0 2.5rem .75rem 0; font-size: 1.25rem; font-weight: 800; line-height: 1.3; }
dialog .dialogo-cabecera { position: relative; }
dialog .dialogo-cerrar { position: absolute; top: 0; right: 0; min-width: 2.75rem; padding: .25rem .75rem; font-size: 1.5rem; line-height: 1; }
dialog .campo:first-of-type { margin-top: .5rem; }
dialog .dialogo-pie { margin-top: 1rem; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
    .btn, .tarjeta, fieldset, .destacado, .resumen-errores, .leccion-lienzo { border: 2px solid CanvasText; }
}

/* ---------- Casillas y radios ----------
   Dibujados a mano: los del navegador en tema oscuro quedan gris sobre negro,
   con un borde que no llega a 3:1 (1.4.11). Borde claro de 2 px, y marcado con
   relleno blanco + marca negra (no depende del color: cambia la forma). */
.opcion input[type="checkbox"], .opcion input[type="radio"] {
    -webkit-appearance: none; appearance: none;
    background: #000; border: 2px solid var(--borde); box-sizing: border-box; display: grid; place-content: center;
}
.opcion input[type="radio"] { border-radius: 50%; }
.opcion input[type="checkbox"] { border-radius: .375rem; }
.opcion input[type="radio"]::before { content: ""; width: .75rem; height: .75rem; border-radius: 50%; background: #000; transform: scale(0); }
.opcion input[type="checkbox"]::before { content: ""; width: .8rem; height: .8rem; transform: scale(0);
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); background: #000; }
.opcion input:checked { background: #fff; border-color: #fff; }
.opcion input:checked::before { transform: scale(1); }
@media (forced-colors: active) {
    .opcion input:checked { background: Highlight; }
    .opcion input::before { background: HighlightText; }
}

/* ---------- Tipo de letra legible, sin mayúsculas y sin movimiento ----------
   Los mismos tres ajustes que aplican los visores (mapas.css). Acá alcanzan a
   toda la página: son de lectura, no de color. */
html[data-lectura-fuente="legible"] body,
html[data-lectura-fuente="legible"] :is(button, input, select, textarea) {
    font-family: 'Atkinson Hyperlegible', Verdana, Tahoma, 'DejaVu Sans', sans-serif;
    letter-spacing: 0.02em;
    word-spacing: 0.08em;
}
html[data-lectura-mayus="no"] .uppercase { text-transform: none !important; }
html[data-lectura-movimiento="reducido"] *,
html[data-lectura-movimiento="reducido"] *::before,
html[data-lectura-movimiento="reducido"] *::after {
    animation: none !important; transition: none !important; scroll-behavior: auto !important;
}

/* ---------- Aprender: índice del curso + lección ---------- */
.aprender { display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
@media (max-width: 56rem) { .aprender { grid-template-columns: minmax(0, 1fr); } }

.indice-curso { border: 1px solid var(--borde-suave); border-radius: 1rem; padding: .25rem 1rem .75rem; background: var(--superficie); }
.indice-curso > summary { display: flex; align-items: center; min-height: 2.75rem; font-weight: 800; cursor: pointer; }
.indice-curso ol { list-style: none; margin: 0; padding: 0; }
.indice-curso li { margin: 0; border-top: 1px solid var(--borde-suave); }
.indice-curso a {
    display: block; padding: .5rem .5rem .5rem .75rem; min-height: 2.75rem; box-sizing: border-box;
    color: #fff; text-decoration: none; border-left: 4px solid transparent;
}
.indice-curso a:hover { background: var(--superficie-2); }
.indice-curso a[aria-current="page"] { font-weight: 800; border-left-color: #fff; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; }
.indice-curso .estado-leccion { display: block; font-size: .875rem; color: var(--texto-suave); font-weight: 400; }

.barra-leccion { margin-top: .75rem; }
.completar { margin-top: 1.5rem; }
.leccion-completada { display: inline-block; margin: 0; padding: .5rem 1rem; border: 2px solid var(--exito); border-radius: .75rem; font-weight: 800; color: var(--exito); }
.navegacion-leccion { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; margin-top: 1.5rem; }
.navegacion-leccion .btn { flex: 0 1 auto; max-width: 100%; }

/* Lienzo de la lección: donde mandan los ajustes de lectura. Por defecto es el
   tema oscuro del panel. */
.leccion-lienzo {
    --lz-fondo: #121212; --lz-texto: #ffffff; --lz-suave: #d1d5db; --lz-titulo: #ffffff; --lz-enlace: #7dd3fc;
    --lz-superficie: #1c1c1c; --lz-borde: #9ca3af; --lz-linea: #4b5563; --lz-acento: #7dd3fc;
    background: var(--lz-fondo); color: var(--lz-texto);
    border: 1px solid var(--lz-linea); border-radius: 1.5rem;
    padding: 1.25rem 1.5rem; margin-top: 1rem;
    font-size: calc(1.125rem * var(--libro-escala, 1));
    line-height: var(--libro-interlineado, 1.65);
}
html[data-libro-tema="claro"] .leccion-lienzo {
    --lz-fondo: #fbfaf5; --lz-texto: #1c1c1c; --lz-suave: #3a3a35; --lz-titulo: #0a4a66; --lz-enlace: #0a4a8a;
    --lz-superficie: #f0efe8; --lz-borde: #6b6b60; --lz-linea: #cfcfc7; --lz-acento: #0a4a66;
}
html[data-libro-tema="contraste"] .leccion-lienzo {
    --lz-fondo: #000000; --lz-texto: #ffff00; --lz-suave: #ffff00; --lz-titulo: #ffffff; --lz-enlace: #ffffff;
    --lz-superficie: #000000; --lz-borde: #ffff00; --lz-linea: #ffff00; --lz-acento: #ffff00;
}
html[data-libro-tema="contraste"] .leccion-lienzo { border-width: 2px; }
html[data-libro-ancho="angosto"] .leccion-lienzo { max-width: 62ch; }
.leccion-lienzo > :first-child { margin-top: 0; }
.leccion-lienzo > :last-child { margin-bottom: 0; }
.leccion-lienzo p, .leccion-lienzo li, .leccion-lienzo td, .leccion-lienzo th, .leccion-lienzo caption,
.leccion-lienzo figcaption, .leccion-lienzo blockquote, .leccion-lienzo summary { color: var(--lz-texto); }
.leccion-lienzo .texto-suave, .leccion-lienzo figcaption, .leccion-lienzo .tipo-leccion { color: var(--lz-suave); }
.leccion-lienzo p { margin: .75rem 0; }
.leccion-lienzo h3, .leccion-lienzo h4, .leccion-lienzo h5, .leccion-lienzo h6 { color: var(--lz-titulo); font-weight: 800; line-height: 1.3; margin: 1.5rem 0 .5rem; }
.leccion-lienzo h3 { font-size: 1.35em; }
.leccion-lienzo h4 { font-size: 1.2em; }
.leccion-lienzo h5, .leccion-lienzo h6 { font-size: 1.1em; }
.leccion-lienzo a { color: var(--lz-enlace); }
.leccion-lienzo :focus-visible { outline-color: var(--lz-texto); box-shadow: 0 0 0 6px var(--lz-fondo); }

/* Bloques de contenido (cursos-bloques.js): mismas ideas que los del visor de
   materiales (.libro-*), con nombre propio. */
.curso-lista { margin: .75rem 0 1rem 1.75rem; }
ul.curso-lista { list-style: disc; }
ol.curso-lista { list-style: decimal; }
.curso-lista li { margin-bottom: .35rem; }
.curso-cita { margin: 1.25rem 0; padding-left: 1rem; border-left: 4px solid var(--lz-acento); font-style: italic; }
.curso-cita p { margin: 0 0 .5rem; }
.curso-cita cite { display: block; font-style: normal; color: var(--lz-suave); }
.curso-nota { margin: 1rem 0; padding: .6rem .9rem; border: 1px solid var(--lz-borde); border-left-width: 4px; border-radius: .5rem; background: var(--lz-superficie); }
.curso-nota p { margin: 0; }
.curso-figura { margin: 1.25rem 0; }
.curso-figura img { display: block; max-width: 100%; height: auto; border-radius: .75rem; }
.curso-figura figcaption { font-size: .875em; margin-top: .375rem; }

/* La tabla se desplaza dentro de su región (con foco, nombre y borde de pista)
   si no entra: sin esto, en el teléfono la última columna quedaba cortada. */
.curso-tabla { margin: 1.25rem 0; }
.curso-tabla-scroll { overflow-x: auto; max-width: 100%; border-radius: .75rem; }
.curso-tabla-scroll.tiene-scroll { border-right: 3px solid var(--lz-acento); }
.curso-tabla table { border-collapse: collapse; min-width: 100%; }
.curso-tabla caption { caption-side: top; text-align: left; font-weight: 700; padding: 0 0 .5rem; color: var(--lz-titulo); }
.curso-tabla :is(th, td) { border: 1px solid var(--lz-borde); padding: .4rem .7rem; text-align: left; vertical-align: top; }
.curso-tabla th { background: var(--lz-superficie); font-weight: 700; }
@media (max-width: 40rem) { .curso-tabla :is(th, td) { min-width: 8rem; } }

/* Video: marco 16:9; la transcripción va debajo, abierta de entrada. */
.video-marco { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 1.25rem 0 .75rem; background: #000; border-radius: .75rem; overflow: hidden; }
.video-marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.transcripcion { border: 1px solid var(--lz-borde); border-radius: .75rem; padding: 0 1rem .5rem; margin: .75rem 0 1rem; background: var(--lz-superficie); }
.transcripcion > summary { display: flex; align-items: center; min-height: 2.75rem; font-weight: 800; cursor: pointer; }
.transcripcion[open] > summary { margin-bottom: .25rem; }
.materiales-apoyo ul { margin: .5rem 0 0 1.25rem; padding: 0; list-style: disc; }
.materiales-apoyo li { margin: .375rem 0; }

/* ---------- Cuestionarios ----------
   El formulario y el resultado viven en la página (tema oscuro del panel) pero
   respetan el tamaño de letra y el interlineado de los ajustes de lectura. */
.cuestionario { font-size: calc(1.0625rem * var(--libro-escala, 1)); line-height: var(--libro-interlineado, 1.65); margin-top: 2rem; }
.cuestionario > h2 { margin-top: 0; }
.cuestionario h3 { margin-top: 1.5rem; }
.resumen-intentos { margin: .5rem 0; }
.pregunta-puntos { font-weight: 400; color: var(--texto-suave); }
.lista-intentos { list-style: none; margin: .75rem 0; padding: 0; display: grid; gap: .5rem; }
.lista-intentos li {
    margin: 0; padding: .5rem 1rem; border: 1px solid var(--borde-suave); border-radius: .75rem; background: var(--superficie);
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1rem;
}
.detalle-intento { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: .75rem; }
.detalle-intento > li { margin: 0; border: 2px solid var(--borde-suave); border-radius: 1rem; padding: .75rem 1.25rem 1rem; background: var(--superficie); }
.detalle-intento :is(h3, h4) { margin: 0 0 .5rem; font-size: 1.0625em; line-height: 1.4; }
.detalle-intento p { margin: .375rem 0; }
.detalle-intento ul { margin: .25rem 0 .5rem 1.25rem; padding: 0; list-style: disc; }
.etiqueta-respuesta { font-weight: 700; }
.respuesta-abierta { white-space: pre-wrap; border-left: 4px solid var(--borde); padding-left: 1rem; }
.nota-pregunta { border: 1px solid var(--borde); border-radius: .75rem; padding: .5rem .875rem; margin: .5rem 0 0; }
.etiqueta-estado.ok { border-color: var(--exito); color: var(--exito); }
.etiqueta-estado.mal { border-color: var(--error); color: var(--error); }
.aviso-aprobacion { border: 3px solid var(--exito); border-radius: 1rem; padding: .5rem 1.25rem; background: #06190d; }
.aviso-aprobacion p { margin: .5rem 0; }

/* ---------- Panel docente y administración ----------
   Los mismos principios que /validar/ coordinación: listas que se apilan en
   pantallas angostas, botones de 44 px, nada que dependa solo del color. */
.nav-panel { margin: 0 0 1rem; }
.nav-panel ul { display: flex; flex-wrap: wrap; gap: .25rem .5rem; margin: 0; padding: 0; list-style: none; }
.nav-panel a {
    display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 .75rem;
    color: var(--texto); font-weight: 600; text-decoration: underline; text-underline-offset: 4px;
}
.nav-panel a[aria-current="page"] { font-weight: 800; text-decoration-thickness: 4px; }
.nav-panel a[aria-current="true"] { font-weight: 800; }

/* Mensajes de una sección: vacíos desde el principio (región viva), sin ocupar lugar. */
.mensaje-accion { margin-block: .75rem; }
.mensaje-accion:empty { margin: 0; }

/* Listas de gestión: una fila por elemento, con el texto a la izquierda y las
   acciones a la derecha (o debajo si no entran). */
.lista-gestion { list-style: none; margin: .75rem 0; padding: 0; display: grid; gap: .5rem; }
.item-gestion {
    margin: 0; padding: .75rem 1rem; border: 1px solid var(--borde-suave); border-radius: .75rem; background: var(--superficie);
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem;
}
.item-texto { flex: 1 1 16rem; min-width: 0; }
.item-titulo { margin: 0; font-weight: 700; }
.item-detalle { margin: .125rem 0 0; }
.item-gestion .acciones { margin-top: 0; }

/* Tablas de gestión (estudiantes, docentes, inscriptos): dentro de una región con
   foco y nombre, así si no entran se desplazan sin romper el ancho de la página. */
.tabla-gestion-scroll { overflow-x: auto; max-width: 100%; margin: .75rem 0; border: 1px solid var(--borde-suave); border-radius: .75rem; }
.tabla-gestion { border-collapse: collapse; width: 100%; min-width: 40rem; }
.tabla-gestion :is(th, td) { border-bottom: 1px solid var(--borde-suave); padding: .5rem .75rem; text-align: left; vertical-align: middle; }
.tabla-gestion thead th { background: var(--superficie-2); font-weight: 800; }
.tabla-gestion tbody th { font-weight: 700; }
.tabla-gestion .btn { min-height: 2.75rem; }

/* Editor de bloques */
.editor-bloques { margin-top: .75rem; }
.lista-bloques { list-style: none; margin: .75rem 0; padding: 0; display: grid; gap: .75rem; }
.lista-bloques > li { margin: 0; }
.bloque-editor { margin: 0; background: var(--superficie); }
.insertar-bloque { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--borde-suave); }
.insertar-bloque label { font-weight: 700; }
.insertar-bloque select { width: auto; min-width: 11rem; }
.imagen-previa { margin-top: .75rem; }
.imagen-previa-img, .portada-editor { display: block; max-width: 22rem; width: 100%; height: auto; border-radius: .75rem; border: 1px solid var(--borde-suave); background: var(--superficie-2); }
.vista-previa { margin-top: 1.5rem; }

/* Formulario de una pregunta */
.formulario-pregunta { margin-top: 1.5rem; padding: 1rem 1.25rem 1.25rem; border: 2px solid var(--borde); border-radius: 1rem; background: var(--superficie); }
.lista-opciones { list-style: none; margin: .5rem 0; padding: 0; display: grid; gap: .75rem; }
.fila-opcion { margin: 0; padding: .75rem; border: 1px solid var(--borde-suave); border-radius: .75rem; display: grid; gap: .5rem; }
.fila-opcion .campo { margin-top: 0; }
.fila-opcion .opcion-caja { margin-top: 0; }

/* Corrección de un intento */
.pregunta-correccion { margin-top: 1.5rem; padding: .5rem 1.25rem 1.25rem; border: 2px solid var(--borde-suave); border-radius: 1rem; background: var(--superficie); }
.pregunta-correccion h2 { font-size: 1.125rem; margin-top: .75rem; }
.enunciado-correccion { font-weight: 700; }
.etiqueta-dato { margin-bottom: .25rem; font-weight: 700; }
.respuesta-estudiante { white-space: pre-wrap; margin: 0 0 .75rem; padding: .5rem 1rem; border-left: 4px solid var(--borde); background: var(--superficie-2); border-radius: 0 .5rem .5rem 0; }

/* Foro del curso (cursos-foro.js) */
.foro-estados { display: flex; flex-wrap: wrap; gap: .5rem; margin: .25rem 0 .5rem; }
.foro-estados .etiqueta-estado, .foro-meta .etiqueta-estado { margin-top: 0; }
.foro-meta .etiqueta-estado { margin-left: .5rem; }

.foro-filtro, .catalogo-filtro { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1rem; margin-top: 1.25rem; }
.foro-filtro .campo, .catalogo-filtro .campo { margin-top: 0; flex: 1 1 18rem; min-width: 0; }
.foro-filtro .btn, .catalogo-filtro .btn { flex: 0 0 auto; }

.foro-hilo { margin-top: 1rem; }
.foro-texto { overflow-wrap: anywhere; }
.foro-texto p { margin: .5rem 0; }
.foro-meta { margin: 0 0 .25rem; color: var(--texto-suave); }
.foro-meta strong { color: #fff; }
.foro-acciones { margin-top: .75rem; }
.foro-acciones .btn { min-height: 2.75rem; }
.foro-inline:empty { display: none; }
.foro-inline { margin-top: .75rem; }
.foro-formulario { border: 2px solid var(--borde); border-radius: 1rem; padding: .25rem 1.25rem 1.25rem; background: var(--superficie-2); }
.foro-formulario .campo:first-child { margin-top: 1rem; }
.foro-escribir { margin-top: 1.5rem; }
.foro-escribir .foro-formulario { background: var(--superficie); }

/* Mensajes: una lista y, adentro de cada uno, la de sus respuestas (un solo nivel). */
.foro-mensajes, .foro-respuestas { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .75rem; }
.foro-mensajes > li { margin: 0; }
.foro-mensaje { background: var(--superficie); border: 1px solid var(--borde-suave); border-radius: .75rem; padding: .75rem 1rem; }
.foro-mensaje-oculto { border-style: dashed; }
.foro-oculto { margin: 0; color: var(--texto-suave); font-style: italic; }
.foro-respuestas { margin-left: 1.5rem; padding-left: 1rem; border-left: 3px solid var(--borde-suave); }
.foro-respuestas > li { margin: 0; }

@media (max-width: 40rem) {
    .foro-respuestas { margin-left: .5rem; padding-left: .75rem; }
}

/* ---------- Certificado (cursos-certificado.js) ---------- */
/* La hoja es SIEMPRE clara, también en pantalla: se ve igual que lo que se
   imprime y el QR tiene el fondo blanco que necesita para leerse. Texto casi
   negro sobre blanco (>= 16:1) y enlaces azul oscuro (>= 9:1). El foco, que en el
   resto de la página es blanco con halo negro, acá se invierte para que se vea. */
.certificado {
    background: #ffffff; color: #111111;
    border: 6px double #111111; border-radius: .5rem;
    padding: 2rem 1.5rem; margin-block: 1rem; box-sizing: border-box;
    text-align: center;
}
.certificado p { margin: .5rem 0; }
.certificado a { color: #0b3d91; overflow-wrap: anywhere; }
.certificado :focus-visible { outline-color: #000000; box-shadow: 0 0 0 6px #ffffff; }
.cert-intro { font-size: 1.125rem; color: #333333; }
.cert-nombre { font-size: 2rem; line-height: 1.2; font-weight: 800; margin-block: .25rem 1rem; overflow-wrap: anywhere; }
.cert-curso { font-size: 1.5rem; line-height: 1.3; font-weight: 800; margin-block: .25rem 1.25rem; overflow-wrap: anywhere; }
.cert-datos { list-style: none; margin: 1rem auto; padding: 0; max-width: 32rem; text-align: left; }
.cert-datos li { margin: .375rem 0; padding-bottom: .375rem; border-bottom: 1px solid #bbbbbb; }
.cert-codigo { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; letter-spacing: .04em; overflow-wrap: anywhere; }
.cert-verificacion { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.5rem; margin-top: 1.5rem; }
.cert-qr { flex: 0 0 auto; }
.cert-qr-svg { display: block; width: 9rem; height: 9rem; }
.cert-verificacion-texto { flex: 1 1 14rem; max-width: 28rem; text-align: left; }
@media (max-width: 40rem) { .cert-nombre { font-size: 1.5rem; } .cert-curso { font-size: 1.25rem; } }

/* Imprimir o guardar en PDF: una hoja limpia. Fuera la cabecera con el menú, el pie,
   los botones, los avisos y los diálogos; queda el h1 y la hoja. Todo en blanco y
   negro, sin fondos (ahorra tinta y se lee mejor). */
@media print {
    body { background: #ffffff; color: #000000; display: block; min-height: 0; font-size: 12pt; }
    .omitir, .cabecera, .pie, #anuncio, #aviso-cierre, .acciones, dialog, .no-imprimir { display: none !important; }
    .contenedor { max-width: none; padding-inline: 0; }
    .principal { padding: 0; }
    main h1 { color: #000000; text-align: center; font-size: 22pt; margin-bottom: .5rem; }
    .certificado { border-color: #000000; padding: 1.5rem 1rem; margin: 0; break-inside: avoid; page-break-inside: avoid; }
    .certificado a { color: #000000; }
    .cert-qr-svg { width: 7rem; height: 7rem; }
}