/*
 * formulario-contacto.css — plan-segmentacion.md §2.18. Solo en `contacto` (Contact Form 7 en
 * la plantilla final; acá markup estático `<form>` nativo, sin conexión CF7 todavía — eso es
 * Fase 4). 5 campos en 2 columnas: Nombre Completo / E-mail / Teléfono / Categoría de Servicio
 * (select) + Mensaje (textarea, ancho completo) + botón "Enviar". Ningún campo lleva asterisco
 * de obligatoriedad. Geometría exacta: _dev/registro-decisiones.md, 2026-08-17.
 *
 * Textarea "Mensaje": P21, resuelto — mismo tratamiento visual que los otros 4 campos (rect
 * blanco + borde `#525252`); el PDF no traía el rect blanco de este campo por un vacío de la
 * extracción, no por diseño.
 *
 * Select "Categoría de Servicio": el chevron nativo medía `#232D42` en la lectura vectorial —
 * ya documentado como artefacto de renderizado nativo del control, no una decisión de diseño
 * (plan-segmentacion.md §5). Se implementa con la apariencia nativa del navegador, sin forzar
 * ese color.
 */

.gyo-formulario-contacto {
  width: 881px; /* medido: ancho de las 2 columnas + gap */
  max-width: 100%;
  flex-shrink: 1; /* Bootstrap `.col-auto` fija flex-shrink:0 — se restaura el comportamiento
    original (el formulario se achica antes que el sidebar cuando el ancho no alcanza) tras
    convertir `.gyo-contacto-form-grid` al grid de Bootstrap (auditoría 2026-08-18). */
  display: flex;
  flex-direction: column;
  gap: 26px; /* medido: 1141-1071.6(fila1 label bottom), redondeado — espacio entre
    fila/fila/campo-mensaje/botón. Se pone en el `form`, no vía margin en `+`, para no aplicar
    el espaciado de forma asimétrica entre las 2 columnas de una misma fila (bug real
    encontrado 2026-08-17: `.campo + .campo` también matcheaba el 2º campo DENTRO de cada fila,
    desalineando verticalmente "E-mail" respecto de "Nombre Completo"). */
}

.gyo-formulario-contacto__fila {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gyo-space-3) 23px; /* 23px medido horizontal */
}

/* Fase 3 (2026-08-18): "todo a una sola columna en 375/768" — Nombre/E-mail y Teléfono/Categoría
   pasan de 2 columnas a 1 sola (apiladas), mismo criterio que el resto de las grillas del sitio. */
@media (max-width: 991.98px) {
  .gyo-formulario-contacto__fila {
    grid-template-columns: 1fr;
  }
}

.gyo-formulario-contacto__campo {
  display: flex;
  flex-direction: column;
}

.gyo-formulario-contacto label {
  margin-bottom: 8px; /* medido: 1079-1071.6 */
  font-size: 20px;
  color: var(--color-cafe-claro);
}

.gyo-formulario-contacto input,
.gyo-formulario-contacto select,
.gyo-formulario-contacto textarea {
  height: 46px;
  padding: 0 var(--gyo-space-3);
  border: 1px solid #525252;
  background-color: #FFFFFF;
  font-family: var(--font-raleway);
  font-size: 17px;
  color: var(--color-negro-texto);
}

.gyo-formulario-contacto textarea {
  height: 104px; /* medido: 1364-1260 */
  padding-top: var(--gyo-space-3);
  resize: vertical;
}

.gyo-formulario-contacto__enviar {
  display: flex;
  align-items: center;
  justify-content: flex-end; /* el botón queda alineado al borde derecho del textarea, no centrado */
  /* el espacio vertical hasta el textarea lo da el `gap` del form (26px, medido 24px real —
     diferencia menor tratada como la misma tolerancia de exportación ya aceptada en otros
     componentes) */
}

/* Bloque E (2026-08-19): error/éxito de formulario, campo inválido y spinner de envío. Sin dato
   del PDF (no dibujado, puntos-abiertos.md Bloque E) — pero el formulario real es Contact Form 7
   recién en Fase 4 (CLAUDE.md §5), así que esto no se diseña "a criterio libre": se usa el
   contrato de DOM real y documentado que CF7 ya genera (clases `wpcf7-*` y el atributo
   `data-status` en el `<form>`), no una convención inventada — así no hay que rediseñarlo cuando
   se conecte el plugin. Verificado por inyección de estado vía CDP (no hay backend todavía que
   dispare esto solo); markup estático de referencia en `contacto.html`.

   Una sola excepción documentada al contrato real de CF7: el `.wpcf7-response-output` de CF7
   nace HERMANO del `<form>` (dentro de un `<div class="wpcf7">` que lo envuelve a ambos). Acá el
   `<form>` es a la vez la columna de Bootstrap (`col-auto`) dentro de `.gyo-contacto-form-grid` —
   ponerlo afuera del form agregaría un tercer ítem a esa fila y rompería la grilla de 2 columnas.
   Se ubica como último hijo DENTRO del form en su lugar; CF7 soporta esto de forma nativa vía el
   tag `[response]` en el editor del formulario (no es un mecanismo paralelo inventado, es una
   opción real del plugin), así que la conexión de Fase 4 no requiere mover este bloque. */
.wpcf7-response-output {
  margin-top: 0;
  padding: var(--gyo-space-3) var(--gyo-space-4);
  border: 1px solid;
  font-size: 16px;
}

.wpcf7-response-output[hidden] {
  display: none;
}

/* El color de estado lo decide el `data-status` del `<form>` — un solo dueño del color por
   estado, no el response-output decidiendo por su cuenta qué mensaje le tocó. */
.gyo-formulario-contacto[data-status="mail_sent"] .wpcf7-response-output {
  border-color: #2E7D32;
  background-color: #EAF4EA;
  color: #1B5E20;
}

.gyo-formulario-contacto[data-status="mail_failed"] .wpcf7-response-output,
.gyo-formulario-contacto[data-status="validation_failed"] .wpcf7-response-output {
  border-color: #C62828;
  background-color: #FBEAEA;
  color: #8E1E1E;
}

/* Campo inválido: CF7 agrega la clase `.wpcf7-not-valid` al campo y un
   `<span class="wpcf7-not-valid-tip">` como hermano, dentro del mismo `.gyo-formulario-contacto__campo`. */
.gyo-formulario-contacto input.wpcf7-not-valid,
.gyo-formulario-contacto select.wpcf7-not-valid,
.gyo-formulario-contacto textarea.wpcf7-not-valid {
  border-color: #C62828;
}

.wpcf7-not-valid-tip {
  margin-top: 4px;
  font-size: 14px;
  color: #C62828;
}

.wpcf7-not-valid-tip[hidden] {
  display: none;
}

/* Spinner de envío — CF7 inserta `<span class="wpcf7-spinner">` como hermano del botón submit.
   El core de CF7 lo oculta con `visibility:hidden` (reserva espacio siempre), pero acá el botón
   "Enviar" tiene una posición verificada al píxel (alineado al borde derecho del textarea, ver
   arriba) — reservar 36px de espacio para un spinner invisible correría el botón esa distancia
   respecto de esa medida. Se pisa el default del plugin con `display:none` (0 espacio ocupado) y
   se muestra recién cuando hay algo que mostrar, sin afectar la geometría del botón en reposo. */
.wpcf7-spinner {
  display: none;
  width: 20px;
  height: 20px;
  margin-left: var(--gyo-space-3);
  border: 2px solid var(--color-cafe-claro);
  border-top-color: transparent;
  border-radius: 50%;
}

.gyo-formulario-contacto[data-status="submitting"] .wpcf7-spinner {
  display: inline-block;
  animation: gyo-spin 0.7s linear infinite;
}

.gyo-formulario-contacto[data-status="submitting"] .gyo-boton-flecha--formulario {
  opacity: 0.6;
  pointer-events: none; /* evita doble envío mientras está en curso */
}

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