/* OT-13 · componentes de las pantallas del recorrido (entrada, codigo,
   cuestionario, espera). Ningun color, tipografia ni espacio se inventa aqui:
   todo sale de un var(--...) definido en global-v3.css, igual que exige
   `investigacion/05-reporte-y-diseno.md` SSC.2 para el reporte. Archivo nuevo,
   servido en su propia ruta (`GET /paginas.css`) porque la politica de
   contenido de estas pantallas no admite `style-src 'unsafe-inline'`. */

/* ================= Estructura general ================= */
.saltar-enlace {
  position: absolute; inset-inline-start: var(--e-s); top: -100px; z-index: 10;
  background: var(--surface); color: var(--ink); padding: var(--e-2xs) var(--e-s);
  border-radius: var(--radio); border: 1px solid var(--line-strong);
}
.saltar-enlace:focus { top: var(--e-s); }

.pagina-diagnostico { min-height: 100vh; display: flex; flex-direction: column; }
.encabezado-diagnostico { padding-block: var(--e-l); }
.encabezado-diagnostico .contenedor { display: flex; align-items: center; justify-content: space-between; gap: var(--e-s); }
/* OT-16 · el logo de Octapus con enlace al sitio. Mismo token del sitio para el modo oscuro. */
.encabezado-diagnostico .contenedor { flex-wrap: wrap; }
.marca-diagnostico { display: inline-flex; align-items: center; min-block-size: 44px; color: var(--ink); text-decoration: none; }
.logo-octapus { display: block; block-size: 26px; inline-size: auto; filter: var(--logo-filtro); }
.rotulo-radar { font-family: var(--fuente-datos); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

.principal-diagnostico { flex: 1; padding-block-end: var(--e-2xl); }
.tarjeta-recorrido { max-width: 640px; margin-inline: auto; }
.tarjeta-recorrido h1 { font-size: var(--paso-3); margin-block-end: var(--e-2xs); }
.tarjeta-recorrido .entrada { max-width: none; }

.pie-diagnostico { padding-block: var(--e-l) var(--e-xl); color: var(--muted); font-size: var(--paso--1); border-block-start: 1px solid var(--line); }
.pie-diagnostico .contenedor { display: grid; gap: var(--e-3xs); }
/* 25-sep · la cita legal y el selector de tema en una fila, como el pie del sitio. */
.pie-abajo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2xs) var(--e-m); }
.pie-abajo p { max-width: none; flex: 1 1 32rem; }
.pie-abajo .tema-pie { margin-inline-start: auto; }
.pie-diagnostico a { color: var(--muted); }

/* ================= Indicador de pasos ================= */
.pasos { list-style: none; display: flex; flex-wrap: wrap; gap: var(--e-2xs) var(--e-m); padding: 0; margin: 0 0 var(--e-l); }
.pasos li {
  max-width: none; font-family: var(--fuente-datos); font-size: .75rem; letter-spacing: .04em;
  color: var(--muted); display: flex; align-items: center; gap: 6px;
}
.pasos li::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--line-strong); flex: none; }
.pasos li[data-activo] { color: var(--ink); font-weight: 600; }
.pasos li[data-activo]::before { background: var(--acento); }
.pasos li[data-hecho]::before { background: var(--sev-ok); }

/* ================= Aviso de JS requerido ================= */
.js-requerido {
  border: 1px dashed var(--line-strong); border-radius: var(--radio); padding: var(--e-s);
  color: var(--ink-2); font-size: var(--paso--1); margin-block-end: var(--e-m); max-width: var(--ancho-texto);
}

/* ================= Mensajes (ramas, errores) ================= */
.mensaje-forma {
  border: 1px solid var(--line-strong); border-radius: var(--radio-m); padding: var(--e-s);
  margin-block: var(--e-s); background: var(--surface-2); display: grid; gap: var(--e-2xs); max-width: var(--ancho-texto);
}
.mensaje-forma[data-vacio] { display: none; }
.mensaje-forma h2 { font-size: var(--paso-0); margin: 0; }
.mensaje-forma p { margin: 0; color: var(--ink-2); }
.mensaje-forma .opciones-mensaje { display: flex; flex-wrap: wrap; gap: var(--e-2xs); margin-block-start: var(--e-2xs); }

.hint-precargado {
  font-size: var(--paso--1); color: var(--muted); margin-block-start: var(--e-2xs); max-width: var(--ancho-texto);
}

/* ================= Formulario de entrada ================= */
.formulario-recorrido { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-s); margin-block-start: var(--e-l); }
/* OT-16 · a 320 px el widget de Turnstile mide 300 px fijos y ensanchaba la
   columna: los campos perdian el margen derecho. Con la columna en
   minmax(0, 1fr) los campos se quedan en su ancho y solo el widget llega al borde. */
.formulario-recorrido label > span,
.campo-base > span { display: block; font-size: var(--paso--1); color: var(--ink-2); margin-block-end: var(--e-3xs); }
.campo-base .nota-campo { font-size: .78rem; color: var(--muted); }
.fila-dos { display: grid; gap: var(--e-s); }
@media (min-width: 34rem) { .fila-dos { grid-template-columns: 1fr 1fr; } }

.consentimiento-recorrido { display: flex; gap: var(--e-2xs); align-items: flex-start; font-size: var(--paso--1); line-height: 1.45; cursor: pointer; }
.consentimiento-recorrido input { inline-size: 1.1rem; block-size: 1.1rem; margin-block-start: .15rem; flex: none; accent-color: var(--acento); }

.acciones-paso { display: flex; flex-wrap: wrap; gap: var(--e-s); align-items: center; margin-block-start: var(--e-s); }

/* ================= Codigo de verificacion ================= */
.campo-codigo input {
  font-family: var(--fuente-datos); font-size: var(--paso-2); letter-spacing: .3em; text-align: center;
  font-variant-numeric: tabular-nums;
}
.reenvio-codigo { font-size: var(--paso--1); color: var(--muted); }
.reenvio-codigo button { background: none; border: none; padding: 0; color: var(--ink); text-decoration: underline; cursor: pointer; font: inherit; }
.reenvio-codigo button:disabled { color: var(--muted); text-decoration: none; cursor: default; }

/* ================= Cuestionario ================= */
.avance-cuestionario { display: grid; gap: var(--e-3xs); margin-block-end: var(--e-l); }
.avance-cuestionario .rot { font-family: var(--fuente-datos); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.barra-avance { block-size: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.barra-avance > span { display: block; block-size: 100%; background: var(--acento); border-radius: inherit; transition: inline-size var(--duracion-control) var(--curva-control); }

.pregunta-tarjeta { border: 1px solid var(--line); border-radius: var(--radio-l); padding: var(--e-l); background: var(--surface); margin: 0; }
/* float + ancho completo: sin esto el navegador dibuja la leyenda encima del borde
   del fieldset y el título de la pregunta queda montado sobre la tarjeta (revisión
   visual del 22-sep). */
.pregunta-tarjeta legend { float: left; inline-size: 100%; font-family: var(--fuente-display); font-size: var(--paso-1); padding: 0; margin-block-end: var(--e-3xs); }
.pregunta-tarjeta legend + * { clear: both; }
/* OT-19 · sin la nota interna debajo de cada pregunta: la leyenda deja su propio aire. */
.pregunta-tarjeta legend { margin-block-end: var(--e-s); }
.opciones-pregunta { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e-2xs); }
.opciones-pregunta li { max-width: none; }
.opciones-pregunta label {
  display: flex; align-items: center; gap: var(--e-2xs); border: 1px solid var(--line-control); border-radius: var(--radio);
  padding: var(--e-xs); cursor: pointer; min-block-size: 44px;
}
.opciones-pregunta label:has(input:checked) { border-color: var(--acento); background: var(--surface-2); }
.opciones-pregunta label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.opciones-pregunta input { flex: none; accent-color: var(--acento); }

/* ================= Estado del analisis ================= */
.estado-analisis {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2xs) var(--e-s);
  border: 1px solid var(--line); border-radius: var(--radio-m); padding: var(--e-s); margin-block-end: var(--e-l);
  background: var(--surface-2); font-size: var(--paso--1); color: var(--ink-2);
}
.estado-analisis .punto-estado { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--line-strong); flex: none; }
.estado-analisis[data-listo] .punto-estado { background: var(--sev-ok); }
.estado-analisis[data-fallido] .punto-estado { background: var(--sev-alta); }
.enlace-informe[hidden] { display: none; }

/* ================= OT-19 · un minuto y el cuestionario completo ================= */
.tiempo-respuesta { font-family: var(--fuente-datos); font-size: .78rem; letter-spacing: .04em; color: var(--muted); margin-block: 0 var(--e-xs); }
.tarjeta-recorrido .entrada + .tiempo-respuesta { margin-block-start: var(--e-2xs); }
.tiempo-respuesta[hidden], .cuestionario-completo[hidden], .avance-cuestionario[hidden], .acciones-paso[hidden] { display: none; }
/* El estado final se destaca: borde de marca, check sobre el degradado de marca y
   el boton principal grande. Solo tokens del sistema. */
.cuestionario-completo {
  display: grid; justify-items: start; gap: var(--e-xs); padding: var(--e-l); margin-block-start: var(--e-s);
  background: var(--surface); border: 1px solid var(--line-strong); border-inline-start: 4px solid var(--acento);
  border-radius: var(--radio-l); box-shadow: var(--sombra-panel);
}
.cuestionario-completo:focus { outline: none; }
.cuestionario-completo:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cuestionario-completo h2 { font-size: var(--paso-3); margin: 0; }
.cuestionario-completo p { margin: 0; color: var(--ink-2); max-width: var(--ancho-texto); }
.icono-completo {
  display: inline-grid; place-items: center; inline-size: 56px; block-size: 56px; border-radius: 50%;
  background: var(--dive); color: var(--off-white); box-shadow: var(--sombra-control);
}
.icono-completo svg { display: block; }
.boton-grande { min-block-size: 56px; padding-inline: var(--e-l); font-size: var(--paso-1); margin-block-start: var(--e-2xs); }
@media (max-width: 34rem) {
  .cuestionario-completo { padding: var(--e-m); }
  .boton-grande { inline-size: 100%; justify-content: center; }
}

/* ================= OT-10 · notas legales y borrado ================= */
/* La linea con el folio y la version de la politica y el aviso, debajo de la
   casilla (que se deja identica a la del sitio), y las notas de las pantallas
   de borrado. Mismo tamano y color que las notas de campo. */
.tarjeta-recorrido > #app > .nota-campo,
.formulario-recorrido > .nota-legal { font-size: var(--paso--1); color: var(--muted); }
.nota-legal { margin: 0; }

/* ================= Selector de tema (25-sep-2026) ================= */
/* Copia del selector del pie del sitio (`sitio-edge/src/components/Footer.astro`,
   commit 5d17a778): tres íconos en una pastilla discreta; una pastilla de
   vidrio marca el elegido y se desliza entre ellos. El foco es el anillo de
   siempre; con movimiento reducido la pastilla salta sin deslizarse. Nace con
   `hidden` y `/tema.js` lo muestra. La sombra de la pastilla es la única
   excepción a "solo tokens": son los dos valores literales del pie del sitio,
   copiados sin cambiar, porque el sistema no tiene un token para ella. */
.tema-pie { position: relative; display: inline-flex; align-items: center; padding: 2px; border: 1px solid var(--line); border-radius: 999px;
  background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.tema-pie button { position: relative; z-index: 1; display: grid; place-items: center; inline-size: 32px; block-size: 32px; padding: 0;
  border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); cursor: pointer; transition: color var(--duracion-control); }
.tema-pie button:hover { color: var(--ink); }
.tema-pie button[aria-pressed="true"] { color: var(--ink); }
.tema-pie button:focus-visible { outline-offset: 0; }
.tema-pulgar { position: absolute; inset-block: 2px; inset-inline-start: 2px; inline-size: 32px; border-radius: 999px; pointer-events: none;
  background: color-mix(in srgb, var(--surface) 78%, transparent); border: 1px solid var(--line-strong);
  box-shadow: 0 1px 2px rgb(23 8 30 / .12), 0 2px 6px -2px rgb(23 8 30 / .16);
  -webkit-backdrop-filter: blur(8px) saturate(1.3); backdrop-filter: blur(8px) saturate(1.3);
  transition: transform 220ms var(--curva-control); }
.tema-pie:has([data-tema-opcion="oscuro"][aria-pressed="true"]) .tema-pulgar { transform: translateX(32px); }
.tema-pie:has([data-tema-opcion="auto"][aria-pressed="true"]) .tema-pulgar { transform: translateX(64px); }
/* Sin :has(), el botón marcado lleva su propio fondo y la pastilla no se pinta. */
@supports not selector(:has(a)) {
  .tema-pulgar { display: none; }
  .tema-pie button[aria-pressed="true"] { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); }
}
@media print { .tema-pie { display: none !important; } }

/* ================= Movimiento ================= */
@media (prefers-reduced-motion: reduce) {
  .barra-avance > span { transition: none; }
  .tema-pulgar { transition: none; }
}