/* ============================================================================
   test.css — cuestionarios de orientación

   Se carga DESPUÉS de styles.css y article.css, y solo en /test/.
   Reutiliza las variables de la identidad visual del sitio (azul #00009D,
   púrpura, crema, Playfair + Inter): acá no se define ningún color nuevo.

   🔴 Lo que esta hoja NO puede hacer, porque lo prohíbe la especificación
      clínica de los cuestionarios:
      · pintar semáforos de gravedad (nada de verde/amarillo/rojo por resultado)
      · dar más peso visual a un bloque de devolución que a otro
      · reducir a letra pequeña las advertencias de entrada y de cierre
      · reducir o mover al pie el bloque de seguridad
   ========================================================================== */

/* ── Migas y encabezado ──────────────────────────────────────────────────── */

/* ⚠️ .article-hero usa --gradient-hero, que en las páginas internas es CLARO
   (lavanda sobre crema), no la banda de tinta de la portada. El texto de acá
   va oscuro: con el color de texto sobre fondo oscuro quedaba ilegible. */
.test-migas {
  font-size: 0.875rem;
  color: var(--color-gray-blue);
  margin-bottom: var(--space-md);
}
.test-migas a { color: var(--color-primary-deep); font-weight: 600; text-decoration: none; }
.test-migas a:hover { text-decoration: underline; }

.test-bajada {
  font-size: 1.125rem;
  color: var(--color-gray-blue);
  margin-top: var(--space-md);
  max-width: 40rem;
}

/* ── Contenedor ──────────────────────────────────────────────────────────── */

.test-wrap {
  max-width: 44rem;
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-4xl);
}

.test-intro p {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--color-gray-blue);
  margin-bottom: var(--space-md);
}

/* Advertencia de entrada. Va arriba de la pregunta 1 y con el mismo cuerpo que
   el resto del texto: la especificación prohíbe expresamente la letra pequeña. */
.test-aviso-entrada {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-charcoal);
  background: var(--color-cream-dark);
  border-left: 3px solid var(--color-accent-mid);
  padding: var(--space-lg);
  border-radius: var(--radius-sm);
  margin: var(--space-2xl) 0;
}

/* ── Preguntas ───────────────────────────────────────────────────────────── */

.test-form { margin: 0; }

.test-pregunta {
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-2xl) 0;
}

.test-pregunta legend {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--color-charcoal);
  margin-bottom: var(--space-md);
  padding: 0;
}

.test-num { color: var(--color-accent-mid); margin-right: 0.35rem; }

/* Única cursiva que ve el paciente. Mismo tamaño que el resto: no es una nota
   al pie ni letra pequeña, y la especificación lo pide así explícitamente. */
.test-nota {
  font-style: italic;
  font-size: 1rem;
  color: var(--color-gray-blue);
  margin: calc(var(--space-md) * -0.5) 0 var(--space-md) 0;
}

.test-opciones { display: flex; flex-direction: column; gap: var(--space-sm); }

.test-opcion {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--color-gray-light);
  border-radius: var(--radius-md);
  cursor: pointer;
  line-height: 1.55;
  background: #fff;
  transition: border-color .15s ease, background-color .15s ease;
}
.test-opcion:hover { border-color: var(--color-accent-mid); background: var(--color-cream); }

.test-opcion input {
  margin: 0.3rem 0 0 0;
  flex-shrink: 0;
  accent-color: var(--color-primary-deep);
  width: 1.05rem;
  height: 1.05rem;
}

/* Todas las opciones se ven igual, marcada o no, salvo el realce del borde.
   Ninguna lleva color de gravedad: son cuatro opciones neutras. */
.test-opcion:has(input:checked) {
  border-color: var(--color-primary-deep);
  background: var(--color-cream);
  box-shadow: inset 0 0 0 1px var(--color-primary-deep);
}
.test-opcion:focus-within { outline: 2px solid var(--color-accent-mid); outline-offset: 2px; }

/* Pregunta obligatoria sin responder */
.test-pregunta-falta legend { color: var(--color-error); }
.test-pregunta-falta .test-opciones {
  outline: 2px solid var(--color-error);
  outline-offset: 6px;
  border-radius: var(--radius-md);
}

.test-error {
  color: var(--color-error);
  font-weight: 600;
  margin-bottom: var(--space-lg);
}

/* ── Enviar ──────────────────────────────────────────────────────────────── */

.test-enviar { margin-top: var(--space-2xl); }
.test-enviar .btn { width: 100%; justify-content: center; }

.test-privacidad {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-gray-blue);
  margin-top: var(--space-md);
  text-align: center;
}

/* ── Devolución ──────────────────────────────────────────────────────────── */

.test-resultado { scroll-margin-top: 6rem; }

.test-resultado h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  color: var(--color-charcoal);
  margin-bottom: var(--space-md);
}
/* Al mostrar la devolución se mueve el foco al título, para que un lector de
   pantalla anuncie el resultado. Ese foco es programático y no debe dibujar
   recuadro; el de teclado sí. */
.test-resultado h2:focus { outline: none; }
.test-resultado h2:focus-visible { outline: 2px solid var(--color-accent-mid); outline-offset: 4px; }

.test-aviso {
  font-size: 1rem;
  color: var(--color-gray-blue);
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-gray-light);
}

/* Todos los bloques se ven exactamente igual. Es deliberado: cuál salga no
   indica gravedad, y darle más peso visual a uno sería un semáforo encubierto. */
.test-bloque p {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--color-charcoal);
  margin-bottom: var(--space-lg);
}

/* Bloque de seguridad (solo el cuestionario de dolor). Se distingue del resto
   para que se lea, pero con el mismo peso visual que el cierre — nunca menos.  */
.test-seguridad {
  background: var(--color-cream-dark);
  border-left: 3px solid var(--color-warning);
  padding: var(--space-lg);
  border-radius: var(--radius-sm);
  margin: var(--space-xl) 0;
}
.test-seguridad p {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--color-charcoal);
  margin: 0;
}

.test-cierre {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-gray-light);
}
.test-cierre p {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--color-charcoal);
  margin-bottom: var(--space-md);
}

.test-cta { margin-top: var(--space-xl); }
.test-cta .btn { width: 100%; justify-content: center; }

.test-otra-vez { margin-top: var(--space-lg); text-align: center; }
.test-otra-vez button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--color-gray-blue);
  text-decoration: underline;
  cursor: pointer;
}
.test-otra-vez button:hover { color: var(--color-primary-deep); }

/* ── Índice de cuestionarios ─────────────────────────────────────────────── */

.test-lista {
  list-style: none;
  margin: var(--space-2xl) 0 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-lg);
}

.test-tarjeta {
  border: 1px solid var(--color-gray-light);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.test-tarjeta:hover { border-color: var(--color-accent-mid); box-shadow: var(--shadow-card); }

.test-tarjeta h2 {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  line-height: 1.35;
  margin: 0 0 var(--space-sm) 0;
}
.test-tarjeta h2 a { color: var(--color-charcoal); text-decoration: none; }
.test-tarjeta h2 a:hover { color: var(--color-primary-deep); }

.test-tarjeta p { color: var(--color-gray-blue); line-height: 1.6; margin: 0 0 var(--space-md) 0; }
.test-tarjeta p:last-child { margin-bottom: 0; }

.test-tarjeta-cta { color: var(--color-primary-deep); font-weight: 600; text-decoration: none; }
.test-tarjeta-cta:hover { text-decoration: underline; }

/* ── Móvil ───────────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  .test-wrap { padding-top: var(--space-2xl); }
  .test-pregunta legend { font-size: 1.125rem; }
  .test-opcion { padding: var(--space-md); }
}

/* Quien prefiere menos movimiento no recibe el desplazamiento suave. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Enlace al artículo del blog que desarrolla el tema del cuestionario.
   Va dentro de la introducción, en el HTML crudo, para que lo lea el buscador. */
.test-lectura {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-gray-light);
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--color-gray-blue);
}
.test-lectura a { color: var(--color-primary-deep); font-weight: 600; text-decoration: none; }
.test-lectura a:hover { text-decoration: underline; }