/* =========================================================
   ApuntoPT · Estilos
   ---------------------------------------------------------
   Este archivo tiene dos partes:
   1. TOKENS (:root) → la "caja de pinturas" de la marca.
      Son variables: si cambias un valor aquí, cambia en
      toda la web. Están explicados en BRAND_SYSTEM.md.
   2. COMPONENTES → cada pieza de la página, que SOLO usa
      tokens. Regla de oro: aquí abajo no se escribe ningún
      color, tamaño ni sombra "a mano".

   Los contrastes se comprueban con:
     node herramientas/contraste.mjs
   ========================================================= */


/* =========================================================
   1. TOKENS
   ========================================================= */
:root {
  /* ── Morado ApuntoPT · color principal (★ = el del logo) ── */
  --morado-50:  #f8f5fe;
  --morado-100: #f1e8ff;
  --morado-200: #e3d1fe;
  --morado-300: #d0afff;
  --morado-400: #ba87fb;
  --morado-500: #9e6bdc;
  --morado-600: #834fbe;
  --morado-700: #6c37a3;
  --morado-800: #551b89; /* ★ */
  --morado-900: #3f016c;

  /* ── Turquesa · el check: logro, progreso ── */
  --turquesa-50:  #eafafe;
  --turquesa-100: #cef5ff;
  --turquesa-200: #96eaff;
  --turquesa-300: #7ad0e5;
  --turquesa-400: #06b6d4; /* ★ */
  --turquesa-500: #0b99b3;
  --turquesa-600: #097c91;
  --turquesa-700: #066374;
  --turquesa-800: #044b58;
  --turquesa-900: #02343e;

  /* ── Rosa · la estrella: acento, celebración ── */
  --rosa-50:  #fef4f6;
  --rosa-100: #fee6eb;
  --rosa-200: #fecbd6;
  --rosa-300: #ffa1b9;
  --rosa-400: #ff6a98;
  --rosa-500: #ee4e84; /* ★ */
  --rosa-600: #c42062;
  --rosa-700: #a3004c;
  --rosa-800: #7d0239;
  --rosa-900: #590127;

  /* ── Pizarra · texto y neutros ── */
  --pizarra-0:   #ffffff;
  --pizarra-50:  #f3f7fb;
  --pizarra-100: #eaeff4;
  --pizarra-200: #dae1e7;
  --pizarra-300: #c0c9d1;
  --pizarra-400: #9ba6b1; /* decorativo: NUNCA texto */
  --pizarra-500: #75828e; /* bordes de campos (≥ 3:1) */
  --pizarra-600: #606e7a; /* texto secundario */
  --pizarra-700: #485764;
  --pizarra-800: #313f4b; /* ★ texto principal */

  /* ── Crema · el papel de los apuntes ── */
  --crema-50:  #faf8f3; /* fondo de la aplicación */
  --crema-100: #f3efe4; /* ★ fondo del logo */
  --crema-200: #e8e2d3; /* pistas y separadores */

  /* ── Semáforo del temario (§2.4 de la guía) ── */
  --estado-0:        #d92d20; /* Sin empezar */
  --estado-0-borde:  #b42318;
  --estado-0-tinta:  #ffffff;
  --estado-0-fondo:  #ffffff; /* blanco: "sin empezar" no es un error */
  --estado-1:        #fdb022; /* Redactado */
  --estado-1-borde:  #b54708;
  --estado-1-tinta:  #313f4b;
  --estado-1-fondo:  #fffaeb;
  --estado-2:        #039855; /* Escrito a mano */
  --estado-2-borde:  #067647;
  --estado-2-tinta:  #ffffff;
  --estado-2-fondo:  #ecfdf3;
  --estado-3:        #551b89; /* ¡Cantado! = morado de marca */
  --estado-3-borde:  #3f016c;
  --estado-3-tinta:  #ee4e84; /* la estrella rosa del logo */
  --estado-3-fondo:  #f8f5fe;

  /* ── Zonas del texto de un tema ── */
  --comodin-fondo:  var(--turquesa-50);  /* se repite en otros temas */
  --comodin-borde:  var(--turquesa-600);
  --comodin-texto:  var(--turquesa-700);
  --propio-fondo:   var(--morado-50);    /* solo de este tema */
  --propio-borde:   var(--morado-600);
  --propio-texto:   var(--morado-700);

  /* ── Subrayadores (fluorescentes suaves) ── */
  --subrayado-amarillo: #ffe58f;
  --subrayado-rosa:     #fecbd6;
  --subrayado-verde:    #bdf0cf;

  /* ── Papeles: qué color va en cada sitio ── */
  --fondo-app:        var(--crema-50);
  --fondo-superficie: var(--pizarra-0);
  --fondo-suave:      var(--crema-100);
  --texto:            var(--pizarra-800);
  --texto-secundario: var(--pizarra-600);
  --texto-sobre-marca: var(--pizarra-0);  /* sobre morado-800 */
  --borde:            var(--crema-200);
  --borde-campo:      var(--pizarra-500);
  --marca:            var(--morado-800);
  --enlace:           var(--morado-700);
  --anillo-foco:      var(--morado-600);

  /* ── Tipografía ── */
  --fuente-titulos: "Lexend", "Segoe UI", system-ui, sans-serif;
  --fuente-texto:   "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;

  --texto-xs:   0.8125rem; /* 13 px · mínimo absoluto */
  --texto-s:    0.875rem;  /* 14 px */
  --texto-m:    1rem;      /* 16 px · base */
  --texto-l:    1.125rem;  /* 18 px */
  --titulo-3:   1.25rem;   /* 20 px */
  --titulo-2:   1.5rem;    /* 24 px */
  --titulo-1:   clamp(1.875rem, 1.5rem + 1.5vw, 2.5rem); /* 30 → 40 px */
  --cifra-xl:   clamp(3.5rem, 2.5rem + 4vw, 5rem);       /* 56 → 80 px */

  /* ── Espaciado: todo es múltiplo de 4 px ── */
  --espacio-1: 0.25rem;  /*  4 px */
  --espacio-2: 0.5rem;   /*  8 px */
  --espacio-3: 0.75rem;  /* 12 px */
  --espacio-4: 1rem;     /* 16 px · base */
  --espacio-6: 1.5rem;   /* 24 px */
  --espacio-8: 2rem;     /* 32 px */
  --espacio-12: 3rem;    /* 48 px */

  /* ── Radios: redondeados como los trazos del logo ── */
  --radio-s: 8px;
  --radio-m: 12px;
  --radio-l: 16px;
  --radio-xl: 24px;
  --radio-total: 9999px;

  /* ── Sombras: tintadas de morado, nunca negro puro ── */
  --sombra-s: 0 1px 3px rgba(85, 27, 137, 0.08), 0 1px 2px rgba(85, 27, 137, 0.05);
  --sombra-m: 0 4px 12px -2px rgba(85, 27, 137, 0.12);

  /* ── Movimiento ── */
  --duracion-rapida: 150ms;
  --duracion-media: 250ms;
  --curva: cubic-bezier(0, 0, 0.2, 1);

  /* ── Medidas ── */
  --zona-tactil: 44px;   /* mínimo para dedos (WCAG 2.5.5) */
  --ancho-max: 960px;
}


/* =========================================================
   2. BASE
   ========================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--fuente-texto);
  font-size: var(--texto-m);
  line-height: 1.6;
  background: var(--fondo-app);
  color: var(--texto);
}

h1, h2, h3 {
  font-family: var(--fuente-titulos);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

input,
textarea,
button {
  font: inherit;
  color: inherit;
}

/* Foco visible para quien navega con teclado.
   :focus-visible no lo enseña al hacer clic con el ratón. */
:focus-visible {
  outline: 3px solid var(--anillo-foco);
  outline-offset: 2px;
  border-radius: var(--radio-s);
}

/* "hidden" siempre oculta, aunque el elemento tenga display: flex */
[hidden] {
  display: none !important;
}

/* Texto que solo oyen los lectores de pantalla */
.solo-lector {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Los iconos SVG heredan el color del texto que los rodea */
.icono {
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* =========================================================
   3. CABECERA
   ========================================================= */
.cabecera {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espacio-2);
  padding: var(--espacio-8) var(--espacio-4) var(--espacio-4);
  text-align: center;
}

.marca {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  font-size: var(--titulo-1);
  color: var(--texto);
}

.marca img {
  width: 1.6em;
  height: 1.6em;
}

.marca .nombre span {
  color: var(--marca);
}

.lema {
  color: var(--texto-secundario);
  font-size: var(--texto-l);
}


/* =========================================================
   4. ESTRUCTURA Y TARJETAS
   ========================================================= */
.contenedor {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: var(--espacio-4);
  display: grid;
  gap: var(--espacio-6);
}

.tarjeta {
  background: var(--fondo-superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-l);
  box-shadow: var(--sombra-s);
  padding: var(--espacio-6);
}

.tarjeta h2 {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  font-size: var(--titulo-3);
  margin-bottom: var(--espacio-4);
}

.tarjeta h2 .icono {
  color: var(--marca);
}

.ayuda {
  color: var(--texto-secundario);
  font-size: var(--texto-s);
  margin-bottom: var(--espacio-4);
}


/* =========================================================
   5. CAMPOS DE FORMULARIO
   ========================================================= */
.campo {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--espacio-2);
  font-size: var(--texto-s);
  font-weight: 700;
}

.campo input {
  min-height: var(--zona-tactil);
  padding: var(--espacio-2) var(--espacio-3);
  font-size: var(--texto-m);   /* 16 px: evita el zoom automático del iPhone */
  font-weight: 400;
  background: var(--fondo-superficie);
  color: var(--texto);
  border: 1px solid var(--borde-campo);
  border-radius: var(--radio-m);
}



/* =========================================================
   6. ZONA MORADA DE LA PORTADA Y CUENTA ATRÁS
   La zona morada (antes era la cuenta atrás) guarda ahora
   «Repasa y ponte a prueba»: bibliografía, normativa y quiz.
   La cuenta atrás baja al final, en una tarjeta blanca.
   ========================================================= */
.zona-marca {
  position: relative;
  overflow: hidden;
  padding: var(--espacio-6);
  background: var(--marca);
  border-radius: var(--radio-l);
  box-shadow: var(--sombra-s);
  color: var(--texto-sobre-marca);
  --anillo-foco: var(--pizarra-0); /* sobre morado, el foco va en blanco */
}

.zona-marca h2 {
  position: relative; /* por encima de la marca de agua */
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  font-size: var(--titulo-3);
  margin-bottom: var(--espacio-4);
}

.zona-marca h2 .icono {
  color: var(--rosa-500); /* la estrella del logo */
  fill: currentColor;
}

/* Marca de agua del isotipo, guiño al logo */
.zona-marca::after {
  content: "";
  position: absolute;
  top: -24px;
  right: -24px;
  width: 140px;
  height: 140px;
  background: url("assets/marca/isotipo-blanco.svg") no-repeat center / contain;
  opacity: 0.08;
  pointer-events: none;
}

.zona-marca .campos {
  position: relative;
  z-index: 1;
}

.zona-marca a.campo-oposicion {
  border-color: var(--pizarra-0);
}

/* El dato de cada tarjeta: «23 obras · 7 webs», «Tu mejor nota…» */
.recurso-dato {
  font-size: var(--texto-s);
  font-weight: 700;
  color: var(--marca);
}

/* ---------- Cuenta atrás: discreta, al final ---------- */
.cuenta-atras-cuerpo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-4);
}

.cuenta-atras-dias {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--espacio-1) var(--espacio-3);
}

.dias {
  font-family: var(--fuente-titulos);
  font-size: var(--titulo-1);
  font-weight: 700;
  line-height: 1;
  color: var(--marca);
  font-variant-numeric: tabular-nums;
}

.texto-dias {
  color: var(--texto-secundario);
}


/* =========================================================
   7. PROGRESO
   ========================================================= */
.barra {
  height: 16px;
  background: var(--crema-200);
  border-radius: var(--radio-total);
  overflow: hidden;
}

.barra-relleno {
  height: 100%;
  width: 0%;
  background: var(--turquesa-600); /* 3.8:1 sobre la pista */
  border-radius: var(--radio-total);
  transition: width var(--duracion-media) var(--curva);
}

.texto-progreso {
  margin: var(--espacio-2) 0 var(--espacio-4);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.leyenda {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2) var(--espacio-6);
}

.leyenda li {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  font-size: var(--texto-s);
  font-variant-numeric: tabular-nums;
}


/* =========================================================
   8. SEMÁFORO DEL TEMARIO
   ========================================================= */
.rejilla-temas {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: var(--espacio-3);
}

/* Cada estado define sus colores una vez; la ficha y la
   leyenda los leen de --color, --borde-estado, etc. */
[data-estado="0"] { --color: var(--estado-0); --borde-estado: var(--estado-0-borde); --tinta: var(--estado-0-tinta); --fondo-estado: var(--estado-0-fondo); }
[data-estado="1"] { --color: var(--estado-1); --borde-estado: var(--estado-1-borde); --tinta: var(--estado-1-tinta); --fondo-estado: var(--estado-1-fondo); }
[data-estado="2"] { --color: var(--estado-2); --borde-estado: var(--estado-2-borde); --tinta: var(--estado-2-tinta); --fondo-estado: var(--estado-2-fondo); }
[data-estado="3"] { --color: var(--estado-3); --borde-estado: var(--estado-3-borde); --tinta: var(--estado-3-tinta); --fondo-estado: var(--estado-3-fondo); }

.ficha-tema {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--espacio-2) var(--espacio-3);
  padding: var(--espacio-3);
  border-radius: var(--radio-m);
  background: var(--fondo-estado);
  border: 1px solid var(--borde);
  border-left: 6px solid var(--color);
  transition: background var(--duracion-rapida) var(--curva);
}

.numero-tema {
  padding-top: var(--espacio-1); /* alineado con la primera línea del título */
  font-family: var(--fuente-titulos);
  font-weight: 700;
  min-width: 1.75rem;
  font-variant-numeric: tabular-nums;
}

/* El título es un enlace a la página del tema.
   Se ven 3 líneas como máximo; el lector de pantalla lo lee entero. */
.titulo-tema {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  padding-top: var(--espacio-1);
  color: var(--texto);
  line-height: 1.45;
  text-decoration: none;          /* limpio: el subrayado solo al señalarlo */
  text-underline-offset: 3px;
}

.titulo-tema:focus-visible {
  text-decoration: underline;
}

@media (hover: hover) {
  .titulo-tema:hover {
    color: var(--enlace);
    text-decoration: underline;
  }
}

/* Botón del estado: punto de color + icono + nombre */
.boton-estado {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  min-height: var(--zona-tactil);
  padding: var(--espacio-1) var(--espacio-3) var(--espacio-1) var(--espacio-1);
  background: var(--fondo-superficie);
  border: 1px solid var(--borde-campo);
  border-radius: var(--radio-total);
  font-size: var(--texto-s);
  font-weight: 700;
  cursor: pointer;
  transition: border-color var(--duracion-rapida) var(--curva),
              transform var(--duracion-rapida) var(--curva);
}

.boton-estado:active {
  transform: scale(0.98);
}

@media (hover: hover) {
  .boton-estado:hover {
    border-color: var(--borde-estado);
  }
}

.boton-estado .siguiente {
  margin-left: auto;
  color: var(--texto-secundario);
}

/* El punto del semáforo. Nunca va solo: lleva icono y texto,
   para quien no distingue colores (daltonismo). */
.punto {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radio-total);
  background: var(--color);
  border: 2px solid var(--borde-estado);
  color: var(--tinta);
}

.punto .icono {
  width: 18px;
  height: 18px;
  stroke-width: 2.5;
}

/* La estrella de "Cantado" va rellena, como en el logo */
[data-estado="3"] .punto .icono {
  fill: currentColor;
}

.leyenda .punto {
  width: 24px;
  height: 24px;
}

.leyenda .punto .icono {
  width: 14px;
  height: 14px;
}


/* ---------- Mi progreso: los tres campos de la oposición ---------- */
.titulo-seccion {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  font-size: var(--titulo-3);
  margin-bottom: var(--espacio-4);
}

.titulo-seccion .icono {
  color: var(--marca);
}

.campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--espacio-4);
}

.campo-oposicion {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  color: var(--texto);
  text-decoration: none;
}

a.campo-oposicion {
  transition: box-shadow var(--duracion-rapida) var(--curva),
              border-color var(--duracion-rapida) var(--curva);
}

@media (hover: hover) {
  a.campo-oposicion:hover {
    border-color: var(--morado-600);
    box-shadow: var(--sombra-m);
  }
}

.campo-cabecera {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  margin-bottom: var(--espacio-2);
}

.campo-nombre {
  font-family: var(--fuente-titulos);
  font-size: var(--titulo-3);
  font-weight: 700;
  line-height: 1.2;
}

.cifra {
  font-family: var(--fuente-titulos);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.cifra-total {
  font-size: var(--texto-l);
  font-weight: 500;
  color: var(--texto-secundario);
}

.cifra-etiqueta {
  font-size: var(--texto-s);
  color: var(--texto-secundario);
}

.campo-oposicion .barra {
  display: block;
  margin-top: var(--espacio-2);
}

.campo-oposicion .barra-relleno {
  display: block;
}

.leyenda-compacta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-1) var(--espacio-3);
  font-size: var(--texto-xs);
  font-variant-numeric: tabular-nums;
}

.leyenda-compacta > span {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-1);
}

.leyenda-compacta .punto {
  width: 20px;
  height: 20px;
}

.leyenda-compacta .punto .icono {
  width: 12px;
  height: 12px;
}

.campo-accion {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-1);
  margin-top: auto;
  padding-top: var(--espacio-3);
  color: var(--enlace);
  font-weight: 700;
}

.campo-proximo {
  background: var(--fondo-suave);
  box-shadow: none;
}

.icono-grande {
  width: 32px;
  height: 32px;
  color: var(--marca);
}

.insignia {
  align-self: flex-start;
  margin-top: auto;
  padding: var(--espacio-1) var(--espacio-3);
  background: var(--morado-100);
  color: var(--morado-800);
  border-radius: var(--radio-total);
  font-size: var(--texto-xs);
  font-weight: 700;
}

/* Título de una página interior (p. ej. Temario) */
.encabezado-pagina h1 {
  font-size: var(--titulo-1);
  margin-bottom: var(--espacio-2);
}


/* =========================================================
   9. PIE
   ========================================================= */
.pie {
  text-align: center;
  color: var(--texto-secundario);
  font-size: var(--texto-s);
  padding: var(--espacio-8) var(--espacio-4);
}


/* =========================================================
   10. PÁGINA DE UN TEMA (tema.html)
   ========================================================= */

/* Enlace "Saltar al texto": invisible hasta que se pulsa Tab */
.saltar {
  position: absolute;
  left: var(--espacio-4);
  top: -100px;
  z-index: 10;
  padding: var(--espacio-2) var(--espacio-4);
  background: var(--marca);
  color: var(--texto-sobre-marca);
  border-radius: var(--radio-m);
}

.saltar:focus {
  top: var(--espacio-2);
}

/* ---------- Cabecera compacta ---------- */
.cabecera-tema {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-4);
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--espacio-3) var(--espacio-4);
}

.volver,
.marca-pequena {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  min-height: var(--zona-tactil);
  color: var(--texto);
  text-decoration: none;
  font-weight: 700;
}

.marca-pequena {
  font-family: var(--fuente-titulos);
  font-size: var(--texto-l);
}

.marca-pequena > span > span {
  color: var(--marca);
}

@media (hover: hover) {
  .volver:hover {
    color: var(--enlace);
  }
}

/* ---------- Estructura ---------- */
.pagina-tema {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--espacio-4) var(--espacio-12);
}

.encabezado-tema {
  max-width: 68ch;
  margin: var(--espacio-4) 0 var(--espacio-6);
}

.antetitulo {
  font-size: var(--texto-s);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-secundario);
}

.titulo-pagina-tema {
  font-size: clamp(1.125rem, 0.9rem + 1.2vw, 1.5rem); /* 18 → 24 px: los títulos oficiales son largos */
  margin: var(--espacio-2) 0 var(--espacio-4);
}

.controles-tema {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-3);
}

.controles-tema .boton-estado {
  flex: 0 1 320px;
}

.tamano-letra {
  display: inline-flex;
  border: 1px solid var(--borde-campo);
  border-radius: var(--radio-total);
  overflow: hidden;
  background: var(--fondo-superficie);
}

.tamano-letra button {
  min-width: var(--zona-tactil);
  min-height: var(--zona-tactil);
  padding: 0 var(--espacio-3);
  background: transparent;
  border: none;
  font-family: var(--fuente-titulos);
  font-weight: 700;
  cursor: pointer;
}

.tamano-letra button + button {
  border-left: 1px solid var(--borde-campo);
}

.tamano-letra button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (hover: hover) {
  .tamano-letra button:not(:disabled):hover {
    background: var(--fondo-suave);
  }
}

/* Leyenda: qué significa cada color de fondo */
.leyenda-zonas {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2) var(--espacio-6);
  margin-top: var(--espacio-4);
  font-size: var(--texto-s);
}

.leyenda-zonas li {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
}

.muestra-zona {
  width: 20px;
  height: 20px;
  border-radius: var(--radio-s);
  border-left: 5px solid;
}

.muestra-comodin { background: var(--comodin-fondo); border-color: var(--comodin-borde); }
.muestra-propio  { background: var(--propio-fondo);  border-color: var(--propio-borde); }
.muestra-enunciado { background: var(--fondo-suave); border-color: var(--pizarra-500); }

.aviso-muestra {
  max-width: 68ch;
  margin-bottom: var(--espacio-6);
  padding: var(--espacio-3) var(--espacio-4);
  background: var(--estado-1-fondo);
  border-left: 4px solid var(--estado-1-borde);
  border-radius: var(--radio-m);
  font-size: var(--texto-s);
}

/* Índice a la izquierda en pantallas anchas; arriba en el móvil */
.disposicion-tema {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* un cuadro ancho no ensancha la página en el móvil */
  gap: var(--espacio-6);
}

@media (min-width: 1000px) {
  .disposicion-tema {
    grid-template-columns: 260px minmax(0, 1fr);
    align-items: start;
  }

  .indice {
    position: sticky;
    top: var(--espacio-4);
  }
}

/* ---------- Índice ---------- */
.indice details {
  background: var(--fondo-superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-l);
  padding: var(--espacio-2) var(--espacio-4);
}

.indice summary {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  min-height: var(--zona-tactil);
  font-family: var(--fuente-titulos);
  font-weight: 700;
  cursor: pointer;
}

.indice ol {
  list-style: none;
  padding-bottom: var(--espacio-2);
}

.indice a {
  display: flex;
  gap: var(--espacio-2);
  padding: var(--espacio-2) 0;
  color: var(--texto);
  font-size: var(--texto-s);
  line-height: 1.4;
  text-decoration: none;
}

.indice a .icono {
  width: 1.1em;
  height: 1.1em;
  margin-top: 0.1em;
}

.indice-comodin .icono { color: var(--comodin-texto); }
.indice-propio .icono  { color: var(--propio-texto); }
.indice-enunciado .icono { color: var(--texto-secundario); }

@media (hover: hover) {
  .indice a:hover {
    color: var(--enlace);
    text-decoration: underline;
  }
}

/* ---------- Texto del tema ---------- */
.lectura {
  --tamano-lectura: 18px;  /* lo cambian los botones A− / A+ */
  max-width: 72ch;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--espacio-6);
  font-size: var(--tamano-lectura);
  line-height: 1.7;
}

.lectura:focus {
  outline: none;
}

.apartado {
  padding: var(--espacio-6);
  border-radius: var(--radio-l);
  border-left: 6px solid;
  scroll-margin-top: var(--espacio-4); /* que el título no quede pegado arriba al saltar */
}

.apartado-comodin { background: var(--comodin-fondo); border-color: var(--comodin-borde); }
.apartado-propio  { background: var(--propio-fondo);  border-color: var(--propio-borde); }

.apartado h2 {
  font-size: 1.2em;
}

.apartado h3 {
  font-size: 1.05em;
  margin-top: var(--espacio-4);
}

.etiqueta-zona {
  display: block;   /* el icono va en línea con el texto, también al partirse */
  margin: var(--espacio-1) 0 var(--espacio-4);
  font-size: var(--texto-s);
  font-weight: 700;
}

.apartado-comodin .etiqueta-zona { color: var(--comodin-texto); }
.apartado-propio  .etiqueta-zona { color: var(--propio-texto); }

/* Enunciado de un supuesto: el caso que se plantea, en el papel crema */
.apartado-enunciado { background: var(--fondo-suave); border-color: var(--pizarra-500); }
.apartado-enunciado .etiqueta-zona { color: var(--texto-secundario); }
.apartado-enunciado li::marker { color: var(--pizarra-600); }

.etiqueta-zona .icono {
  margin-right: var(--espacio-1);
  vertical-align: -0.25em;
}

.etiqueta-zona a {
  display: inline-block;
  color: inherit;
  min-width: 24px;
  text-align: center;
}

.bloque + .bloque,
.bloque + ul,
.bloque + ol,
ul + .bloque,
ol + .bloque,
.grupo-titulo + *,
* + .grupo-titulo {
  margin-top: var(--espacio-3);
}

.apartado ul,
.apartado ol {
  padding-left: 1.6em;
}

.apartado li > ul,
.apartado li > ol {
  margin-top: var(--espacio-2);
}

.apartado li + li {
  margin-top: var(--espacio-2);
}

/* El texto subrayado */
.subrayado {
  color: inherit;
  border-radius: 3px;
  padding: 0.05em 0;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.subrayado-amarillo { background: var(--subrayado-amarillo); }
.subrayado-rosa     { background: var(--subrayado-rosa); }
.subrayado-verde    { background: var(--subrayado-verde); }

/* ---------- Párrafo nexo comodín (dentro de un apartado propio) ---------- */
.fragmento-comodin {
  margin-block: var(--espacio-3);
  margin-inline: calc(-1 * var(--espacio-3));
  padding: var(--espacio-3);
  background: var(--comodin-fondo);
  border-left: 4px solid var(--comodin-borde);
  border-radius: var(--radio-m);
}

.fragmento-comodin .etiqueta-zona {
  margin: 0 0 var(--espacio-2);
  color: var(--comodin-texto);
}

/* ---------- Lo que cambia dentro de un comodín ----------
   Un comodín (turquesa) puede tener partes propias de cada tema:
   van en morado, como los apartados propios. */
.fragmento-propio,
.elemento-propio {
  background: var(--propio-fondo);
  border-left: 4px solid var(--propio-borde);
  border-radius: var(--radio-m);
}

.fragmento-propio {
  margin-block: var(--espacio-3);
  margin-inline: calc(-1 * var(--espacio-3));
  padding: var(--espacio-3);
}

.elemento-propio {
  padding: var(--espacio-1) var(--espacio-2);
  margin-left: calc(-1 * var(--espacio-2));
}

.apartado .fragmento-propio .etiqueta-zona {
  margin: 0 0 var(--espacio-2);
  color: var(--propio-texto);
}

/* Las palabras exactas que cambian de un tema a otro: [[así]] en temas.js.
   Raya de puntos fina y clara, discreta, para no confundirla con un subrayado de color. */
.cambia {
  text-decoration: underline dotted var(--morado-400);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

/* Las palabras propias dentro de un párrafo de comodín ({{así}} en comodines.js):
   en morado, como lo propio, para que se distingan del texto compartido. */
.apartado-comodin > .bloque .cambia {
  color: var(--propio-texto);
}

/* ---------- Notas: discretas, al servicio del texto ---------- */
.notas:empty {
  display: none;
}

.nota {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: var(--espacio-1);
  margin: var(--espacio-1) 0 var(--espacio-2);
  padding-left: var(--espacio-2);
  border-left: 2px solid var(--rosa-300);
}

.nota > .icono {
  width: 14px;
  height: 14px;
  margin-top: 0.55em;
  color: var(--rosa-700);
}

.nota-texto {
  width: 100%;
  min-height: 32px;
  padding: var(--espacio-1) var(--espacio-2);
  font-size: var(--texto-s);
  font-style: italic;
  line-height: 1.5;
  color: var(--texto-secundario);
  background: transparent;
  border: none;
  border-radius: var(--radio-s);
  resize: vertical;
  field-sizing: content;
}

.nota-texto:focus-visible {
  background: var(--fondo-superficie);
}

.nota-texto::placeholder {
  color: var(--texto-secundario);
  opacity: 1;
}

/* Copia de la nota que solo se ve al imprimir */
.nota-impresa {
  display: none;
}

.nota-borrar {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  border-radius: var(--radio-s);
  color: var(--texto-secundario);
  cursor: pointer;
}

.nota-borrar .icono {
  width: 16px;
  height: 16px;
}

@media (hover: hover) {
  .nota-borrar:hover {
    background: var(--estado-0-fondo);
    color: var(--estado-0-borde);
  }
}

/* En pantallas táctiles: dedo = 44 px, y letra de 16 px
   (por debajo, el iPhone hace zoom al escribir) */
@media (pointer: coarse) {
  .nota-texto {
    min-height: var(--zona-tactil);
    font-size: var(--texto-m);
  }

  .nota-borrar {
    width: var(--zona-tactil);
    height: var(--zona-tactil);
  }
}

/* ---------- Herramientas: datos, resumen, imprimir ---------- */
.herramientas-tema {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
  margin-top: var(--espacio-3);
}

.boton-herramienta {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  min-height: var(--zona-tactil);
  padding: 0 var(--espacio-4);
  background: var(--fondo-superficie);
  border: 1px solid var(--borde-campo);
  border-radius: var(--radio-total);
  font-size: var(--texto-s);
  font-weight: 700;
  cursor: pointer;
}

.boton-herramienta .icono {
  color: var(--marca);
}

.boton-herramienta[aria-expanded="true"] {
  background: var(--morado-50);
  border-color: var(--morado-600);
  color: var(--morado-800);
}

@media (hover: hover) {
  .boton-herramienta:hover {
    border-color: var(--morado-600);
  }
}

.panel {
  margin-top: var(--espacio-4);
  padding: var(--espacio-4) var(--espacio-6);
  background: var(--fondo-superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-l);
  box-shadow: var(--sombra-s);
}

.panel-titulo {
  font-size: var(--titulo-3);
  margin-bottom: var(--espacio-3);
}

.panel-subtitulo {
  font-size: var(--texto-m);
  margin: var(--espacio-4) 0 var(--espacio-2);
}

.datos-tema {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--espacio-1) var(--espacio-4);
  font-size: var(--texto-s);
}

.datos-tema dt {
  color: var(--texto-secundario);
}

.datos-tema dd {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.campo-velocidad {
  margin-top: var(--espacio-4);
  font-weight: 400;
}

.campo-velocidad input {
  width: 5rem;
  font-variant-numeric: tabular-nums;
}

.resumen-texto p + p {
  margin-top: var(--espacio-2);
}

.resumen-pendiente {
  font-style: italic;
  color: var(--texto-secundario);
}

.esquema {
  list-style: none;
  font-size: var(--texto-s);
}

.esquema > li + li {
  margin-top: var(--espacio-2);
}

.esquema .icono {
  width: 1.1em;
  height: 1.1em;
  margin-right: var(--espacio-2);
  vertical-align: -0.2em;
}

.esquema ul {
  list-style: none;
  padding-left: 1.6em;
  color: var(--texto-secundario);
}

/* ---------- Tema sin texto ---------- */
.vacio {
  padding: var(--espacio-8) var(--espacio-6);
  background: var(--fondo-superficie);
  border: 1px dashed var(--borde-campo);
  border-radius: var(--radio-l);
  text-align: center;
}

.vacio h2 {
  font-size: var(--titulo-3);
  margin-bottom: var(--espacio-2);
}

.vacio p {
  color: var(--texto-secundario);
  font-size: var(--texto-m);
}

/* ---------- Anterior / siguiente ---------- */
.paginacion-temas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--espacio-4);
  margin-top: var(--espacio-12);
}

.paginacion-temas a {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  padding: var(--espacio-4);
  background: var(--fondo-superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-l);
  color: var(--texto);
  text-decoration: none;
}

.pagina-siguiente {
  grid-column: -2;
  flex-direction: row-reverse;
  text-align: right;
}

.pagina-texto {
  display: grid;
  min-width: 0;
}

.pagina-rotulo {
  font-size: var(--texto-s);
  font-weight: 700;
  color: var(--texto-secundario);
}

.pagina-titulo {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@media (hover: hover) {
  .paginacion-temas a:hover {
    border-color: var(--propio-borde);
    box-shadow: var(--sombra-m);
  }
}

/* ---------- Barra de subrayado (abajo, al seleccionar texto) ---------- */
.barra-subrayado {
  position: fixed;
  left: 50%;
  bottom: calc(var(--espacio-4) + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--espacio-1);
  width: max-content;
  max-width: calc(100% - 2 * var(--espacio-4));
  padding: var(--espacio-2);
  background: var(--pizarra-800);
  border-radius: var(--radio-xl);
  box-shadow: var(--sombra-m);
  --anillo-foco: var(--pizarra-0);
}


.boton-color {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  min-height: var(--zona-tactil);
  padding: 0 var(--espacio-3);
  background: transparent;
  border: none;
  border-radius: var(--radio-total);
  color: var(--pizarra-0);
  font-size: var(--texto-s);
  font-weight: 700;
  cursor: pointer;
}

@media (hover: hover) {
  .boton-color:hover {
    background: var(--pizarra-700);
  }
}

.muestra-color {
  width: 18px;
  height: 18px;
  border-radius: var(--radio-total);
  border: 2px solid var(--pizarra-0);
}

[data-color="amarillo"] .muestra-color { background: var(--subrayado-amarillo); }
[data-color="rosa"] .muestra-color     { background: var(--subrayado-rosa); }
[data-color="verde"] .muestra-color    { background: var(--subrayado-verde); }


/* ---------- Títulos de los apartados: Lexend, como el título del tema ---------- */
/* (Lexend 700 y color de texto vienen de la regla general h1, h2, h3) */

.apartado h2 {
  font-size: 1.45em;
  line-height: 1.25;
}

.apartado h3 {
  font-size: 1.18em;
  margin-top: var(--espacio-6);  /* más aire antes de cada subepígrafe */
}

/* ---------- Sangría de comienzo de párrafo, como en los PDF ---------- */
/* Solo en los párrafos sueltos; dentro de una lista no hace falta. */
.apartado p.anotable {
  text-indent: 1.5em;
}

.apartado li p.anotable {
  text-indent: 0;
}

/* ---------- Marcas de las listas, como en los PDF ---------- */
.lista-punto {
  list-style-type: disc;
}

.apartado li::marker {
  color: var(--morado-700);      /* la viñeta en morado: se localiza antes cada punto */
}

.lista-norma > li::marker {
  content: "▪  ";                /* normativa: una ley, decreto, orden o instrucción */
}

.lista-punto .lista-punto {
  list-style-type: circle;   /* ○ en el segundo nivel */
}

.lista-medio > li::marker {
  content: "·  ";            /* punto medio, como en los PDF */
  font-weight: 700;
  font-size: 1.4em;          /* si no, se queda en una mota */
}

.lista-flecha > li::marker {
  content: "→  ";
  color: var(--morado-600);
}

.lista-letras > li::marker {
  content: counter(list-item, lower-alpha) ")  ";
}

.lista-romanos > li::marker {
  content: counter(list-item, lower-roman) ")  ";
}

.lista-letras-mayus > li::marker {
  content: counter(list-item, upper-alpha) ".  ";
  font-weight: 700;
}

.lista-letras-mayus-parentesis > li::marker {
  content: counter(list-item, upper-alpha) ")  ";
  font-weight: 700;
}

/* ---------- Cuadros comparativos (tema 1: modelo clínico y pedagógico) ---------- */
.caja-tabla {
  margin-top: var(--espacio-4);
  overflow-x: auto;              /* en un móvil muy estrecho, se desliza el cuadro, no la página */
}

* + .caja-tabla,
.caja-tabla + * {
  margin-top: var(--espacio-4);
}

.tabla-tema {
  width: 100%;
  border-collapse: collapse;
  background: var(--fondo-superficie);
  line-height: 1.4;
}

.tabla-tema th,
.tabla-tema td {
  padding: var(--espacio-2) var(--espacio-3);
  border: 1px solid var(--borde);
  text-align: left;
  vertical-align: top;
}

.tabla-tema thead th {
  background: var(--morado-50);
  color: var(--morado-800);
  font-family: var(--fuente-titulos);
  border-bottom: 2px solid var(--morado-600);
}

.tabla-tema tbody th {
  font-weight: 700;
  width: 28%;
}

.tabla-tema .bloque + .bloque {
  margin-top: 0;
}

/* En el móvil no caben tres columnas: cada fila se apila como una tarjeta */
@media screen and (max-width: 600px) {
  .tabla-tema thead {
    position: absolute;          /* oculta a la vista, no al lector de pantalla */
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .tabla-tema,
  .tabla-tema tbody,
  .tabla-tema tr,
  .tabla-tema th,
  .tabla-tema td {
    display: block;
    width: auto;
  }

  .tabla-tema tr {
    border: 1px solid var(--borde);
    border-left: 3px solid var(--morado-600);
  }

  .tabla-tema tr + tr {
    margin-top: var(--espacio-3);
  }

  .tabla-tema th,
  .tabla-tema td {
    border: none;
  }

  .tabla-tema tbody th {
    width: auto;
    background: var(--morado-50);
  }

  .tabla-tema td::before {
    content: attr(data-columna) ": ";
    font-weight: 700;
    color: var(--morado-800);
  }
}

@media print {
  .caja-tabla {
    overflow: visible;
    break-inside: avoid;           /* un cuadro corto no se parte en dos páginas */
  }
}

/* ---------- Panel de datos: tiempo real ---------- */
.campo-tiempo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-2) var(--espacio-4);
  margin-top: var(--espacio-4);
  border: none;
  font-size: var(--texto-s);
}

.campo-tiempo legend {
  width: 100%;
  margin-bottom: var(--espacio-2);
  font-weight: 700;
}

.campo-tiempo label {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
}

.campo-tiempo input {
  width: 4.5rem;
  min-height: var(--zona-tactil);
  padding: var(--espacio-2) var(--espacio-3);
  font-size: var(--texto-m);
  font-variant-numeric: tabular-nums;
  background: var(--fondo-superficie);
  border: 1px solid var(--borde-campo);
  border-radius: var(--radio-m);
}

.tiempo-real {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--espacio-3);
  margin-top: var(--espacio-2);
  font-size: var(--texto-s);
}

.boton-texto {
  min-height: var(--zona-tactil);
  padding: 0;
  background: none;
  border: none;
  color: var(--enlace);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ---------- Ficha resumen: tarjeta de estudio con color ---------- */
/* Cada sección tiene su color. --chip (fondo de la etiqueta),
   --chip-texto, --tinta (flechas y filete) y --resalte (rotulador
   bajo las palabras en negrita). */
.ficha-morado   { --chip: var(--morado-800);  --chip-texto: var(--pizarra-0);   --tinta: var(--morado-600);   --resalte: var(--morado-100); }
.ficha-turquesa { --chip: var(--turquesa-200); --chip-texto: var(--pizarra-800); --tinta: var(--turquesa-600); --resalte: var(--turquesa-100); }
.ficha-rosa     { --chip: var(--rosa-200);    --chip-texto: var(--pizarra-800); --tinta: var(--rosa-600);     --resalte: var(--rosa-100); }
.ficha-ambar    { --chip: var(--estado-1);    --chip-texto: var(--pizarra-800); --tinta: var(--estado-1-borde); --resalte: var(--subrayado-amarillo); }
.ficha-verde    { --chip: var(--subrayado-verde); --chip-texto: var(--pizarra-800); --tinta: var(--estado-2-borde); --resalte: var(--subrayado-verde); }

.panel-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-2) var(--espacio-4);
  margin-bottom: var(--espacio-3);
}

.panel-cabecera .panel-titulo {
  margin-bottom: 0;
}

.ficha {
  overflow: hidden;
  background: var(--fondo-superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-l);
  font-size: var(--texto-s);
  line-height: 1.5;
}

.ficha-cabecera {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--espacio-1) var(--espacio-4);
  padding: var(--espacio-3) var(--espacio-4);
  background: var(--fondo-suave);
  border-bottom: 4px solid var(--turquesa-400);
}

.ficha-marca,
.ficha-numero {
  font-family: var(--fuente-titulos);
  font-weight: 700;
}

.ficha-marca span {
  color: var(--marca);
}

.ficha-numero {
  color: var(--marca);
}

.ficha-titulo {
  width: 100%;
  font-size: var(--texto-xs);
  color: var(--texto-secundario);
}

/* Idea clave: banda morada de lado a lado */
.ficha-idea {
  padding: var(--espacio-3) var(--espacio-4);
  background: var(--morado-800);
  color: var(--pizarra-0);
  font-size: var(--texto-m);
}

.ficha-idea strong {
  color: var(--turquesa-200);
}

.ficha-secciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--espacio-3);
  padding: var(--espacio-4);
}

.ficha-seccion {
  padding: var(--espacio-3);
  border-top: 3px solid var(--tinta);
  border-radius: var(--radio-s);
  background: var(--fondo-superficie);
  box-shadow: var(--sombra-s);
  break-inside: avoid;
}

/* Etiqueta de color, como las de los esquemas de la autora */
.ficha-etiqueta {
  display: inline-block;
  margin-bottom: var(--espacio-2);
  padding: var(--espacio-1) var(--espacio-3);
  background: var(--chip);
  color: var(--chip-texto);
  border-radius: var(--radio-s);
  font-size: var(--texto-s);
  font-weight: 700;
  line-height: 1.3;
}

.ficha-seccion > p + p {
  margin-top: var(--espacio-2);
}

.ficha ul,
.ficha ol {
  padding-left: 1.4em;
}

.ficha li + li {
  margin-top: var(--espacio-1);
}

.ficha .lista-flecha > li::marker {
  color: var(--tinta, var(--morado-600));
  font-weight: 700;
}

.ficha .lista-letras-mayus > li::marker {
  color: var(--tinta);
}

/* Negritas con efecto rotulador del color de la sección */
.ficha-seccion strong {
  background: linear-gradient(transparent 55%, var(--resalte) 55%);
  padding: 0 0.1em;
}


/* Índice de la primera página del PDF: solo al imprimir */
.indice-impresion {
  display: none;
}


/* =========================================================
   10 bis. USUARIAS: CABECERA, POMODORO, PERFIL Y STORY
   ========================================================= */

/* ---------- Botones generales ---------- */
.boton-principal,
.boton-secundario,
.boton-peligro {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-2);
  min-height: var(--zona-tactil);
  padding: 0 var(--espacio-4);
  border-radius: var(--radio-total);
  font-size: var(--texto-s);
  font-weight: 700;
  cursor: pointer;
  transition: background var(--duracion-rapida) var(--curva),
              transform var(--duracion-rapida) var(--curva);
}

.boton-principal {
  background: var(--marca);
  color: var(--texto-sobre-marca);
  border: 1px solid var(--marca);
}

.boton-secundario {
  background: var(--fondo-superficie);
  color: var(--texto);
  border: 1px solid var(--borde-campo);
}

.boton-peligro {
  background: var(--estado-0-borde);
  color: var(--pizarra-0);
  border: 1px solid var(--estado-0-borde);
}

.boton-principal:active,
.boton-secundario:active,
.boton-peligro:active {
  transform: scale(0.98);
}

@media (hover: hover) {
  .boton-principal:hover { background: var(--morado-900); }
  .boton-secundario:hover { background: var(--fondo-suave); }
}

.boton-icono {
  display: inline-grid;
  place-items: center;
  width: var(--zona-tactil);
  height: var(--zona-tactil);
  background: transparent;
  border: none;
  border-radius: var(--radio-total);
  color: var(--texto-secundario);
  cursor: pointer;
}

@media (hover: hover) {
  .boton-icono:hover { background: var(--fondo-suave); color: var(--texto); }
}

.titulo-con-accion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-2) var(--espacio-4);
  margin-bottom: var(--espacio-4);
}

.titulo-con-accion h2 {
  margin-bottom: 0;
}

/* ---------- Herramientas de la cabecera ---------- */
.barra-superior {
  display: flex;
  justify-content: flex-end;
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: var(--espacio-3) var(--espacio-4) 0;
}

.herramientas-cabecera {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
}

.boton-cabecera {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-1);
  min-width: var(--zona-tactil);
  min-height: var(--zona-tactil);
  padding: 0 var(--espacio-3);
  background: var(--fondo-superficie);
  border: 1px solid var(--borde-campo);
  border-radius: var(--radio-total);
  color: var(--texto);
  text-decoration: none;
  cursor: pointer;
}

.boton-cabecera .icono {
  color: var(--marca);
}

.boton-cabecera[aria-current="page"] {
  background: var(--morado-50);
  border-color: var(--morado-600);
}

@media (hover: hover) {
  .boton-cabecera:hover { border-color: var(--morado-600); }
}

.pomodoro-tiempo {
  font-family: var(--fuente-titulos);
  font-weight: 700;
  font-size: var(--texto-s);
  font-variant-numeric: tabular-nums;
}

.pomodoro-tiempo:empty {
  display: none;
}

/* En marcha: morado si te estás concentrando, turquesa si descansas */
.boton-pomodoro.en-marcha {
  background: var(--marca);
  border-color: var(--marca);
  color: var(--texto-sobre-marca);
}

.boton-pomodoro.en-marcha .icono {
  color: var(--turquesa-200);
}

.boton-pomodoro.en-marcha[data-fase="descanso"] {
  background: var(--turquesa-200);
  border-color: var(--turquesa-600);
  color: var(--pizarra-800);
}

.boton-pomodoro.en-marcha[data-fase="descanso"] .icono {
  color: var(--turquesa-700);
}

/* ---------- Panel del pomodoro ---------- */
.panel-pomodoro {
  position: absolute;
  top: calc(100% + var(--espacio-2));
  right: 0;
  z-index: 30;
  width: min(320px, calc(100vw - 2 * var(--espacio-4)));
  padding: var(--espacio-4);
  background: var(--fondo-superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-l);
  box-shadow: var(--sombra-m);
  text-align: center;
}

.pomodoro-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
}

.pomodoro-cabecera h2 {
  font-size: var(--titulo-3);
}

.pomodoro-fase {
  display: inline-block;
  margin-top: var(--espacio-2);
  padding: var(--espacio-1) var(--espacio-3);
  border-radius: var(--radio-total);
  background: var(--morado-100);
  color: var(--morado-800);
  font-size: var(--texto-s);
  font-weight: 700;
}

.panel-pomodoro[data-fase="descanso"] .pomodoro-fase {
  background: var(--turquesa-100);
  color: var(--turquesa-800);
}

.pomodoro-reloj {
  margin: var(--espacio-2) 0 var(--espacio-3);
  font-family: var(--fuente-titulos);
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.pomodoro-botones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--espacio-2);
}

.pomodoro-ritmo {
  margin-top: var(--espacio-4);
  border: none;
  text-align: left;
  font-size: var(--texto-s);
}

.pomodoro-ritmo legend {
  font-weight: 700;
}

.pomodoro-ritmo label {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  min-height: var(--zona-tactil);
}

.pomodoro-ritmo input {
  width: 20px;
  height: 20px;
  accent-color: var(--marca);
}

.pomodoro-hoy {
  margin-top: var(--espacio-2);
  font-size: var(--texto-s);
  color: var(--texto-secundario);
}

/* En pantallas estrechas, la marca se queda solo con el logo */
@media (max-width: 480px) {
  .marca-pequena > span {
    display: none;
  }
}

/* ---------- Mi perfil ---------- */
.formulario {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--espacio-4);
}

.campo-vertical {
  display: grid;
  gap: var(--espacio-1);
  font-size: var(--texto-s);
  font-weight: 700;
}

.campo-vertical input {
  min-height: var(--zona-tactil);
  padding: var(--espacio-2) var(--espacio-3);
  font-size: var(--texto-m);
  font-weight: 400;
  background: var(--fondo-superficie);
  border: 1px solid var(--borde-campo);
  border-radius: var(--radio-m);
}

.aviso-guardado {
  min-height: 1.5em;
  margin-top: var(--espacio-2);
  font-size: var(--texto-s);
  color: var(--texto-secundario);
}

.estadisticas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: var(--espacio-3);
}

.estadisticas > div {
  padding: var(--espacio-3) var(--espacio-4);
  background: var(--fondo-suave);
  border-radius: var(--radio-m);
}

.estadisticas dt {
  font-size: var(--texto-s);
  color: var(--texto-secundario);
}

.estadisticas dd {
  font-family: var(--fuente-titulos);
  font-size: var(--titulo-2);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.tarjeta > p + p {
  margin-top: var(--espacio-2);
}

.botones-copia {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
  margin-top: var(--espacio-4);
}

/* El botón "Recuperar una copia" es una etiqueta que abre el selector de archivos */
.boton-archivo:focus-within {
  outline: 3px solid var(--anillo-foco);
  outline-offset: 2px;
}

.confirmacion {
  margin-top: var(--espacio-4);
  padding: var(--espacio-4);
  background: var(--estado-0-fondo);
  border: 1px solid var(--borde);
  border-left: 4px solid var(--estado-0-borde);
  border-radius: var(--radio-m);
}

/* ---------- Ventana "Compartir mi éxito" ---------- */
.dialogo-historia {
  width: min(480px, calc(100vw - 2 * var(--espacio-4)));
  max-height: calc(100vh - 2 * var(--espacio-4));
  margin: auto;
  padding: var(--espacio-6);
  background: var(--fondo-superficie);
  color: var(--texto);
  border: none;
  border-radius: var(--radio-xl);
  box-shadow: var(--sombra-m);
}

.dialogo-historia::backdrop {
  background: rgba(49, 63, 75, 0.6);
}

.dialogo-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--espacio-2);
}

.dialogo-cabecera h2 {
  font-size: var(--titulo-3);
}

.historia-vista {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 55vh;
  aspect-ratio: 9 / 16;
  margin: 0 auto var(--espacio-4);
  background: var(--marca);
  border-radius: var(--radio-m);
  box-shadow: var(--sombra-s);
}

.dialogo-botones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--espacio-2) var(--espacio-4);
}


/* =========================================================
   10 ter. PROGRAMACIÓN Y PLAN DE APOYO (programacion.html)
   Cada trimestre lleva el color de una ficha (morado,
   turquesa, rosa): --chip, --chip-texto y --tinta.
   ========================================================= */

/* El curso de un vistazo: un bloque por trimestre */
.mapa-curso {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--espacio-4);
  margin-top: var(--espacio-6);
}

.mapa-trimestre {
  padding-top: var(--espacio-3);
  border-top: 4px solid var(--tinta);
}

.mapa-udis {
  list-style: none;
  display: grid;
  gap: var(--espacio-1);
}

.mapa-udis a {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  min-height: var(--zona-tactil);
  padding: var(--espacio-1) var(--espacio-2);
  border-radius: var(--radio-s);
  color: var(--texto);
  text-decoration: none;
  line-height: 1.3;
}

@media (hover: hover) {
  .mapa-udis a:hover {
    background: var(--fondo-suave);
    text-decoration: underline;
  }
}

.mapa-numero {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  background: var(--chip);
  color: var(--chip-texto);
  border-radius: var(--radio-total);
  font-family: var(--fuente-titulos);
  font-size: var(--texto-s);
  font-weight: 700;
}

/* Base metodológica */
.base-metodologica .titulo-con-accion h2 {
  margin-bottom: 0;
}

.base-metodologica .insignia {
  margin-top: 0;
}

.base-metodologica > .ayuda {
  margin-top: var(--espacio-2);
}

.bloque-base {
  max-width: 72ch;
}

.bloque-base + .bloque-base {
  margin-top: var(--espacio-6);
}

.bloque-base h3 {
  font-size: var(--texto-l);
  margin-bottom: var(--espacio-2);
}

.bloque-base p + p,
.bloque-base p + ul {
  margin-top: var(--espacio-2);
}

.lista-base {
  padding-left: 1.4em;
}

.lista-base li + li {
  margin-top: var(--espacio-2);
}

.lista-base li::marker {
  color: var(--morado-700);
}

/* Las 12 UDIs */
.leyenda-efemerides .icono {
  color: var(--marca);
}

.lista-udis {
  display: grid;
  gap: var(--espacio-8);
}

.trimestre {
  display: grid;
  gap: var(--espacio-4);
}

.trimestre-titulo {
  font-size: var(--titulo-3);
}

.udi {
  padding: var(--espacio-6);
  background: var(--fondo-superficie);
  border: 1px solid var(--borde);
  border-left: 6px solid var(--tinta);
  border-radius: var(--radio-l);
  box-shadow: var(--sombra-s);
  scroll-margin-top: var(--espacio-4);
}

.udi-pendiente {
  background: var(--fondo-suave);
  box-shadow: none;
}

.udi-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-2) var(--espacio-3);
}

.udi-cabecera .ficha-etiqueta {
  margin-bottom: 0;
}

.udi-cabecera .insignia {
  margin-top: 0;
}

.udi-fechas {
  color: var(--texto-secundario);
  font-size: var(--texto-s);
  font-variant-numeric: tabular-nums;
}

.udi-titulo {
  margin-top: var(--espacio-3);
  font-size: var(--titulo-3);
}

.udi-foco {
  margin-top: var(--espacio-1);
  color: var(--texto-secundario);
}

.udi-datos {
  display: grid;
  gap: var(--espacio-4);
  margin-top: var(--espacio-4);
  max-width: 72ch;
}

.udi-dato dt {
  font-family: var(--fuente-titulos);
  font-size: var(--texto-s);
  font-weight: 700;
  margin-bottom: var(--espacio-1);
}

.udi-dato dd p + p {
  margin-top: var(--espacio-2);
}

.efemerides {
  list-style: none;
  display: grid;
  gap: var(--espacio-1);
  font-size: var(--texto-s);
}

.efemerides li {
  padding-left: calc(1.25em + var(--espacio-2));  /* alineadas con las destacadas */
}

.efemerides .efemeride-destacada {
  display: flex;
  gap: var(--espacio-2);
  padding-left: 0;
}

.efemeride-destacada .icono {
  margin-top: 0.15em;
  color: var(--marca);
}

/* Biblioteca */
.subtitulo-biblioteca {
  font-size: var(--texto-l);
  margin-bottom: var(--espacio-3);
}

.lista-idoneos {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--espacio-3);
}

.lista-idoneos > li {
  padding: var(--espacio-3) var(--espacio-4);
  background: var(--fondo-suave);
  border-radius: var(--radio-m);
  font-size: var(--texto-s);
}

.idoneo-titulo {
  margin-bottom: var(--espacio-1);
  font-size: var(--texto-m);
}

.idoneo-titulo cite {
  font-weight: 700;
}

.idoneo-serie,
.catalogo-autoria,
.catalogo-nota {
  color: var(--texto-secundario);
}

.catalogo-nota {
  font-style: italic;
}

.marca-udi {
  display: inline-block;
  padding: 0 var(--espacio-2);
  background: var(--morado-100);
  color: var(--morado-800);
  border-radius: var(--radio-total);
  font-size: var(--texto-xs);
  font-style: normal;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

@media (hover: hover) {
  .marca-udi:hover {
    text-decoration: underline;
  }
}

.catalogo {
  margin-top: var(--espacio-6);
}

.catalogo summary {
  display: flex;
  align-items: center;
  min-height: var(--zona-tactil);
  font-family: var(--fuente-titulos);
  font-size: var(--texto-l);
  font-weight: 700;
  cursor: pointer;
}

.catalogo summary::before {
  content: "▸";
  margin-right: var(--espacio-2);
  color: var(--marca);
}

.catalogo[open] summary::before {
  content: "▾";
}

.catalogo summary::-webkit-details-marker {
  display: none;
}

.lista-catalogo {
  columns: 2 300px;
  column-gap: var(--espacio-8);
  padding-left: 1.4em;
  margin-top: var(--espacio-3);
  font-size: var(--texto-s);
}

.lista-catalogo li {
  break-inside: avoid;
  padding: var(--espacio-1) 0;
}

.lista-catalogo li::marker {
  color: var(--morado-700);
}

/* Lista de supuestos (supuestos.html) */
.lista-supuestos {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: var(--espacio-4);
}

.tarjeta-supuesto {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  border-left: 6px solid var(--propio-borde);
}

.titulo-supuesto {
  font-family: var(--fuente-titulos);
  font-size: var(--titulo-3);
  font-weight: 700;
  line-height: 1.25;
  color: var(--texto);
  text-decoration: none;
}

@media (hover: hover) {
  .titulo-supuesto:hover {
    color: var(--enlace);
    text-decoration: underline;
  }
}

.datos-supuesto {
  display: grid;
  gap: var(--espacio-1);
  margin-top: var(--espacio-2);
  font-size: var(--texto-s);
}

.datos-supuesto > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--espacio-2);
}

.datos-supuesto dt {
  font-weight: 700;
}

.datos-supuesto dt::after {
  content: ":";
}

@media (max-width: 480px) {
  .udi {
    padding: var(--espacio-4);
  }
}

@media print {
  .udi,
  .lista-idoneos > li {
    box-shadow: none;
    break-inside: avoid;
  }

  .trimestre-titulo {
    break-after: avoid;
  }
}


/* =========================================================
   10 quater. BIBLIOGRAFÍA Y NORMATIVA
   (bibliografia.html y normativa.html)
   ========================================================= */

/* Índice: un enlace a cada sección, en píldoras */
.indice-pagina ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
}

.indice-pagina a {
  display: inline-flex;
  align-items: center;
  min-height: var(--zona-tactil);
  padding: var(--espacio-1) var(--espacio-4);
  background: var(--fondo-superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-total);
  color: var(--enlace);
  font-size: var(--texto-s);
  font-weight: 700;
  text-decoration: none;
  line-height: 1.3;
}

@media (hover: hover) {
  .indice-pagina a:hover {
    border-color: var(--morado-600);
    text-decoration: underline;
  }
}

.secciones-referencias {
  display: grid;
  gap: var(--espacio-6);
}

/* Al saltar desde el índice, que el título no quede pegado arriba */
.seccion-referencias {
  scroll-margin-top: var(--espacio-4);
}

.seccion-referencias > .antetitulo {
  display: inline-block;
  margin-bottom: var(--espacio-1);
  color: var(--enlace);
  text-decoration: none;
}

@media (hover: hover) {
  .seccion-referencias > .antetitulo:hover {
    text-decoration: underline;
  }
}

.seccion-referencias h2 {
  margin-bottom: var(--espacio-2);
}

.seccion-referencias > .ayuda {
  margin-bottom: 0;
}

/* «Infantil», «Primaria», «Supuesto 1 · …» */
.titulo-grupo {
  margin-top: var(--espacio-6);
  padding-top: var(--espacio-4);
  border-top: 1px solid var(--borde);
  font-size: var(--texto-l);
}

/* «Bibliografía» y «Webgrafía» */
.subtitulo-referencias {
  margin-top: var(--espacio-4);
  font-size: var(--texto-s);
  color: var(--texto-secundario);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lista-referencias {
  list-style: none;
  display: grid;
  gap: var(--espacio-3);
  margin-top: var(--espacio-3);
  max-width: 80ch;
}

.lista-referencias > li {
  padding-left: var(--espacio-4);
  border-left: 3px solid var(--morado-200);
}

.lista-referencias a {
  color: var(--enlace);
}

.lista-referencias a .icono {
  width: 1em;
  height: 1em;
  margin-left: var(--espacio-1);
  vertical-align: -0.1em;
}

.dominio {
  color: var(--texto-secundario);
  font-size: var(--texto-s);
}

/* «En: Tema 1 · Tema 16 · Supuesto 1» (también en el quiz) */
.linea-fuentes {
  margin-top: var(--espacio-1);
  color: var(--texto-secundario);
  font-size: var(--texto-s);
}

.linea-fuentes a {
  color: var(--enlace);
  font-weight: 700;
}

/* ---------- Normas ---------- */
.lista-normas > li[data-estado="derogada"],
.lista-normas > li[data-estado="historica"] {
  border-left-color: var(--pizarra-300);
}

.lista-normas > li[data-estado="tramitacion"] {
  border-left-color: var(--estado-1-borde);
}

.lista-normas > li[data-estado="completar"] {
  border-left-color: var(--turquesa-600);
  border-left-style: dashed;
}

.norma-siglas {
  display: inline-block;
  padding: 0 var(--espacio-2);
  background: var(--morado-100);
  color: var(--morado-800);
  border-radius: var(--radio-s);
  font-size: var(--texto-xs);
  font-weight: 700;
  white-space: nowrap;
}

.norma .insignia {
  display: inline-block;
  margin-top: var(--espacio-1);
}

.norma-nota {
  margin-top: var(--espacio-1);
  font-size: var(--texto-s);
}

/* Insignias de estado de una norma */
.insignia-derogada {
  background: var(--crema-200);
  color: var(--pizarra-800);
}

.insignia-tramitacion {
  background: var(--estado-1-fondo);
  color: var(--pizarra-800);
  box-shadow: inset 0 0 0 1px var(--estado-1-borde);
}

.insignia-completar {
  background: var(--turquesa-50);
  color: var(--turquesa-700);
  box-shadow: inset 0 0 0 1px var(--turquesa-600);
}

/* Leyenda de las insignias, bajo el título de la página */
.leyenda-normas {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2) var(--espacio-6);
  margin-top: var(--espacio-2);
  font-size: var(--texto-s);
  color: var(--texto-secundario);
}

.leyenda-normas .insignia {
  margin-right: var(--espacio-1);
}


/* =========================================================
   10 quinquies. ¡HAZTE UN QUIZ! (quiz.html)
   ========================================================= */
.contenedor-quiz {
  max-width: 720px;
}

.quiz-contador {
  font-family: var(--fuente-titulos);
  font-weight: 700;
  color: var(--texto-secundario);
  font-variant-numeric: tabular-nums;
}

.quiz .barra {
  display: block;
  margin: var(--espacio-2) 0 var(--espacio-6);
}

.quiz .barra-relleno {
  display: block;
  transition: width var(--duracion-media) var(--curva);
}

.quiz-grupo {
  border: none;
}

.quiz-enunciado {
  margin-bottom: var(--espacio-4);
  font-family: var(--fuente-titulos);
  font-size: var(--titulo-3);
  font-weight: 700;
  line-height: 1.3;
}

.quiz-opciones {
  display: grid;
  gap: var(--espacio-3);
}

/* Cada respuesta es una tarjeta entera que se puede pulsar */
.quiz-opcion {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  min-height: var(--zona-tactil);
  padding: var(--espacio-3) var(--espacio-4);
  background: var(--fondo-superficie);
  border: 2px solid var(--borde-campo);
  border-radius: var(--radio-m);
  cursor: pointer;
  line-height: 1.4;
  transition: border-color var(--duracion-rapida) var(--curva),
              background var(--duracion-rapida) var(--curva);
}

.quiz-opcion input {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  accent-color: var(--marca);
}

.quiz-opcion-texto {
  flex: 1;
}

@media (hover: hover) {
  .quiz-opcion:hover {
    border-color: var(--morado-600);
  }
}

.quiz-opcion:has(input:checked) {
  border-color: var(--marca);
  background: var(--morado-50);
}

.quiz-opcion:has(input:focus-visible) {
  outline: 3px solid var(--anillo-foco);
  outline-offset: 2px;
}

.quiz-opcion:has(input:disabled) {
  cursor: default;
}

/* Después de comprobar: ✓ la buena, ✗ la elegida si no lo era.
   No solo color: también el icono y el texto para el lector. */
.quiz-opcion[data-resultado="acierto"] {
  border-color: var(--estado-2-borde);
  background: var(--estado-2-fondo);
}

.quiz-opcion[data-resultado="fallo"] {
  border-color: var(--estado-0-borde);
  background: var(--rosa-50);
}

.quiz-marca {
  width: 24px;
  height: 24px;
  stroke-width: 3;
}

[data-resultado="acierto"] > .quiz-marca { color: var(--estado-2-borde); }
[data-resultado="fallo"] > .quiz-marca { color: var(--estado-0-borde); }

.quiz-feedback {
  margin-top: var(--espacio-4);
}

.quiz-feedback:empty {
  display: none;
}

.quiz-feedback[data-resultado] {
  padding: var(--espacio-3) var(--espacio-4);
  border-left: 4px solid;
  border-radius: var(--radio-m);
}

.quiz-feedback[data-resultado="acierto"] {
  background: var(--estado-2-fondo);
  border-color: var(--estado-2-borde);
}

.quiz-feedback[data-resultado="fallo"] {
  background: var(--rosa-50);
  border-color: var(--estado-0-borde);
}

.quiz-feedback-titular {
  font-weight: 700;
}

.quiz-botones {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--espacio-6);
}

/* ---------- Resultado ---------- */
.quiz-resultado {
  text-align: center;
}

.quiz-nota {
  margin: var(--espacio-2) 0;
  font-family: var(--fuente-titulos);
  font-size: var(--cifra-xl);
  font-weight: 700;
  line-height: 1;
  color: var(--marca);
  font-variant-numeric: tabular-nums;
}

.quiz-resultado h2 {
  justify-content: center;
  font-size: var(--titulo-2);
  margin-bottom: 0;
}

.quiz-resultado h2:focus {
  outline: none; /* recibe el foco al terminar, para que el lector de pantalla lo lea */
}

.quiz-mensaje {
  max-width: 48ch;
  margin: var(--espacio-2) auto 0;
  font-size: var(--texto-l);
}

.quiz-puntos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--espacio-2);
  margin: var(--espacio-6) 0;
}

.quiz-punto {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radio-total);
  background: var(--crema-200);
  color: var(--pizarra-0);
}

.quiz-punto[data-resultado="acierto"] {
  background: var(--marca);
}

.quiz-punto .icono {
  width: 16px;
  height: 16px;
  stroke-width: 3;
}

.quiz-repaso {
  margin-top: var(--espacio-8);
  padding-top: var(--espacio-6);
  border-top: 1px solid var(--borde);
  text-align: left;
}

.quiz-repaso h3 {
  font-size: var(--titulo-3);
  margin-bottom: var(--espacio-1);
}

.quiz-repaso ul {
  list-style: none;
  display: grid;
  gap: var(--espacio-4);
}

.quiz-repaso li {
  padding-left: var(--espacio-4);
  border-left: 3px solid var(--morado-200);
}

.quiz-repaso-pregunta {
  font-weight: 700;
}

/* Bibliografía y normativa, impresas: sin cabecera ni índice,
   y ningún título suelto al pie de una página */
@media print {
  .indice-pagina,
  .cabecera-tema,
  .pie {
    display: none !important;
  }

  .seccion-referencias {
    box-shadow: none;
  }

  .seccion-referencias h2,
  .titulo-grupo,
  .subtitulo-referencias {
    break-after: avoid;
  }

  .lista-referencias > li {
    break-inside: avoid;
  }
}


/* =========================================================
   10 sexies. BOTÓN «SUBIR» (todas las páginas, comun.js)
   Píldora morada abajo a la derecha. Sale al bajar 600 px.
   ========================================================= */
.boton-subir {
  position: fixed;
  right: calc(var(--espacio-4) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--espacio-4) + env(safe-area-inset-bottom, 0px));
  z-index: 15; /* por debajo de la barra de subrayado (20) */
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  min-height: var(--zona-tactil);
  padding: 0 var(--espacio-4);
  background: var(--marca);
  color: var(--texto-sobre-marca);
  border: 2px solid var(--pizarra-0);
  border-radius: var(--radio-total);
  box-shadow: var(--sombra-m);
  font-size: var(--texto-s);
  font-weight: 700;
  cursor: pointer;
}

@media (hover: hover) {
  .boton-subir:hover { background: var(--morado-900); }
}

/* Mientras se subraya un tema, la barra de colores manda: el botón se esconde */
body:has(.barra-subrayado:not([hidden])) .boton-subir {
  display: none;
}

@media print {
  .boton-subir { display: none !important; }
}


/* =========================================================
   11. PREFERENCIAS DE ACCESIBILIDAD
   ========================================================= */

/* Si la persona ha pedido "reducir movimiento" en su sistema */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Modo de alto contraste de Windows: los bordes se mantienen */
@media (forced-colors: active) {
  .punto,
  .boton-estado,
  .ficha-tema,
  .apartado {
    border-color: CanvasText;
  }

  /* Que los subrayados se sigan viendo con colores forzados */
  .subrayado {
    outline: 2px solid Highlight;
  }
}

/* En móvil, tarjetas con menos relleno */
@media (max-width: 480px) {
  .tarjeta {
    padding: var(--espacio-4);
  }
}

/* =========================================================
   12. IMPRESIÓN Y PDF ("Imprimir o guardar PDF")
   Se imprime el tema con sus colores, subrayados y notas,
   sin botones ni índice. Lo que esté abierto (datos, resumen)
   también sale.
   ========================================================= */
/* Encabezado y pie de cada página. Al definirlos nosotras, el navegador
   no imprime los suyos (ni la dirección file://, ni la fecha).
   El número de tema lo añade tema.js. */
@page {
  size: A4;
  margin: 24mm 16mm 20mm;

  @top-left {
    vertical-align: bottom;
    padding-bottom: 3mm;
    border-bottom: 0.5pt solid #e8e2d3;
    font-family: "Lexend", sans-serif;
    font-size: 9pt;
    font-weight: 700;
    color: #551b89;
  }

  @top-right {
    content: "Pedagogía Terapéutica";
    vertical-align: bottom;
    padding-bottom: 3mm;
    border-bottom: 0.5pt solid #e8e2d3;
    font-family: "Atkinson Hyperlegible Next", sans-serif;
    font-size: 9pt;
    color: #606e7a;
  }

  @bottom-right {
    content: "Página " counter(page) " de " counter(pages);
    font-family: "Atkinson Hyperlegible Next", sans-serif;
    font-size: 8.5pt;
    color: #606e7a;
  }
}

/* La primera página es la portada: sin encabezado */
@page :first {
  @top-left { content: ""; border: none; }
  @top-right { content: ""; border: none; }
}

@media print {


  body {
    background: #ffffff;
    -webkit-print-color-adjust: exact; /* que se impriman los fondos */
    print-color-adjust: exact;
  }

  .saltar,
  .barra-superior,
  .dialogo-historia,
  .cabecera-tema,
  .controles-tema,
  .herramientas-tema,
  .aviso-muestra,
  .indice,
  .paginacion-temas,
  .barra-subrayado,
  .campo-velocidad,
  .nota-texto,
  .nota-borrar {
    display: none !important;
  }

  /* Portada: marca, título, leyenda de colores e índice */
  .encabezado-tema::before {
    content: "ApuntoPT";
    display: block;
    margin-bottom: 18pt;
    padding-bottom: 6pt;
    border-bottom: 2pt solid var(--marca);
    font-family: var(--fuente-titulos);
    font-size: 14pt;
    font-weight: 700;
    color: var(--marca);
  }

  .antetitulo {
    font-size: 10pt;
  }

  .titulo-pagina-tema {
    font-size: 17pt;
    margin-bottom: 14pt;
  }

  .indice-impresion {
    display: block;
    margin-top: 18pt;
    padding: 12pt 16pt;
    border: 0.5pt solid var(--borde);
    border-radius: 8pt;
    break-after: page;           /* el tema empieza en la página 2 */
  }

  .indice-impresion h2 {
    margin-bottom: 8pt;
    font-size: 13pt;
  }

  .indice-impresion .esquema {
    font-size: 10.5pt;
  }

  .pagina-tema,
  .encabezado-tema,
  .lectura {
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .disposicion-tema {
    display: block;
  }

  .lectura {
    display: block;              /* en cuadrícula, Chrome reparte peor las páginas */
    font-size: 11pt !important;
    line-height: 1.5;
  }

  .lectura > * + * {
    margin-top: 10pt;            /* el hueco que antes daba la cuadrícula */
  }

  .panel {
    box-shadow: none;
    margin-bottom: 10pt;
    break-inside: avoid;
  }

  .apartado {
    padding: 10pt 12pt;
  }

  /* Nunca se corta un título ni se queda solo al final de la página:
     el título y su etiqueta «Propio / Comodín» van juntos y pegados a su texto. */
  .apartado h2,
  .apartado h3 {
    break-inside: avoid;         /* un título largo no se parte entre dos páginas */
    break-after: avoid;
  }

  .grupo-titulo {
    break-inside: avoid;         /* título + etiqueta: una sola pieza (tema.js) */
    break-after: avoid;          /* y detrás, al menos 3 líneas de su texto */
  }

  .apartado .etiqueta-zona,
  .bloque:has(> h3) {            /* el subepígrafe va dentro de un .bloque */
    break-after: avoid;
  }

  /* El párrafo que presenta una lista («…son:») no se separa de ella */
  .bloque:has(+ ul),
  .bloque:has(+ ol) {
    break-after: avoid;
  }

  /* Los párrafos y puntos largos SÍ pueden seguir en la página siguiente
     (si saltaran enteros dejarían huecos en blanco), pero nunca dejan
     menos de 3 líneas a cada lado del corte. */
  .lectura p,
  .lectura li {
    orphans: 3;
    widows: 3;
  }

  .etiqueta-zona a {
    text-decoration: none;
  }

  /* Imprimir el tema: sin paneles de datos ni ficha */
  #panel-datos,
  #panel-resumen {
    display: none !important;
  }

  /* Imprimir la ficha: solo la ficha, a color, en una página */
  html[data-imprimir="ficha"] .encabezado-tema > :not(#panel-resumen),
  html[data-imprimir="ficha"] .encabezado-tema::before,
  html[data-imprimir="ficha"] #panel-resumen > :not(.resumen-texto),
  html[data-imprimir="ficha"] .disposicion-tema {
    display: none !important;
  }

  html[data-imprimir="ficha"] #panel-resumen {
    display: block !important;
    margin: 0;
    padding: 0;
    border: none;
  }

  html[data-imprimir="ficha"] .ficha {
    font-size: 8.5pt;
    line-height: 1.35;
    border: none;
  }

  html[data-imprimir="ficha"] .ficha-cabecera,
  html[data-imprimir="ficha"] .ficha-idea {
    padding: 6pt 10pt;
  }

  html[data-imprimir="ficha"] .ficha-idea {
    font-size: 10pt;
  }

  /* Columnas "de periódico": las secciones se encajan sin dejar huecos */
  html[data-imprimir="ficha"] .ficha-secciones {
    display: block;
    column-count: 2;
    column-gap: 8pt;
    padding: 8pt 0 0;
  }

  html[data-imprimir="ficha"] .ficha-seccion {
    display: inline-block;
    width: 100%;
    margin-bottom: 8pt;
    padding: 6pt 8pt;
    box-shadow: none;
    border: 0.5pt solid var(--borde);
    border-top: 3pt solid var(--tinta);
  }

  html[data-imprimir="ficha"] .ficha-etiqueta {
    font-size: 9pt;
    margin-bottom: 4pt;
    padding: 2pt 6pt;
  }

  html[data-imprimir="ficha"] .ficha li + li {
    margin-top: 2pt;
  }

  /* La nota se imprime como texto en cursiva; las vacías no salen */
  .nota:has(.nota-impresa:empty) {
    display: none;
  }

  .nota-impresa {
    display: block;
    font-size: 9.5pt;
    font-style: italic;
    color: var(--texto-secundario);
    white-space: pre-wrap;
  }
}


/* =========================================================
   PANTALLA DE ENTRADA (entrar.html)
   Lo primero que se ve sin haber entrado: el logo y una
   tarjeta estrecha con usuario y contraseña.
   ========================================================= */
.pantalla-entrar {
  max-width: 28rem;
}

/* Aquí la marca no es un título (el título es «Entra en ApuntoPT»),
   pero se ve igual que en la portada */
.pantalla-entrar .marca {
  font-family: var(--fuente-titulos);
  font-weight: 700;
}

.pantalla-entrar h1 {
  font-size: var(--titulo-3);
  margin-bottom: var(--espacio-4);
}

.formulario-entrar {
  display: grid;
  gap: var(--espacio-4);
}

.formulario-entrar .ayuda {
  margin-bottom: 0;
}