/* ==========================================================================
   Opos · impresión
   El PDF lo genera el navegador al imprimir: aquí no hay generador propio, así
   que esta hoja **es** el formato del PDF. Diseño del traspaso, sección 13.

   Se piensa en **blanco y negro**. No es una restricción del papel —una
   impresora de color existe—, es que el temario se imprime para estudiarlo con
   un boli encima, casi siempre en una láser de oficina. Todo lo que en pantalla
   distingue por color aquí distingue por filete, sangría o etiqueta.
   ========================================================================== */

@page { size: A4; margin: 18mm 20mm 20mm; }

/* La numeración de página y el índice con su página **no salen en un navegador**:
   Chrome y Firefox no implementan las cajas de margen de `@page` ni
   `target-counter()`. Se declaran igualmente porque un motor de verdad
   —WeasyPrint -- sí las respeta, y así el día que se genere el PDF desde el
   servidor no hay que rehacer la hoja. Mientras tanto, la numeración que sale en
   papel es la que pone el propio navegador en su cuadro de imprimir. */
@page {
  @bottom-center { content: counter(page); font-family: 'Public Sans', sans-serif; font-size: 9pt; color: #555; }
}

/* Tres tamaños reales, elegidos antes de imprimir. El del medio sale por
   defecto: el temario entero son unas 300 hojas a 9 pt y 560 a 12,5 pt. */
.impreso                   { --s-cuerpo: 10.5pt; --lh-cuerpo: 1.5; }
.impreso.imprimir-compacto { --s-cuerpo: 9pt;    --lh-cuerpo: 1.42; }
.impreso.imprimir-gran     { --s-cuerpo: 12.5pt; --lh-cuerpo: 1.55; }

/* **La impresión no depende del modo claro/oscuro.** Los tokens se redefinen
   aquí, en el `body`, que está más busqueda en la herencia que el `[data-tema]` del
   `html`: así ganan en los dos modos, tanto en la vista previa como en el papel.

   Sin esto, imprimir de noche sacaba las tablas con texto oscuro sobre fondo
   oscuro. Y una vista previa que cambia de color según cómo tengas la
   aplicación no es una vista previa de nada.

   Los cinco colores con significado se vuelven grises **distintos**, no todos
   negro: el filete de una acción primaria y el de un aviso siguen sin ser lo
   mismo, y en gris eso todavía se puede decir. */
.impreso {
  --bg: #fff; --panel: #fff; --panel-2: #fafafa;
  --txt: #111; --mut: #555; --rule: #bbb; --rule-soft: #ddd; --sel: #eee;
  --teja: #222; --indi: #333; --verde: #444; --rojo: #333; --ambar: #555;
  --verde-suave: #555; --verde-suave-bg: #f4f4f2;
  --verde-bg: #f4f4f2; --rojo-bg: #f4f4f2; --ambar-bg: #f6f6f4;
  --postit: #f2f2ee; --postit-txt: #444; --postit-sombra: transparent;
  --gris-flojo: #f4f4f2; --gris-medio: #ebebe8; --filete: #8a8a86;

  max-width: 165mm;
  margin: 0 auto;
  padding: 12mm 16px;
  background: #fff;
  color: #111;
  /* Sin esto los títulos no escalaban. Van en `em`, y `em` se mide contra el
     tamaño del padre: como aquí no había ninguno, salían siempre contra los
     16 px del navegador y los tres tamaños solo movían el cuerpo del texto. */
  font-size: var(--s-cuerpo);
}

/* Las tablas, sin color y con filete gris: en un temario técnico son media
   página y con fondos de color no se puede escribir encima. */
.impreso table { background: none; border-color: var(--filete); }
.impreso th, .impreso td { border-color: var(--rule); background: none; color: #111; }
.impreso thead th { background: var(--gris-flojo); font-weight: 700; }

.impreso p, .impreso li { font-size: var(--s-cuerpo); line-height: var(--lh-cuerpo); }
.impreso p { text-align: justify; hyphens: auto; orphans: 3; widows: 3; }
.impreso h1 { font-size: 1.9em; font-weight: 700; line-height: 1.24; }
.impreso h2 { font-size: 1.35em; margin: 1.6em 0 .4em; }
.impreso h3 { font-size: 1.12em; margin: 1.3em 0 .3em; }

/* Lo que se ve en pantalla es lo que sale en papel, también de color: una vista
   previa a color de algo que se va a imprimir en negro no es una vista previa. */
.impreso, .impreso * { color: #111; }
.impreso .pequeno, .impreso .rotulo { color: #555; }

/* --- Opciones de impresión ------------------------------------------------ */

/* Tiene que parecer un panel de control y no un pie de foto del documento. Por
   eso va sobre fondo teñido, pegado arriba y ancho completo: lo que está encima
   del papel blanco no es el papel. Antes era un recuadro fino del mismo color
   que la página y se leía como parte de lo impreso. */
.opciones-impresion {
  position: sticky; top: 0; z-index: 5;
  margin: 0 0 26px; padding: 14px 20px 12px;
  background: var(--panel); border-bottom: 1px solid var(--rule);
  box-shadow: 0 2px 8px rgb(0 0 0 / .07);
  font-family: var(--ui); font-size: 13px; color: var(--txt);
}
.opciones-impresion__cap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 10px;
}
.opciones-impresion h2 { font-size: 13px; margin: 0; font-family: var(--ui); letter-spacing: .04em; }

/* Cada opción con su nombre delante, en dos columnas. Una fila de enlaces
   seguidos no dice cuáles son alternativas entre sí y cuáles son otra cosa. */
.opciones-impresion__lista {
  display: grid; grid-template-columns: max-content 1fr;
  gap: 6px 18px; margin: 0; align-items: baseline;
}
.opciones-impresion dt {
  font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--mut);
}
.opciones-impresion dd { margin: 0; }
.opciones-impresion a { margin-right: 14px; }
/* La elegida, marcada de verdad: en negrita y con el subrayado quitado no se
   distinguía de las otras dos a un metro de la pantalla. */
.opciones-impresion a[aria-current="true"] {
  font-weight: 600; text-decoration: none;
  padding: 2px 8px; border-radius: 3px; background: var(--sel); color: var(--teja);
}
.opciones-impresion p { margin: 10px 0 0; }
@media (max-width: 640px) {
  .opciones-impresion__lista { grid-template-columns: 1fr; gap: 2px; }
  .opciones-impresion dd { margin-bottom: 8px; }
}

/* --- Portada -------------------------------------------------------------- */

.portada { break-after: page; padding-top: 30mm; }
.portada__marca { font-family: var(--logo, Georgia, serif); letter-spacing: .1em; font-size: 12pt; }
.portada h1 { margin: 6mm 0 3mm; }
.portada__datos {
  font-family: var(--ui); font-size: 10pt; line-height: 1.9;
  margin: 8mm 0; padding-top: 4mm; border-top: 1px solid #bbb;
}
.portada__datos dt { float: left; width: 42mm; color: #555; }
.portada__datos dd { margin: 0 0 2mm 42mm; }
.impreso .aviso-legal { font-size: 9pt; color: #444; line-height: 1.5; }
.portada .aviso-legal { margin-top: 14mm; padding-top: 4mm; border-top: 1px solid #bbb; }

/* --- Índice --------------------------------------------------------------- */

.indice-general { break-after: page; }
.indice-general ol { font-family: var(--ui); font-size: 10pt; line-height: 1.9; list-style: none; padding: 0; }
.indice-general li { display: flex; gap: 8px; align-items: baseline; }
/* El número del tema tiene que ser el mismo que sale luego en su página. Antes
   el índice numeraba 1, 2, 3… por orden de aparición y los temas no llevaban
   número ninguno, así que el índice remitía a algo que no existía. */
.indice-general .num { flex: none; width: 12mm; color: #555; font-variant-numeric: tabular-nums; }
/* El enlace ocupa el resto de la línea: si se ajusta a su texto, la guía de
   puntos no tiene sitio donde estirarse y no sale. */
.indice-general a { flex: 1; text-decoration: none; }
/* La página de cada entrada, con guía de puntos hasta ella. La guía no es
   adorno: sin nada entre el título y el número, en una línea corta el ojo salta
   de renglón y se lee la página del tema de al lado.

   `leader()` y `target-counter()` los entiende un motor de verdad —`opos
   imprimir --pdf`—; el navegador ignora los dos y la línea sale sin número, que
   es preferible a un hueco. */
.indice-general a::after {
  content: leader('.') ' ' target-counter(attr(href url), page);
  color: #555;
}

/* --- Saltos de página ----------------------------------------------------- */

.impreso article { break-before: page; }

/* Una cabecera al final de página o una tabla partida por la mitad es lo que
   hace que un temario impreso no se pueda estudiar. */
/* stylelint-disable-next-line no-descending-specificity -- `break-after`/`break-inside`/`orphans`/`widows` (control de salto de página) son propiedades distintas de las que fija `.impreso h1/h2/h3` (tipografía): no se pisan entre sí. */
h1, h2, h3, h4 { break-after: avoid; }
/* stylelint-disable-next-line no-descending-specificity -- `break-inside: avoid` no comparte propiedad con `background`/`border-color` de `.impreso table`. */
table, pre, figure, svg, .aviso { break-inside: avoid; }
/* stylelint-disable-next-line no-descending-specificity -- `orphans`/`widows` no comparten propiedad con `font-size`/`line-height` de `.impreso p`. */
p { orphans: 3; widows: 3; }
/* Los recuadros del temario, enteros o partidos por una línea en blanco, nunca
   solos al pie de una página. */
.destacado { break-inside: avoid; }
.destacado--enunciado { break-after: avoid; }

/* Un bloque de pregunta entero en la misma página. Se pide en tres capas y no
   en una, porque `break-inside: avoid` sobre algo más alto que una página lo
   ignora el navegador y el corte sale igual, pero peor colocado:
   1. el bloque completo, si cabe;
   2. si no cabe, al menos el enunciado con sus opciones;
   3. y en el peor caso, que el enunciado nunca se quede solo al pie. */
.bloque-pregunta { break-inside: avoid; }
.bloque-pregunta .contexto,
.bloque-pregunta .opciones,
.bloque-pregunta .solucion,
.bloque-pregunta .justificacion,
.bloque-pregunta details { break-inside: avoid; }
.bloque-pregunta .enunciado { break-after: avoid; }
.bloque-pregunta .opciones li { break-inside: avoid; }

.impreso-examen .preguntas { list-style: decimal; }
.impreso-examen .correcta { font-weight: 700; }
/* `<ol type="A">` no sale: `.opciones { list-style: none; }` de base.css lo
   anula también en papel, porque esta lista comparte clase con la del
   formulario para contestar. La letra la pinta el propio `cuerpo_opcion`. */
.impreso-examen .letra { font-weight: 700; margin-right: 4px; }

/* --- Resultados al final --------------------------------------------------- */

/* La solución ya va al margen de cada pregunta (`.solucion-margen`); esta
   página repite lo mismo suelto, para corregir de un vistazo sin pasar hoja a
   hoja. Solo sale con `soluciones=1`: el examen en blanco no lleva respuestas
   en ningún sitio. */
.resultados-finales { break-before: page; }
.resultados-finales ol {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px 16px;
  font-family: var(--mono); font-size: 10pt; list-style: none; margin: 6mm 0 0; padding: 0;
}
/* stylelint-disable-next-line no-descending-specificity -- `display: flex`/`gap` no comparten propiedad con `break-inside` de `.bloque-pregunta .opciones li`. */
.resultados-finales li { display: flex; gap: 6px; }
.resultados-finales__num { color: #555; }
.resultados-finales__letra { font-weight: 700; }

/* En un examen en blanco la solución va al margen derecho, no mezclada con el
   enunciado: se tapa con la mano y el examen vuelve a servir. */
.solucion-margen {
  float: right; width: 22mm; margin-right: -26mm;
  font-family: var(--mono); font-size: 8.5pt; color: #555;
}

.impreso .url { font-size: .85em; word-break: break-all; }

/* --- Las cuatro voces del temario, en gris -------------------------------- */

/* En pantalla se distinguen por color: teja el enunciado oficial, verde el
   comentario de examen, papel amarillo el apunte tuyo. En papel eso desaparece
   y la diferencia la llevan el filete, el fondo gris y la etiqueta.

   Escala de grises, no blanco y negro puro: un fondo al 4-6 % lo imprime
   cualquier láser sin ensuciar el texto que va encima, y es lo que hace que un
   recuadro se lea como recuadro de un vistazo. Por debajo del 4 % no sale. */
.impreso .destacado { border-radius: 0; }
.impreso .destacado::before { color: #444 !important; }
.impreso .destacado--enunciado {
  border-left: 3px solid #222; padding: 6px 0 6px 12px;
  background: var(--gris-flojo) !important;
}
/* El texto literal de la ley, sin fondo: es texto para leer seguido y encajarlo
   lo convierte en un adorno. Igual que en pantalla. */
.impreso .destacado--norma { border-left: 1px solid var(--filete); background: none !important; }
/* El comentario nuestro va enmarcado: en una hoja sin color es la única forma
   de que no se confunda con el temario que lo rodea. */
.impreso .destacado--examen {
  border: 1px solid var(--filete); padding: 8px 12px;
  background: var(--gris-flojo) !important;
}

/* --- Qué no llega al papel ------------------------------------------------ */

@media print {
  /* Los tokens en gris ya están puestos en `.impreso`, para que la vista previa
     salga igual que el papel en los dos modos. Aquí solo queda lo que no tiene
     sentido en pantalla. */
  body { background: #fff; color: #111; }
  /* Sin esto el navegador quita **todos** los fondos al imprimir y los recuadros
     grises salen en blanco, indistinguibles del temario. Es una petición, no una
     orden: la casilla «Gráficos de fondo» del cuadro de imprimir manda encima, y
     por eso las opciones de arriba lo avisan. */
  .impreso { max-width: none; padding: 0; print-color-adjust: exact; }
  .opciones-impresion, .boton--accion, .enlace-examen { display: none !important; }

  /* En papel un enlace no se puede pulsar: la referencia se escribe al lado.
     `data-font` lo pone quien genera el HTML, con la clave de la fuente. */
  .impreso .enlace-oficial::after { content: " (" attr(data-font) ")"; font-size: .82em; color: #555; }
  .impreso .enlace-tema::after    { content: " (tema " attr(data-tema-num) ")"; font-size: .82em; color: #555; }
  .impreso .enlace-oficial, .impreso .enlace-tema { border-bottom: none; text-decoration: underline; }
  .impreso a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }

  /* Los apuntes se imprimen: repasarlos seguidos antes del examen es media razón
     de tomarlos. En gris claro y con filete, para que se sigan viendo como algo
     tuyo pegado encima y no compitan con el temario. */
  .apunte {
    border-left: 2px solid #777; border-radius: 0;
    background: #f2f2ee; color: #333; box-shadow: none;
  }
  /* El «+» del margen y el hueco donde se abre el formulario no son papel. */
  .anotar-aqui, .anclaje:empty, .apunte--nuevo { display: none !important; }
}