/*
 * Ejercicios Arquitectura de Redes — hoja de estilo.
 *
 * Colores: identidad de la Universidad de Alcalá, tomados de
 * masterciberseguridad.uah.es (azul UAH #0046ad, su variante oscura #003683
 * y el acento #0376ef; en tema oscuro, fondo tinta #0b0d14 y acento #60a5fa).
 *
 * Escala (unslop, nov. 2026): letra de 12/13/14/16/18/22 px (24 en el título
 * de página en escritorio), pesos 400/500/600, espaciado en múltiplos de 4,
 * radio 8 en controles y 12 en tarjetas, y --mono para los valores de red.
 * Los SVG del motor (Diagrama, Piramide) usan estas mismas variables.
 *
 * Diseño: primero el móvil (una columna, botones de al menos 44 px, texto de
 * 16 px para que iOS no haga zoom al enfocar un campo); a partir de 600 px
 * solo cambian márgenes y anchuras. Nada depende de JavaScript.
 */
:root {
  /* I2.2 (docs/19 §8.1): dos medidas de página; cada página elige la suya con
     una clase en <body> y la barra superior usa la misma, para que la marca
     alinee con el contenido. */
  --ancho-lectura: 720px;
  --ancho-trabajo: 1200px;
  --ancho-panel-barra: 960px;
}
body { --ancho: var(--ancho-lectura); }
body.ancho-trabajo { --ancho: var(--ancho-trabajo); }
/* El panel de administración conserva sus medidas de siempre (barra 960;
   envoltorio 680, 1040 con .ancha y 1200 con .capturas-ancha). */
body.ancho-panel { --ancho: var(--ancho-panel-barra); }

:root {
  --fondo: #f2f4f8; --papel: #fff; --texto: #1c1c1c; --sutil: #5a5a5a;
  --linea: #e2e2e2; --acento: #0046ad; --acento-oscuro: #003683; --acento-vivo: #0376ef;
  --sobre-acento: #fff; --barra: #0046ad; --sobre-barra: #fff;
  --bien: #15803d; --bien-fondo: #ecfdf3; --mal: #b45309; --mal-fondo: #fffaeb;
  --logo-uah: url("uah-azul.png");
  --radio: 8px; --radio-tarjeta: 12px; --sombra: 0 1px 2px rgba(0, 20, 60, 0.06);
  /* Unslop (nov. 2026): una sola pila monoespaciada para todo valor de red. */
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #0b0d14; --papel: #141822; --texto: #eef0f5; --sutil: #a3a9b8;
    --linea: #2a3040; --acento: #60a5fa; --acento-oscuro: #93c5fd; --acento-vivo: #60a5fa;
    --sobre-acento: #0b0d14; --barra: #07080d; --sobre-barra: #e5e7eb;
    --bien: #4ade80; --bien-fondo: #10321f; --mal: #fbbf24; --mal-fondo: #332405;
    --sombra: none; --logo-uah: url("uah-blanco.png");
  }
}
:root[data-theme="dark"] {
  --fondo: #0b0d14; --papel: #141822; --texto: #eef0f5; --sutil: #a3a9b8;
  --linea: #2a3040; --acento: #60a5fa; --acento-oscuro: #93c5fd; --acento-vivo: #60a5fa;
  --sobre-acento: #0b0d14; --barra: #07080d; --sobre-barra: #e5e7eb;
  --bien: #4ade80; --bien-fondo: #10321f; --mal: #fbbf24; --mal-fondo: #332405;
  --sombra: none; --logo-uah: url("uah-blanco.png");
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  background: var(--fondo); color: var(--texto);
  font: 16px/1.5 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  overflow-wrap: break-word;
  font-variant-emoji: text;
}

/* --- barra superior ---------------------------------------------------- */
.barra {
  background: var(--barra); color: var(--sobre-barra);
  border-bottom: 3px solid var(--acento-vivo);
  padding-top: env(safe-area-inset-top, 0px);
  position: sticky; top: 0; z-index: 10;
}
.barra-interior {
  max-width: var(--ancho); margin: 0 auto; min-height: 52px;
  padding: 8px max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px));
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.marca { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 12px; min-width: 0; }
.marca::before {
  /* La pila de capas de docs/logo sin su cuadrado de fondo (public/marca.svg):
     como fondo CSS y no como <img> o <svg> en el HTML, porque es decorativa y
     así ni cuenta como figura en las pruebas web ni se confunde con una
     inyección en tests/seguridad/s3.php. */
  content: ""; flex: none; width: 30px; height: 30px;
  background: url("marca.svg") center / contain no-repeat;
}
.marca-texto { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.marca b { font-size: 1rem; letter-spacing: 0.01em; white-space: nowrap; }
.marca small { font-size: 0.75rem; opacity: 0.85; white-space: nowrap; }
.barra-derecha { display: flex; align-items: center; gap: 12px; font-size: 0.875rem; min-width: 0; }
.barra-derecha a { color: inherit; white-space: nowrap; padding: 12px 2px; }
.cuenta { opacity: 0.85; max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.idiomas { display: flex; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 999px; overflow: hidden; flex: none; }
.idiomas a, .idiomas b { padding: 8px 12px; font-size: 0.8125rem; text-decoration: none; line-height: 1.4; }
.idiomas b { background: var(--sobre-barra); color: var(--barra); }
.idiomas a:hover { background: rgba(255, 255, 255, 0.16); }

/* --- contenido ---------------------------------------------------------- */
.envoltorio {
  width: 100%; max-width: var(--ancho); margin: 0 auto; flex: 1;
  padding: 20px max(16px, env(safe-area-inset-right, 0px)) 24px max(16px, env(safe-area-inset-left, 0px));
}
.pie {
  text-align: center; color: var(--sutil); font-size: 0.75rem;
  padding: 16px 16px max(16px, env(safe-area-inset-bottom, 0px));
}
/* La autoría enlaza a ?p=creditos con la misma discreción que el resto del pie. */
.pie a { color: inherit; }
.pie .logo-uah {
  /* Logo de la UAH (azul en claro, blanco en oscuro): como fondo CSS, por lo
     mismo que .marca::before; el nombre lo lleva el aria-label del enlace. */
  display: block; width: 152px; height: 40px; margin: 0 auto 12px;
  background: var(--logo-uah) center / contain no-repeat;
}
h1, h2, h3, b, strong, th, summary { font-weight: 600; }
h1 { font-size: 1.375rem; line-height: 1.25; margin: 0 0 12px; color: var(--texto); }
h2 { font-size: 1.125rem; line-height: 1.3; margin: 0 0 12px; }
p.ayuda { color: var(--sutil); font-size: 0.875rem; margin-top: 4px; }
code { font-size: 0.875em; overflow-wrap: anywhere; }
.tarjeta {
  background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta);
  padding: 16px; margin-bottom: 16px; box-shadow: var(--sombra);
}
.tarjeta > svg { display: block; margin: 0 auto; width: 100%; max-width: 520px; }
/* La pirámide de PDU tiene mucho texto pequeño: en un móvil no se encoge por
   debajo de un tamaño legible, se desplaza en horizontal dentro de su tarjeta. */
.tarjeta:has(> svg[data-diagrama="piramide"]) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tarjeta > svg[data-diagrama="piramide"] { min-width: 480px; max-width: 600px; }
.enunciado { font-size: 1rem; white-space: pre-line; border-left: 4px solid var(--acento); }
.progreso { color: var(--sutil); font-size: 0.875rem; margin-bottom: 8px; }
fieldset { border: none; padding: 0; margin: 0; }

.opciones { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
button.opcion {
  display: block; width: 100%; text-align: left; padding: 12px 16px; min-height: 48px;
  border: 1px solid var(--linea); border-radius: var(--radio); background: var(--papel);
  font: inherit; color: var(--texto); cursor: pointer; touch-action: manipulation;
}
button.opcion:hover:not(:disabled) { border-color: var(--acento); }
button.opcion:disabled { cursor: default; }
button.opcion.correcta { border-color: var(--bien); background: var(--bien-fondo); }
button.opcion.incorrecta { border-color: var(--mal); background: var(--mal-fondo); }
.feedback { margin-top: 8px; padding: 12px 16px; border-radius: var(--radio); font-size: 0.875rem; }
.feedback.bien { background: var(--bien-fondo); color: var(--bien); }
.feedback.mal { background: var(--mal-fondo); color: var(--mal); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 20px; min-height: 48px; border-radius: var(--radio);
  border: 1px solid var(--acento); background: var(--acento); color: var(--sobre-acento);
  font: inherit; font-weight: 500; text-decoration: none; cursor: pointer; text-align: center;
  touch-action: manipulation;
}
.btn:hover { background: var(--acento-oscuro); border-color: var(--acento-oscuro); }
.btn.secundario { background: var(--papel); color: var(--acento); font-weight: 500; }
.btn.secundario:hover { background: var(--fondo); }
.fila-botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }

/* E4.1 (docs/14 §2): portada con dos caminos. Unslop (nov. 2026): cada tarjeta mide lo que su
   contenido y el botón sigue a su texto, sin franja vacía en la de «sin cuenta». */
.contexto { color: var(--sutil); margin-bottom: 16px; }
.dos-caminos { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; align-items: start; }
@media (min-width: 600px) { .dos-caminos { grid-template-columns: 1fr 1fr; } }
.dos-caminos .tarjeta { display: flex; flex-direction: column; margin-bottom: 0; }
.dos-caminos form { margin-top: 8px; }
.dos-caminos .fila-botones .btn { flex: 1 1 100%; }

.nivel, .tema {
  display: block; width: 100%; text-align: left; padding: 16px 16px; margin-bottom: 12px;
  border: 1px solid var(--linea); border-radius: var(--radio); background: var(--papel); cursor: pointer;
}
/* I0.1 (docs/19 H1): el radio es accesible (visualmente oculto, no display:none);
   la tarjeta sigue a su estado con :has y muestra el foco con :focus-within. */
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.nivel, .tema { position: relative; }
.nivel:has(input:checked), .tema:has(input:checked) { border-color: var(--acento); box-shadow: 0 0 0 2px var(--acento) inset; }
.nivel:focus-within, .tema:focus-within { outline: 3px solid var(--acento-vivo); outline-offset: 2px; }
.tema:hover, .nivel:hover { border-color: var(--acento); }
.nivel b, .tema b { display: block; }
.nivel span, .tema span { color: var(--sutil); font-size: 0.875rem; }
/* R3.5: nivel que el tema elegido no admite. */
.nivel[hidden] { display: none; }   /* I2b: la cuarta tarjeta, oculta salvo que el tema la admita */
.nivel.nivel-deshabilitado { opacity: 0.55; cursor: not-allowed; }
.nivel.nivel-deshabilitado:hover { border-color: var(--linea); }
.nivel .nota-nivel-no-admitido { display: block; color: var(--mal); font-weight: 600; }
.nota-nivel-no-admitido[hidden] { display: none; }

input[type=text], input[type=email], input[type=password], select {
  width: 100%; padding: 12px; min-height: 48px; border: 1px solid var(--linea); border-radius: var(--radio);
  font: inherit; font-size: 1rem; background: var(--papel); color: var(--texto);
}
input[type=checkbox] { width: 20px; height: 20px; flex: none; accent-color: var(--acento); }
label { display: block; margin: 12px 0 4px; font-size: 0.875rem; color: var(--sutil); }
label:has(input[type=checkbox]) { color: var(--texto); font-size: 0.875rem; cursor: pointer; }
:focus-visible { outline: 3px solid var(--acento-vivo); outline-offset: 2px; }

.apartado-hecho { opacity: 0.8; margin-bottom: 8px; }
.apartado-hecho summary { cursor: pointer; font-weight: 600; padding: 8px 0; }
table.resumen { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
table.resumen td { padding: 8px 4px; border-bottom: 1px solid var(--linea); vertical-align: top; }
table.resumen td:last-child { white-space: nowrap; text-align: right; padding-left: 12px; }
/* I4.1 (docs/19 H21): filas del resultado con color de acierto/fallo; el símbolo ✔/✘ va además del color. */
table.tabla-resultado tr.res-bien { background: var(--bien-fondo); }
table.tabla-resultado tr.res-mal { background: var(--mal-fondo); }
table.tabla-resultado td { padding: 8px 12px; }
table.tabla-resultado td.res-estado { white-space: normal; text-align: left; font-weight: 600; }
table.tabla-resultado tr.res-bien .res-marca { color: var(--bien); }
table.tabla-resultado tr.res-mal .res-marca { color: var(--mal); }
table.tabla-resultado td.res-revisar { white-space: nowrap; text-align: right; }
a.enlace { color: var(--acento); }

/* Botón con aspecto de enlace: «Salir» es un POST con token (no un enlace),
   pero en la barra y en el panel tiene que verse como el enlace que era. */
.form-salir { display: inline; margin: 0; }
.boton-enlace {
  background: none; border: 0; margin: 0; padding: 12px 2px;
  font: inherit; color: inherit; text-decoration: underline; cursor: pointer;
}
button.enlace { color: var(--acento); }

/* I1.1 (docs/19 §7.1): paso 1 «familia» y paso 2 «tema y nivel» de ?p=nivel. */
.familias { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; }
@media (min-width: 600px) { .familias { grid-template-columns: 1fr 1fr; } }
a.tarjeta.familia { display: flex; flex-direction: column; gap: 8px; margin-bottom: 0; color: inherit; text-decoration: none; }
a.tarjeta.familia h3 { margin: 0; color: var(--texto); font-size: 1.125rem; }
a.tarjeta.familia:hover h3 { color: var(--acento); }
.tema-catalogo { margin-bottom: 24px; }
.tema-catalogo > h2 { margin: 0 0 12px; font-size: 1.375rem; padding-bottom: 4px; border-bottom: 1px solid var(--linea); color: var(--texto); }
a.tarjeta.familia:hover { border-color: var(--acento); }
a.tarjeta.familia:focus-visible { outline: 3px solid var(--acento-vivo); outline-offset: 2px; }
.familia-frase { color: var(--texto); }
.familia-conteo { margin-top: auto; padding-top: 8px; color: var(--sutil); font-size: 0.875rem; }
.miga { color: var(--sutil); font-size: 0.875rem; margin-bottom: 8px; }
.miga [aria-current] { color: var(--texto); }
fieldset.temas, fieldset.niveles { min-width: 0; }
fieldset.temas legend, fieldset.niveles legend { padding: 0; }
fieldset.temas legend h2, fieldset.niveles legend h2 { margin-bottom: 12px; }
.grupo-temas { font-size: 0.875rem; color: var(--sutil); margin: 16px 0 8px; }
.grupo-temas:first-of-type { margin-top: 0; }
.tema-resumen, .tema-estado { display: block; }
.tema .tema-estado { margin-top: 4px; font-size: 0.8125rem; font-weight: 600; color: var(--acento-oscuro); }
.niveles-fila { display: grid; grid-template-columns: 1fr; gap: 12px; }
.niveles-fila .nivel { margin-bottom: 0; }
@media (min-width: 900px) { .niveles-fila { grid-template-columns: repeat(3, 1fr); } .niveles-fila.niveles-cuatro { grid-template-columns: repeat(4, 1fr); } }   /* I2b.4 */
.insignia-recomendado { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--bien-fondo); color: var(--bien) !important; font-size: 0.75rem !important; font-weight: 600; vertical-align: middle; }
.insignia-recomendado[hidden] { display: none; }
/* I4.2 (docs/19 H24): las sugerencias de Mi progreso usan los mismos .franja-item que la franja de la elección. */
.sugerencias-lista { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 12px; }
/* I1.4 (docs/19 §7.2): franja compacta «Continuar» + sugerencia sobre los dos pasos. */
.franja-nivel { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 16px; }
@media (min-width: 900px) { .franja-nivel:has(.franja-item + .franja-item) { grid-template-columns: 1fr 1fr; } }
.franja-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); box-shadow: var(--sombra); }
.franja-continuar { border-left: 4px solid var(--acento); }
.franja-texto { min-width: 0; }
.franja-texto b, .franja-texto small, .franja-rotulo { display: block; }
.franja-rotulo { font-size: 0.75rem; color: var(--sutil); }
.franja-texto small { color: var(--sutil); }
.btn.compacto { min-height: 40px; padding: 8px 16px; flex: none; }
@media (max-width: 480px) { .franja-item { flex-wrap: wrap; } .franja-item .btn.compacto { flex: 1 1 100%; } }

.explicacion-error { color: var(--sutil); font-size: 0.875rem; }
.tarjeta ul { padding-left: 1.2rem; }
.tarjeta li { margin-bottom: 8px; }

/* --- móvil estrecho: botones a todo el ancho, barra más compacta -------- */
@media (max-width: 480px) {
  .fila-botones .btn { flex: 1 1 100%; }
  .tarjeta { padding: 16px; }
  .cuenta { display: none; }
  .barra-derecha { gap: 8px; }
  /* I0.4: la marca nueva es más larga; en móvil baja a dos líneas y
     cede el sitio al selector de idioma y a «Salir», que no se recortan. */
  .marca b { white-space: normal; font-size: 0.875rem; line-height: 1.12; }
  .barra-derecha { flex: none; }
  .marca { gap: 8px; }
  .marca::before { width: 24px; height: 24px; }
  h1 { font-size: 1.375rem; }
  table.resumen td:last-child { white-space: normal; }
}
@media (max-width: 350px) {
  .marca small { display: none; }
}
@media (min-width: 600px) {
  .envoltorio { padding-top: 28px; }
  .tarjeta { padding: 20px; }
  h1 { font-size: 1.5rem; }
}

/* --- panel de administración -------------------------------------------- */
.ancho-panel .envoltorio { max-width: 680px; }
.ancho-panel .envoltorio.ancha { max-width: 1040px; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.stat { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); padding: 12px; text-align: center; }
.stat b { display: block; font-size: 1.5rem; color: var(--texto); font-weight: 500; font-variant-numeric: tabular-nums; }
.stat span { color: var(--sutil); font-size: 0.8125rem; }
.barras { display: flex; align-items: flex-end; gap: 4px; height: 90px; margin: 12px 0; }
.barras .col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.barras .col i { display: block; width: 100%; background: var(--acento); border-radius: 4px 4px 0 0; min-height: 2px; }
.barras .col small { font-size: 0.6875rem; color: var(--sutil); margin-top: 2px; writing-mode: vertical-rl; }
table.tabla-admin { width: 100%; border-collapse: collapse; font-size: 0.875rem; overflow-x: auto; display: block; -webkit-overflow-scrolling: touch; }
table.tabla-admin th, table.tabla-admin td { padding: 8px 8px; border-bottom: 1px solid var(--linea); text-align: left; white-space: nowrap; }
table.tabla-admin th { color: var(--sutil); font-weight: 500; font-size: 0.8125rem; }
.pestañas { display: flex; gap: 8px; margin-bottom: 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.pestañas a { padding: 12px 16px; border-radius: var(--radio); border: 1px solid var(--linea); color: var(--texto); background: var(--papel); text-decoration: none; font-size: 0.875rem; white-space: nowrap; flex: none; }
.pestañas a.activa { background: var(--acento); color: var(--sobre-acento); border-color: var(--acento); }
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--linea); font-size: 0.75rem; margin-right: 4px; }

/* --- Hoja imprimible del ejercicio (?p=hoja): siempre en claro, también con el sistema en oscuro,
       porque su destino es papel o PDF. --- */
html.hoja:root, html.hoja:root[data-theme] {
  --fondo: #e9ecf1; --papel: #fff; --texto: #111; --sutil: #444;
  --linea: #bbb; --acento: #0046ad; --bien: #15803d; --bien-fondo: #ecfdf3; --mal: #b45309; --mal-fondo: #fffaeb;
  color-scheme: light;
}
.hoja body { background: var(--fondo); color: var(--texto); }
.hoja-acciones { max-width: 820px; margin: 16px auto 0; padding: 0 16px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hoja-acciones .ayuda { flex: 1 1 100%; margin: 0; }
.hoja-papel { max-width: 820px; margin: 16px auto 32px; padding: 32px 36px; background: var(--papel); border: 1px solid var(--linea); font-size: 1rem; line-height: 1.5; }
.hoja-cabecera { border-bottom: 2px solid var(--texto); padding-bottom: 12px; margin-bottom: 20px; }
.hoja-cabecera h1 { font-size: 1.375rem; margin: 4px 0; }
.hoja-cabecera p { margin: 0; color: var(--sutil); font-size: 0.875rem; }
.hoja-papel h2 { font-size: 1rem; margin: 0 0 8px; }
.hoja-enunciado { margin-bottom: 20px; }
.hoja-enunciado p, .enunciado-muestra { white-space: pre-line; } /* C7: la escena de Conceptos va en párrafos */
.hoja-apartado { border-top: 1px solid var(--linea); padding: 16px 0; break-inside: avoid; page-break-inside: avoid; }
.hoja-apartado dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 8px 0; }
.hoja-apartado dt { color: var(--sutil); }
.hoja-apartado dd { margin: 0; font-weight: 600; }
/* I4.1: el destino de un «Revisar» o del nombre de un error se ve al llegar. */
.tarjeta[id^="ap-"]:target, h2[id^="ap-"]:target, tr[id^="err-"]:target { outline: 3px solid var(--acento-vivo); outline-offset: 2px; }
.hoja-apartado:target { outline: 3px solid var(--acento-vivo); outline-offset: 4px; }
.hoja-marca.bien { color: var(--bien); }
.hoja-marca.mal { color: var(--mal); }
.hoja-feedback { margin: 8px 0; padding: 12px 12px; border-left: 3px solid var(--mal); background: var(--mal-fondo); font-size: 0.875rem; }
.hoja-apartado .tarjeta { box-shadow: none; border: 1px solid var(--linea); margin: 12px 0 0; padding: 12px; break-inside: avoid; page-break-inside: avoid; }
.hoja-apartado .tarjeta svg, .hoja-apartado .figura-apartado svg, .hoja-enunciado .figura-enunciado svg { max-height: 330px; }
/* Correcta y elegida, lado a lado: se comparan de un vistazo y no ocupan una página entera. */
.hoja-apartado .tarjeta:has(+ .tarjeta), .hoja-apartado .tarjeta + .tarjeta { display: inline-block; width: calc(50% - 6px); vertical-align: top; }
.hoja-apartado .tarjeta + .tarjeta { margin-left: 8px; }
.hoja-apartado .tarjeta:has(+ .tarjeta) .ayuda, .hoja-apartado .tarjeta + .tarjeta .ayuda { min-height: 3em; }
@media (max-width: 600px) { .hoja-apartado .tarjeta:has(+ .tarjeta), .hoja-apartado .tarjeta + .tarjeta { display: block; width: auto; margin-left: 0; } }
.hoja-pie { border-top: 1px solid var(--linea); margin-top: 8px; padding-top: 12px; color: var(--sutil); font-size: 0.8125rem; }
@media (max-width: 600px) { .hoja-papel { padding: 20px 16px; margin-top: 12px; } }
@page { margin: 16mm 14mm; }
@media print {
  .no-imprimir { display: none !important; }
  .hoja body { background: #fff; }
  .hoja-papel { max-width: none; margin: 0; padding: 0; border: 0; font-size: 10.5pt; }
  .hoja-feedback { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* --- Resolución guiada (docs/10, G2.4) -------------------------------- */
.guia-enlace {
  background: none; border: none; padding: 8px 0; margin-top: 12px;
  font: inherit; color: var(--acento); text-decoration: underline; cursor: pointer;
  font-size: 0.875rem; text-align: left;
}

.guia-paso {
  border-left: 3px solid var(--linea); background: var(--fondo); padding: 12px 12px;
  margin: 8px 0; border-radius: 4px;
}

.guia-paso.guia-abierta {
  border-left-color: var(--acento); padding: 12px 16px;
}

.guia-paso.guia-cerrada {
  /* Estilo para <details> */
}

.guia-paso.guia-cerrada summary {
  cursor: pointer; font-weight: 600; display: flex; justify-content: space-between; align-items: center;
}

.guia-valor-fijado {
  color: var(--sutil);
}

.guia-paso.guia-cerrada > :not(summary) {
  color: var(--sutil);
}

.guia-paso.guia-final {
  border-left-color: var(--acento-vivo);
}

/* G3.2: figura (pirámide o diagrama de tiempos) de un peldaño de la guía. */
.guia-figura { margin: 8px 0; max-width: 100%; overflow-x: auto; }

.guia-porque {
  color: var(--sutil); font-size: 1rem; margin: 8px 0;
}

.guia-pista, .guia-pista-numeros, .guia-formula {
  font-family: var(--mono);
  background: var(--papel); padding: 8px 8px; border-radius: 4px; overflow-x: auto;
  white-space: nowrap; -webkit-overflow-scrolling: touch;
}

.guia-form {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px;
}

.guia-valor {
  width: 9em; height: 44px; border: 1px solid var(--linea); background: var(--papel);
  color: var(--texto); font-size: 16px; padding: 8px; border-radius: 8px;
  font: inherit;
}

.guia-unidad {
  color: var(--sutil);
}

.guia-intento, .guia-intentos li {
  background: var(--mal-fondo); color: var(--mal); padding: 8px 12px;
  border-radius: 4px; font-size: 0.875rem; margin: 8px 0;
}

.guia-intento.ok, .guia-intentos li.ok {
  background: var(--bien-fondo); color: var(--bien);
}

.guia-revelado {
  background: color-mix(in srgb, var(--acento) 15%, var(--papel));
  color: var(--texto); padding: 12px 12px; border-radius: 4px;
  font-size: 0.875rem; margin: 8px 0;
}

.guia-resolucion-enlace { margin-top: 12px; }
.guia-resolucion-enlace a { color: var(--acento); }
.guia-nombre { font-weight: 600; margin: 0 0 4px; }
.guia-intentos { list-style: none; padding: 0; margin: 8px 0 0; }
.guia-cuaderno { margin-top: 12px; }
.guia-contenido { color: var(--sutil); }
.guia-resolucion {
  margin-top: 12px; opacity: 0.8;
}

.guia-resolucion summary {
  cursor: pointer; font-weight: 600; padding: 8px 0; color: var(--acento);
}

@media (max-width: 480px) {
  .guia-form {
    flex-direction: column; align-items: stretch;
  }
  .guia-valor {
    width: 100%;
  }
}

/* Panel de administración (docs/11): componentes compartidos de app/Panel */
.tarjeta > svg.grafica { max-width: none; }
.filtros { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.filtros-periodo, .filtros-campos { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filtros .chip { display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; border: 1px solid var(--linea); border-radius: 999px; font-size: 0.875rem; background: var(--papel); }
.filtros .chip:has(input:checked) { border-color: var(--acento); color: var(--acento); }
.filtros select, .filtros input[type="date"] { min-height: 40px; font-size: 0.875rem; padding: 4px 8px; width: auto; }
.filtros .btn { min-height: 40px; padding: 8px 16px; }
.filtros-resumen { margin: 0; }
table.tabla-admin th a { color: inherit; text-decoration: none; }
table.tabla-admin th a:hover { color: var(--acento); }
/* Vc (docs/20, cierre): Disponibilidad en móvil: sin desplazamiento horizontal para llegar a la casilla. */
@media (max-width: 600px) {
  table.tabla-admin.tabla-disp { display: table; }
  table.tabla-disp td, table.tabla-disp th { white-space: normal; }
  table.tabla-disp .disp-cambio { display: none; }
}
table.tabla-admin td.num, table.tabla-admin th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla-pie { font-size: 0.875rem; color: var(--sutil); margin: 8px 0 0; }
.areas { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.areas a { padding: 8px 16px; border-radius: var(--radio); text-decoration: none; color: var(--texto); border: 1px solid var(--linea); background: var(--papel); font-weight: 600; }
.areas a.activa { background: var(--acento); color: var(--sobre-acento); border-color: var(--acento); }
.muestra-apartado { border-top: 1px solid var(--linea); padding-top: 12px; margin-top: 12px; }
.muestra-opciones li { margin-bottom: 8px; }
.muestra-opciones li.muestra-correcta { color: var(--bien); }
.muestra-opciones li.muestra-correcta .ayuda { color: var(--sutil); }
.muestra-marcar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.muestra-marcar input[type="text"] { flex: 1; min-width: 200px; }
.muestra-visor > summary { cursor: pointer; color: var(--acento); margin: 8px 0; }
.badge.senal { display: inline-block; background: var(--mal-fondo); color: var(--mal); border-radius: 999px; padding: 2px 8px; font-size: 0.75rem; font-weight: 600; margin: 0 4px 4px 0; }
.leyenda-senales { list-style: none; padding: 0; margin: 12px 0 0; font-size: 0.875rem; color: var(--sutil); }
.leyenda-senales li { margin-bottom: 8px; }
.apartado-servido .opcion-correcta { color: var(--bien); }
.apartado-servido .opcion-correcta .ayuda { color: var(--sutil); }
.apartado-servido .opcion-elegida { border-left: 3px solid var(--acento); padding-left: 8px; }
.revision-cerrar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.revision-cerrar input[type="text"] { min-width: 160px; }
table.tabla-admin th { text-align: left; }

/* --- Mi progreso (E1.2, docs/12 §3) -------------------------------------- */
.subnav { display: flex; gap: 8px; margin: 12px 0 16px; flex-wrap: wrap; }
.subnav a, .subnav span.activa { padding: 8px 16px; border-radius: var(--radio); text-decoration: none; color: var(--texto); border: 1px solid var(--linea); background: var(--papel); font-weight: 600; }
.subnav a.activa, .subnav span.activa { background: var(--acento); color: var(--sobre-acento); border-color: var(--acento); }
.stat small.ayuda { display: block; margin-top: 2px; }
.tabla-progreso { margin-top: 8px; }
.barra-resultado { display: inline-block; width: 56px; height: 7px; border-radius: 4px; background: var(--linea); overflow: hidden; vertical-align: middle; margin-left: 8px; }
.barra-resultado > span { display: block; height: 100%; background: var(--acento); }
.hoja-guia { margin: 8px 0; font-size: 0.875rem; }
.hoja-guia > summary { cursor: pointer; color: var(--acento); }
.hoja-guia ul { margin: 8px 0 0; padding-left: 20px; }

/* --- Mis errores (E2.3, docs/12 §3.6, §4.5) ------------------------------ */
.badge.estado-activo { background: var(--mal-fondo); color: var(--mal); }
.badge.estado-remision { background: var(--linea); color: var(--texto); }
.badge.estado-superado { background: var(--bien-fondo); color: var(--bien); }

/* --- Por tema (E2.4, docs/12 §3.7): leyenda de color por nivel en la gráfica de trayectoria --- */
.leyenda-niveles { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 2px; }
.punto-nivel { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-left: 8px; margin-right: 4px; }
.punto-nivel:first-child { margin-left: 0; }
.punto-nivel.n1 { background: var(--acento); }
.punto-nivel.n2 { background: #f59e0b; }
.punto-nivel.n3 { background: #8b5cf6; }
/* Mis errores: la columna «Practicar» lleva títulos largos; que parta líneas en vez de cortarse. */
.tabla-progreso td:last-child { white-space: normal; min-width: 180px; }

/* --- I2.1 (docs/19 §8.2, §8.4): componentes del marco de ejercicio ------- */
.aviso-error { color: var(--mal); }
/* I4.3: confirmación informativa de una sola vez (p. ej. tras «Dejarlo»), no de error. */
.aviso-info { margin: 0 0 16px; padding: 12px 16px; border: 1px solid var(--linea); border-left: 4px solid var(--acento); border-radius: var(--radio-tarjeta); background: var(--papel); color: var(--texto); }
.ayuda-separada { margin-top: 16px; }
label.casilla { display: flex; align-items: flex-start; gap: 8px; }
label.casilla input[type=checkbox] { margin-top: 2px; }
.form-contenido { display: contents; }
.form-plano { margin: 0; }
.feedback-linea { margin-bottom: 4px; }

/* Cabecera de ejercicio: tema y nivel arriba, un punto por apartado debajo. */
.cab-ejercicio { margin-bottom: 12px; }
.cab-ejercicio-fila { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cab-ejercicio-titulo { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.cab-ejercicio-titulo b { font-size: 1.125rem; color: var(--texto); }
.cab-ejercicio-titulo span { color: var(--sutil); font-size: 0.875rem; }
.cab-ejercicio-salir { flex: none; font-size: 0.875rem; }
/* I2.3: enlace discreto pero con zona de toque de 44 px de alto. */
.enlace-salir {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px;
  color: var(--sutil); text-decoration: underline;
}
.enlace-salir:hover { color: var(--acento-oscuro); }
.enlace-salir:focus-visible { outline: 3px solid var(--acento-vivo); outline-offset: 2px; }
.avance { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; padding: 0; }
.avance .punto {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin: 0; border-radius: 50%;
  border: 2px solid var(--linea); background: var(--linea);
  font-size: 0.8125rem; font-weight: 600; line-height: 1;
}
.avance .punto.bien { background: var(--bien-fondo); border-color: var(--bien); color: var(--bien); }
.avance .punto.mal { background: var(--mal-fondo); border-color: var(--mal); color: var(--mal); }
/* El actual se distingue por el contorno y un anillo, no solo por el color. */
.avance .punto.actual { box-shadow: 0 0 0 2px var(--papel), 0 0 0 4px var(--acento); }
.avance .punto.pendiente.actual { background: var(--papel); border-color: var(--acento); }
.avance-cuenta { margin: 4px 0 0; color: var(--sutil); font-size: 0.875rem; }

/* I2.2 (docs/19 §8.1): el catálogo de temas pasa a dos columnas con espacio. */
@media (min-width: 900px) {
  fieldset.temas { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; align-items: stretch; }
  fieldset.temas > legend { grid-column: 1 / -1; }
  fieldset.temas > .grupo-temas { grid-column: 1 / -1; }
  fieldset.temas > .tema { margin-bottom: 0; }
}

/* I5.2: figura de los problemas inversos (enunciado, apartado y tras responder). */
.figura-enunciado { margin-top: 12px; }
.figura-apartado { margin: 12px 0; }
.figura-enunciado svg, .figura-apartado svg { display: block; margin: 0 auto; width: 100%; max-width: 560px; height: auto; }
.figura-texto { margin: 8px 0 0; font-size: 0.875em; }
.figura-texto ul { margin: 4px 0 0; padding-left: 1.2em; }

/* RH4 (docs/44 §4): «Reconocer intercambios HTTP». Cada cronograma es un SVG de ancho propio (viewBox
   de unos 600 a 1000 px); en pantallas estrechas se desplaza en horizontal dentro de su contenedor en
   lugar de encogerse, para que el texto no baje de 11 px reales. --rec-ancho lo pone la vista. */
.rec-opciones { border: 0; padding: 0; margin: 12px 0; min-width: 0; }
.rec-opciones > legend { font-weight: 600; padding: 0; margin-bottom: 8px; }
.rec-opcion { margin: 0 0 16px; min-width: 0; }
.rec-etiqueta { display: block; cursor: pointer; border: 1px solid var(--linea); border-radius: 8px; padding: 8px; background: var(--papel); }
.rec-etiqueta:hover, .rec-opcion:focus-within .rec-etiqueta { border-color: var(--acento); }
.rec-opcion:has(input:checked) .rec-etiqueta { border-color: var(--acento); box-shadow: 0 0 0 2px var(--acento); }
.rec-eleccion { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.rec-eleccion input { width: 20px; height: 20px; flex: none; }
.rec-figura { overflow-x: auto; max-width: 100%; }
.rec-figura svg { display: block; min-width: var(--rec-ancho, 700px); height: auto; }
.rec-lista { margin: 8px 0 0 4px; }
.rec-lista ol { margin: 4px 0; padding-left: 1.4em; }
.rec-tabla-envoltura { overflow-x: auto; margin: 8px 0; }
.rec-tabla { border-collapse: collapse; font-size: 0.875em; }
.rec-tabla caption { text-align: left; font-weight: 600; padding: 0 0 4px; }
.rec-tabla th, .rec-tabla td { border: 1px solid var(--linea); padding: 4px 8px; text-align: left; white-space: nowrap; }
.rec-tabla thead th { background: var(--fondo); }
.rec-registro { margin: 8px 0; }
.rec-comparacion h3, .rec-decisiones h3, .rec-error h3 { margin-top: 0; }
.rec-decisiones ul { margin: 8px 0 0; padding-left: 1.2em; }
.rec-decisiones li { margin: 4px 0; }