/* ==========================================================================
   aq-form-field — envoltorio de label + input/select/textarea.
   Formulario de Contacto (Fase 4.8), maquetado pensando en Contact Form 7
   (Fase 8, D3): CF7 envuelve cada campo en <span class="wpcf7-form-control-wrap">
   entre el <label> y el <input>, así que:

   - CERO selectores de hijo directo o adyacencia entre label e input
     (nada de "label + input" ni ".aq-form-field > input"): se rompen en
     cuanto CF7 mete su span en medio.
   - Todo el estilo del campo se aplica con la clase aq-form-field__input
     puesta directamente en el input/select/textarea — esa clase la
     conserva CF7 tal cual (atributo `class:` del shortcode).
   - Estructura plana: label, input, nada más.

   El foco visible NO se redefine aquí: el fallback global de
   :focus-visible (reset.css) alcanza. CORREGIDO en la auditoría 7.3: este
   comentario decía "fondo blanco del campo", pero el campo en realidad
   usa --aq-gray-panel (ver más abajo) — el anillo dorado que había antes
   medía 2.88:1 ahí, por debajo del mínimo 3:1. El anillo global ahora es
   de dos colores (negro + blanco) y pasa 17.79:1 sobre --aq-gray-panel.

   DEFECTO CORREGIDO (auditoría Fase 4.9): el ritmo vertical ENTRE
   campos no puede salir de "aq-form-field + aq-form-field { margin-top }".
   CF7 envuelve su salida en <p> automáticamente salvo que se desactive
   wpcf7_autop, y ese <p> intermedio rompe la adyacencia — el formulario
   perdería todo su espaciado en la Fase 8 sin que la causa fuera obvia.
   El ritmo vertical se resuelve con `gap` en el contenedor flex
   (.aq-contact-form, sections/contacto.css), indiferente a cualquier
   nodo que CF7 inyecte entre los hijos.

   Sin border-radius, a propósito (saneamiento de unidades y radios, previo a Servicios) — misma decisión y mismo
   motivo que los botones, ver components/buttons.css.
   ========================================================================== */

.aq-form-field {
	display: flex;
	flex-direction: column;
	gap: var(--aq-space-2);
}

/* Familia, tamaño, peso y mayúsculas vienen de .aq-caption-label
   (base/typography.css, aplicada en el HTML junto a esta clase); acá
   solo el color propio de este contexto. */
.aq-form-field__label {
	color: var(--aq-text);
}

.aq-form-field__label-2 {
	color: var(--aq-black);
}

.aq-form-field__input {
	width: 100%;
	padding: var(--aq-space-3) var(--aq-space-4);
	font-family: var(--aq-font-sans);
	font-size: var(--aq-fs-body);
	color: var(--aq-text);
	background-color: var(--aq-beige);
   border: none;
	border-bottom: var(--aq-border-width) solid var(--aq-heading);
}

.aq-form-field__input-2 {
	width: 100%;
	padding: var(--aq-space-3) var(--aq-space-4);
	font-family: var(--aq-font-sans);
	font-size: var(--aq-fs-body);
	color: var(--aq-text);
	background-color: var(--aq-beige);
   border: none;
	border-bottom: var(--aq-border-width) solid var(--aq-heading);
}

.aq-form-field__textarea {
	resize: vertical;
	min-height: 8rem;
}

/* --------------------------------------------------------------------
   select — la flecha nativa del navegador se dibuja distinto en cada
   plataforma (iOS, Android, Windows) y no se puede acotar su ancho, así
   que se apaga con `appearance: none` y se reemplaza por un chevron
   propio como background-image. Va en una clase propia aplicada sobre
   el <select> (nunca por posición en el árbol, mismo criterio que el
   resto de este archivo) para no tocar `<input>`/`<textarea>`.

   El color del chevron (#3D3D3D) está tomado a mano de --aq-text: un
   data-URI de SVG no puede leer variables CSS. Si --aq-text cambia de
   valor final, este hexadecimal hay que actualizarlo junto con él.
   -------------------------------------------------------------------- */
.aq-form-field__select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 2.75rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%233D3D3D' d='M8 11.5 3 6.5h10z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--aq-space-4) center;
	background-size: 0.75rem;
}

/* --------------------------------------------------------------------
   Estados de validación (Fase 6.4) — no definidos en el diseño; color
   justificado en tokens.css. Ver el registro de tareas.md para el
   mapeo con las clases de salida de Contact Form 7 (`.wpcf7-not-valid`,
   `.wpcf7-not-valid-tip`): la Fase 8 reutiliza este CSS, no lo reescribe.

   El borde rojo NUNCA es la única señal: `aq-form-field__error` siempre
   lleva texto + ícono (regla de accesibilidad, Fase 6.4). Tampoco
   compite con el foco: `:focus-visible` (reset.css) dibuja un `outline`
   por fuera del borde, así que un campo puede estar inválido Y enfocado
   a la vez sin que ninguno de los dos estados tape al otro.

   RESUELTO (8.5): `.wpcf7-not-valid-tip` ya tiene su ícono, agregado
   con `::before` en `cf7-reset.css` (no acá — ese archivo es el que
   existe justo por las diferencias que impone CF7, este sigue siendo
   dueño del diseño propio). `aq-form-field__error` quedó SIN
   consumidor en el HTML desde que el `<form>` literal se reemplazó
   por el shortcode de CF7 (8.5) — la regla de abajo se queda porque
   la comparte con `.wpcf7-not-valid-tip`, que sí tiene consumidor real
   (ver el barrido de 8.6 en tareas.md).
   -------------------------------------------------------------------- */
.aq-form-field__input[aria-invalid="true"],
.aq-form-field__input.wpcf7-not-valid {
	border-color: var(--aq-danger);
}

.aq-form-field__error,
.wpcf7-not-valid-tip {
	display: flex;
	align-items: center;
	gap: var(--aq-space-2);
	color: var(--aq-danger);
	font-family: var(--aq-font-sans);
	font-size: var(--aq-fs-small);
}

.aq-form-field__error[hidden] {
	display: none;
}