/* Lectura «Cómo reconocer un correo de phishing» (muestras/phishing/). Se carga después de base.css y usa sus tokens,
   fuentes y componentes (botones, selector segmentado, avisos).
   Índice: 1 ajustes de lectura y tema sepia · 2 barra superior y progreso · 3 panel de ajustes · 4 cabecera y rejilla ·
   5 índice · 6 texto · 7 figura del correo · 8 resumen y preguntas · 9 glosario y definiciones · 10 volver arriba y pie ·
   11 pantallas pequeñas · 12 colores forzados · 13 impresión */

/* 1. Ajustes de lectura. El script del <head> pone en <html> data-tam, data-interlineado, data-ancho y data-theme antes
   de pintar. El ancho va en rem multiplicado por la escala de la letra, así el título, el texto y la figura comparten
   el mismo borde izquierdo y cada línea conserva más o menos los mismos caracteres al agrandar la letra. */
:root {
  --barra-alto: 57px;
  --cabecera-alto: 57px;   /* base.css deja este alto más 16 px de aire al saltar a un ancla */
  --escala: 1;
  --interlineado-lectura: 1.72;
  --ancho-lectura: 38rem;
  --medida-lectura: calc(var(--ancho-lectura) * var(--escala));
}
:root[data-tam="pequeno"] { --escala: .9; }
:root[data-tam="grande"] { --escala: 1.12; }
:root[data-tam="muy-grande"] { --escala: 1.26; }
:root[data-interlineado="compacto"] { --interlineado-lectura: 1.5; }
:root[data-interlineado="amplio"] { --interlineado-lectura: 2; }
:root[data-ancho="estrecho"] { --ancho-lectura: 32rem; }
:root[data-ancho="amplio"] { --ancho-lectura: 46rem; }

/* Tema sepia: papel cálido y tinta parda. html:root pesa más que la regla oscura de base.css, que también se aplica
   cuando el sistema está en oscuro. Contraste sobre el fondo: tinta 13,8:1, texto apagado 5,7:1, rojo de texto 6,9:1. */
html:root[data-theme="sepia"] {
  --bg: #f7f0e3; --surface: #efe5d2; --surface-2: #e8dcc5; --ink: #2d2118; --ink-2: #574536; --muted: #6f5b48;
  --rule: #e1d3bb; --track: #dccbb0; --control: #8d7660; --accent: #c8283d; --accent-ink: #a01c2f;
  --teal: #1f7a6c; --teal-ink: #17604f; --tint: #f5e1d6; --seleccion: #eec6b4; --velo: rgba(45, 33, 24, .6);
  --shadow: 0 1px 2px rgba(45, 33, 24, .07), 0 12px 32px rgba(45, 33, 24, .1);
  --shadow-sm: 0 1px 2px rgba(45, 33, 24, .07), 0 4px 14px rgba(45, 33, 24, .06);
  color-scheme: light;
}

/* Elementos que reciben el foco desde el script (la cabecera, los títulos de los paneles, cada pregunta): sin contorno,
   porque no se pulsan; el contorno rojo queda para los controles. */
.lectura-cabecera:focus, .panel-titulo:focus, .glosario-titulo:focus, .pregunta:focus, .respuesta:focus, .definicion:focus { outline: none; }

/* 2. Barra superior: volver a los trabajos, título al bajar, glosario y ajustes; el progreso va en su borde inferior */
.barra-lectura { position: sticky; top: 0; z-index: 40; background: var(--bg); border-bottom: 1px solid var(--rule); }
.barra-interior { position: relative; display: flex; align-items: center; gap: 8px 16px; min-height: 56px; }
.barra-volver {
  flex: none; display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding-right: 4px;
  font: 600 .9rem/1.2 var(--font-display); color: var(--ink-2); text-decoration: none;
}
.barra-volver::before { content: ""; width: 7px; height: 7px; margin-left: 3px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); flex: none; }
/* Los :hover de esta hoja van solo con ratón: en una pantalla táctil se quedan pegados después de tocar */
@media (hover: hover) and (pointer: fine) {
  .barra-volver:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); }
}
/* Al pulsar, el mismo aspecto que con el ratón encima: sin esta regla, el a:active de base.css lo pondría en rojo */
.barra-volver:active { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); }
.barra-titulo {
  flex: 1 1 auto; min-width: 0; margin: 0; text-align: center;
  font: 600 .88rem/1.2 var(--font-display); color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  visibility: hidden; opacity: 0; transition: opacity .25s ease, visibility 0s linear .25s;
}
.barra-lectura.con-titulo .barra-titulo { visibility: visible; opacity: 1; transition: opacity .25s ease; }
.barra-acciones { flex: none; display: flex; align-items: center; gap: 6px; margin-left: auto; }
.barra-boton { gap: 0; }
.barra-boton[aria-expanded="true"], .barra-boton[aria-expanded="true"]:hover { color: var(--bg); background: var(--ink); border-color: var(--ink); }
.progreso {
  position: absolute; left: 0; bottom: -1px; display: block; width: 100%; height: 3px; margin: 0;
  border: 0; border-radius: 0; background: transparent; color: var(--accent);
  -webkit-appearance: none; appearance: none;
}
.progreso::-webkit-progress-bar { background: transparent; }
.progreso::-webkit-progress-value { background: var(--accent); }
.progreso::-moz-progress-bar { background: var(--accent); }

/* 3. Panel de ajustes: cuelga de la barra, a la derecha, y no tapa el texto que cambia */
.panel {
  position: absolute; top: calc(100% + 6px); right: var(--margen); z-index: 45;
  width: min(25.5rem, calc(100vw - 24px));
  max-height: calc(100vh - var(--barra-alto) - 24px); max-height: calc(100dvh - var(--barra-alto) - 24px);
  overflow-y: auto; overscroll-behavior: contain;
  display: grid; gap: 18px; padding: 20px;
  color: var(--ink); background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radio-grande); box-shadow: var(--shadow);
}
.panel-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel-titulo { font: 700 1.08rem/1.25 var(--font-display); }
.ajuste { display: grid; gap: 8px; justify-items: start; }
.ajuste-etiqueta { font: 700 .88rem/1.3 var(--font-display); color: var(--ink-2); }
.panel .segmentado { background: var(--surface); border-color: transparent; }
.panel-pie { display: grid; gap: 10px; justify-items: start; padding-top: 16px; border-top: 1px solid var(--rule); }
.panel-pie .nota { font-size: .84rem; }
/* Sale de su botón, arriba a la derecha: fundido y escala desde .97. Se cierra al instante. */
.panel-ajustes { transform-origin: top right; }
.panel-ajustes.abierto { transition: opacity var(--dur-entrar) var(--ease-out), transform var(--dur-entrar) var(--ease-out); }
@starting-style { .panel-ajustes.abierto { opacity: 0; transform: scale(.97); } }

/* 4. Cabecera de la lectura y rejilla común: el índice a la izquierda desde 1100 px y el texto centrado en su columna */
.lectura-rejilla { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: clamp(32px, 4vw, 56px); }
@media (min-width: 1100px) { .lectura-rejilla { grid-template-columns: 13.5rem minmax(0, 1fr); } }
.lectura-cabecera { padding-block: clamp(40px, 7vw, 88px) clamp(28px, 4vw, 48px); }
.lectura-cabecera-texto, .pie-lectura-texto { grid-column: -2 / -1; width: 100%; max-width: var(--medida-lectura); margin-inline: auto; }
.lectura-cabecera-texto { display: grid; gap: clamp(14px, 2vw, 20px); }
.lectura-cabecera h1 { font-size: calc(var(--escala) * clamp(2.1rem, 1.5rem + 2.6vw, 3.3rem)); max-width: 18ch; }
.lectura-cabecera .entradilla { max-width: none; font-size: calc(var(--escala) * clamp(1.12rem, 1rem + .6vw, 1.3rem)); line-height: calc(var(--interlineado-lectura) - .2); }
.lectura-datos { font: 600 calc(var(--escala) * .95rem)/1.45 var(--font-display); color: var(--ink-2); }
.lectura-rotulo { padding-top: 14px; border-top: 1px solid var(--rule); }
.lectura-cuerpo { align-items: start; padding-bottom: clamp(56px, 8vw, 104px); }

/* 5. Índice: fijo al lado del texto en pantallas anchas; en las demás, un bloque gris antes de la primera sección */
.indice { min-width: 0; }
.indice-titulo { font: 700 .95rem/1.3 var(--font-display); color: var(--ink); margin-bottom: 10px; }
.indice-lista { list-style: none; margin: 0; padding: 0; display: grid; border-left: 1px solid var(--rule); }
.indice-lista a {
  display: block; margin-left: -1px; padding: 7px 0 7px 14px; border-left: 2px solid transparent;
  font: 600 .9rem/1.35 var(--font-display); color: var(--ink-2); text-decoration: none;
  transition: color .2s ease, border-color .2s ease;
}
@media (hover: hover) and (pointer: fine) { .indice-lista a:hover { color: var(--ink); } }
.indice-lista a:active { color: var(--ink); }
.indice-lista a[aria-current="true"] { color: var(--ink); border-left-color: var(--accent); }
.indice-arriba { margin-top: 18px; }
.enlace-arriba { display: inline-flex; align-items: center; gap: 9px; min-height: 32px; font: 700 .88rem/1.2 var(--font-display); color: var(--ink-2); text-decoration: none; }
.enlace-arriba::before { content: ""; width: 7px; height: 7px; margin-top: 4px; border-left: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); flex: none; }
@media (hover: hover) and (pointer: fine) { .enlace-arriba:hover { color: var(--accent-ink); } }
@media (min-width: 1100px) {
  .indice { position: sticky; top: calc(var(--barra-alto) + 32px); padding-top: 8px; }
}
@media (max-width: 1099px) {
  .indice { width: 100%; max-width: var(--medida-lectura); margin: 0 auto 4px; padding: 18px 20px 14px; border-radius: var(--radio); background: var(--surface); }
  .indice-lista { border-left: 0; }
  .indice-lista a { margin-left: 0; padding: 8px 0; border-left: 0; }
  .indice-lista a[aria-current="true"] { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 5px; }
  .indice-arriba { display: none; }
}

/* 6. Texto de la lectura: Source Serif 4 con el tamaño, el interlineado y el ancho elegidos */
.lectura-texto {
  position: relative; min-width: 0;
  font-size: calc(var(--escala) * clamp(1.0625rem, 1rem + .25vw, 1.1875rem));
  line-height: var(--interlineado-lectura);
}
.seccion-lectura > * { max-width: var(--medida-lectura); margin-inline: auto; }
.seccion-lectura > * + * { margin-top: 1em; }
.seccion-lectura + .seccion-lectura, .resumen + .seccion-lectura { margin-top: 3.2em; }
.seccion-lectura:first-child h2 { margin-top: .4em; }
.lectura-texto h2 { font-size: 1.6em; line-height: 1.16; }
.seccion-lectura > h2 + * { margin-top: .6em; }
.lectura-texto p, .lectura-texto li { text-wrap: pretty; }
.lectura-texto strong { font-weight: 700; }
.lista-senales { padding-left: 1.15em; }
.lista-senales li { padding-left: .2em; }
.lista-senales li + li { margin-top: .65em; }
.lista-senales li::marker { color: var(--accent); }
.lista-pasos { list-style: none; padding: 0; counter-reset: paso; display: grid; grid-template-columns: minmax(0, 1fr); gap: .7em; }
.lectura-texto li, .lectura-texto p { overflow-wrap: break-word; }
.lista-pasos li, .lista-senales li, .glosario-entrada dd { overflow-wrap: anywhere; }
.lista-pasos li { counter-increment: paso; position: relative; padding-left: 2em; }
.lista-pasos li::before { content: counter(paso); position: absolute; left: 0; top: 0; font-family: var(--font-display); font-weight: 800; color: var(--teal-ink); font-variant-numeric: tabular-nums; }
.recuadro {
  padding: .9em 1.2em; border-radius: 0 14px 14px 0; border-left: 3px solid var(--accent); background: var(--surface);
  font: 500 .95em/1.55 var(--font-display); color: var(--ink);
}
.url { font-family: var(--font-mono); font-size: .88em; overflow-wrap: anywhere; }

/* 7. Figura del correo: el correo ficticio en una tarjeta blanca sobre un módulo gris. Cada marca abre su nota debajo
   de la fila que señala, en el móvil y en el escritorio, y resalta el trozo del correo del que habla. */
.seccion-lectura > .figura-correo { max-width: calc(var(--medida-lectura) + 2rem); margin-top: 1.4em; }
.figura-correo { display: grid; gap: 14px; padding: clamp(12px, 2.4vw, 24px); border-radius: var(--radio-grande); background: var(--surface); }
.figura-rotulo { font: 600 .8em/1.3 var(--font-display); color: var(--muted); }
.correo {
  overflow: hidden; color: var(--ink); background: var(--bg); border: 1px solid var(--rule); border-radius: 14px; box-shadow: var(--shadow-sm);
  font: 500 .86em/1.55 var(--font-display);
}
.correo p { margin: 0; }
.correo-cabecera { display: grid; gap: 6px; padding: 14px 14px 14px 18px; border-bottom: 1px solid var(--rule); }
.correo-cuerpo { display: grid; gap: .85em; padding: 18px 14px 20px 18px; }
.correo-fila { display: flex; align-items: flex-start; gap: 12px; }
.correo-fila > :first-child { flex: 1 1 auto; min-width: 0; }
.correo-campo { min-width: 0; }
.correo-etiqueta { display: inline-block; min-width: 4.4em; font-weight: 700; color: var(--muted); }
.correo-valor { overflow-wrap: anywhere; }
/* La dirección pasa entera a la línea siguiente antes que partirse; si no cabe ni así, se parte después de la @ */
.correo-direccion { display: inline-block; max-width: 100%; }
.correo-asunto { font-size: 1.1em; font-weight: 700; }
.correo-asunto .correo-etiqueta { font-size: .91em; }
.correo-boton {
  display: inline-flex; align-items: center; min-height: 42px; padding: 9px 20px; border: 0; border-radius: 6px;
  font: 700 1em/1.2 var(--font-display); color: var(--bg); background: var(--ink); cursor: pointer;
}
@media (hover: hover) and (pointer: fine) { .correo-boton:hover { background: var(--ink-2); } }
.correo-boton:active { background: var(--ink-2); }
.correo-adjunto { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; max-width: 100%; padding: 7px 12px; border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); }
.adjunto-nombre { font-weight: 700; overflow-wrap: anywhere; }
.adjunto-peso { color: var(--muted); }
/* Barra de estado: el destino solo se ve con el puntero encima del botón, con el foco o después de tocarlo */
.correo-estado { display: grid; align-items: center; min-height: 2.7em; padding: 8px 18px; border-top: 1px solid var(--rule); background: var(--surface); }
/* La pista y el destino ocupan la misma celda: al cambiar uno por otro la barra no cambia de alto */
.correo-estado > * { grid-area: 1 / 1; }
.correo-estado-pista { font: 500 .92em/1.45 var(--font-display); color: var(--muted); }
.correo-estado-texto { visibility: hidden; font: 500 .92em/1.45 var(--font-display); color: var(--ink-2); }
.sin-js .correo-estado-texto,
.correo:has(.correo-boton:focus-visible) .correo-estado-texto,
.correo.destino-visible .correo-estado-texto { visibility: visible; }
.correo:has(.correo-boton:focus-visible) .correo-estado-pista,
.correo.destino-visible .correo-estado-pista { visibility: hidden; }
/* Con el dedo, el :hover se queda pegado al botón después de tocarlo: el segundo toque no ocultaba el destino */
@media (hover: hover) and (pointer: fine) {
  .correo:has(.correo-boton:hover) .correo-estado-texto { visibility: visible; }
  .correo:has(.correo-boton:hover) .correo-estado-pista { visibility: hidden; }
}
.correo-estado-etiqueta { font-weight: 700; }
.correo-url { font-family: var(--font-mono); font-size: .95em; color: var(--ink); overflow-wrap: anywhere; }
/* Marcas: sin JavaScript son números fijos; con JavaScript, botones. El aro rojo invita a pulsar; abierta, en oscuro;
   ya vista y cerrada, con aro oscuro. */
.marca {
  flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; margin-top: -4px; padding: 0;
  border: 0; border-radius: 50%; font: 800 .86rem/1 var(--font-display); font-variant-numeric: tabular-nums;
  color: var(--accent-ink); background: var(--bg); box-shadow: inset 0 0 0 2px var(--accent);
}
button.marca { cursor: pointer; transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; }
@media (hover: hover) and (pointer: fine) { button.marca:hover { background: var(--tint); } }
button.marca:active { background: var(--tint); }
button.marca.encontrada { color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
button.marca[aria-expanded="true"] { color: var(--bg); background: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.sin-js .marca { color: var(--bg); background: var(--ink); box-shadow: none; }
.nota-senal { padding: 10px 14px 11px 12px; border-radius: 10px; background: var(--surface); font: 500 .97em/1.5 var(--font-display); color: var(--ink); }
.correo-cabecera .nota-senal { margin-block: 4px 6px; }
.nota-numero {
  display: inline-grid; place-items: center; width: 1.55em; height: 1.55em; margin-right: .55em; border-radius: 50%;
  font: 800 .78em/1 var(--font-display); color: var(--bg); background: var(--ink); vertical-align: .12em;
}
.pista { border-radius: 2px; transition: background-color .2s ease, box-shadow .2s ease; }
.pista.activa, .sin-js .pista { background: var(--tint); box-shadow: inset 0 -2px 0 var(--accent); }
.correo-boton.pista.activa, .sin-js .correo-boton.pista { background: var(--ink); box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent); }
.figura-controles { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.contador { font: 700 .95rem/1.3 var(--font-display); font-variant-numeric: tabular-nums; }

/* 8. Resumen y preguntas de autocomprobación */
.resumen { max-width: var(--medida-lectura); margin: 3.2em auto 0; padding: 1.2em 1.4em 1.3em; border-radius: var(--radio-grande); background: var(--surface); }
.lectura-texto .resumen h2 { font-size: 1.2em; }
.resumen ul { margin-top: .6em; padding-left: 1.15em; }
.resumen li + li { margin-top: .45em; }
.resumen li::marker { color: var(--accent); }
.seccion-lectura > .cuestionario { margin-top: 1.4em; }
.pregunta + .pregunta { margin-top: 1.4em; }
.pregunta { min-width: 0; margin: 0; padding: clamp(16px, 3vw, 26px); border: 0; border-radius: var(--radio-grande); background: var(--surface); }
.pregunta-enunciado { float: left; width: 100%; padding: 0; margin-bottom: .9em; font-weight: 600; line-height: 1.5; }
.pregunta-enunciado + * { clear: both; }
.pregunta-numero { display: block; margin-bottom: .3em; font: 700 .8em/1.3 var(--font-display); color: var(--muted); }
.opciones { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.opcion { position: relative; }
.opcion input {
  position: absolute; left: 14px; top: 13px; width: 22px; height: 22px; margin: 0; cursor: pointer;
  -webkit-appearance: none; appearance: none; border: 1.5px solid var(--control); border-radius: 50%; background: var(--bg);
}
.opcion input:checked { border-color: var(--ink); background: var(--ink); box-shadow: inset 0 0 0 4.5px var(--bg); }
.opcion input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.opcion label {
  display: flex; gap: .55em; min-height: 48px; padding: 12px 14px 12px 50px; border-radius: 12px; cursor: pointer;
  font: 500 .95em/1.45 var(--font-display); color: var(--ink); background: var(--bg); box-shadow: inset 0 0 0 1px var(--rule);
  transition: box-shadow .2s ease;
}
@media (hover: hover) and (pointer: fine) { .opcion label:hover { box-shadow: inset 0 0 0 1px var(--control); } }
.opcion label:active { box-shadow: inset 0 0 0 1px var(--control); }
.opcion input:checked + label { box-shadow: inset 0 0 0 2px var(--ink); }
.opcion-letra { flex: none; font-weight: 800; color: var(--muted); }
.opcion input:disabled, .opcion input:disabled + label { cursor: default; }
.opcion input:disabled:not(:checked) + label { color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--rule); }
.opcion.es-correcta input:checked + label { box-shadow: inset 0 0 0 2px var(--teal); }
.opcion.es-incorrecta input:checked + label { box-shadow: inset 0 0 0 2px var(--accent); }
.explicaciones { margin-top: 1.1em; }
.js .explicaciones { display: none; }
.explicaciones-titulo { font: 700 .86em/1.3 var(--font-display); color: var(--muted); }
.explicaciones-lista { margin-top: .4em; padding-left: 1.4em; font: 500 .93em/1.55 var(--font-display); color: var(--ink-2); }
.explicaciones-lista li + li { margin-top: .4em; }
.explicaciones-lista strong { color: var(--ink); }
.pregunta-aviso { font: 700 .88rem/1.4 var(--font-display); color: var(--accent-ink); }
.pregunta-aviso:not(:empty) { margin-top: .9em; }
.respuesta { margin-top: 1em; padding: 14px 16px; border-radius: 12px; background: var(--bg); font: 500 .95em/1.55 var(--font-display); color: var(--ink-2); }
.respuesta-titulo { display: flex; align-items: center; gap: 9px; font-weight: 800; color: var(--ink); }
.respuesta-titulo::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.respuesta.es-correcta .respuesta-titulo::before { background: var(--teal); }
.respuesta-texto { margin-top: .25em; }
.pregunta-acciones { margin-top: 1em; }
.pregunta-acciones:not(:has(> :not([hidden]))) { display: none; }
/* El resultado está siempre en la página (role="status" vacío) para que se anuncie al aparecer; solo se ve con texto */
.resultado { display: grid; gap: 14px; justify-items: start; }
.resultado:has(.resultado-texto:not(:empty)) { margin-top: 1.4em; padding: 18px 22px 20px; border-radius: var(--radio-grande); box-shadow: inset 0 0 0 2px var(--ink); }
.resultado-texto { font: 800 1.1em/1.35 var(--font-display); }

/* 9. Glosario. Sin JavaScript (y al imprimir) es la última sección de la lectura. Con JavaScript es un panel a la
   derecha que abre el botón «Glosario»; cada término del texto abre su definición en una ficha junto a él. */
.glosario { max-width: var(--medida-lectura); margin: 3.2em auto 0; padding-top: 2.2em; border-top: 1px solid var(--rule); }
.glosario-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lectura-texto .glosario-titulo { font-size: 1.6em; }
.glosario-lista { margin: 1em 0 0; display: grid; gap: 1em; }
.glosario-entrada dt { font: 700 1em/1.3 var(--font-display); color: var(--ink); }
.glosario-entrada dd { margin: .2em 0 0; color: var(--ink-2); }
.js .glosario {
  position: fixed; z-index: 39; top: var(--barra-alto); right: 0; bottom: 0; display: none;
  width: min(27rem, 100vw); max-width: none; margin: 0; padding: 22px var(--margen) 40px 24px;
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg); border-top: 0; border-left: 1px solid var(--rule); box-shadow: var(--shadow);
}
.js .glosario.abierto { display: block; }
/* Entra desde el borde con un desplazamiento corto y se cierra al instante: un cajón entero que entra deslizándose
   prometería una salida igual */
.js .glosario.abierto { transition: opacity var(--dur-entrar) var(--ease-out), transform var(--dur-entrar) var(--ease-out); }
@starting-style { .js .glosario.abierto { opacity: 0; transform: translateX(16px); } }
.js .lectura-texto .glosario-titulo { font-size: 1.25em; }
.js .glosario-lista { gap: .9em; }
.js .glosario-entrada { padding-bottom: .9em; border-bottom: 1px solid var(--rule); }
.js .glosario-entrada:last-child { border-bottom: 0; }
.js .glosario-entrada dd { font-size: .95em; line-height: 1.55; }
.termino {
  color: inherit; cursor: pointer;
  text-decoration: underline dotted; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px;
}
@media (hover: hover) and (pointer: fine) { .termino:hover { color: var(--accent-ink); text-decoration-style: solid; } }
.termino:active { color: var(--accent-ink); }
.termino[aria-expanded="true"] { border-radius: 3px; background: var(--tint); }
.definicion {
  position: absolute; z-index: 30; display: block; width: min(22rem, calc(100vw - 32px)); padding: 16px 18px 14px;
  font: 500 .95rem/1.5 var(--font-display); font-style: normal; text-align: left; white-space: normal; letter-spacing: normal;
  color: var(--ink); background: var(--bg); border: 1px solid var(--rule); border-radius: 14px; box-shadow: var(--shadow);
  transition: opacity var(--dur-entrar) var(--ease-out), transform var(--dur-entrar) var(--ease-out);
}
/* La ficha se inserta en cada apertura y crece desde su término (transform-origin lo pone lectura.js): hacia abajo, o
   hacia arriba si no cabía debajo. Se cierra al instante. */
@starting-style { .definicion { opacity: 0; transform: scale(.97); } }
.definicion-titulo { display: block; margin-bottom: 4px; font-weight: 800; font-size: 1.02rem; }
.definicion-texto { display: block; color: var(--ink-2); font-weight: 500; }
.definicion-acciones { display: flex; justify-content: flex-end; margin-top: 12px; }

/* 10. Volver arriba (en el móvil y en la tableta, flotante; en el escritorio va en el índice) y pie */
.volver-flotante {
  position: fixed; z-index: 35; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 10px 18px 10px 16px; border-radius: 999px;
  font: 700 .9rem/1 var(--font-display); color: var(--bg); background: var(--ink); text-decoration: none; box-shadow: var(--shadow-sm);
  opacity: 0; pointer-events: none; transform: translateY(8px);
  /* Sale por el mismo borde, más rápido de lo que entra */
  transition: opacity var(--dur-hover) var(--ease-out), transform var(--dur-hover) var(--ease-out);
}
.volver-flotante::before { content: ""; width: 7px; height: 7px; margin-top: 4px; border-left: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); flex: none; }
/* Oculto, sigue en el orden del tabulador (al final del texto) y aparece al recibir el foco, como el enlace para saltar */
.volver-flotante.visible, .volver-flotante:focus-visible {
  opacity: 1; pointer-events: auto; transform: none;
  transition: opacity var(--dur-entrar) var(--ease-out), transform var(--dur-entrar) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .volver-flotante:hover { color: var(--bg); background: var(--ink-2); } }
/* Sin esta regla, el a:active de base.css pondría el texto en rojo sobre la tinta mientras se pulsa */
.volver-flotante:active { color: var(--bg); background: var(--ink-2); }
@media (min-width: 1100px) { .volver-flotante { display: none; } }
/* Con movimiento reducido, la regla de base.css deja solo los fundidos: los paneles y «Volver arriba» no se desplazan
   ni crecen */
@media (max-width: 1099px) { html { scroll-padding-bottom: 76px; } }
.pie-lectura { margin-top: auto; padding-block: 28px 40px; border-top: 1px solid var(--rule); font: 500 .9rem/1.55 var(--font-display); color: var(--muted); }
.pie-lectura-texto { display: grid; gap: 6px; }

/* 11. Pantallas pequeñas: «de lectura» se queda para los lectores de pantalla; el panel ocupa el ancho */
@media (max-width: 559px) {
  .solo-ancho { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
  .panel { left: 12px; right: 12px; width: auto; padding: 16px; }
  .barra-acciones .boton-pequeno { padding-inline: 12px; }
  .correo-cabecera { padding: 12px 10px 12px 14px; }
  .correo-cuerpo { padding: 16px 10px 18px 14px; }
  .correo-estado { padding-inline: 14px; }
  .correo-cabecera { gap: 8px; }
  .correo-etiqueta { display: block; min-width: 0; font-size: .9em; }
}
@media (max-width: 899px) { .barra-titulo { display: none; } }
/* Con el índice al lado (desde 1100 px), el texto arranca junto a él y queda más o menos centrado en la pantalla, y la
   figura crece hacia la derecha. Sin el índice al lado, el texto va centrado. */
@media (min-width: 1100px) {
  .lectura-cabecera-texto, .pie-lectura-texto, .seccion-lectura > *, .resumen, .glosario { margin-left: 0; margin-right: auto; }
}
@media (pointer: coarse) { .marca { width: 36px; height: 36px; margin-top: -6px; } .enlace-arriba { min-height: 44px; } }

/* 12. Colores forzados: los estados se marcan con colores del sistema */
@media (forced-colors: active) {
  .marca { border: 2px solid ButtonText; }
  button.marca[aria-expanded="true"] { forced-color-adjust: none; color: SelectedItemText; background: SelectedItem; border-color: SelectedItem; }
  .pista.activa, .sin-js .pista { forced-color-adjust: none; color: MarkText; background: Mark; }
  .barra-boton[aria-expanded="true"] { border: 2px solid Highlight; }
  .indice-lista a[aria-current="true"] { border-left-color: Highlight; text-decoration: underline; }
  .opcion input { -webkit-appearance: radio; appearance: auto; border: revert; background: revert; box-shadow: none; }
  .opcion label, .pregunta, .figura-correo, .correo, .recuadro, .resumen, .panel, .definicion, .js .glosario { border: 1px solid CanvasText; }
  .progreso::-webkit-progress-value { background: Highlight; }
}

/* 13. Impresión: la lectura entera en claro, sin barra, índice ni controles; las seis notas del correo, las preguntas
   con sus respuestas explicadas y el glosario al final */
@media print {
  .barra-lectura, .salto, .indice, .volver-flotante, .figura-controles, .panel, .definicion, .pregunta-pie,
  .resultado-texto, .resultado-acciones, .glosario [data-cerrar] { display: none !important; }
  .lectura-rejilla { display: block; }
  .lectura-cabecera { padding-block: 0 14pt; }
  .lectura-cabecera-texto, .pie-lectura-texto, .seccion-lectura > *, .seccion-lectura > .figura-correo, .resumen, .glosario { max-width: none; }
  .lectura-texto { font-size: 11pt; line-height: 1.5; }
  .lectura-cuerpo { padding-bottom: 0; }
  .seccion-lectura + .seccion-lectura, .resumen + .seccion-lectura { margin-top: 18pt; }
  .figura-correo, .resumen, .pregunta, .recuadro { background: none !important; box-shadow: none !important; border: 1px solid #bbb; }
  .correo { box-shadow: none; border-color: #999; }
  .nota-senal[hidden] { display: block !important; }
  .nota-senal { background: none; border: 1px solid #bbb; }
  .marca, .nota-numero { color: #000 !important; background: none !important; box-shadow: inset 0 0 0 1px #000 !important; }
  .pista, .pista.activa, .sin-js .pista { background: none !important; box-shadow: inset 0 -1.5pt 0 #000 !important; }
  .correo-boton, .correo-boton.pista.activa, .sin-js .correo-boton.pista { color: #000 !important; background: none !important; box-shadow: none !important; border: 1.5pt solid #000; }
  .correo-estado { background: none; }
  .correo-estado-texto { visibility: visible !important; }
  .correo-estado-pista { visibility: hidden !important; }
  .pregunta[hidden] { display: block !important; }
  .js .explicaciones { display: block !important; }
  .opcion input { display: none; }
  .opcion label { box-shadow: none !important; padding: 2pt 0; min-height: 0; }
  .opcion-letra { color: #000; }
  .js .glosario, .glosario {
    position: static !important; display: block !important; width: auto; max-width: none; margin: 20pt 0 0; padding: 14pt 0 0;
    overflow: visible; border: 0; border-top: 1px solid #bbb; box-shadow: none; background: none;
  }
  .js .lectura-texto .glosario-titulo { font-size: 1.6em; }
  .js .glosario-entrada { border-bottom: 0; padding-bottom: 0; }
  .termino { text-decoration: none; }
  .figura-correo, .nota-senal, .pregunta, .resumen, .recuadro, .glosario-entrada, .lista-pasos li { break-inside: avoid; }
  .pie-lectura { padding-block: 14pt 0; }
  .pie-lectura a { display: none; }
}