/* ══════════════════════════════════════════════════════════
   GRUPO GSM — parche CF7 sobre el diseño
   Cubre los tres formularios del sitio:
     .contact-form  → /contacto/
     .form          → /energia/
     .quick-form    → /instaladora/
   Sólo neutraliza los wrappers que mete CF7 y estiliza sus
   estados de error con la paleta del diseño. No redefine
   ningún estilo propio del maquetado.
══════════════════════════════════════════════════════════ */

/* CF7 envuelve todo en .wpcf7 y cada control en un
   <span class="wpcf7-form-control-wrap>. Ninguno de los dos
   debe introducir caja propia: .field input / .field select
   siguen alcanzando el control por descendencia. */
.wpcf7 { display: block; }

.contact-form .wpcf7-form-control-wrap,
.form .wpcf7-form-control-wrap,
.quick-form .wpcf7-form-control-wrap {
  display: block;
  position: static;
}

/* El select de división es sólo para CF7 — la UI son los .div-btn */
.contact-form .field-division,
.form .field-tipo { display: none; }

/* ── Validación: mismo rojo que usaba el JS del diseño ── */
.contact-form .wpcf7-not-valid,
.form .wpcf7-not-valid,
.quick-form .wpcf7-not-valid {
  border-color: #e05555 !important;
}

.contact-form .wpcf7-not-valid-tip,
.form .wpcf7-not-valid-tip,
.quick-form .wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .02em;
  color: #e05555;
}

/* ── Barra de respuesta de CF7 ──
   Es un hijo flex de .contact-form, así que hereda el gap.
   En caso de éxito no se ve: el JS oculta #form-wrap entero. */
.contact-form .wpcf7-response-output,
.form .wpcf7-response-output,
.quick-form .wpcf7-response-output {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid #333;
  border-radius: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--soft, #a0a0a0);
}

.contact-form.invalid .wpcf7-response-output,
.contact-form.unaccepted .wpcf7-response-output,
.contact-form.payment-required .wpcf7-response-output {
  border-color: #e05555;
  color: #e05555;
}

.contact-form.failed .wpcf7-response-output,
.contact-form.aborted .wpcf7-response-output {
  border-color: #e05555;
  color: #e05555;
}

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

/* Botón deshabilitado durante el envío */
.contact-form .form-submit[disabled],
.form .form-submit[disabled],
.quick-form .form-submit[disabled] {
  opacity: .6;
  cursor: progress;
}

/* CF7 inyecta un <p> vacío si autop se queda activo — por si
   acaso, que no abra hueco en el flex. */
.contact-form > p:empty,
.form > p:empty,
.quick-form > p:empty { display: none; }


/* ══════════════════════════════════════════════════════════
   DESBORDE DE LAS FILAS DE DOS COLUMNAS

   .form-row es una rejilla 1fr 1fr. Los elementos de rejilla
   tienen min-width:auto por defecto, asi que un campo cuyo
   contenido minimo sea ancho — un placeholder largo, el envoltorio
   que mete CF7 — ensancha su columna y empuja la segunda fuera
   del contenedor. En /energia/ el campo APELLIDOS se salia por la
   derecha. min-width:0 deja que la columna encoja como debe.
══════════════════════════════════════════════════════════ */
.contact-form .form-row,
.form .form-row,
.quick-form .form-row {
  min-width: 0;
}

.contact-form .form-row > *,
.form .form-row > *,
.quick-form .form-row > * {
  min-width: 0;
}

.contact-form .field input,
.contact-form .field select,
.contact-form .field textarea,
.form .field input,
.form .field select,
.form .field textarea,
.quick-form .field input,
.quick-form .field select,
.quick-form .field textarea {
  max-width: 100%;
  box-sizing: border-box;
}