/* ADRIA · Evaluación de madurez en IA
   Paleta construida alrededor de una restricción: el turquesa de marca (#00C7BD) da 2.12:1
   sobre blanco, así que nunca lleva texto. Se usa como relleno con texto casi negro encima
   (7.99:1). El acento textual #00706A es el teal oscuro derivado, ≥4.5:1 sobre blanco. */

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fuentes/ibm-plex-sans-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fuentes/ibm-plex-sans-latin-600-normal.woff2') format('woff2');
}

:root {
  --marca: #00c7bd;
  --acento: #00706a;
  --texto: #0f1f1e;
  --texto-2: #4a5c5a;
  --superficie: #ffffff;
  --superficie-2: #f4f8f7;
  --borde: #d9e3e1;
  --error: #b42318;
  --error-fondo: #fef3f2;

  /* Escala tipográfica fija, razón 1.2, base 16px */
  --t-2: 0.694rem;
  --t-1: 0.833rem;
  --t0: 1rem;
  --t1: 1.2rem;
  --t2: 1.44rem;
  --t3: 1.728rem;
  --t4: 2.074rem;

  /* Espaciado en múltiplos de 4px */
  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 0.75rem;
  --e4: 1rem;
  --e5: 1.5rem;
  --e6: 2rem;
  --e7: 3rem;

  --radio: 6px;

  /* Un solo ritmo de motion para toda la interfaz */
  --dur: 150ms;
  --ease: ease-out;
  /* Cubre la barra pegajosa con el <details> de escala cerrado, para que el foco
     programático no quede tapado por ella (progreso + resumen 44px + padding) */
  --alto-barra: 7rem;

  --ancho: 46rem;
  --fuente: 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: var(--t0);
  line-height: 1.6;
  color: var(--texto);
  background: var(--superficie);
  -webkit-text-size-adjust: 100%;
}

h1, h2, legend { line-height: 1.25; margin: 0; }

/* --- Cabecera --------------------------------------------------------- */

.cabecera {
  background: var(--superficie-2);
  border-bottom: 1px solid var(--borde);
  padding: var(--e5) var(--e4) var(--e6);
}
.cabecera__marca,
.cabecera__texto { max-width: var(--ancho); margin: 0 auto; }
.cabecera__marca { margin-bottom: var(--e5); }

.wordmark {
  display: inline-block;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: var(--t1);
  letter-spacing: 0.14em;
  color: var(--texto);
  text-decoration: none;
  border-bottom: 4px solid var(--marca);
  padding-bottom: 2px;
}
.wordmark:focus-visible { outline: 2px solid var(--acento); outline-offset: 4px; }

.sobretitulo {
  margin: 0 0 var(--e2);
  font-size: var(--t-1);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-2);
}
.cabecera h1 { font-size: var(--t4); font-weight: 600; }
.cabecera__temas {
  margin: var(--e3) 0 0;
  max-width: 60ch;
  color: var(--texto-2);
}
.confidencialidad {
  margin: var(--e4) 0 0;
  padding: var(--e3) var(--e4);
  border-left: 4px solid var(--marca);
  background: var(--superficie);
  font-size: var(--t-1);
  color: var(--texto-2);
  max-width: 60ch;
}

/* --- Barra pegajosa: progreso + referencia de escala ------------------- */

.barra {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
  padding: var(--e3) var(--e4);
}
.barra > * { max-width: var(--ancho); margin: 0 auto; }
.barra__progreso { margin: 0 0 var(--e2); font-size: var(--t-1); color: var(--texto-2); }
.barra__progreso strong { font-size: var(--t0); color: var(--texto); }
.barra__pista {
  height: 4px;
  border-radius: 2px;
  background: var(--borde);
  overflow: hidden;
}
.barra__relleno {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--marca);
  /* scaleX en vez de width: animar width forza layout en cada cuadro, y este
     elemento vive dentro de la barra sticky, que es donde eso se siente. */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}

.escala-ref summary {
  cursor: pointer;
  font-size: var(--t-1);
  font-weight: 600;
  color: var(--acento);
  padding: var(--e2) 0;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.escala-ref summary:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.escala-ref__lista {
  margin: var(--e2) 0 var(--e3);
  display: grid;
  gap: var(--e3);
  font-size: var(--t-1);
}
.escala-ref__item dt { font-weight: 600; }
.escala-ref__item dd { margin: 0; color: var(--texto-2); }

/* La barra es sticky y tapa lo que reciba foco programático o scroll (p.ej. el foco
   que pone formulario.js sobre la primera pregunta sin calificar tras un error). */
.pregunta,
.campo,
.alerta,
.ident > legend { scroll-margin-top: var(--alto-barra); }

/* --- Contenido -------------------------------------------------------- */

main { max-width: var(--ancho); margin: 0 auto; padding: var(--e6) var(--e4) var(--e7); }

fieldset { border: 0; margin: 0; padding: 0; min-inline-size: 0; }

.ident {
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: var(--e5);
  margin-bottom: var(--e7);
}
.ident > legend {
  font-size: var(--t2);
  font-weight: 600;
  padding: 0;
  margin-bottom: var(--e3);
}
.ident__ayuda { margin: 0 0 var(--e4); font-size: var(--t-1); color: var(--texto-2); }

.campo { margin-bottom: var(--e4); }
.campo label,
.campo--tipo > legend {
  display: block;
  margin-bottom: var(--e2);
  font-weight: 600;
  font-size: var(--t-1);
}
.opcional { font-weight: 400; color: var(--texto-2); }

input[type='text'],
textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--e2) var(--e3);
  font-family: inherit;
  font-size: var(--t0);
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
textarea { resize: vertical; }
input[type='text']:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
  border-color: var(--acento);
}
.campo--error input[type='text'] { border-color: var(--error); }

.campo__error {
  margin: var(--e2) 0 0;
  font-size: var(--t-1);
  font-weight: 600;
  color: var(--error);
}
.campo__error::before { content: '⚠ '; }

/* --- Preguntas -------------------------------------------------------- */

.preguntas { list-style: none; margin: 0; padding: 0; }
.pregunta { padding: var(--e5) 0; border-top: 1px solid var(--borde); }
.pregunta:first-child { border-top: 0; padding-top: 0; }

.pregunta__meta {
  margin: 0 0 var(--e2);
  font-size: var(--t-1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-2);
}
.pregunta__texto {
  font-size: var(--t1);
  font-weight: 400;
  margin-bottom: var(--e4);
  max-width: 62ch;
  padding: 0;
}

.opciones { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e2); }

.opcion {
  display: flex;
  flex-direction: column;
  gap: var(--e1);
  min-height: 44px;
  padding: var(--e3);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.opcion input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
}
.opcion__n { font-size: var(--t1); font-weight: 600; line-height: 1; }
.opcion__et { font-size: var(--t-1); color: var(--texto-2); }

/* :hover solo para punteros que de verdad hacen hover: en táctil se queda pegado tras el
   toque y confunde la señal de estado con la de selección real. */
@media (hover: hover) {
  .opcion:hover { border-color: var(--acento); }
}
.opcion:active { filter: brightness(0.96); }
.opcion:has(input:focus-visible) { outline: 2px solid var(--acento); outline-offset: 2px; }

/* Estado seleccionado: relleno de marca MÁS peso tipográfico. Nunca solo color.
   :has() cubre el caso sin JS; .opcion--activa la pone el JS del cliente. */
.opcion:has(input:checked),
.opcion--activa {
  background: var(--marca);
  border-color: var(--marca);
  font-weight: 600;
}
.opcion:has(input:checked) .opcion__et,
.opcion--activa .opcion__et { color: var(--texto); font-weight: 600; }

.opcion--ancha { flex-direction: row; align-items: center; margin-bottom: var(--e2); }

.campo--evidencia { margin: var(--e4) 0 0; }
.campo--evidencia label { font-weight: 400; color: var(--texto-2); }

/* --- Envío ------------------------------------------------------------ */

.envio { margin-top: var(--e7); padding-top: var(--e5); border-top: 1px solid var(--borde); }

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--e3) var(--e6);
  font-family: inherit;
  font-size: var(--t0);
  font-weight: 600;
  color: var(--texto);
  background: var(--marca);
  border: 1px solid var(--marca);
  border-radius: var(--radio);
  cursor: pointer;
  transition: filter var(--dur) var(--ease);
}
@media (hover: hover) {
  .boton:hover { filter: brightness(0.94); }
}
.boton:active { filter: brightness(0.88); }
.boton:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
.boton[disabled] { cursor: progress; filter: grayscale(0.4) brightness(1.08); }

.envio__nota { margin: var(--e3) 0 0; font-size: var(--t-1); color: var(--texto-2); }

.alerta {
  margin-bottom: var(--e4);
  padding: var(--e3) var(--e4);
  border: 1px solid var(--error);
  border-left-width: 4px;
  border-radius: var(--radio);
  background: var(--error-fondo);
  color: var(--error);
  font-size: var(--t-1);
  font-weight: 600;
}
.alerta ul { margin: var(--e2) 0 0; padding-left: var(--e4); font-weight: 400; }

.exito { padding: var(--e6) 0; }
.exito h2 { font-size: var(--t3); font-weight: 600; margin-bottom: var(--e3); }
.exito:focus-visible { outline: none; }

.pie {
  border-top: 1px solid var(--borde);
  padding: var(--e5) var(--e4);
  font-size: var(--t-1);
  color: var(--texto-2);
}
.pie p { max-width: var(--ancho); margin: 0 auto; }

.mensaje { padding-top: var(--e7); }
.mensaje h1 { font-size: var(--t3); font-weight: 600; margin-bottom: var(--e3); }
.mensaje__estado { color: var(--texto-2); font-size: var(--t-1); }

/* --- Enlaces de administración ---------------------------------------- */

.enlaces { list-style: none; padding: 0; }
.enlaces li { padding: var(--e4) 0; border-top: 1px solid var(--borde); }
.enlaces a { color: var(--acento); word-break: break-all; }
.enlaces__meta { font-size: var(--t-1); color: var(--texto-2); margin: var(--e1) 0 0; }

/* --- Móvil ------------------------------------------------------------ */

@media (max-width: 639px) {
  .opciones { grid-template-columns: 1fr; }
  .opcion { flex-direction: row; align-items: center; gap: var(--e3); }
  .opcion__n { min-width: 1.25rem; }
  .cabecera h1 { font-size: var(--t3); }
  .ident { padding: var(--e4); }
  .boton { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}