/* ============================================================
   MYINTELLI FORMS — sistema de estilos para Contact Form 7
   v1.0  ·  Se aplica a TODOS los formularios CF7 del sitio.
   Editar solo los tokens del bloque :root
   ============================================================ */

/* ---------- 1. TOKENS (única fuente de verdad) ---------- */
:root {
  --mi-f-bg:          #EDF1FA;
  --mi-f-bg-focus:    #FFFFFF;
  --mi-f-accent:      #2C6FF3;
  --mi-f-accent-dark: #1F5DDB;
  --mi-f-text:        #3F4756;
  --mi-f-placeholder: #A5AEBD;
  --mi-f-legal:       #A9B8D6;
  --mi-f-error:       #D92D20;
  --mi-f-radius:      8px;
  --mi-f-gap:         16px;
  --mi-f-pad-y:       14px;
  --mi-f-pad-x:       20px;
  --mi-f-size:        17px;
  --mi-f-textarea-h:  120px;   /* alto del textarea: manda sobre el rows de CF7 */
  --mi-f-legal-size:  10px;    /* tamaño del texto legal al pie */
  --mi-f-font:        "Lato", -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------- 2. SKIN BASE (todos los formularios) ---------- */
.wpcf7 { font-family: var(--mi-f-font); }
.wpcf7 .wpcf7-form-control-wrap { display: block; }

/* :where() no aporta especificidad (0,2,0): así las reglas de abajo
   —focus, error, select, variantes— ganan sin necesidad de !important. */
.wpcf7 .wpcf7-form-control:where(:not(.wpcf7-submit):not(.wpcf7-acceptance):not([type="checkbox"]):not([type="radio"])) {
  width: 100%;
  box-sizing: border-box;
  background: var(--mi-f-bg);
  border: 2px solid transparent;      /* evita el salto de layout al enfocar */
  border-radius: var(--mi-f-radius);
  padding: var(--mi-f-pad-y) var(--mi-f-pad-x);
  font-family: inherit;
  font-size: var(--mi-f-size);
  line-height: 1.2;
  color: var(--mi-f-text);
  appearance: none;
  transition: background-color .15s ease, border-color .15s ease;
}
/* CF7 emite rows="10" por defecto y eso fija el alto: min-height no lo reduce,
   solo pone un piso. Hay que declarar height para mandar sobre el atributo. */
.wpcf7 textarea.wpcf7-form-control {
  height: var(--mi-f-textarea-h);
  min-height: var(--mi-f-textarea-h);
  resize: vertical;
}
.wpcf7 ::placeholder { color: var(--mi-f-placeholder); opacity: 1; }

/* Estado focus: fondo blanco + borde azul */
.wpcf7 .wpcf7-form-control:where(:not(.wpcf7-submit):not(.wpcf7-acceptance)):focus {
  outline: none;
  background: var(--mi-f-bg-focus);
  border-color: var(--mi-f-accent);
}

/* Select con flecha propia */
.wpcf7 select.wpcf7-form-control {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath fill='none' stroke='%23A5AEBD' stroke-width='2' d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--mi-f-pad-x) center;
  padding-right: calc(var(--mi-f-pad-x) + 26px);
  cursor: pointer;
  text-overflow: ellipsis;   /* etiquetas largas no chocan con la flecha en móvil */
}
/* Mientras la PRIMERA opción siga seleccionada (el título del campo, venga de
   include_blank o de first_as_label), el texto se ve gris como un placeholder.
   Se apunta a :first-child y no a [value=""] porque first_as_label no siempre
   deja el value vacío. Al elegir una opción real, el texto pasa a --mi-f-text. */
.wpcf7 select.wpcf7-form-control:has(option:first-child:checked) { color: var(--mi-f-placeholder); }

/* Excepción: añade .mi-nogray al contenedor si algún select NO usa la primera
   opción como título y debe verse siempre en color de texto normal. */
.mi-nogray .wpcf7 select.wpcf7-form-control:has(option:first-child:checked) { color: var(--mi-f-text); }

/* Botón */
.wpcf7 .wpcf7-submit {
  background: var(--mi-f-accent);
  color: #fff;
  border: 0;
  border-radius: var(--mi-f-radius);
  padding: 18px 40px;
  min-width: 340px;
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .15s ease;
}
.wpcf7 .wpcf7-submit:hover { background: var(--mi-f-accent-dark); }

/* Checkbox de aceptación */
.wpcf7 .wpcf7-acceptance .wpcf7-list-item { margin: 0; }
.wpcf7 .wpcf7-acceptance label { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.wpcf7 .wpcf7-acceptance input[type="checkbox"] {
  width: 22px; height: 22px; margin: 0; flex: none;
  appearance: none;
  border: 2px solid var(--mi-f-accent);
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}
.wpcf7 .wpcf7-acceptance input[type="checkbox"]:checked {
  background: var(--mi-f-accent) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' d='M1 5l3.5 3.5L11 1.5'/%3E%3C/svg%3E") center no-repeat;
}

/* Validación y mensajes */
.wpcf7 .wpcf7-not-valid-tip { font-size: 13px; color: var(--mi-f-error); margin-top: 6px; }
.wpcf7 .wpcf7-form-control.wpcf7-not-valid { border-color: var(--mi-f-error); background: #FFF6F5; }
.wpcf7 .wpcf7-response-output {
  border-radius: var(--mi-f-radius);
  border-width: 1px;
  padding: 12px 16px;
  margin: 16px 0 0;
  font-size: 14px;
}
.wpcf7 .wpcf7-spinner { display: none; }

/* ---------- 3. UTILIDADES DE LAYOUT ---------- */
.wpcf7 .mi-grid   { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mi-f-gap); margin-bottom: var(--mi-f-gap); }
.wpcf7 .mi-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--mi-f-gap); margin-bottom: var(--mi-f-gap); }
.wpcf7 .mi-row    { margin-bottom: var(--mi-f-gap); }
.wpcf7 .mi-consent {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 12px 0 24px; font-size: 16px; color: var(--mi-f-text);
}
.wpcf7 .mi-consent .wpcf7-form-control-wrap { display: inline-block; width: auto; }
.wpcf7 .mi-consent a { color: var(--mi-f-text); text-underline-offset: 3px; }
.wpcf7 .mi-submit { text-align: center; }
.wpcf7 .mi-legal {
  text-align: center;
  font-size: var(--mi-f-legal-size);
  font-weight: 700;
  line-height: 1.6;
  color: var(--mi-f-legal);
  margin-top: 22px;
}
.wpcf7 .mi-legal a { color: var(--mi-f-legal); }

/* ---------- 4. A PRUEBA DE AUTOP ---------- */
/* CF7 inserta <p> y <br> automáticos. display:contents hace que esos <p>
   sean transparentes para el grid, así no hace falta tocar functions.php. */
.wpcf7 .mi-grid > p,
.wpcf7 .mi-grid-3 > p,
.wpcf7 .mi-consent > p,
.wpcf7 .mi-submit > p { display: contents; }
.wpcf7 form > p:empty,
.wpcf7 .mi-grid br,
.wpcf7 .mi-grid-3 br,
.wpcf7 .mi-row > br,
.wpcf7 .mi-consent br,
.wpcf7 .mi-submit br { display: none; }

/* ---------- 5. VARIANTES (añadir la clase al contenedor Elementor) ---------- */

/* Campos más compactos: formularios laterales, popups, sidebars */
.mi-compact {
  --mi-f-pad-y: 11px;
  --mi-f-pad-x: 16px;
  --mi-f-size: 16px;
  --mi-f-gap: 12px;
  --mi-f-textarea-h: 90px;
}
.mi-compact .wpcf7 .wpcf7-submit { min-width: 0; width: 100%; padding: 14px 24px; font-size: 16px; }

/* Textarea que crece con el texto (Chrome/Edge; en Safari y Firefox
   se queda en el alto fijo, que es una degradación aceptable) */
.mi-autogrow .wpcf7 textarea.wpcf7-form-control {
  field-sizing: content;
  min-height: var(--mi-f-textarea-h);
  height: auto;
  max-height: 320px;
}

/* Una sola columna, sin importar el markup */
.mi-onecol .wpcf7 .mi-grid,
.mi-onecol .wpcf7 .mi-grid-3 { grid-template-columns: 1fr; }

/* Sección de fondo oscuro */
.mi-dark {
  --mi-f-bg: rgba(255,255,255,.10);
  --mi-f-bg-focus: #FFFFFF;
  --mi-f-text: #FFFFFF;
  --mi-f-placeholder: #C3CBDA;
  --mi-f-legal: #8C9AB8;
}
.mi-dark .wpcf7 .wpcf7-form-control:focus { color: #3F4756; }

/* Newsletter en línea: campo + botón en una fila */
.mi-inline .wpcf7 form { display: flex; gap: var(--mi-f-gap); align-items: center; }
.mi-inline .wpcf7 .wpcf7-submit { min-width: 0; white-space: nowrap; }

/* ---------- 6. RESPONSIVE ----------
   Breakpoints alineados con los de Elementor: 1024px (tablet) y 767px (móvil) */

/* Tablet: tres columnas es demasiado estrecho, pasan a dos */
@media (max-width: 1024px) {
  .wpcf7 .mi-grid-3 { grid-template-columns: 1fr 1fr; }
}

/* Móvil */
@media (max-width: 767px) {
  .wpcf7 .mi-grid,
  .wpcf7 .mi-grid-3 { grid-template-columns: 1fr; }

  /* El botón deja de tener ancho mínimo: a 340px se salía de pantalla */
  .wpcf7 .wpcf7-submit { width: 100%; min-width: 0; }

  .mi-inline .wpcf7 form { flex-direction: column; align-items: stretch; }

  /* El check y su texto se alinean a la izquierda: centrado, un texto de dos
     líneas deja la casilla flotando a media altura */
  .wpcf7 .mi-consent {
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
    line-height: 1.4;
  }
  .wpcf7 .mi-consent .wpcf7-acceptance input[type="checkbox"] { margin-top: 1px; }
}

/* Pantallas estrechas: se recorta el padding lateral, nunca el vertical
   (el alto del campo es lo que garantiza el área táctil de 44px) */
@media (max-width: 400px) {
  :root { --mi-f-pad-x: 16px; --mi-f-gap: 12px; }
  .wpcf7 .wpcf7-submit { padding: 16px 20px; font-size: 17px; }
}

/* Respeta a quien pide menos animación en el sistema */
@media (prefers-reduced-motion: reduce) {
  .wpcf7 .wpcf7-form-control { transition: none; }
}