/* ==========================================================================
   components/formulario.css — Formularios
   Sin marcador propio: formulario de contacto (contacto.html).
   Comportamiento en assets/js/formularios.js.
   ========================================================================== */

/* ---------- Campo ---------- */
.campo__etiqueta { display: block; margin-bottom: var(--space-1); font-size: var(--text-sm); font-weight: 600; color: var(--c-abismo); }
.campo__requerido { color: var(--c-error); }
.campo__control {
  width: 100%;
  min-height: var(--tactil);
  padding: var(--space-3) var(--space-4);
  border: var(--borde-medio) solid var(--c-borde-control);
  border-radius: var(--radio-sm);
  background: var(--c-bruma);
  color: var(--c-texto);
  font-size: var(--text-base);
}
.campo__control:hover { border-color: var(--c-texto); }
/* Sin outline: none — el foco global (base.css) se suma al cambio de fondo y borde */
.campo__control:focus { border-color: var(--c-laguna); background: var(--c-blanco); }
.campo__control[aria-invalid="true"] { border-color: var(--c-error); }
/* "Seleccione…" (opción vacía) se muestra como marcador de posición */
select.campo__control:has(option[value=""]:checked) { color: var(--c-texto-suave); }
.campo__error { margin: var(--space-1) 0 0; min-height: var(--alto-mensaje); font-size: var(--text-sm); color: var(--c-error); }
.campo__error:not(:empty) { animation: aviso-entrar var(--dur-media) var(--ease-entrada); }
textarea.campo__control { min-height: var(--alto-textarea); resize: vertical; }

/* ---------- Casilla (autorización de datos) ----------
   La etiqueta entera es clicable: con la casilla forma un área táctil de ≥ 44px. */
.campo--casilla {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-3);
  align-items: start;
}
.campo__casilla {
  width: var(--tam-casilla);
  height: var(--tam-casilla);
  margin: var(--space-1) 0 0;
  accent-color: var(--c-laguna);
}
.campo__casilla[aria-invalid="true"] { outline: var(--borde-medio) solid var(--c-error); outline-offset: var(--hairline); }
.campo__texto-casilla { min-height: var(--tactil); font-size: var(--text-sm); color: var(--c-texto); cursor: pointer; }
.campo--casilla .campo__error { grid-column: 1 / -1; }

/* ---------- Verificación anti-bots (Cloudflare Turnstile) ----------
   El widget es un iframe de Cloudflare (tema claro, como el sitio). La caja reserva su alto
   para que el botón no salte al cargar; formularios.js elige el tamaño según el ancho. */
.verificacion { min-height: var(--alto-verificacion); max-width: 100%; }

/* ---------- Formulario de contacto ---------- */
.formulario {
  display: grid;
  gap: var(--space-4);
  padding: var(--pad-caja);
  border-radius: var(--radio);
  background: var(--c-blanco);
  color: var(--c-texto);
}
.formulario__nota { margin: 0; font-size: var(--text-sm); color: var(--c-texto-suave); }
.formulario__fila { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 640px) { .formulario__fila { grid-template-columns: 1fr; } }

/* ---------- Estado del envío (role="status", aria-live) ----------
   formularios.js pone el texto y la variante; al cambiar, el aviso entra
   con fade + desplazamiento corto. Vacío no ocupa más que su línea reservada. */
.estado-envio { min-height: var(--alto-mensaje); margin: 0; font-size: var(--text-sm); color: var(--c-laguna); }
.estado-envio:not(:empty) {
  padding: var(--space-2) var(--space-3);
  border-left: var(--borde-acento) solid currentColor;
  border-radius: 0 var(--radio-xs) var(--radio-xs) 0;
  background: var(--c-bruma);
  font-weight: 600;
}
.estado-envio--exito { color: var(--c-laguna); }
.estado-envio a { color: inherit; text-decoration: underline; }
.estado-envio--error { color: var(--c-error); }
.estado-envio.is-nuevo { animation: aviso-entrar var(--dur-media) var(--ease-entrada); }
@keyframes aviso-entrar {
  from { opacity: 0; transform: translateY(calc(var(--space-2) * -1)); }
}

/* ---------- Sin JavaScript ----------
   sin-js.css oculta .formulario (no puede enviarse sin JS) y queda este aviso,
   que va dentro de <noscript> en contacto.html. */
.formulario-sin-js {
  padding: var(--pad-caja);
  border-radius: var(--radio);
  background: var(--c-blanco);
  color: var(--c-texto);
}
.formulario-sin-js p { margin: 0; }
.formulario-sin-js a { color: var(--c-laguna); }