/* ==========================================================================
   cf7-reset.css — Contact Form 7, tarea 8.5.

   ÚNICA responsabilidad de este archivo: volver transparentes al layout
   los envoltorios que CF7 inyecta SOLO (sin controlar el markup
   aprobado ni el diseño del formulario, eso sigue siendo
   form-field.css). CF7 envuelve cada control en
   `<span class="wpcf7-form-control-wrap">` — un nodo que
   `aq-form-field` (flex, gap) no esperaba entre el <label> y el
   control real. `display: contents` saca el span del árbol de layout
   sin sacarlo del DOM: sus hijos (el <input>/<select>/<textarea> real)
   quedan como hijos directos de `.aq-form-field` a efectos de flex,
   que es exactamente lo que el diseño aprobado asume.

   Los ESTADOS del formulario (error, éxito, aria-invalid) NO van acá:
   ese mapeo ya estaba resuelto en tareas.md desde la Fase 6.4 y vive
   en form-field.css, junto a sus equivalentes propios.

   Verificado contra el formulario real (8.5, medición con Playwright +
   pixelmatch): `.wpcf7-form-control-wrap` es el nombre de clase real
   de esta versión del plugin.

   Dos nodos más de CF7 no tienen equivalente en el markup aprobado y
   NO son transparentes por defecto -- son hijos directos del <form>,
   así que .aq-contact-form (flex, gap) los trata como ítems propios y
   les suma un hueco de `gap` de más contra cada uno, así estén vacíos:

   - `.hidden-fields-container`: el <fieldset> donde CF7 mete sus
     campos ocultos (nonce, versión, etc.). Bootstrap Reboot ya le pone
     margin/padding/border en 0, pero seguía contando como ítem del
     flex. Nunca muestra nada visible -- se oculta siempre, sin
     condición.
   - `.wpcf7-response-output`: el contenedor de mensajes de éxito/error
     de CF7. Al cargar la página está vacío -- ahí SÍ tiene que
     desaparecer del layout, pero
     en cuanto CF7 le inyecte un mensaje real (envío hecho) necesita
     volver a ser una caja normal para que el estilo de
     sections/contacto.css (fondo, padding, borde) se vea. `:empty` lo
     resuelve sin JS: deja de matchear en cuanto tiene contenido.
   ========================================================================== */

.aq-contact-form .wpcf7-form-control-wrap {
	display: contents;
}

.aq-contact-form .hidden-fields-container {
	display: none;
}

.aq-contact-form .wpcf7-response-output:empty {
	display: none;
}

/* Hallazgo real capturando el estado de éxito (8.5): entre "submitting"
   y "sent" hay un estado intermedio real, "resetting" (unos 300-450ms,
   medido con Playwright), donde CF7 YA puso el texto del mensaje en
   `.wpcf7-response-output` pero TODAVÍA no le puso la clase final
   `sent`/`failed`/... al `<form>` -- así que `:empty` de arriba no lo
   tapa (ya tiene contenido) y se ve sin el color/ícono correcto por
   una fracción de segundo, un parpadeo real, no cosmético. La hoja de
   estilos propia de CF7 (desencolada en 8.1) lo ocultaba con
   `form.init/.submitting/.resetting .wpcf7-response-output { display:
   none }` -- se repone solo esa parte, con nuestra clase. */
.aq-contact-form.init .wpcf7-response-output,
.aq-contact-form.submitting .wpcf7-response-output,
.aq-contact-form.resetting .wpcf7-response-output {
	display: none;
}

/* Ícono del mensaje de error por campo (8.5, pedido explícito del
   cliente al retirar form-validation.js): `.wpcf7-not-valid-tip` es un
   <span> de CF7, sin hijos -- no se le puede insertar un <i> real
   como hacía el módulo retirado (`renderIconMessage()`). Va por CSS
   acá, no en form-field.css: ese archivo sigue siendo dueño del
   diseño propio (`.aq-form-field__error`), esto es un parche que
   existe SOLO porque CF7 genera el nodo distinto.

   Glifo `bi-exclamation-circle` (Bootstrap Icons, \f333 -- confirmado
   en assets/vendor/bootstrap-icons/bootstrap-icons.min.css, no
   adivinado), mismo tamaño y `gap` que ya usaba `aq-form-field__error`
   (form-field.css, `--aq-space-2`), para que el resultado sea idéntico
   al que reproducía form-validation.js -- comparado contra una
   captura del formulario original (`_html-aprobado`) antes de escribir
   esto.

   Decorativo, sin agregar texto al anuncio del lector de pantalla:
   `.wpcf7-not-valid-tip` ya tiene `aria-hidden="true"` puesto por CF7
   (confirmado, no supuesto) -- el contenido real y accesible sigue
   viviendo aparte, en el <li> que `aria-describedby` referencia dentro
   de `.screen-reader-response`. El contenido generado por CSS
   (`::before`) tampoco entra al árbol de accesibilidad por su cuenta;
   acá queda doblemente cubierto. */
.wpcf7-not-valid-tip::before {
	font-family: bootstrap-icons;
	font-style: normal;	
	content: "\f333";
}

/* `.screen-reader-response` (el <div> con el <p role="status"> + <ul> que
   CF7 imprime ANTES del <form>, para anunciar resultados a lectores de
   pantalla) viene visualmente oculto por la hoja de estilos propia de
   CF7 -- la misma que se desencoló a propósito en 8.1/8.5 porque
   competía con form-field.css. Sin ese CSS, el <p> vacío queda visible
   como bloque normal y hereda el margin-bottom: 1rem de Bootstrap
   Reboot, agregando ~16px antes del primer campo que la referencia no
   tiene (medido, no supuesto). Se repone acá SOLO la técnica de
   ocultamiento visual (igual a .visually-hidden de Bootstrap), no el
   resto de la hoja: el nodo sigue en el DOM y disponible para lectores
   de pantalla, invisible y sin tamaño para el layout. */
/* `.wpcf7-spinner` (icono de carga que CF7 inserta con JS junto al
   botón ENVIAR) también es un hijo real del flex de .aq-contact-form.
   La hoja de CF7 que se desencoló le daba tamaño propio (24x24px,
   visibility: hidden en reposo, visible solo con form.submitting) --
   sin ella queda en 0x0, invisible por casualidad y no por diseño,
   pero seguía sumando un hueco de gap de más contra la referencia
   (medido: ~15-16px en los anchos donde el formulario se apila).

   8.5, corrección pedida por el cliente: ocultarlo siempre resolvía el
   layout pero dejaba el envío por AJAX sin ninguna señal visible --
   invita a apretar ENVIAR dos veces. Se saca del flujo con
   `position: absolute` (así que sigue sin sumar `gap`, igual que
   oculto) pero se muestra durante `form.submitting`, anclado a
   `.aq-contact-form` (que pasa a `position: relative` solo para esto),
   centrado JUSTO DEBAJO del botón ENVIAR (que es `aq-btn--full`, ancho
   completo -- no hay lugar "al lado"). Primer intento (superpuesto en
   la esquina del botón) se descartó al verlo: el anillo quedaba
   dorado sobre dorado, invisible contra el propio botón -- se movió
   al espacio debajo, sobre el fondo del panel, donde el contraste sí
   se ve. Verificado con Playwright: mismas dimensiones totales de
   página en reposo, en los 4 anchos, con y sin este cambio -- el
   spinner nunca empuja nada porque nunca participa del flujo. */
.aq-contact-form {
	position: relative;
}

.aq-contact-form .wpcf7-spinner {
	display: none;
}

.aq-contact-form.submitting .wpcf7-spinner {
	display: block;
	position: absolute;
	left: 50%;
	bottom: calc(-1 * var(--aq-space-6));
	width: 1.1rem;
	height: 1.1rem;
	margin: 0;
	transform: translateX(-50%);
	border-radius: 50%;
	border: 2px solid color-mix(in srgb, var(--aq-text) 25%, transparent);
	border-top-color: var(--aq-gold);
	animation: aq-cf7-spin 0.7s linear infinite;
}

@keyframes aq-cf7-spin {
	to {
		transform: rotate(360deg);
	}
}

.screen-reader-response {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}