/* Formularios de Acceso · sistema v2
   Solo usa los tokens de acceso-tokens-v2.css (carga ese archivo antes). Todo va dentro de .formulario. */

/* El formulario es siempre una superficie clara, también cuando está dentro de una cabecera en modo inverso.
   Estos alias se fijan en :root (modo claro) y se heredan ya resueltos, así el modo inverso no los cambia. */
:root {
  --f-page: var(--ac-page);
  --f-surface: var(--ac-surface);
  --f-text: var(--ac-text);
  --f-text-muted: var(--ac-text-muted);
  --f-border: var(--ac-border);
  --f-border-strong: var(--ac-border-strong);
  --f-focus: var(--ac-focus);
}

/* La cabecera fija no tapa el campo que recibe el foco (WCAG 2.4.11) */
html { scroll-padding-top: var(--ac-space-24); }

.formulario {
  color: var(--f-text);
  font-family: var(--ac-font-text);
  font-size: var(--ac-size-body);
  line-height: var(--ac-lh-body);
}

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

.formulario p { margin: 0 0 var(--ac-space-4); max-width: none; }
.formulario a { color: var(--ac-blue); text-underline-offset: var(--ac-space-1); }

/* Foco visible en todo lo enfocable */
.formulario :focus-visible,
.formulario [tabindex="-1"]:focus {
  outline: var(--ac-focus-w) solid var(--f-focus);
  outline-offset: var(--ac-focus-offset);
}

/* Campos */
.formulario .campo { margin-bottom: var(--ac-space-6); }

.formulario label {
  display: block;
  margin: 0;
  color: var(--f-text);
  font-size: var(--ac-size-ui);
  font-weight: 600;
  line-height: var(--ac-lh-body);
}

.formulario .ayuda { margin: var(--ac-space-1) 0 var(--ac-space-2); color: var(--f-text-muted); font-size: var(--ac-size-small); }

.formulario input[type="text"],
.formulario input[type="email"],
.formulario select,
.formulario textarea {
  display: block;
  width: 100%;
  min-height: var(--ac-target);
  margin-top: var(--ac-space-1);
  padding: var(--ac-space-2) var(--ac-space-3);
  color: var(--f-text);
  background: var(--f-page);
  border: var(--ac-border-w-strong) solid var(--f-border-strong);
  border-radius: var(--ac-radius-field);
  font: inherit;
}

.formulario textarea { resize: vertical; }

/* Campo con aviso: borde el doble de grueso además del color; el relleno compensa para que no salte */
.formulario input[aria-invalid="true"],
.formulario textarea[aria-invalid="true"] {
  padding: calc(var(--ac-space-2) - var(--ac-border-w-strong)) calc(var(--ac-space-3) - var(--ac-border-w-strong));
  border: calc(var(--ac-border-w-strong) * 2) solid var(--ac-error);
}

/* Casillas y opciones */
.formulario .opcion { position: relative; }

.formulario .opcion input {
  position: absolute;
  top: calc((var(--ac-target) - var(--ac-space-6)) / 2);
  left: 0;
  width: var(--ac-space-6);
  height: var(--ac-space-6);
  margin: 0;
  accent-color: var(--ac-blue);
}

.formulario .opcion input[aria-invalid="true"] { outline: calc(var(--ac-border-w-strong) * 2) solid var(--ac-error); outline-offset: var(--ac-border-w-strong); }

.formulario .opcion label {
  min-height: var(--ac-target);
  padding: var(--ac-space-2) 0 var(--ac-space-2) calc(var(--ac-space-6) + var(--ac-space-3));
  font-weight: 400;
}

/* Grupos de opciones (preguntas de respuesta única o múltiple) */
.formulario fieldset {
  min-width: 0;
  margin: 0 0 var(--ac-space-6);
  padding: var(--ac-space-3) var(--ac-space-4) var(--ac-space-2);
  background: var(--f-surface);
  border: var(--ac-border-w) solid var(--f-border);
  border-radius: var(--ac-radius-card);
}

.formulario fieldset:has([aria-invalid="true"]) { border: calc(var(--ac-border-w-strong) * 2) solid var(--ac-error); }

.formulario legend { padding: 0 var(--ac-space-2); color: var(--f-text); font-size: var(--ac-size-ui); font-weight: 600; line-height: var(--ac-lh-body); }

.formulario fieldset .ayuda { margin-top: 0; }

.formulario .opcion label { overflow-wrap: break-word; }

/* Pasos del formulario de Inicio */
.formulario--pasos { max-width: 40rem; }
.formulario .paso { margin-top: var(--ac-space-6); }
.formulario .paso:first-of-type { margin-top: 0; }

.formulario .paso-titulo {
  margin: 0 0 var(--ac-space-4);
  color: var(--f-text);
  font-family: var(--ac-font-brand);
  font-size: var(--ac-size-h4);
  line-height: var(--ac-lh-heading);
}

.formulario .paso-numero { display: block; margin-bottom: var(--ac-space-1); color: var(--f-text-muted); font-family: var(--ac-font-text); font-size: var(--ac-size-small); font-weight: 600; }

.formulario .navegacion { display: flex; flex-wrap: wrap; gap: var(--ac-space-3); }

/* Mensajes */
.formulario .mensaje-error { margin: var(--ac-space-2) 0 0; color: var(--ac-error); font-weight: 600; }

.formulario #resumen-errores {
  margin: 0 0 var(--ac-space-6);
  padding: var(--ac-space-4) var(--ac-space-6);
  background: var(--ac-error-bg);
  border: calc(var(--ac-border-w-strong) * 2) solid var(--ac-error);
  border-radius: var(--ac-radius-card);
}

.formulario #resumen-errores :is(h2, h3, h4) { margin: 0 0 var(--ac-space-3); color: var(--ac-error); font-family: var(--ac-font-brand); font-size: var(--ac-size-h4); line-height: var(--ac-lh-heading); }
.formulario #resumen-errores ul { margin: 0; padding-left: var(--ac-space-6); }
.formulario #resumen-errores li { margin-bottom: var(--ac-space-1); }
.formulario #resumen-errores a { color: var(--ac-error); font-weight: 600; }

.formulario #confirmacion {
  padding: var(--ac-space-4) var(--ac-space-6);
  background: var(--f-surface);
  border: var(--ac-border-w) solid var(--f-border-strong);
  border-radius: var(--ac-radius-card);
}

.formulario #confirmacion :is(h2, h3, h4) { margin: 0 0 var(--ac-space-3); color: var(--f-text); font-family: var(--ac-font-brand); font-size: var(--ac-size-h4); line-height: var(--ac-lh-heading); }
.formulario #confirmacion p { margin: 0; }

.formulario .aviso { padding: var(--ac-space-3) var(--ac-space-4); background: var(--f-surface); border: var(--ac-border-w) solid var(--f-border); border-radius: var(--ac-radius-card); }

/* Primera capa de privacidad */
.formulario .privacidad-capa { color: var(--f-text-muted); font-size: var(--ac-size-small); }

/* Botón */
.formulario .boton {
  display: inline-block;
  min-height: var(--ac-target);
  padding: var(--ac-space-2) var(--ac-space-8);
  color: var(--f-page);
  background: var(--ac-blue);
  border: var(--ac-border-w-strong) solid var(--ac-blue);
  border-radius: var(--ac-radius-pill);
  font: inherit;
  font-weight: 600;
  line-height: var(--ac-lh-ui);
  cursor: pointer;
}

.formulario .boton:hover { background: var(--ac-navy); border-color: var(--ac-navy); }

.formulario .nota-envio { margin: var(--ac-space-4) 0 0; color: var(--f-text-muted); font-size: var(--ac-size-small); }

.formulario .boton[hidden] { display: none; }
.formulario .boton-secundario { color: var(--ac-blue); background: var(--f-page); }
.formulario .boton-secundario:hover { color: var(--f-page); }

/* Campo trampa contra spam */
.formulario .trampa { display: none; }

@media (prefers-reduced-motion: reduce) {
  .formulario * { transition: none; animation: none; }
}