/* El aspecto de la plataforma. Un solo fichero: no hay nada que compilar.

   LA DIRECCIÓN, en una frase: «un cuaderno de trabajo de un formador con
   criterio». Papel cálido, tinta oscura, verde profundo para actuar, y un
   segundo acento color miel reservado a UNA cosa.

   🔴 **Por qué se rehízo el 30-10-2026.** Una revisión externa de diseño lo
   dijo sin rodeos: *«no le falta decoración, le falta diferencia de peso entre
   lo importante y lo accesorio»*. Todo era el mismo rectángulo blanco
   redondeado con sombra y texto del mismo tamaño, así que **nada destacaba
   porque todo destacaba igual**. Lo que cambia no es la decoración:

     1. **Una escala tipográfica con saltos de verdad.** Un título de pantalla
        mide 36 px y el cuerpo 16: la jerarquía la hace el tamaño, no un borde.
        Serif para los títulos, sans para todo lo demás: dos voces, no una.
     2. **Las filas de un listado pierden su caja.** Eran tarjetas blancas con
        borde y sombra, una por renglón, y eso es exactamente lo que convertía
        toda la pantalla en el mismo objeto repetido. Ahora se separan con una
        línea de 1 px. **El contenedor se queda solo para lo que de verdad es
        un objeto**: un caso que se revisa y sobre el que se actúa.
     3. **Las cifras pierden su caja también.** Cuatro recuadros blancos con un
        número dentro son cuatro objetos compitiendo. Ahora son una tira de
        cifras con una raya encima, como una tabla de un cuaderno.
     4. **Un radio por uso, no uno para todo.** Un radio único es parte del
        problema: si el campo, el panel y el sello tienen la misma esquina,
        todos parecen la misma clase de cosa.
     5. **La sombra desaparece de las tarjetas.** Una sombra en todo aplana la
        jerarquía en vez de crearla. Se reserva para lo que de verdad flota
        encima de otra cosa: la ventana del alumno.
     6. **`--acento`, color miel, se reserva a una sola cosa**: lo que los
        alumnos piden y el curso no cubre. Es la sección por la que el formador
        paga y hasta hoy se veía igual que todo lo demás. Si ese color aparece
        en cualquier otro sitio, deja de significar nada.

   ⚠️ **Lo que NO hace esta hoja: nombres de clase nuevos en el HTML.** Las
   clases de siempre siguen todas aquí y con el mismo nombre; lo que cambia es
   su valor. Las nuevas (`.caso`, `.protagonista`, `.falta`, `.renglon`) se
   añaden sin quitar ninguna, y están documentadas más abajo donde se definen.

   ⚙️ **Sobre los colores: ninguno está puesto por gusto.** Los valores de
   `--acento`, `--acento-suave`, `--mal-suave`, `--superficie` y `--marca-hover`
   se calcularon antes de escribirlos con `python scripts/contrastes.py`, que
   los lee de este fichero y da la razón de contraste de cada combinación
   contra el listón de WCAG: 4,5:1 para texto, 3:1 para la señal visual de un
   control. La auditoría (`A27`) da error si alguna no llega, así que un color
   ilegible no llega ni a guardarse. */

/* ---------------------------------------------------------- lo que vale

   🔴 **FUERA LA DESCARGA DE FUENTES, el 04-11-2026, con la dirección «Mesa de
   edición».** Antes esto empezaba con un `@import` a Google Fonts que traía
   Source Serif 4 y Source Sans 3. Se va por tres motivos y ninguno es
   estético:

     1. **El panel dependía de un servidor ajeno para verse bien.** Sin
        internet, o en una red que bloquee ese dominio, caía al respaldo y la
        pantalla cambiaba de aspecto sin avisar.
     2. **Es una petición a un tercero en cada carga**, con lo que eso dice de
        quién ve qué. Para un panel que enseña preguntas de alumnas, sobra.
     3. **La dirección nueva no la necesita**: una sola voz, la del sistema,
        y la jerarquía la hacen el tamaño, el peso y la alineación.

   ⚙️ `--serif` se queda apuntando a la misma pila. No vale nada mantener dos
   nombres para una cosa, pero vale menos romper una regla de fuera que
   todavía lo nombre. */

:root {
  --sans: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --serif: var(--sans);
  --mono: ui-monospace, "Cascadia Code", Consolas, monospace;

  /* 🔴 **EL ANCHO Y LA MEDIDA, EN DOS VARIABLES, Y NACEN DE UNA QUEJA
     CONCRETA.** El 04-11-2026 el fundador revisó el panel y dijo esto, que es
     lo mismo dicho dos veces: *«todas las fuentes las veo muy pequeñas»* y
     *«la mayoría de textos están alineados a la izquierda, pero ocupando solo
     media pantalla. Ocupan solo media pantalla, así que hay que corregirlo»*.

     ⚙️ **Y tenía razón en lo segundo por una razón que no se ve leyendo el
     CSS:** el contenedor medía 1120 px y cada párrafo iba topado a 66 ch, que
     a este tamaño son unos 560 px. O sea que **la mitad derecha de la pantalla
     estaba vacía en todas las pantallas del panel**, y el texto parecía
     descolgado a la izquierda.

     ⛔ **El arreglo no es quitar el tope.** Un párrafo de 1120 px obliga al ojo
     a buscar el principio de cada renglón, y eso es peor. Lo que estaba mal
     era la proporción entre los dos números: se acerca el contenedor a la
     medida, y la medida sube un poco.

     🎯 **Van en variables para que esto se pueda retocar en un sitio.** Hay
     una investigación de tendencias de diseño pedida por el fundador en
     camino, y cuando llegue se afina aquí y no en cuarenta reglas. */
  /* ⚠️ **Los tres cambian con la «Mesa de edición».** El menú ya no es una
     tira horizontal arriba, así que `--ancho-barra` deja de ser «lo ancha que
     es la cabecera» y pasa a ser **lo ancha que es la columna de la
     izquierda**. Y la zona de trabajo se ensancha, porque ahora tiene que
     caber una lista y una respuesta una al lado de la otra. La medida de
     lectura baja a 66 ch: eso vale para un párrafo, no para la pantalla. */
  --ancho: 1180px;
  --ancho-barra: 216px;
  --medida: 66ch;

  /* 🔴 **LA PALETA ENTERA CAMBIÓ EL 04-11-2026** al adoptar la dirección
     «Mesa de edición», que el fundador eligió entre tres después de verlas:
     *«me parece bien la opción que recomiendas, la mesa de edición»*.

     ⚙️ **Qué cambia de fondo, y no es el gusto.** La paleta anterior usaba
     **el mismo verde para actuar y para estar bien**: el botón principal y el
     sello de «cita localizada» eran el mismo color. Eso obliga a leer el
     texto para saber si algo es un botón o un hecho. Ahora:

       - **azul** = se puede pulsar (botón, enlace, selección, foco),
       - **verde** = está bien (cita localizada, material aprobado),
       - **miel** = falta algo (sin respuesta, pendiente de revisar),
       - **rojo** = ha fallado.

     ⛔ **Y el color nunca va solo.** Cada sello lleva su palabra; quitando el
     color, la pantalla sigue diciendo lo mismo. */
  --fondo: #f4f5f8;
  --papel: #ffffff;
  --superficie: #eaf0f8;
  --tinta: #202c40;
  --tinta-suave: #56647a;

  /* Dos bordes y no uno, porque hacen dos trabajos distintos: `--borde`
     separa -y para eso no necesita contraste- y `--borde-control` es la única
     señal que dibuja un campo de texto, y para eso WCAG pide 3:1. */
  --borde: #d5dce6;
  --borde-control: #758299;

  /* El azul: actuar. `--marca-hover` sustituye al `filter: brightness()` de
     antes, que aclaraba el botón entero -texto incluido- y en modo oscuro lo
     dejaba casi ilegible. */
  --marca: #244fbe;
  --marca-hover: #173a94;
  --marca-suave: #e8eefc;
  --sobre-marca: #ffffff;

  /* 🔴 **El azul oscuro de la columna de la izquierda, y por qué es un color
     aparte.** No es `--marca`: sobre ese azul no se puede dibujar un botón
     azul. La columna organiza, el azul de acción invita a pulsar, y son dos
     trabajos. En oscuro baja casi a negro para que la columna no pese más que
     el contenido. */
  --barra: #202d44;
  --sobre-barra: #ffffff;
  --barra-enlace: #dce5f4;
  --barra-tenue: #b0c0d9;
  --barra-aqui: #3a4f73;
  --barra-foco: #b3c9ff;

  /* ⛔ El verde: **que algo está bien**, y solo eso. Antes esto no existía
     como color propio y se pedía prestado al verde de los botones. */
  --bien: #186247;
  --bien-suave: #e6f4ec;

  /* ⛔ El miel. **Que falta algo**: una respuesta que no salió, una revisión
     pendiente, un tema que los alumnos piden y el curso no cubre.
     ⚠️ **`--acento` y `--aviso` valían lo mismo desde hoy, y eso es a
     propósito.** Eran dos ámbares casi iguales para dos ideas que son la
     misma -un hueco-, y tener dos tonos para una idea no acentúa: confunde.
     Se conservan los dos nombres porque los usan treinta sitios. */
  --acento: #7b4b08;
  --acento-suave: #fff0ce;

  --aviso: #7b4b08;
  --aviso-suave: #fff0ce;
  --mal: #a52f43;
  --mal-suave: #fde9ed;

  /* Un radio por uso. Si el campo, el panel y el sello comparten esquina,
     todos parecen la misma clase de cosa, que era medio problema. */
  --radio-control: 8px;
  --radio-caso: 12px;
  --radio-panel: 16px;
  --radio-ventana: 20px;

  /* `--radio` se queda porque `material.html` lo usa en su propia hoja. Vale
     lo que un caso: la zona de soltar ficheros es un objeto, no un panel. */
  --radio: var(--radio-caso);
  /* Igual con `--marca-fuerte`: ya no hace falta -`--marca` llega a 3:1 en los
     dos modos- pero se deja apuntando a `--marca` para no romper nada de
     fuera que todavía la nombre. */
  --marca-fuerte: var(--marca);

  /* La sombra NO se usa en las tarjetas. Solo en lo que de verdad flota
     encima de otra cosa: la ventana del alumno y los menús. */
  --sombra: 0 2px 8px rgba(32, 39, 35, .06), 0 20px 44px rgba(32, 39, 35, .12);

  /* Movimiento, y poco. El color de un hover sí: avisa de que algo responde.
     Cambiar de pestaña, filtrar, repintar una cifra o guardar, no: ahí la
     animación solo retrasa la respuesta que el formador está esperando. */
  --paso-hover: 120ms;
}

/* El modo oscuro va dos veces a propósito: una siguiendo el ajuste del
   sistema y otra por atributo, para poder forzarlo. La primera lleva
   `:not([data-tema="claro"])` para que forzar el claro gane sobre el sistema. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fondo: #141b27;
    --papel: #1c2636;
    --superficie: #28354a;
    --tinta: #f2f5fa;
    --tinta-suave: #b6c2d4;
    --borde: #3d4c61;
    --borde-control: #8c9bb2;
    --marca: #abc3ff;
    /* En oscuro el hover ACLARA, no oscurece: sobre un fondo oscuro, oscurecer
       el botón al pasar por encima se lee como apagarlo. */
    --marca-hover: #c6d6ff;
    --marca-suave: #2b3e60;
    /* El texto del botón, oscuro sobre el azul claro. Con el blanco que hubo
       aquí eran 2,17:1, por debajo de lo legible. */
    --sobre-marca: #14284f;
    --barra: #101826;
    --sobre-barra: #ffffff;
    --barra-enlace: #dce5f4;
    --barra-tenue: #9fb0c9;
    --barra-aqui: #2b3e60;
    --barra-foco: #b3c9ff;
    --bien: #96d9b5;
    --bien-suave: #1c3b2e;
    --acento: #f4cd7c;
    --acento-suave: #433522;
    --aviso: #f4cd7c;
    --aviso-suave: #433522;
    --mal: #ffa7b8;
    --mal-suave: #492a35;
    --sombra: 0 2px 8px rgba(0, 0, 0, .4), 0 20px 44px rgba(0, 0, 0, .5);
  }
}

:root[data-tema="oscuro"] {
  --fondo: #141b27;
  --papel: #1c2636;
  --superficie: #28354a;
  --tinta: #f2f5fa;
  --tinta-suave: #b6c2d4;
  --borde: #3d4c61;
  --borde-control: #8c9bb2;
  --marca: #abc3ff;
  --marca-hover: #c6d6ff;
  --marca-suave: #2b3e60;
  --sobre-marca: #14284f;
  --barra: #101826;
  --sobre-barra: #ffffff;
  --barra-enlace: #dce5f4;
  --barra-tenue: #9fb0c9;
  --barra-aqui: #2b3e60;
  --barra-foco: #b3c9ff;
  --bien: #96d9b5;
  --bien-suave: #1c3b2e;
  --acento: #f4cd7c;
  --acento-suave: #433522;
  --aviso: #f4cd7c;
  --aviso-suave: #433522;
  --mal: #ffa7b8;
  --mal-suave: #492a35;
  --sombra: 0 2px 8px rgba(0, 0, 0, .4), 0 20px 44px rgba(0, 0, 0, .5);
}

* { box-sizing: border-box; }

/* 🔴 **Lo plegado tiene que plegarse, y esto es lo que faltaba.** El navegador
   trae `[hidden] { display: none }`, pero es una regla suya y cualquier regla
   nuestra con `display` la pisa: `.lista` es `flex`, así que la caja se
   quedaba abierta y el botón de «Ver los casos ya revisados» PARECÍA NO HACER
   NADA. Lo encontró el fundador usando el panel el 06-11-2026.

   ⚙️ Lleva `!important` porque tiene que ganarle a cualquier `display` de
   componente, y va antes del bloque de papel, que lo revierte a propósito
   para imprimirlo todo abierto. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  /* ⚠️ **17 px y no 16, pedido el 04-11-2026:** *«la fuente la veo súper
     pequeña. De hecho, en general, todas las fuentes las veo muy pequeñas»*.
     Sube el cuerpo y, sobre todo, sube la ayuda de 14 a 15, que es la que él
     señaló dos veces porque es la que lleva las descripciones. */
  font: 400 17px/26px var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--marca); text-decoration-thickness: 1px; text-underline-offset: 2px; }

::selection { background: var(--marca-suave); color: var(--tinta); }

/* ⚙️ El foco, de 3 px y separado 3 px del control. Va en `:focus-visible` y no
   en `:focus` para que no salte al pulsar con el ratón, y separado porque
   pegado al borde de un campo se confunde con el borde del propio campo, que
   es como si no estuviera. */
:where(a, button, .boton, input, select, textarea, summary,
       [tabindex]):focus-visible {
  outline: 3px solid var(--marca);
  outline-offset: 3px;
}

/* ⛔ Quien ha pedido no ver movimiento no ve ninguno. Va con `!important` y
   sobre todos los elementos porque es la única forma de que valga también
   para lo que se añada después sin acordarse de esta regla. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------- la escala

   Tamaño / interlineado, y el peso. No hay peso 300 en ninguna parte: a 16 px
   sobre papel cálido, el 300 se lee lavado. Los párrafos no llevan espaciado
   negativo -solo los títulos-, porque apretar las letras de un texto largo se
   paga en velocidad de lectura. */

/* ⚠️ **Los títulos dejaron la serif el 04-11-2026.** Con una sola familia, lo
   que separa un título de un párrafo es el tamaño, el peso y el espaciado
   entre letras, no un cambio de voz. El apretado sube a -.035em porque en
   sans un titular suelto se ve desarmado. */
h1 {
  font: 700 34px/39px var(--sans);
  letter-spacing: -.035em;
  margin: 0 0 10px;
}

h2 {
  font: 700 22px/28px var(--sans);
  letter-spacing: -.025em;
  /* 32 px entre secciones: es el salto que hace que una sección se vea como
     una sección y no como un párrafo con la letra más grande. */
  margin: 32px 0 16px;
}

h3 { font: 600 17px/24px var(--sans); letter-spacing: 0; margin: 0 0 4px; }

/* La entradilla se queda al tamaño del cuerpo: con un título de 36 px encima,
   no necesita crecer para distinguirse. Lo que la separa es el color. */
.entradilla {
  color: var(--tinta-suave);
  margin: 0 0 32px;
  max-width: var(--medida);
}

/* Etiqueta y metadato, 14/20. La etiqueta en 600 porque nombra un campo; el
   metadato en 400 porque acompaña. */
label {
  display: block;
  font: 600 15px/21px var(--sans);
  margin: 0 0 4px;
}

.ayuda, .pie, .cifra-pie, .cuando {
  font: 400 15px/22px var(--sans);
  color: var(--tinta-suave);
}

/* El título de una fila o de un caso. Va suelto y no como `.fila .preg` porque
   el HTML lo usa también dentro de una lista de `div` a secas, y colgado de
   `.fila` esos títulos se quedaban sin estilo: del tamaño del cuerpo y sin
   peso, o sea, sin ser títulos. */
.preg {
  font: 600 18px/24px var(--sans);
  color: var(--tinta);
  margin: 4px 0 8px;
}

.ayuda, .pie { margin: 4px 0 0; max-width: var(--medida); }

/* ⚠️ Un tope de lectura dentro de algo centrado descoloca el texto: el bloque
   se queda a la izquierda y lo único centrado es su interior, así que la «o»
   de la zona de soltar ficheros se quedaba en mitad de la nada. Donde se
   centra, no se topa. */
.vacio .ayuda, .vacio .pie,
.soltar .ayuda, .soltar .pie,
.caja-entrar .ayuda, .caja-entrar .pie,
[style*="text-align:center"], [style*="text-align: center"] { max-width: none; }

/* Tope de lectura: 66 ch son unos 66-68 caracteres por línea. Una respuesta
   del tutor de ancho completo a 1120 px obliga al ojo a volver a buscar el
   principio de cada renglón. */
.lectura { max-width: var(--medida); }

.mal { color: var(--mal); font-weight: 600; }

/* ---------------------------------------------------------- estructura */

/* 🔴 **EL MENÚ SE FUE A LA IZQUIERDA EL 04-11-2026**, con la dirección «Mesa
   de edición». Lo que tenía mal el de arriba no era el aspecto:

     1. **Nueve enlaces en una tira, todos del mismo rango.** Cursos y Ajustes
        pesaban lo mismo que Informe. Ahora van en tres grupos con su título:
        tu comunidad, tu contenido, tu tutor.
     2. **En un móvil, parte del menú se salía de la pantalla** y había que
        arrastrar una fila horizontal para encontrar el resto. Ahora hay un
        botón «Menú» que abre la lista en columna.
     3. **Y se partía en dos renglones** en cuanto el contenido se estrechaba,
        que es lo que pasó el 04-11 al ajustar el ancho de lectura. Una
        columna no tiene ese problema: crece hacia abajo.

   ⚙️ **Y no hubo que tocar ni una de las diez pantallas.** Todas tienen la
   misma forma -`<header class="barra">` y `<main>`- así que las dos columnas
   se hacen aquí, con una rejilla sobre el `body`. */
/* ⛔ **`:has(> .barra)` y no `body` a secas, y esto se vio abriéndolo.** La
   portada, el alta y la demostración no llevan menú, así que con la rejilla
   puesta en todas partes el formulario de entrar se metía en la columna de
   216 px y salía espachurrado contra el borde izquierdo. La rejilla es de las
   pantallas que tienen menú, que son las que tienen dos columnas.

   ⚙️ Y si un navegador no entendiera `:has`, lo que pasa es que el menú se
   dibuja arriba y el contenido debajo: se pierde la composición, no la
   pantalla. */
body:has(> .barra) {
  display: grid;
  grid-template-columns: var(--ancho-barra) minmax(0, 1fr);
  min-height: 100vh;
}

/* 🔴 **La barra y el cuerpo se colocan a mano, y esto arregla un fallo real
   que se vio midiendo en el navegador el 06-11-2026.** La columna de contenido
   medía `757 px` donde debía medir `1180`, y la causa no estaba en ninguna
   hoja de estilos nuestra: **una extensión del navegador había metido sus
   propios elementos como hijos directos de `body`**, y en una rejilla
   cualquier hijo es una celda. Dos elementos ajenos se habían llevado dos
   columnas y habían empujado el contenido.

   ⚠️ **Esto le va a pasar a cualquier formadora con un gestor de contraseñas
   instalado**, que son casi todas, y el síntoma es el que él describió: cosas
   que no ocupan el ancho que deberían. No es algo que se pueda pedir que
   arreglen ellas.

   ⚙️ **Con la posición escrita, lo que meta una extensión se coloca solo en
   una fila de debajo y no toca ni la barra ni el contenido.** No se le esconde
   nada: esconder lo que mete una extensión rompería, por ejemplo, el aviso de
   un gestor de contraseñas. */
body:has(> .barra) > .barra { grid-column: 1; grid-row: 1; }
body:has(> .barra) > main { grid-column: 2; grid-row: 1; }

.barra {
  background: var(--barra);
  color: var(--sobre-barra);
  align-self: stretch;
}

.barra-dentro {
  position: sticky;
  top: 0;
  padding: 26px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 100vh;
}

.marca {
  font: 800 25px/30px var(--sans);
  letter-spacing: -.04em;
  text-decoration: none;
  color: var(--sobre-barra);
  margin: 0 12px 10px;
}

/* 🔴 **El aviso de datos sembrados, encogido a una etiqueta el 04-11-2026.**
   Antes era un párrafo de cinco renglones plantado encima de todas las
   pantallas, explicando cada vez lo mismo. La propuesta de rediseño lo
   señaló: *«etiqueta persistente y detalle accesible»*.

   ⛔ **Lo que NO cambia es que esté siempre a la vista.** Lo que se encoge es
   la explicación, no el aviso: la palabra «ejemplo» se ve sin abrir nada, y
   el motivo por el que ninguna cifra mide nada está a un clic. Esconder del
   todo que los datos son inventados sería exactamente el error que este
   aviso existe para evitar. */
.aviso-ejemplos {
  background: var(--acento-suave);
  color: var(--acento);
  border-radius: var(--radio-control);
  font: 600 12px/17px var(--sans);
  margin: 0 0 18px;
  padding: 0 10px;
}

.aviso-ejemplos summary {
  padding: 7px 0;
  cursor: pointer;
  list-style-position: inside;
}

.aviso-ejemplos .ayuda {
  color: var(--acento);
  font-weight: 400;
  max-width: none;
  margin: 0 0 8px;
}

.barra nav { display: flex; flex-direction: column; gap: 2px; }

.barra .grupo {
  font: 700 11px/16px var(--sans);
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--barra-tenue);
  margin: 22px 12px 6px;
}

.barra nav a {
  padding: 10px 12px;
  min-height: 44px;
  display: flex;
  align-items: center;
  border-radius: var(--radio-control);
  text-decoration: none;
  color: var(--barra-enlace);
  font: 400 14px/20px var(--sans);
  transition: background-color var(--paso-hover) ease,
              color var(--paso-hover) ease;
}

.barra nav a:hover { background: var(--barra-aqui); color: var(--sobre-barra); }

.barra nav a[aria-current] {
  background: var(--barra-aqui);
  color: var(--sobre-barra);
  font-weight: 700;
  border-left: 3px solid var(--barra-foco);
  padding-left: 9px;
}

.barra .cuenta {
  margin-top: auto;
  border-top: 1px solid var(--barra-aqui);
  padding: 18px 12px 0;
  font: 400 13px/19px var(--sans);
  color: var(--barra-enlace);
}

.barra .cuenta strong { display: block; color: var(--sobre-barra); margin-bottom: 10px; }

/* El foco dentro de la columna se dibuja en claro: el azul de `--marca` sobre
   el azul oscuro de la barra no llega a 3:1 y sería un foco invisible. */
.barra :where(a, button, summary):focus-visible { outline-color: var(--barra-foco); }

.menu-movil { display: none; }

/* 🔴 **`width: 100%` y NO es decorativo: sin él la columna de contenido se
   encoge a lo que mida lo más ancho que haya dentro.** Lo cazó medir el ancho
   en el navegador el 06-11-2026, buscando por qué Asuntos no ocupaba lo mismo
   que Marcadas: `757 px` en una pantalla donde Informe daba `1180`.

   ⚙️ **La causa, que no se ve leyendo.** `body` es una rejilla, y en una
   rejilla un hijo con `margin: 0 auto` deja de estirarse: los márgenes
   automáticos se comen el hueco y el ancho pasa a ser «lo que ocupe el
   contenido». En Informe el contenido es ancho y llegaba al tope; en Asuntos
   son fichas estrechas, así que la columna entera se encogía con ellas.

   ⛔ **Por eso la misma pantalla medía distinto según lo que hubiera dentro**,
   que es justo lo que él describió: *«el de asuntos sigue sin ocupar todo el
   ancho»*. Con `width: 100 %` la columna mide siempre lo mismo y el
   `max-width` sigue centrándola en pantallas grandes. */
main {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 30px 36px 64px;
  min-width: 0;
}

/* ⚠️ **Bajo 850 px la columna se convierte otra vez en una barra**, pero con
   un botón que abre el menú en vertical, no con una tira que se sale. Es el
   corte que da la propuesta y coincide con el punto en el que la lista y el
   detalle del informe dejan de caber uno al lado del otro. */
@media (max-width: 850px) {
  body:has(> .barra) { display: block; }
  .barra-dentro {
    min-height: 0;
    padding: 10px 16px;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    z-index: 10;
  }
  .marca { margin: 0; font-size: 21px; }
  .aviso-ejemplos { margin: 0; order: 3; width: 100%; }
  .menu-movil {
    display: inline-flex;
    margin-left: auto;
    background: transparent;
    color: var(--sobre-barra);
    border-color: var(--barra-tenue);
  }
  .menu-movil:hover { background: var(--barra-aqui); color: var(--sobre-barra); }
  .barra nav { display: none; order: 4; width: 100%; }
  .barra nav.abierto { display: flex; }
  .barra .grupo { margin-top: 14px; }
  .barra .cuenta {
    margin: 0;
    border: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .barra .cuenta strong { display: none; }
  main { padding: 24px 16px 48px; }
}

/* ---------------------------------------------------------- superficies

   Tres niveles, y el nivel ES la jerarquía:

     `.protagonista`  la superficie principal de la pantalla. Papel, 16 px de
                      radio, 24 de interior y borde de tinta -no de pelo-, que
                      es lo que la hace protagonista sin necesitar sombra.
     `.tarjeta`       un panel de apoyo: filtros, un bloque de texto, un
                      formulario corto. Papel, 12 px de radio, borde de pelo.
     `.rejilla` dentro  nada: ni caja ni borde. Ver más abajo.

   ⚠️ Y ninguna lleva sombra. La sombra está en `--sombra` y se usa solo en lo
   que flota encima de otra cosa. */

.tarjeta {
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio-caso);
  padding: 16px 20px;
}

.protagonista {
  background: var(--papel);
  border: 1px solid var(--borde-control);
  border-radius: var(--radio-panel);
  padding: 24px;
}

/* La caja de entrar ES la protagonista de su pantalla: no hay nada más que
   mirar. Se le da el trato sin tener que cambiar su HTML. */
.caja-entrar .tarjeta {
  border-color: var(--borde-control);
  border-radius: var(--radio-panel);
  padding: 24px;
}

/* ---------------------------------------------------------- las cifras

   🔴 Cuatro recuadros blancos con un número dentro son cuatro objetos
   compitiendo, y la pantalla de Resumen empezaba así. Ahora son una tira: una
   raya encima de cada cifra y nada más, como una tabla de un cuaderno. Se
   consigue sin tocar el HTML porque las cifras viven siempre dentro de
   `.rejilla`. */

.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 24px;
}

.rejilla .tarjeta {
  background: none;
  border: 0;
  border-top: 1px solid var(--borde);
  border-radius: 0;
  padding: 12px 0 0;
}

.cifra {
  display: block;
  font: 600 36px/40px var(--sans);
  letter-spacing: -.02em;
  /* Los dígitos de ancho fijo evitan que la cifra «salte» de sitio al
     repintarse con otro número de la misma longitud. */
  font-variant-numeric: tabular-nums;
}

.cifra-pie { display: block; margin-top: 4px; max-width: 30ch; }

/* ---------------------------------------------------------- listas y filas

   🔴 **Aquí estaba el problema de verdad.** Cada fila de una lista era su
   propia tarjeta blanca con borde y sombra, así que una pantalla con tres
   listas eran veinte objetos iguales y ninguno importaba más que otro.

   Ahora un renglón de listado no tiene contenedor: se separa del siguiente
   con una línea de 1 px y 16 px de aire arriba y abajo. */

.lista { display: flex; flex-direction: column; gap: 0; }

/* El renglón vale para cualquier hijo directo de una lista, no solo para
   `.fila`: algunas listas del panel llevan `div` a secas y sin esta regla
   quedaban pegados unos a otros, sin línea y sin aire, que es justo el
   problema que veníamos a quitar. El vacío y un pie sueltos no son renglones:
   son el mensaje de que la lista no tiene nada. */
/* ⚠️ Los dos `:not` encadenados que había aquí -`:not(.vacio):not(.pie)`- suman
   peso cada uno, y entre los dos esta regla pesaba más que la del caso de
   abajo: las respuestas pendientes de revisar se quedaban sin su recuadro y no
   había forma de verlo en el fichero, solo en la pantalla. Con un solo `:not`
   de dos argumentos pesa lo que tiene que pesar. */
.fila,
.lista > :not(.vacio, .pie) {
  background: none;
  border: 0;
  border-radius: 0;
  border-top: 1px solid var(--borde);
  padding: 16px 0;
}

.fila .cuando { margin: 0; }

.fila p { margin: 0 0 8px; }
.fila p:last-child { margin-bottom: 0; }

/* El tope de lectura, con una excepción: un párrafo que el HTML usa como fila
   de botones -y que por eso lleva su propio `display:flex`- no es texto y no
   debe estrecharse, o los botones empiezan a bajar de línea antes de hora. */
.fila > p, .tarjeta > p, .protagonista > p, .destacada > p { max-width: var(--medida); }
.fila > p[style*="flex"], .tarjeta > p[style*="flex"],
.protagonista > p[style*="flex"], .destacada > p[style*="flex"],
.tarjeta > p.atajos,
.pie[style*="flex"], .ayuda[style*="flex"] { max-width: none; }

/* ⚙️ **Un caso de revisión sí es un objeto, y recupera su contenedor.** Un
   caso agrupa observación + respuesta + evidencia + acción: ahí el recuadro no
   repite, delimita.

   La regla de abajo lo decide por lo que la fila lleva dentro, y no por una
   clase, para que siga valiendo cuando el HTML cambie: **una fila con algo
   que se pulsa, un bloque de código o un campo dentro no es un renglón de un
   listado, es algo sobre lo que se actúa.** Hoy eso separa limpiamente las
   listas del producto: las respuestas marcadas, los casos pendientes de
   revisar, los cursos y los documentos del material quedan en caja; el
   resumen, el listado de preguntas una a una y lo que el curso no responde
   quedan en renglones.

   `.caso` y `.renglon` están para forzar cualquiera de los dos a mano. */

.caso,
.fila.caso,
.lista > .caso,
.lista > .fila:not(.renglon):has(button, pre, input, select, textarea) {
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio-caso);
  padding: 16px;
  /* 6 + 6 = los 12 px que pide la escala entre dos casos seguidos, sin
     necesitar una regla aparte para el primero y el último. */
  margin: 6px 0;
}

.fila.renglon {
  background: none;
  border: 0;
  border-top: 1px solid var(--borde);
  border-radius: 0;
  padding: 16px 0;
  margin: 0;
}

/* ---------------------------------------------------------- lo que falta

   ⛔ **El miel vive solo aquí.** Marca lo que los alumnos piden y el curso no
   cubre: la sección por la que el formador paga. Se pone con `falta` sobre la
   clase que ya haya en el HTML -`.lista.falta`, `.sello.falta`, `.nota.falta`,
   `.cifra.falta`, `.caso.falta`, `h2.falta`-, así que destacar esa sección es
   añadir una palabra, no reescribirla. */

/* ⚙️ El `:not(.renglon)` está para pesar más que la regla del caso de arriba,
   no por lo que excluye: si no, una fila con un botón dentro perdería el miel
   al recuperar su recuadro. Las tres reglas van en cadena a propósito
   -renglón, caso, miel- y cada una pesa más que la anterior. */
.lista.falta > .fila:not(.renglon),
.fila.falta,
.caso.falta {
  border-left: 3px solid var(--acento);
  border-radius: 0 var(--radio-control) var(--radio-control) 0;
  padding-left: 16px;
  background: var(--acento-suave);
}

.lista.falta > .fila:not(.renglon) { margin: 6px 0; border-top: 0; }

.cifra.falta { color: var(--acento); }

/* `.tarjeta.destacada` es la pieza protagonista del Resumen: los temas que los
   alumnos preguntan y el material no cubre. Es el único panel del producto con
   el fondo de miel, y por eso no necesita que nadie escriba que es importante.

   Lleva las tres cosas a la vez -color propio, más interior y más peso en el
   título- porque una sola de ellas no se ve: un fondo tenue sin cambio de
   tamaño se lee como una variante decorativa de la tarjeta de al lado. */
.destacada {
  background: var(--acento-suave);
  border: 1px solid var(--acento);
  border-radius: var(--radio-panel);
  padding: 24px;
}

.destacada h2 { color: var(--acento); }

/* Dentro de la destacada el ranking es el contenido, no una leyenda al pie:
   sube al tamaño de un título de fila y los dígitos quedan tabulares para que
   la columna de números no baile al repintarse. */
.destacada .rango { gap: 16px; align-items: baseline; }
.destacada .rango .nombre { font: 600 18px/24px var(--sans); }
.destacada .rango .n {
  font: 600 18px/24px var(--sans);
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
}

/* ⚙️ El `!important` no es pereza: el ancho de escritorio va en un atributo
   `style` dentro del HTML, y un estilo en línea gana a cualquier hoja salvo
   con esto. La alternativa era pedir que se saque de ahí, y mientras no se
   saque la pantalla se parte a 390 px. */
.dos-columnas {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  align-items: start;
}

/* Para cuando lo que pide revisión deba leerse antes que lo que falta: se
   añade `revisar-primero` a la rejilla y la segunda columna sube. Va con una
   clase y no adivinando desde el CSS porque la condición -que haya respuestas
   sin comprobar- la sabe quien pinta la pantalla, no esta hoja.

   🔴 **Y va DENTRO de la media query, que es donde tenía que haber estado.**
   Estaba fuera, así que también se aplicaba en pantalla ancha: ahí las dos
   columnas no se apilan, miden `2fr` y `1fr`, y subir la segunda metía la
   tarjeta grande en la columna estrecha y la lista corta en la ancha. El
   resumen salía al revés.

   ⛔ No se veía porque la condición es «hay respuestas sin la cita
   localizada», y la cuenta de la demostración tenía **cero**. Salió el
   02-11-2026, en cuanto la siembra puso dos. Un estilo que solo se aplica con
   datos que nunca hay es un estilo que nadie ha visto nunca. */
@media (max-width: 900px) {
  .dos-columnas { grid-template-columns: 1fr !important; }
  .dos-columnas.revisar-primero > :last-child { order: -1; }
}

/* El título de la sección lleva una marca de margen, como la raya a lápiz que
   se pone al lado de lo que hay que volver a leer. */
h2.falta {
  border-left: 3px solid var(--acento);
  padding-left: 12px;
  margin-left: -15px;
}

/* ---------------------------------------------------------- piezas */

/* La cita es material del formador citado palabra por palabra. Lo que dice
   que es un trozo traído de otro sitio y no una frase nuestra ya no es la
   letra -ahora hay una sola- sino la raya de la izquierda, el color más
   apagado y la sangría. */
.cita {
  font: 400 15px/25px var(--sans);
  color: var(--tinta-suave);
  background: var(--superficie);
  border-left: 3px solid var(--borde-control);
  border-radius: 0 var(--radio-control) var(--radio-control) 0;
  padding: 12px 16px;
  margin: 0 0 8px;
  max-width: var(--medida);
}

.sello {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font: 600 13px/20px var(--sans);
  background: var(--superficie);
  color: var(--tinta-suave);
  border: 1px solid var(--borde);
  vertical-align: 2px;
}

/* ⚠️ Desde el 04-11-2026 el sello de «está bien» tiene su propio verde. Antes
   usaba el color de los botones, así que un hecho y un control se pintaban
   igual y había que leer el texto para distinguirlos. */
.sello.bien { background: var(--bien-suave); color: var(--bien); border-color: transparent; }
.sello.ojo { background: var(--aviso-suave); color: var(--aviso); border-color: transparent; }
.sello.mal { background: var(--mal-suave); color: var(--mal); border-color: transparent; }
.sello.falta { background: var(--acento-suave); color: var(--acento); border-color: transparent; }

code, .codigo {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 20px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-control);
  padding: 2px 6px;
}

pre.codigo {
  padding: 16px;
  overflow-x: auto;
  white-space: pre;
  margin: 0;
}

/* Tres líneas y a partir de ahí se corta. Lo usan el informe y el widget para
   que una respuesta larga no empuje la siguiente fuera de la pantalla. */
.corta {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------------------------------------------------------- formularios */

input:not([type="checkbox"]):not([type="radio"]), textarea, select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--borde-control);
  border-radius: var(--radio-control);
  background: var(--papel);
  color: var(--tinta);
  font: 400 16px/24px var(--sans);
}

/* El campo enfocado cambia su propio borde además de recibir el anillo: el
   anillo dice «estoy aquí» y el borde dice «y esto es lo que vas a escribir». */
input:focus, textarea:focus, select:focus { border-color: var(--marca); }

::placeholder { color: var(--tinta-suave); opacity: 1; }

textarea { resize: vertical; min-height: 80px; line-height: 26px; }

.campo { margin: 0 0 16px; }

button, .boton {
  font: 600 16px/24px var(--sans);
  padding: 10px 20px;
  border-radius: var(--radio-control);
  border: 1px solid transparent;
  background: var(--marca);
  color: var(--sobre-marca);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background-color var(--paso-hover) ease,
              border-color var(--paso-hover) ease;
}

/* ⛔ El hover va con `--marca-hover` y no con `filter: brightness()`. El filtro
   aclaraba el botón ENTERO, texto incluido, así que en modo oscuro -donde la
   letra ya es oscura sobre verde claro- lo dejaba más cerca de ilegible cuanto
   más se insistía en señalarlo. */
button:hover, .boton:hover { background: var(--marca-hover); }
button:disabled { opacity: .5; cursor: default; background: var(--marca); }

button.suave, .boton.suave {
  background: var(--papel);
  color: var(--tinta);
  border-color: var(--borde-control);
}

button.suave:hover, .boton.suave:hover { background: var(--superficie); }

button.pequeno, .boton.pequeno { font: 600 14px/20px var(--sans); padding: 6px 12px; }

/* interruptor de tres posiciones y de dos */
.opciones { display: flex; flex-direction: column; gap: 8px; }

.opcion {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 16px;
  border: 1px solid var(--borde-control);
  border-radius: var(--radio-control);
  background: var(--papel);
  cursor: pointer;
  transition: background-color var(--paso-hover) ease,
              border-color var(--paso-hover) ease;
}

.opcion:hover { background: var(--superficie); }
.opcion:has(input:checked) { border-color: var(--marca); background: var(--marca-suave); }
.opcion input { margin: 4px 0 0; flex: none; accent-color: var(--marca); }
.opcion .rotulo { font: 600 16px/24px var(--sans); display: block; }
.opcion .detalle { font: 400 14px/20px var(--sans); color: var(--tinta-suave); }

/* ⛔ **Un ajuste por línea: el nombre a la izquierda y lo que se elige a la
   derecha.** Cuatro decisiones en cuatro líneas en vez de cuatro bloques con
   su explicación cada uno. Lo pidió el fundador el 02-11-2026 mirando la
   pantalla de notificaciones, y vale para cualquier pantalla donde lo que se
   decide sea «de esto, cuál»: lo que ocupa sitio no es el ajuste, es el
   párrafo que lo acompaña.

   El `flex-wrap` es lo que lo arregla en el móvil: el desplegable baja a su
   propia línea en vez de estrujar el nombre. */
.ajuste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 16px;
}

/* `min-width: 0` para que un nombre largo parta la línea dentro de su hueco en
   vez de empujar la página a lo ancho. */
.ajuste > :first-child { flex: 1 1 240px; min-width: 0; }
.ajuste select { flex: 0 1 auto; width: auto; min-width: 11ch; }
.ajuste .ayuda { margin-top: 2px; }

/* ---------------------------------------------------------- avisos */

.nota {
  background: var(--papel);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--marca);
  border-radius: 0 var(--radio-caso) var(--radio-caso) 0;
  padding: 16px;
  color: var(--tinta);
  max-width: var(--medida);
}

/* Cada variante se tiñe además de cambiar la raya: una raya de color sobre
   fondo blanco se pierde en una pantalla con mucho texto. */
.nota.ojo { border-left-color: var(--aviso); background: var(--aviso-suave); border-color: transparent; }
.nota.mala { border-left-color: var(--mal); background: var(--mal-suave); border-color: transparent; }
.nota.falta { border-left-color: var(--acento); background: var(--acento-suave); border-color: transparent; }
.nota strong { color: var(--tinta); }

.vacio {
  text-align: center;
  padding: 32px 24px;
  color: var(--tinta-suave);
  background: var(--superficie);
  /* Discontinuo y con el borde de un control: un vacío es un hueco que se
     puede llenar, y el trazo discontinuo es lo que dice eso sin palabras. */
  border: 1px dashed var(--borde-control);
  border-radius: var(--radio-caso);
}

/* ---------------------------------------------------------- pasos */

.pasos { display: flex; flex-direction: column; gap: 0; }

.paso {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 16px;
  padding: 0 0 24px;
  position: relative;
}

.paso:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 32px;
  bottom: 0;
  width: 1px;
  background: var(--borde);
}

.paso .num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--marca-suave);
  color: var(--marca);
  display: grid;
  place-items: center;
  font: 700 14px/20px var(--sans);
  z-index: 1;
}

.paso.hecho .num { background: var(--marca); color: var(--sobre-marca); }
.paso h3 { margin: 4px 0; }
.paso p { margin: 0 0 8px; color: var(--tinta-suave); max-width: var(--medida); }

.quien {
  font: 700 13px/20px var(--sans);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--marca);
}

/* ---------------------------------------------------------- el informe

   Estas clases las usa `informe.html` en su propia hoja. Viven también aquí
   para que al moverlas no haya que reinventar sus valores, y para que sigan
   la misma escala que el resto. */

.filtros-caja {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 16px;
  align-items: end;
}

.atajos { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }

.ranking { display: flex; flex-direction: column; gap: 16px; }

.rango {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: baseline;
}

/* 🔴 **Un tema del resumen SE PUEDE PULSAR, y hasta hoy parecía que sí y no.**
   Lo dijo el fundador el 02-11-2026: *«da la sensación de que parecería como
   que se puede hacer link encima de los asuntos para que te lleven las
   preguntas, pero no se puede»*. Tenía razón las dos veces: lo parecía, y no
   se podía. Ahora lleva al informe filtrado por ese tema.

   ⚙️ Subrayado solo al pasar por encima: cinco filas subrayadas seguidas
   parecen una lista de enlaces de pie de página y no un ranking. */
a.rango {
  text-decoration: none;
  color: inherit;
  padding: 4px 8px;
  margin: -4px -8px;
  border-radius: var(--radio-control);
}

a.rango:hover { background: var(--superficie); }
a.rango:hover .nombre { text-decoration: underline; }

.rango .nombre { font: 600 16px/24px var(--sans); }
.rango .n { font: 400 14px/20px var(--sans); font-variant-numeric: tabular-nums; color: var(--tinta-suave); }

/* La tira no lleva transición de ancho: al cambiar un filtro, el formador
   quiere ver el resultado, no ver cómo crece hasta el resultado. */
.tira {
  height: 8px;
  border-radius: 999px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  overflow: hidden;
  display: flex;
}

.tira .si { background: var(--marca); }
.tira .no { background: var(--aviso); }

.leyenda {
  display: flex;
  gap: 16px;
  font: 400 14px/20px var(--sans);
  color: var(--tinta-suave);
  margin: 0 0 16px;
  flex-wrap: wrap;
}

.punto-leyenda {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
  margin-right: 6px;
}

/* ---------------------------------------------------------- entrar */

.portada {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 32px 24px;
}

.caja-entrar { width: 100%; max-width: 420px; }
.caja-entrar h1 { text-align: center; }
.caja-entrar .entradilla { text-align: center; margin-bottom: 24px; }

/* ---------------------------------------------------------- móvil

   El panel se usa también desde el móvil, y ahí el título de 36 px se come la
   pantalla. Baja a 30, que sigue siendo el doble del cuerpo: el salto de peso
   se mantiene, que es lo que hacía falta. */

@media (max-width: 640px) {
  main { padding: 24px 16px 48px; }

  /* ⚠️ **Aquí había un menú que se deslizaba de lado, y se ha quitado el
     04-11-2026.** La idea era que el apartado cortado por la derecha avisara
     de que hay más; la revisión de diseño comprobó lo contrario: a 390 px
     parte de los nueve apartados quedaba fuera de la pantalla y nada decía
     que estuvieran ahí. Ahora hay un botón «Menú» que los abre en columna,
     que es lo que se reconoce sin aprenderlo. */
  h1 { font: 700 30px/35px var(--sans); letter-spacing: -.035em; }
  h2 { font: 700 22px/28px var(--sans); letter-spacing: -.025em; }
  .tarjeta, .protagonista, .caja-entrar .tarjeta, .destacada { padding: 16px; }
  .rejilla { gap: 16px; }
  h2.falta { margin-left: 0; }
}

/* ⚙️ El texto del material, para leerlo antes de aprobarlo. Monoespaciada no:
   esto es prosa, no código, y se lee mejor con la del cuerpo. Alto limitado y
   con su propio desplazamiento para que un documento largo no empuje el resto
   de la pantalla hasta el olvido. */
.texto-material {
  margin: 0;
  max-height: 42vh;
  overflow-y: auto;
  padding: 14px 16px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-caso);
  background: var(--fondo);
  font: inherit;
  font-size: 16px;
  line-height: 1.62;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

/* 🔴 **Que un bloque de codigo no empuje la pantalla, medido el 31-10-2026.**
   La pantalla «Poner en tu web» ocupaba 1.069 pixeles de ancho en un movil de
   400: habia que desplazarse de lado para leer la linea que hay que copiar. Y
   es justo la pantalla cuyo unico trabajo es que la copies.

   ⚙️ La causa: la rejilla de los pasos tiene una columna flexible, y una
   columna flexible **no se encoge por debajo de su contenido** si no se le
   dice. El bloque de codigo la hinchaba y arrastraba todo lo demas. Dos
   declaraciones lo arreglan: que la columna pueda encogerse, y que el bloque
   se desplace **dentro de su caja** en vez de empujar la pagina.

   ⛔ Y el mismo bloque NO desbordaba en «Cursos», porque alli no vive dentro de
   una rejilla: el mismo componente se comportaba distinto segun la pantalla,
   que es el tipo de cosa que un sistema de disenyo existe para evitar. */
.paso > * { min-width: 0; }
pre.codigo { max-width: 100%; overflow-x: auto; }

/* ---------------------------------------------------- las subpestañas

   🔴 **NACEN DE LA QUEJA MÁS REPETIDA DEL FUNDADOR, Y ÉL LA DIO COMO REGLA
   DEL PRODUCTO, NO DE UNA PANTALLA:** *«es un error común que tú tienes,
   siempre haces páginas muy largas»*, y antes: *«hay demasiado que scrollear
   en todas las pantallas»*. El 04-11-2026 lo dijo con la solución puesta:
   *«para no scrollear tanto, yo haría tres pestañas. Se quedaron sin ninguna
   respuesta y entonces te despliega solo eso. Respondió acotando lo que no
   encontró y te despliega solo eso. Y dudas que se repiten y te despliega
   solo eso»*.

   ⚙️ **Por qué son distintas de `.atajos` y no la misma clase.** Las de arriba
   eligen a qué has venido —tres decisiones distintas, que se toman en momentos
   distintos—. Estas eligen **qué trozo de la misma decisión estás mirando**, y
   si se pintaran iguales habría dos filas de botones idénticos y ninguna de
   las dos se leería como la principal. Así que estas van más pequeñas, en
   línea y con el elegido subrayado, como las lengüetas de una carpeta.

   ⛔ **Y cada una lleva su número puesto.** Plegar algo sin decir cuánto hay
   debajo es esconderlo, que es lo contrario de lo que se pide aquí. */
/* Un botón que tiene que leerse como el título de una fila: se le quita todo
   lo de botón menos el teclado. */
.preg.desplegable {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  padding: 0;
  min-height: 44px;
  color: inherit;
  font: inherit;
}

.preg.desplegable:hover { color: var(--marca); }

/* La ayuda que se abre. El resumen es la frase que se ve siempre, así que
   tiene que leerse como una frase y no como un botón: va del color de la
   ayuda y lo único que la distingue es el triángulo. */
details.ayuda > summary {
  cursor: pointer;
  min-height: 44px;
  display: list-item;
  padding: 11px 0;
  color: var(--tinta-suave);
  font: 400 15px/22px var(--sans);
}

details.ayuda > summary:hover { color: var(--tinta); }

/* 🔴 **Lo que se abre ocupa el ancho de la columna, no 66 caracteres.** Lo
   pidió el fundador el 06-11-2026 mirando el informe: *«esas dos líneas no
   ocupan toda la pantalla, se quedan solo como media pantalla. Y eso pasa en
   todos los desplegables que tienen una flechita. Ocupa más líneas de las que
   debería»*.

   ⚙️ **Por qué estaba a 66 caracteres y por qué aquí no toca.** Esa medida es
   la de un texto largo, que se lee peor si la línea es muy ancha. Estos
   desplegables tienen dos o tres frases: el renglón de más que gana no
   compensa la columna a medias debajo de un título que sí ocupa todo.

   ⛔ **No se toca `--medida` en general.** Lo que cambia es esto, que es lo
   que él estaba mirando; la entradilla y los párrafos largos siguen a 66.

   ⚠️ **Y hacen falta las dos líneas, no solo la del párrafo.** `details.ayuda`
   lleva la clase `ayuda`, así que la regla general `.ayuda, .pie` le ponía el
   tope **al propio desplegable**: con el párrafo suelto y el desplegable
   topado, el texto seguía saliendo a 66 caracteres. Se vio midiendo el ancho
   en el navegador, no leyendo la hoja de estilos. */
details.ayuda { max-width: none; }
details.ayuda > p { margin: 0 0 12px; max-width: none; }
.explica-vista { margin: -4px 0 14px; }

/* ------------------------------------------- la lista y el detalle

   🔴 **La «Mesa de edición», adoptada el 04-11-2026.** La lista se queda
   quieta a la izquierda y la respuesta se abre a la derecha, en vez de
   desplegarse dentro de la lista empujando todo lo de debajo. Las dos
   columnas van en una caja con un solo borde: dos paneles separados, cada uno
   con su sombra, volverían a ser dos objetos compitiendo.

   ⛔ **Y un solo desplazamiento, el de la página.** Darle su propio scroll a
   la lista y otro al detalle hace que la rueda del ratón haga una cosa
   distinta según dónde esté el puntero, y entonces nadie sabe qué va a pasar
   al girarla. */
.informe-dos {
  display: grid;
  grid-template-columns: minmax(280px, .85fr) minmax(360px, 1.15fr);
  align-items: start;
  border: 1px solid var(--borde);
  border-radius: var(--radio-caso);
  background: var(--papel);
  overflow: clip;
}

.cola {
  min-width: 0;
  border-right: 1px solid var(--borde);
  align-self: stretch;
}

/* ⚙️ La cabecera de la lista va en rejilla de dos columnas: la etiqueta y el
   recuento comparten renglón. Apilados eran tres renglones encima de la
   primera pregunta, y la primera pregunta es lo que se ha venido a ver. */
.cola-cabeza {
  background: var(--superficie);
  padding: 10px 16px 12px;
  border-bottom: 1px solid var(--borde);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  align-items: baseline;
}

.cola-cabeza label { font: 600 13px/19px var(--sans); color: var(--tinta-suave); margin: 0; }
.cola-cabeza input { grid-column: 1 / -1; width: 100%; font-size: 15px; min-height: 40px; }
.cola-cabeza .pie { margin: 0; max-width: none; text-align: right; }

/* La fila es un BOTÓN, no un párrafo con el cursor cambiado. Lo que lo hace
   parecer una fila y no un botón es que pierde el fondo, el borde y la
   esquina; lo que lo hace ser un botón es el teclado. */
.fila-cola {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--borde);
  border-radius: 0;
  background: transparent;
  padding: 14px 16px;
  min-height: 44px;
  font: 400 15px/22px var(--sans);
  color: var(--tinta);
}

/* 🔴 **La fecha de la columna sube a `16px`, y lo pidió el fundador el
   06-11-2026 así:** *«la fecha y la pregunta, del mismo tamaño, y la fecha un
   punto más grande»*. Estaba en `13px` contra los `15px` de la pregunta, o
   sea, dos puntos por debajo. Queda un punto por encima, que es lo que pidió.

   ⚠️ **Y lo que eso hace, para que se pueda deshacer en un segundo:** pone la
   fecha por delante de la pregunta en lo que se lee primero. Si al verlo no es
   lo que quería, se baja a `15px` y quedan iguales. */
.fila-cola .cuando {
  display: block;
  font: 400 16px/22px var(--sans);
  color: var(--tinta-suave);
  margin: 0 0 6px;
}

.fila-cola .preg {
  display: block;
  font: 600 15px/23px var(--sans);
  color: var(--tinta);
  margin: 0 0 8px;
  overflow-wrap: anywhere;
  /* Sin recorte y sin alto fijo: la pregunta es lo único que permite
     reconocer la fila, y cortarla obliga a abrirlas una por una. */
  max-width: none;
}

.fila-cola:hover { background: var(--superficie); }

.fila-cola[aria-current="true"] {
  background: var(--marca-suave);
  box-shadow: inset 3px 0 var(--marca);
}

.paginas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px;
}

.paginas .pie { margin: 0; max-width: none; }

.detalle-caso { padding: 22px 26px; min-width: 0; }
.detalle-caso h2 { margin: 10px 0 12px; font-size: 23px; line-height: 30px; }
.detalle-caso h2:focus-visible { outline-offset: 6px; }
.detalle-caso .cuando { margin: 0; }
.detalle-caso .volver { display: none; margin-bottom: 14px; }
.detalle-caso .respuesta {
  font: 400 16px/26px var(--sans);
  max-width: var(--medida);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.detalle-apartado {
  border-top: 1px solid var(--borde);
  margin-top: 20px;
  padding-top: 18px;
}

.detalle-apartado h3 { font-size: 14px; }
.acciones { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 0; }

/* ⚠️ Por debajo de 850 px no caben las dos, así que se enseña una: la lista,
   y el caso cuando se ha elegido uno. El botón «Volver» aparece solo aquí,
   porque arriba de 850 px la lista no se ha ido a ninguna parte. */
@media (max-width: 850px) {
  .informe-dos { display: block; }
  .cola { border-right: 0; }
  .detalle-caso { display: none; }
  .informe-dos.abierta .cola { display: none; }
  .informe-dos.abierta .detalle-caso { display: block; }
  .detalle-caso .volver { display: inline-flex; }
}

.subpestanas {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  margin: 0 0 20px;
  border-bottom: 1px solid var(--borde);
}

.subpestanas button {
  font: 600 15px/22px var(--sans);
  padding: 10px 14px;
  background: transparent;
  color: var(--tinta-suave);
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  margin-bottom: -1px;
}

.subpestanas button:hover {
  background: var(--superficie);
  color: var(--tinta);
}

.subpestanas button[aria-selected="true"] {
  color: var(--tinta);
  border-bottom-color: var(--marca);
  background: transparent;
}

/* El número de cada lengüeta: dentro del botón, en redonda y en un tono más
   suave, para que el rótulo siga siendo lo que se lee primero. */
.subpestanas .cuantas {
  font-weight: 400;
  color: var(--tinta-suave);
  margin-left: 6px;
}

.subpestanas button[aria-selected="true"] .cuantas { color: var(--marca); }

/* ⚙️ En móvil las lengüetas no se apilan: se desplazan de lado, como la barra
   de navegación. Cuatro lengüetas apiladas son cuatro renglones de altura
   antes de llegar al contenido, y lo que se vino a arreglar era la altura. */
@media (max-width: 640px) {
  .subpestanas {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .subpestanas::-webkit-scrollbar { display: none; }
  .subpestanas button { white-space: nowrap; padding: 10px; }
}

/* ------------------------------------- qué hacer con un caso (Marcadas)

   🔴 **Nacen el 06-11-2026, cuando Marcadas dejó de ser una lista de fichas y
   pasó a la composición del informe.** El fundador pidió tres acciones nuevas
   sobre un caso -responder al alumno, sugerir otra respuesta y mandarnos un
   comentario-, y tres formularios abiertos a la vez debajo de cada caso lo
   dejaban más alto que lo que venía a arreglar.

   ⚙️ **Así que son tres cajas plegadas, y no una tarjeta cada una.** Lo que
   las separa del fondo del caso es un borde de pelo y nada más: tres tarjetas
   con su relleno serían otra vez tres objetos compitiendo dentro del caso, que
   es el error que el rediseño vino a quitar.

   ⛔ **Clases nuevas y no retoques a las compartidas.** Esto solo lo usa
   Marcadas, y tocar `.fila` o `.tarjeta` para que aquí quede bien cambiaría
   también el informe y el resto del panel. */
.acciones-caso { display: flex; flex-direction: column; gap: 8px; }

/* La fila de un botón con su frase al lado. La frase es la que dice qué va a
   pasar de verdad al pulsar -y hoy, de las tres, qué todavía no pasa-, así que
   va pegada al botón y no debajo del formulario. */
.accion-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 12px 0 0;
  max-width: none;
}

.acciones-caso > .accion-pie { margin: 0 0 4px; }
.accion-pie .pie { margin: 0; flex: 1 1 200px; min-width: 0; max-width: none; }

.accion-plegada {
  border: 1px solid var(--borde);
  border-radius: var(--radio-control);
  background: var(--papel);
}

/* 44 px de alto: es lo que hace falta para acertarle con el dedo, y vale igual
   para un resumen que para un botón. */
.accion-plegada > summary {
  cursor: pointer;
  padding: 11px 14px;
  min-height: 44px;
  display: list-item;
  list-style-position: inside;
  font: 600 15px/22px var(--sans);
}

.accion-plegada > summary:hover { color: var(--marca); }
.accion-plegada[open] > summary { border-bottom: 1px solid var(--borde); }

.accion-dentro { padding: 12px 14px 14px; }
.accion-dentro .pie, .accion-dentro .ayuda { max-width: none; }
.accion-dentro textarea { min-height: 76px; }

/* ------------------------------------------- las fichas de Asuntos

   🔴 **Pedido el 06-11-2026 con las dos quejas juntas:** *«hay mucho espacio
   por los lados en ambas pantallas que no se usa. ¿Y qué provoca eso? Que cada
   asunto sea más largo, que yo tenga que scrollear más»* y *«cada etiqueta de
   asunto me parece que ocupa demasiado espacio y que quizás se podría
   simplificar»*.

   ⚙️ **Dos columnas en pantalla ancha, una en el móvil, y lo decide el ancho
   que haya.** Con `auto-fill` no hay que elegir un número de columnas: a 400 px
   cae una sola, y la ficha no se entera.

   ⛔ **El mínimo va dentro de un `min(100%, …)` y eso no es un adorno.** Un
   `minmax(380px, 1fr)` a secas dibuja una columna de 380 px aunque la pantalla
   mida 368, y entonces la página se desplaza de lado: es el mismo desbordamiento
   que ya se midió en «Poner en tu web» a 400 px. Con el `min` la columna no
   puede ser más ancha que su sitio.

   ⛔ **No se toca `.lista`.** Una lista de renglones separados por una línea
   sigue siendo lo correcto para el informe y para el resumen; lo que no
   funciona en renglones es una ficha con botones dentro. Así que esto es una
   clase aparte y `.lista` se queda como estaba. */
.asuntos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
  gap: 12px;
  align-items: start;
}

/* La ficha recupera su caja -es un objeto sobre el que se actúa- y pierde la
   línea y el relleno vertical del renglón de listado. */
.asuntos > .fila {
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio-caso);
  padding: 14px 16px;
  margin: 0;
}

/* Dentro de una columna de 330 px el tope de lectura no aporta nada y, con el
   título en una fila flexible, estorba. */
.asuntos > .fila > p, .asuntos > .fila .pie { max-width: none; }

/* 🔴 **La ficha que se está editando ocupa el ancho entero.** Lo pidió el
   fundador el 06-11-2026: *«veo que has rehecho el menú de marcadas, que ahora
   ya ocupa toda la pantalla, pero sin embargo el de asuntos sigue sin ocupar
   todo el ancho de la pantalla»*.

   ⚙️ **Y así no hay que elegir entre las dos cosas que pidió.** La rejilla
   apretada es suya —*«como hay muchos asuntos, al final acabas scrolleando un
   montón»*— y sirve para mirar; el ancho entero sirve para escribir, que es lo
   que se hace en una ficha cada vez. Al cerrar el panel, la ficha vuelve a su
   columna. */
.asuntos > .fila.editando { grid-column: 1 / -1; }

/* El título y el sello en el mismo renglón: el sello es un dato de dos
   palabras, y bajarlo a su propia línea cuesta un renglón por ficha. */
.ficha-cabeza {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
  justify-content: space-between;
}

.ficha-cabeza .preg { margin: 0; flex: 1 1 170px; min-width: 0; }

.ficha-pie { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }

/* Lo que se abre al pulsar «Cambiar el estado»: separado por una línea, sin
   caja. */
.ficha-mas {
  margin: 12px 0 0;
  border-top: 1px solid var(--borde);
  padding-top: 12px;
}

/* 🔴 **Los estados, como botones y no como desplegable del sistema.** Lo pidió
   el fundador el 06-11-2026: *«tú clicas en un botón y se abre ese desplegable
   que pone estado y ahí eliges pendiente, en revisión, bla bla, y al lado se
   ve la nota opcional»*. Con un `select` el móvil abre una rueda del sistema
   que tapa media pantalla, y entonces la nota que va al lado no se ve
   mientras se elige, que es justo cuando hay que verla. */
.estados-elegir { display: flex; flex-wrap: wrap; gap: 6px; }

.estados-elegir .chip {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--borde-control);
  background: var(--papel);
  color: var(--tinta-suave);
  border-radius: 999px;
  font: 400 14px/20px var(--sans);
  cursor: pointer;
}

.estados-elegir .chip:hover {
  border-color: var(--marca);
  color: var(--tinta);
}

/* ⚙️ El elegido se distingue por relleno Y por borde, no solo por color: en
   una pantalla en blanco y negro, o para quien no distingue bien los colores,
   un chip «puesto» que solo cambiara de tinte sería indistinguible. */
.estados-elegir .chip.puesto {
  background: var(--marca);
  border-color: var(--marca);
  color: var(--sobre-marca);
  font-weight: 600;
}

/* ------------------------------------------------------- en papel y en PDF

   🔴 **Pedido el 04-11-2026:** *«veo la opción de descargar en Excel, lo cual
   lo veo bien. Pero deberíamos poder imprimir a lo mejor en PDF, ¿no? Y que
   esté organizado en un formato bonito y bien estructurado»*.

   ⚙️ **No hace falta ninguna librería: el navegador ya sabe hacer PDF.** Lo que
   faltaba era decirle qué no imprimir y cómo maquetarlo. Sin esto, lo que sale
   es la barra de navegación, los botones y los filtros ocupando la primera
   página, y el informe empezando en la segunda.

   ⛔ **Y lo plegado se imprime ABIERTO.** Un PDF es papel: no se puede
   desplegar nada después. Si se imprimiera lo que hay en pantalla, el informe
   saldría con las listas cortadas y sin forma de ver el resto, que es peor que
   no tener el botón. */
@media print {
  :root { --fondo: #fff; --papel: #fff; --superficie: #fff; }

  .barra, .atajos, .subpestanas, .aviso-ejemplos,
  #fallo-suelto, #caja-mas, #mas-filtros, #descargar, #imprimir,
  #aviso-filtro, button, .boton { display: none !important; }

  /* ⚠️ `display: block` hace falta desde que el panel tiene dos columnas: con
     la rejilla puesta, la columna del menú sigue reservando su hueco en el
     papel aunque el menú no se imprima, y el informe sale con un dedo de
     margen izquierdo vacío en todas las hojas. */
  body { background: #fff; font-size: 11pt; line-height: 1.45; display: block; }
  main { max-width: none; padding: 0; }

  /* En papel la medida la pone el ancho de la hoja, no una medida de pantalla:
     un tope de 74 ch sobre A4 deja un tercio de margen derecho en blanco. */
  .entradilla, .ayuda, .pie, .lectura, .cita,
  .fila > p, .tarjeta > p { max-width: none; }

  /* Lo plegado, abierto. Y el detalle de cada pregunta también: en pantalla se
     abre pulsando, y en papel no hay dónde pulsar. */
  [hidden] { display: revert !important; }
  .corta {
    display: block !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
    max-height: none !important;
  }

  /* ⚙️ En papel no hay ancho de sobra que aprovechar: dos columnas de fichas
     en una hoja A4 parten las fichas por la mitad al cambiar de página. */
  .asuntos { display: block; }
  .asuntos > .fila { margin-bottom: 8pt; }

  /* Que una sección no se parta justo después de su título, y que una fila no
     quede con el nombre en una página y el dato en la siguiente. */
  h1, h2, h3 { break-after: avoid-page; }
  .fila, .rango, .tarjeta { break-inside: avoid-page; }

  .tarjeta, .protagonista, .destacada {
    border: 1px solid #ccc;
    box-shadow: none;
    padding: 10pt;
  }

  /* Un enlace en papel no se puede pulsar: se escribe a dónde iba. Solo los
     de fuera, porque «/marcadas» no le dice nada a nadie en una hoja. */
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}


/* ------------------------------------------------------------------------ */
/* El repaso del material: las frases a las que puede faltarles un «no»      */
/* ------------------------------------------------------------------------ */

/* 🔴 **La frase señalada, resaltada dentro de su párrafo.** Sin esto la
   pantalla no sirve: lo que se juzga es una frase, pero lo que permite
   juzgarla es el párrafo, y en un párrafo de cuatrocientos caracteres la frase
   hay que encontrarla primero. ⚙️ El resalte lleva peso de letra además de
   color: en blanco y negro, o para quien no distingue bien los colores, un
   fondo amarillo claro no se ve. */
.fila mark {
  background: var(--aviso-suave);
  color: inherit;
  font-weight: 600;
  padding: 1px 2px;
  border-radius: 3px;
}

/* El cuadro donde escribe la frase arreglada: a lo ancho de la medida de
   lectura, porque lo que se escribe dentro es una frase de su curso. */
.ficha-mas textarea { width: 100%; max-width: var(--medida); }