/* ───────────────────────────────────────────────────────────────────────────
   Overys — hoja de estilo del triaje migratorio (vehículo web, spec §3.3)

   Self-hosted entera. Ni una @import externa, ni una fuente de Google: D5
   prohíbe cualquier recurso de un CDN de terceros en esta página, y la CSP
   de `lib/triaje-web-render.js` lo bloquea aunque alguien la escriba.

   Las variables (--color-*, --font-sans, --radius-*) vienen de
   /design-tokens.css, generado desde lib/design-tokens.js. Aquí no se
   redefine ni un color de marca.
   ─────────────────────────────────────────────────────────────────────── */

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

body {
  margin: 0;
  padding: 0;
  background: var(--color-crema, #F2F1EC);
  color: var(--color-carbon, #232323);
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 17px;          /* se lee en el móvil, de pie, con prisa */
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

.hoja {
  max-width: 40rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 4rem;
}

.cabecera { margin-bottom: 1.5rem; }
.logo { display: block; height: auto; margin-bottom: 1.5rem; }

h1 {
  font-size: 1.75rem;
  line-height: 1.2;
  font-weight: 700;
  margin: 0;
}

/* La primera línea de §3.3: qué se guarda, qué no se pide y quién lo lee.
   Va destacada porque su sitio es ANTES del primer campo, no en el pie. */
.primera-linea {
  background: #fff;
  border-left: 4px solid var(--color-verde, #00C688);
  border-radius: var(--radius-md, 12px);
  padding: 1rem 1.1rem;
  margin: 1.5rem 0 1rem;
  font-size: 1rem;
}

.tiempo { color: var(--color-gris, #9A9A94); margin: 0 0 1.5rem; font-size: .95rem; }

.aviso-titular {
  font-size: .95rem;
  color: var(--color-carbon, #232323);
  background: #fff;
  border-radius: var(--radius-md, 12px);
  padding: .9rem 1rem;
  margin: 0 0 2rem;
}

.errores {
  background: #fff;
  border-left: 4px solid var(--color-magenta, #B42E24);
  border-radius: var(--radius-md, 12px);
  padding: 1rem 1.1rem;
  margin-bottom: 2rem;
}
.errores p { margin: 0 0 .5rem; font-weight: 600; color: var(--color-magenta, #B42E24); }
.errores ul { margin: 0; padding-left: 1.2rem; font-size: .95rem; }

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

fieldset.pregunta {
  border: 0;
  margin: 0 0 2rem;
  padding: 0;
}
fieldset.pregunta[hidden] { display: none; }

fieldset.pregunta.con-error {
  border-left: 3px solid var(--color-magenta, #B42E24);
  padding-left: .9rem;
  margin-left: -1.2rem;
}

legend {
  padding: 0;
  margin-bottom: .75rem;
  font-weight: 600;
  font-size: 1.05rem;
  display: block;
  width: 100%;
}

.num {
  display: inline-block;
  min-width: 2.2rem;
  color: var(--color-verde-texto, #00694A);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.candado { margin-left: .35rem; cursor: help; }
.opcional {
  font-weight: 400;
  color: var(--color-gris, #9A9A94);
  font-size: .85rem;
  margin-left: .35rem;
}

.ayuda {
  margin: -.35rem 0 .75rem 2.2rem;
  color: var(--color-gris, #9A9A94);
  font-size: .9rem;
}

/* Opción cerrada: toda la fila es zona de toque. En un móvil, un radio de
   16px rodeado de nada es la forma más rápida de que alguien abandone. */
.opcion {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  background: #fff;
  border: 1px solid transparent;
  border-radius: var(--radius-md, 12px);
  padding: .8rem .9rem;
  margin: 0 0 .5rem 2.2rem;
  cursor: pointer;
}
.opcion:has(input:checked) {
  border-color: var(--color-verde, #00C688);
  box-shadow: 0 0 0 1px var(--color-verde, #00C688);
}
.opcion input { margin: .28rem 0 0; flex: 0 0 auto; width: 1.05rem; height: 1.05rem; accent-color: var(--color-verde, #00C688); }
.opcion span { flex: 1; }

/* `email` y `tel` también: `public/triaje.js` cambia el tipo del campo de
   contacto según «Por email» / «Por WhatsApp o teléfono», y con solo `text`
   aquí el campo se quedaba con el estilo del navegador (Jose, 15-oct). */
textarea, select, input[type="text"], input[type="email"], input[type="tel"], input[type="number"] {
  display: block;
  width: 100%;
  margin-left: 0;
  font-family: inherit;
  font-size: 1rem;
  padding: .8rem .9rem;
  border: 1px solid #DCDBD4;
  border-radius: var(--radius-md, 12px);
  background: #fff;
  color: inherit;
}
fieldset.pregunta textarea,
fieldset.pregunta select,
fieldset.pregunta input[type="number"] { width: calc(100% - 2.2rem); margin-left: 2.2rem; }

textarea:focus, select:focus, input:focus {
  outline: 2px solid var(--color-verde, #00C688);
  outline-offset: 1px;
}

/* ── Contacto y consentimiento ─────────────────────────────────────────── */

/* La caja va en la columna de las respuestas (2.2rem, como `.opcion`), no
   más a la izquierda. Y su `legend` flota dentro: un <legend> de un fieldset
   con fondo se pinta SOBRE el borde superior de la caja (Jose, 15-oct, «montada
   sobre la caja»). */
fieldset.contacto {
  background: #fff;
  border-radius: var(--radius-lg, 16px);
  padding: 1.25rem;
  margin: 0 0 1.5rem 2.2rem;
}
fieldset.contacto legend { float: left; width: 100%; margin-bottom: .5rem; }
fieldset.contacto legend + * { clear: both; }
fieldset.contacto .ayuda,
fieldset.contacto .opcion { margin-left: 0; }
fieldset.contacto .opcion { background: var(--color-crema, #F2F1EC); }
fieldset.contacto input[type="text"],
fieldset.contacto input[type="email"],
fieldset.contacto input[type="tel"] { margin-top: .75rem; }
.campo-suelto { display: block; margin-top: 1rem; font-size: .95rem; font-weight: 600; }

/* §8.2: casilla separada, no premarcada, no obligatoria. Visualmente
   separada del resto para que no se confunda con una pregunta del test. */
.consent {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  font-size: .92rem;
  color: var(--color-carbon, #232323);
  padding: 1rem 0 1.5rem;
}
.consent input { margin: .2rem 0 0; width: 1.05rem; height: 1.05rem; accent-color: var(--color-verde, #00C688); }

button[type="submit"] {
  display: block;
  width: 100%;
  border: 0;
  border-radius: var(--radius-full, 9999px);
  background: var(--color-carbon, #232323);
  color: #fff;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  padding: 1rem;
  cursor: pointer;
}
button[type="submit"]:hover { background: #000; }
button[type="submit"]:focus-visible { outline: 3px solid var(--color-verde, #00C688); outline-offset: 2px; }

.nota { font-size: .9rem; color: var(--color-gris, #9A9A94); margin-top: 1.5rem; }

.pie { margin-top: 2.5rem; font-size: .9rem; }
.pie a { color: var(--color-verde-texto, #00694A); }

/* ── Acuse (§4.2 momento 1) ────────────────────────────────────────────── */

.acuse p { margin: 0 0 1.1rem; }
.acuse h1 { margin-bottom: 1.5rem; }

@media (min-width: 40rem) {
  .hoja { padding-top: 3rem; }
  h1 { font-size: 2.1rem; }
}