/* Atlántico Innovación — el formulario de contacto.
 *
 * Todo con las variables de `tokens.css` del tema hijo: ni un color ni un
 * espacio escritos a mano. Si mañana cambia la paleta de la marca, el
 * formulario cambia con ella sin tocar este fichero.
 *
 * El botón NO se estiliza aquí: reutiliza `.ai-btn--primario` del tema, que ya
 * tiene el contraste medido (6,82:1) y el objetivo táctil de 48 px.
 *
 * Prefijo `ai-formulario`, no `ai-contacto`: esa clase ya es de la sección de
 * la página en el tema.
 */

.ai-formulario {
  /* NO se usa `--ai-lectura` (68ch). Esa medida es para texto corrido, y aquí
     estrangulaba el formulario a unos 570px aunque la tarjeta que lo contiene
     diera más sitio: las dos columnas quedaban en 270px cada una. Un campo no
     es un párrafo y no tiene por qué respetar la medida de lectura.

     El tope que queda es generoso y solo actúa si el shortcode se pone fuera
     de una tarjeta, en una sección a todo lo ancho; dentro de la tarjeta manda
     ella (`.ai-contacto__tarjeta`, en paginas.css del tema). */
  max-width: 52rem;
  margin-inline: auto;
}

/* Texto que solo oye quien usa lector de pantalla. Se define aquí porque ni el
   tema hijo ni sus hojas lo traen, y sin esto los «Obligatorio» de cada campo
   saldrían escritos en pantalla. No se usa `display:none`: eso lo ocultaría
   también al lector, que es justo lo contrario de lo que se busca. */
.ai-formulario .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Rejilla: dos columnas en pantalla ancha, una en el móvil --- */

.ai-formulario__form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ai-esp-4);
}

.ai-formulario__campo--ancho,
.ai-formulario__acciones,
.ai-formulario__recaptcha {
  grid-column: 1 / -1;
}

@media (max-width: 640px) {
  .ai-formulario__form { grid-template-columns: 1fr; }
}

/* --- Campos --- */

.ai-formulario__campo {
  display: flex;
  flex-direction: column;
  gap: var(--ai-esp-1);
  min-width: 0;                      /* sin esto, un campo largo desborda la rejilla */
}

.ai-formulario__campo label {
  font-size: var(--ai-txt-sm);
  font-weight: 600;
  color: var(--ai-marino-900);
}

.ai-formulario__req { color: var(--ai-error); margin-inline-start: 2px; }

.ai-formulario__opcional {
  font-weight: 400;
  /* gris-700 y no gris-500: tokens.css anota el 500 como «solo >= 18 px
     (3,48:1)» y aqui el texto va a --ai-txt-sm (12,8 px). Quedaba por debajo
     del 4,5:1 que exige WCAG AA. */
  color: var(--ai-gris-700);
  margin-inline-start: var(--ai-esp-1);
}

.ai-formulario__campo input,
.ai-formulario__campo textarea {
  font-family: var(--ai-fuente);
  font-size: var(--ai-txt-base);
  color: var(--ai-tinta);
  background: var(--ai-blanco);
  border: var(--ai-borde);
  border-radius: var(--ai-radio-sm);
  padding: var(--ai-esp-2) var(--ai-esp-3);
  min-height: 48px;                  /* mismo objetivo táctil que los botones */
  width: 100%;
  transition: border-color var(--ai-mov-rapido) var(--ai-curva),
              box-shadow var(--ai-mov-rapido) var(--ai-curva);
}

.ai-formulario__campo textarea {
  min-height: 9rem;
  resize: vertical;                  /* solo en vertical: en horizontal rompe la rejilla */
  line-height: 1.6;
}

.ai-formulario__campo input:focus-visible,
.ai-formulario__campo textarea:focus-visible {
  outline: none;                     /* se sustituye, no se quita: ver el box-shadow */
  border-color: var(--ai-marino-600);
  box-shadow: 0 0 0 3px rgb(43 123 214 / .28);
}

/* El navegador marca en rojo lo que falta, pero SOLO después de intentar
   enviar: `:user-invalid` no se activa mientras se escribe por primera vez.
   Con `:invalid` a secas, el campo del correo saldría en rojo desde el primer
   carácter tecleado, regañando a quien todavía no ha terminado de escribir. */
.ai-formulario__campo input:user-invalid,
.ai-formulario__campo textarea:user-invalid {
  border-color: var(--ai-error);
}

/* --- Información básica y consentimiento --- */

.ai-formulario__basica {
  font-size: var(--ai-txt-sm);
  line-height: 1.6;
  color: var(--ai-gris-700);
  background: var(--ai-gris-50);
  border-radius: var(--ai-radio-sm);
  padding: var(--ai-esp-3);
  margin: 0 0 var(--ai-esp-3);
}

.ai-formulario__consent {
  display: flex;
  align-items: flex-start;
  gap: var(--ai-esp-2);
  font-size: var(--ai-txt-sm);
  line-height: 1.5;
  cursor: pointer;
}

.ai-formulario__consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: .1rem;                 /* alinea con la primera línea del texto */
  accent-color: var(--ai-marino-600);
  cursor: pointer;
}

/* --- Avisos --- */

.ai-formulario__aviso {
  border-radius: var(--ai-radio);
  padding: var(--ai-esp-3) var(--ai-esp-4);
  margin-bottom: var(--ai-esp-4);
  border-inline-start: 4px solid;    /* lógico, no `border-left`: respeta el sentido de lectura */
  font-size: var(--ai-txt-base);
}

.ai-formulario__aviso p { margin: 0; }
.ai-formulario__aviso ul { margin: var(--ai-esp-2) 0 0; padding-inline-start: 1.25rem; }
.ai-formulario__aviso li { margin-block: .25rem; }

/* El color NO es la única señal: el mensaje ya dice qué ha pasado, y el aviso
   lleva role="status" o role="alert" para quien usa lector de pantalla. */
.ai-formulario__aviso--ok {
  background: rgb(21 128 61 / .08);
  border-color: var(--ai-exito);
  color: var(--ai-marino-900);
}

.ai-formulario__aviso--error {
  background: rgb(220 38 38 / .07);
  border-color: var(--ai-error);
  color: var(--ai-marino-900);
}

/* --- Pie: el aviso de Google --- */

.ai-formulario__recaptcha {
  font-size: var(--ai-txt-sm);
  /* Mismo motivo que arriba, y aqui pesa mas: es el aviso que Google exige
     mostrar de forma legible. */
  color: var(--ai-gris-700);
  margin: 0;
}

.ai-formulario__recaptcha a { color: inherit; text-decoration: underline; }

/* --- Sobre fondo marino --- */

.ai-oscuro .ai-formulario__campo label { color: var(--ai-blanco); }
.ai-oscuro .ai-formulario__basica {
  background: rgb(255 255 255 / .08);
  color: var(--ai-cielo-100);
}
.ai-oscuro .ai-formulario__aviso--ok,
.ai-oscuro .ai-formulario__aviso--error { color: var(--ai-blanco); }
.ai-oscuro .ai-formulario__recaptcha { color: var(--ai-cielo-200); }

/* --- Quien prefiere que nada se mueva --- */

@media (prefers-reduced-motion: reduce) {
  .ai-formulario__campo input,
  .ai-formulario__campo textarea { transition: none; }
}