/**
 * cuestionario.css — Interfaz del motor de cuestionario
 *
 * Aparte de diagnostico.css a propósito: las landings y el cuestionario
 * son dos superficies distintas y solo el cuestionario carga esto.
 *
 * MISMAS CUATRO REGLAS que diagnostico.css, y por la misma razón:
 *
 *   1. No redefine :root ni declara variables nuevas
 *   2. No redefine ningún componente de styles.css (.btn-primary,
 *      .btn-ghost, #navbar, footer, .nav-*, .footer-*)
 *   3. Ningún color literal. Todo color sale de var(--…)
 *   4. Ni un !important
 *
 * Prefijo q- en todas las clases.
 */

/* ── ARMAZÓN ────────────────────────────────────────────────────────────
   Medida de lectura estrecha y centrada: una pregunta por pantalla no
   necesita más ancho, y de paso el ojo no tiene que barrer la línea. */
.q-shell {
  max-width: 720px;
  margin: 0 auto;
  padding: 160px 3rem 8rem;
  min-height: 100vh;
}

.q-cargando {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-light);
}

/* ── CABECERA DE PROGRESO ───────────────────────────────────────────── */
.q-cabecera {
  margin-bottom: 4rem;
}

/* Qué cuestionario se está contestando, encima de la barra.
   El texto sale del fichero de datos de cada uno, no de aquí.

   CLASE PROPIA Y NO .dg-card-num, aunque el formato "01 / …" sea el
   mismo que numera las tarjetas del hub: esa vive en diagnostico.css y
   estas pantallas cargan cuestionario.css. Reutilizar el nombre en dos
   hojas distintas es exactamente lo que rompió el modal de confirmación,
   y no compensa por cinco declaraciones.

   Instrument Serif itálica, no la mono de la tarjeta del hub: justo
   debajo van el contador y la etiqueta de dimensión, las dos en mono
   versal. Tres líneas seguidas de lo mismo no se distinguen, y esta es
   la que dice dónde estás.

   EN NEGRO Y NO EN NARANJA. El naranja es el acento de la marca y aquí
   ya lo llevan la barra de progreso, justo debajo, y la etiqueta de
   dimensión: tres naranjas en la misma cabecera compiten entre sí y
   ninguno destaca. Esta línea es información de situación, no un acento,
   y en negro se lee mejor y deja el naranja para lo que avanza. */
.q-cuestionario {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.35rem;
  line-height: 1.35;
  color: var(--black);
  margin-bottom: 1rem;
}

.q-progreso {
  height: 2px;
  background: var(--gray-ultra);
  margin-bottom: 1rem;
}

/* Rectángulo sólido, sin gradiente y sin redondear: es la misma barra
   que usará el informe para las dimensiones. */
.q-progreso-barra {
  height: 100%;
  background: var(--orange);
  transition: width 0.25s ease-out;
}

/* ── DESVIACIÓN DELIBERADA DE LA ESCALA TIPOGRÁFICA ─────────────────────
   design-guidelines.md fija JetBrains Mono a 0.65rem para "notas / meta"
   y las etiquetas de formulario, e Instrument Serif a 1.1rem en cuerpo.
   Tres clases de esta hoja se salen de ahí a propósito:

     .q-contador  0.65 -> 0.8rem
     .q-eyebrow   0.65 -> 0.9rem
     .q-ayuda     1.05 -> 1.3rem

   La escala está pensada para etiquetas de landing, donde ese texto es
   señalización: se ojea, no se lee. Aquí no. El contador dice en qué
   punto de 28 vas, la etiqueta dice qué dimensión te están preguntando
   y la ayuda contiene condiciones que cambian la respuesta ("en el
   cómputo entran los colaboradores externos"). Es texto que hay que
   leer, y buena parte se lee en un móvil.

   SEGUNDA SUBIDA, y por lo mismo: a 0.8 y 1.15 seguían quedándose
   cortas en un móvil. La ayuda sube más que la etiqueta porque es la que
   de verdad hay que leer entera: 1.3rem la pone por encima del cuerpo de
   las landings, que es exactamente lo que corresponde a un texto del que
   depende la respuesta. La etiqueta solo tiene que poder ojearse sin
   acercarse el teléfono.

   La desviación es solo de tamaño: familia, interletrado, caja y color
   siguen siendo los de la escala. No abrir la mano con esto en las
   landings, donde la escala original es la correcta. */
.q-contador {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-light);
}

/* ── PREGUNTA ───────────────────────────────────────────────────────── */
.q-grupo {
  border: 0;
  margin-bottom: 2.5rem;
}

.q-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 1.5rem;
}

/* <legend> con display:block porque el de por defecto no acepta ancho
   ni se comporta como un bloque normal dentro del fieldset. */
.q-enunciado {
  display: block;
  width: 100%;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: var(--black);
  margin-bottom: 1.5rem;
}

/* El foco va al enunciado al cambiar de pantalla, para que un lector de
   pantalla anuncie la pregunta nueva. Sin contorno visible sería un
   salto invisible para quien navega con teclado. */
.q-enunciado:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 4px;
}

.q-ayuda {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.3rem;
  /* Con más cuerpo, el interlineado de 1.5 aprieta: sube a 1.55 para que
     la ayuda siga leyéndose como un párrafo y no como un bloque. */
  line-height: 1.55;
  color: var(--serif-on-light);
  margin-bottom: 2rem;
}

/* ── OPCIONES ───────────────────────────────────────────────────────── */
.q-opciones {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--gray-ultra);
  border: 1px solid var(--gray-ultra);
}

.q-opcion {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: var(--white);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.q-opcion:hover {
  background: var(--gray-ultra);
}

.q-opcion-texto {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.45;
  color: var(--serif-on-light);
}

/* El radio nativo se queda: es lo que da navegación con flechas, el
   anuncio correcto en lectores de pantalla y el envío del formulario,
   todo gratis. Solo se le cambia el aspecto.

   appearance:none y un cuadrado dibujado a mano, porque el radio del
   sistema es redondo y aquí no hay border-radius en ninguna parte. */
.q-opcion input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-top: 0.35rem;
  border: 1px solid var(--gray-light);
  background: transparent;
}

.q-opcion input[type="radio"]:checked {
  border-color: var(--orange);
  /* El relleno se hace con un borde grueso en vez de con un pseudo
     elemento: menos marcado y el mismo resultado. */
  border-width: 4px;
}

.q-opcion input[type="radio"]:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

/* Marcar la opción entera, no solo el cuadradito: el objetivo táctil es
   toda la fila y la respuesta visual tiene que acompañar. :has() está
   disponible en todos los navegadores objetivo; donde no lo esté, se
   pierde el resaltado pero el radio sigue marcándose y funcionando. */
.q-opcion:has(input:checked) {
  background: var(--black);
}

.q-opcion:has(input:checked) .q-opcion-texto {
  color: var(--serif-on-dark);
}

/* ── ESCALA 0–10 (autopercepción) ───────────────────────────────────── */
.q-escala {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  gap: 1px;
  background: var(--gray-ultra);
  border: 1px solid var(--gray-ultra);
}

.q-escala-punto {
  background: var(--white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 0;
  transition: background 0.15s, color 0.15s;
}

.q-escala-punto:hover {
  background: var(--gray-ultra);
}

/* El input desaparece de la vista pero no del árbol de accesibilidad:
   nada de display:none, que lo sacaría del foco y de las flechas. */
.q-escala-punto input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.q-escala-num {
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: 0.02em;
  color: var(--black);
}

.q-escala-punto:has(input:checked) {
  background: var(--orange);
}

.q-escala-punto:has(input:checked) .q-escala-num {
  color: var(--white);
}

/* Con el input oculto, el foco lo tiene que enseñar el contenedor. */
.q-escala-punto:has(input:focus-visible) {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.q-escala-extremos {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-light);
}

/* ── AVISOS Y ACCIONES ──────────────────────────────────────────────── */
.q-error {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 1.5rem;
}

/* Atrás a la izquierda, Siguiente a la derecha, en ese orden y sin
   trucos de 'order': el orden visual y el del DOM coinciden, que es lo
   que espera cualquiera que navegue con teclado. Se probó al revés y
   confundía: el botón de avanzar es el que está más a la derecha en
   todos los formularios del mundo. */
.q-acciones {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}

/* ── DERIVACIÓN Y CIERRE ────────────────────────────────────────────── */
.q-derivacion,
.q-fin {
  padding: 3rem 0;
}

.q-derivacion-titulo,
.q-fin-titulo {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--black);
  margin-bottom: 2rem;
}

.q-derivacion-titulo:focus-visible,
.q-fin-titulo:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 4px;
}

.q-derivacion-texto,
.q-fin-texto {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--serif-on-light);
  margin-bottom: 2.5rem;
}

.q-nota {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  color: var(--gray-light);
  line-height: 1.6;
  margin-top: 2rem;
}

/* ── AVISO DE SIN CONEXIÓN ──────────────────────────────────────────────
   Aparece en cuanto hay una respuesta que el servidor no ha confirmado y
   desaparece sola cuando la última llega.

   Discreto y persistente, en ese orden. No es un error de la persona ni
   requiere que haga nada, así que no interrumpe, no bloquea el avance y
   no se puede cerrar: mientras el problema exista, se ve.

   En negro y no en naranja a propósito. El naranja es de las acciones, y
   esto no es una acción: es un estado. Además, un aviso naranja al lado
   del botón naranja de avanzar compite con él justo cuando lo que
   queremos es que siga contestando. */
.q-aviso-conexion {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  line-height: 1.6;
  color: var(--white);
  background: var(--black);
  padding: 1rem 1.25rem;
  margin-bottom: 2rem;
  border-left: 3px solid var(--orange);
}

/* ── CAPTURA ────────────────────────────────────────────────────────── */
.q-campo {
  margin-bottom: 1.75rem;
}

.q-campo-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-light);
  margin-bottom: 0.6rem;
}

/* JetBrains Mono en el valor, como los formularios de la home. Bebas es
   todo mayúsculas y convertía cualquier nombre propio en JOSÉ LUIS
   GARCÍA, sin forma de comprobar si estaba bien escrito. Sin
   border-radius y con solo el filete inferior: menos caja, más ficha. */
.q-campo-input {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: var(--black);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--gray-light);
  padding: 0.5rem 0;
}

.q-campo-input:focus {
  outline: none;
  border-bottom-color: var(--orange);
}

.q-campo-input:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 4px;
}

.q-campo-error {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--orange);
  margin-top: 0.5rem;
}

/* ── CAMPO TRAMPA ───────────────────────────────────────────────────────
   Fuera de pantalla, NO con display:none.

   display:none lo sacaría del árbol de accesibilidad de una forma que
   algunos bots reconocen y esquivan, y entonces la trampa no atrapa
   nada. Así sigue existiendo para el navegador y no existe para la
   persona. */
.q-trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── CONSENTIMIENTOS ────────────────────────────────────────────────────
   Dos casillas separadas, las dos desmarcadas. No se pueden fusionar ni
   premarcar: el consentimiento para comunicaciones comerciales tiene que
   ser específico, informado y separado. */
.q-consentimientos {
  margin: 2.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.q-consent {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  cursor: pointer;
}

.q-consent input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 0.2rem;
  border: 1px solid var(--gray-light);
  background: transparent;
}

.q-consent input[type="checkbox"]:checked {
  background: var(--orange);
  border-color: var(--orange);
}

.q-consent input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

.q-consent-texto {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  line-height: 1.7;
  color: var(--gray-light);
}

.q-consent-texto a {
  color: var(--orange);
  text-decoration: none;
  border-bottom: 1px solid var(--orange);
}

/* ── LISTA DE PREGUNTAS PENDIENTES ──────────────────────────────────────
   La pinta el motor cuando el servidor responde 422 'incompleto'. Se
   enseña el enunciado, no el ID: 'd06' no le dice nada a nadie. */
.q-faltan-titulo {
  display: block;
  margin-bottom: 0.75rem;
}

.q-faltan {
  list-style: none;
  margin: 0 0 1.25rem;
  text-transform: none;
}

.q-faltan li {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05rem;
  letter-spacing: 0;
  line-height: 1.5;
  color: var(--serif-on-light);
  padding: 0.6rem 0 0.6rem 1.25rem;
  border-left: 2px solid var(--orange);
  margin-bottom: 0.5rem;
}

/* ── MODAL DE CONFIRMACIÓN ──────────────────────────────────────────────
   Se pinta al pulsar el botón final. Todo el comportamiento (foco
   atrapado, Escape, devolución del foco) está en motor.js; aquí solo
   está el aspecto. */
.q-modal-fondo {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  /* Velo sólido en negro de marca. Sin desenfoques ni degradados. */
  background: var(--black);
  /* Con el teclado abierto en un móvil, la caja puede no caber. Antes
     recortada por arriba y sin forma de llegar al botón. */
  overflow-y: auto;
}

.q-modal {
  background: var(--white);
  max-width: 560px;
  width: 100%;
  padding: 3rem;
}

.q-modal-titulo {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--black);
  margin-bottom: 1.5rem;
}

.q-modal-texto {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--serif-on-light);
  margin-bottom: 2.5rem;
}

/* "Revisar" a la izquierda y "Enviar" a la derecha, igual que Atrás y
   Siguiente en el resto del cuestionario. La acción que avanza siempre
   a la derecha. */
.q-modal-acciones {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}

/* El aviso de confidencialidad se estiliza en diagnostico.css, que
   cargan también las páginas de cuestionario: es el mismo componente en
   la landing y sobre el bloque de captura, y no tiene por qué existir
   dos veces. */

/* ── CUESTIONARIO SIN PREGUNTAS ─────────────────────────────────────────
   Cuando el fichero de datos trae el array de preguntas vacío, el motor
   marca el contenedor con data-vacio y no arranca. Este selector es lo
   único que hace falta para que la página enseñe su estado
   "próximamente": ni una condición en PHP, ni una en JavaScript.

   El día que ese JSON tenga preguntas, el bloque deja de mostrarse solo
   y el cuestionario arranca. Nadie tiene que acordarse de venir aquí. */
.q-proximamente {
  display: none;
}

#q-app[data-vacio="true"] ~ .q-proximamente {
  display: block;
}

/* ── SIN JAVASCRIPT ─────────────────────────────────────────────────── */
.q-sin-js {
  border: 1px solid var(--gray-ultra);
  padding: 2rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--serif-on-light);
}

/* ── PANTALLA DE RESULTADO ──────────────────────────────────────────────
   El número del índice es el elemento más grande de la pantalla, y no es
   un capricho tipográfico: es lo que la persona va a fotografiar y
   mandar por WhatsApp. Todo lo demás se ordena por debajo de él.

   Naranja reservado al índice, a las barras y al CTA, como en el resto
   de la marca. Cero border-radius, barras rectangulares sólidas, sin
   gradiente y sin sombra. */
.q-r-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-light);
  margin-bottom: 1.5rem;
}

.q-r-indice {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.q-r-numero {
  font-family: var(--font-display);
  /* clamp y no un tamaño fijo: en un móvil de 320px un 9rem se sale de
     la pantalla, y este número no se puede recortar. */
  font-size: clamp(5.5rem, 22vw, 11rem);
  line-height: 0.85;
  color: var(--orange);
}

.q-r-numero:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 8px;
}

.q-r-de {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--gray-light);
}

.q-r-banda {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.q-r-banda-etiqueta {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-light);
}

.q-r-banda-nombre {
  font-family: var(--font-display);
  font-size: 2rem;
  letter-spacing: 0.04em;
  color: var(--black);
}

.q-r-banda-resumen {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.35rem;
  line-height: 1.5;
  color: var(--serif-on-light);
  margin-bottom: 4rem;
}

/* ── BLOQUES ── */
.q-r-bloque {
  border-top: 1px solid var(--gray-ultra);
  padding-top: 2.5rem;
  margin-bottom: 3.5rem;
}

.q-r-bloque-titulo {
  font-family: var(--font-display);
  font-size: 1.6rem;
  letter-spacing: 0.04em;
  color: var(--black);
  margin-bottom: 1.25rem;
}

/* El titular del gap es la frase que da sentido a todo el informe
   ("te pusiste un 7, tu Índice Cero es un 3,4"), así que pesa más. */
.q-r-gap .q-r-bloque-titulo {
  font-size: 2.2rem;
  line-height: 1.1;
}

.q-r-bloque-texto {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  line-height: 1.65;
  color: var(--serif-on-light);
}

.q-r-nota {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--gray-light);
  margin-top: 1.25rem;
}

/* ── EL DATO DESTACADO ──
   El Tiempo Recuperable del informe individual. Va justo debajo del
   índice y compite con él a propósito: es el número que la persona va a
   repetir, así que se pinta en negativo para que sea lo segundo que se
   mire y no lo quinto. Solo aparece si el cuestionario declara la
   métrica; el de empresa no tiene ninguna. */
.q-r-destacado {
  background: var(--black);
  padding: 2.5rem;
  margin-bottom: 4rem;
}

.q-r-destacado-etiqueta {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 0.75rem;
}

.q-r-destacado-valor {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 9vw, 6rem);
  line-height: 0.9;
  color: var(--white);
  margin-bottom: 1.25rem;
}

.q-r-destacado-texto {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--serif-on-dark);
}

/* ── EL SIGUIENTE PASO DE CADA DIMENSIÓN ──
   Solo en el individual. Es un consejo, no la opción siguiente del
   cuestionario: enseñar el ancla superior revelaría el orden de la
   escala. Se separa de la respuesta con el filete para que se lea como
   lo que es —algo que hacer— y no como parte de lo contestado. */
.q-r-dim-escalon {
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--serif-on-light);
  border-left: 2px solid var(--orange);
  padding-left: 1rem;
  margin-top: 0.85rem;
}

.q-r-dim-escalon-etiqueta {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-light);
  margin-bottom: 0.35rem;
}

/* ── AVISO DE ORGANIZACIÓN ──
   En la PRIMERA pantalla del cuestionario, antes de contestar nada.
   Enterarse al final de que la empresa va a ver algo es lo que hace que
   la gente conteste lo que le conviene en lugar de la verdad. */
.q-aviso-org {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--gray-light);
  border-left: 2px solid var(--orange);
  padding-left: 1rem;
  margin-bottom: 2rem;
}

/* ── CATEGORÍAS ── */
.q-r-categorias {
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0;
}

.q-r-categoria {
  display: grid;
  grid-template-columns: 8rem 1fr 3rem;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.9rem;
}

.q-r-categoria-nombre {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--black);
}

.q-r-categoria-barra {
  display: block;
  height: 14px;
  background: var(--gray-ultra);
}

.q-r-categoria-relleno {
  display: block;
  height: 100%;
  background: var(--orange);
}

.q-r-categoria-valor {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  text-align: right;
  color: var(--black);
}

/* ── AVISO DE CONTRASTE ──
   Barra naranja a la izquierda y nada más: es una advertencia sobre cómo
   leer el número, no un error. */
.q-r-aviso {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--serif-on-light);
  border-left: 3px solid var(--orange);
  padding-left: 1.25rem;
  margin-bottom: 3.5rem;
}

/* ── CTA ── */
.q-r-cta > .btn-primary {
  display: inline-block;
  margin-top: 1.75rem;
}

/* ── CÓDIGO DE ORGANIZACIÓN ── */
.q-r-codigo {
  background: var(--gray-ultra);
  border-top: none;
  padding: 2.5rem;
}

.q-r-codigo-etiqueta {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-light);
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

/* EL CÓDIGO QUE SE ENSEÑA ES UN EJEMPLO, y el color es lo que lo dice.
   En gris y no en naranja: el naranja está reservado al índice, a las
   barras y al CTA, y usarlo aquí haría que un código que no sirve
   pareciera lo más importante del bloque. Monoespaciado y con la letra
   separada porque enseña el FORMATO, que es su única función. */
.q-r-codigo-ejemplo {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  letter-spacing: 0.18em;
  color: var(--gray-light);
  background: var(--white);
  padding: 0.9rem 1.5rem;
  margin-bottom: 2rem;
  display: inline-block;
}

.q-r-codigo > .btn-primary {
  display: inline-block;
}

/* ── LAS 16 DIMENSIONES ──
   Solo en el informe, que desde que se quitó la pantalla de resultado es
   la única página que las pinta. Nunca han salido en la respuesta de
   completar.php, porque dieciséis puntuaciones por envío reconstruyen el
   baremo si alguien repite el cuestionario cambiando una respuesta cada
   vez. En el informe sí, porque es el entregable y porque sin el
   desglose no es un informe, es un número. */
.q-r-dimensiones {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}

.q-r-dim {
  margin-bottom: 2rem;
}

.q-r-dim-cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.q-r-dim-nombre {
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 0.04em;
  color: var(--black);
}

.q-r-dim-valor {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--black);
}

/* La respuesta que dio, en serif y en gris: es una cita de lo que
   contestó, no una afirmación nuestra. */
.q-r-dim-respuesta {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--serif-on-light);
  margin-top: 0.6rem;
}

/* ── BORRADO ── */
.q-r-borrado-acciones {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}

.q-r-legal {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1.7;
  color: var(--gray-light);
  border-top: 1px solid var(--gray-ultra);
  padding-top: 1.5rem;
}

/* ── RESPONSIVE ─────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* El nombre de la categoría pasa encima de su barra: con 8rem fijos
     en una pantalla estrecha, la barra se queda en un muñón que no se
     puede comparar con las otras cuatro. */
  .q-r-categoria {
    grid-template-columns: 1fr 3rem;
  }

  .q-r-categoria-nombre {
    grid-column: 1 / -1;
  }

  .q-r-codigo {
    padding: 1.75rem 1.25rem;
  }

  .q-r-codigo-ejemplo {
    font-size: 1.15rem;
  }

  .q-shell {
    padding: 120px 1.5rem 5rem;
  }

  .q-cabecera {
    margin-bottom: 2.5rem;
  }

  .q-opcion {
    padding: 1rem 1.25rem;
  }

  /* Once columnas no caben en un móvil: la escala pasa a dos filas de
     seis y cinco, que siguen leyéndose como una escala. */
  .q-escala {
    grid-template-columns: repeat(6, 1fr);
  }

  .q-acciones > .btn-primary,
  .q-acciones > .q-atras {
    width: 100%;
    text-align: center;
  }
}

/* ── BLOQUE DE INVITACIÓN ──
   Los dos botones van en fila y con AIRE por encima: estaban pegados al
   párrafo, y un botón que toca el texto que lo justifica se lee como
   parte del párrafo y no como algo que se puede pulsar.

   Se envuelven en una fila propia en vez de darle margen al botón porque
   son dos: el margen tiene que separar el grupo del texto, no cada botón
   del anterior. */
.q-r-invitar-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.25rem;
}

/* Los dos textos son largos —"Enviar cuestionario individual a otro
   profesional"— así que se reparten el ancho en vez de desbordar, y a
   partir de ahí crecen a partes iguales. */
.q-r-invitar-botones > .btn-primary {
  flex: 1 1 16rem;
  text-align: center;
  cursor: pointer;
  border: 0;
}

@media (max-width: 900px) {
  /* En móvil, uno debajo de otro y a todo el ancho: dos botones de este
     largo en media pantalla parten las palabras. */
  .q-r-invitar-botones > .btn-primary {
    flex-basis: 100%;
  }
}

/* La línea que desactiva el miedo antes de pulsar: "le llega el
   cuestionario vacío, no tu informe". Va pegada a los botones y en mono
   pequeño, que es el registro de las notas del sitio — no compite con el
   botón, se lee justo después de mirarlo. */
.q-r-invitar-nota {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--gray-light);
  margin-top: 0.85rem;
}

/* ── LO QUE EL LIGHTBOX DE INVITACIÓN AÑADE AL MODAL ──

   Y solo eso. El lightbox USA EL MISMO COMPONENTE que la confirmación
   previa al envío: .q-modal-fondo para el velo y .q-modal para la caja.

   AQUÍ HABÍA UN SEGUNDO MODAL ENTERO, y rompió el primero. Declaraba
   `.q-modal` como su velo de pantalla completa, pero `.q-modal` era la
   CAJA BLANCA de la confirmación desde la fase 2. En CSS plano gana la
   última: la caja pasó a ser `position:fixed; inset:0` con fondo oscuro
   y `display:flex`, así que ocupaba la pantalla entera y repartía sus
   tres hijos en fila — titular a un lado, texto en medio y los botones
   sueltos.

   No falló nada. Ni un error de sintaxis, ni una línea en ningún log, y
   el cuestionario seguía enviándose. Solo se veía roto. Lo caza ahora
   tools/validar-css.php, que no deja declarar un selector dos veces. */

/* El velo se queda en el DOM y se enseña con el atributo `hidden`, al
   contrario que el de la confirmación, que se crea y se destruye. Sin
   esto, el display:flex del velo lo pisaría y el lightbox estaría
   siempre abierto. */
.q-modal-fondo[hidden] {
  display: none;
}

.q-modal-nota {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1.7;
  color: var(--gray-light);
  margin-top: 1.25rem;
}

.q-modal-hecho {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--serif-on-light);
}

/* El foco entra en el título al abrir y en el aviso al terminar, para
   que un lector de pantalla anuncie el cambio. Sin contorno visible
   sería un salto invisible para quien navega con teclado. */
.q-modal-titulo:focus-visible,
.q-modal-hecho:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 4px;
}