/* ============================================================
   form-lead.css — Tema visual del formulario de captación (veterinaria)
   Scope: #formLead  →  aplica a formularioIndex.jsp + formOposicionesLanding.jsp
   Cargado en: /home, /cms/curso, /cms/linea/familia, /opiniones
   Para cambiar el diseño del formulario en veterinaria: editar SOLO este fichero.
   ============================================================ */

/* Variable compartida (también en metodologia.css y producto.css;
   aquí se declara para páginas que solo cargan este fichero) */
:root {
  --prod-grad: linear-gradient(135deg, var(--color-secondary-dark) 0%, var(--color-secondary) 50%, var(--color-primary) 100%);
  --form-body-bg: var(--color-secondary-dark);
}

/* ─── CABECERA ───────────────────────────────────────────────
   #capaFormulario: ID de alta especificidad → gana sobre .bg-green !important */
#capaFormulario {
  background: var(--prod-grad) !important;
}

/* Cabecera del formulario de la index (.lp-opo-idx-form__header) */
.lp-opo-idx-form__header {
  background: var(--prod-grad);
}

/* ─── CUERPO ─────────────────────────────────────────────────
   #formLead + clase → especificidad alta para ganar sobre .bg-green !important */
#formLead .miFormulario,
.lp-opo-idx-form__body {
  background: var(--form-body-bg) !important;
}

/* ─── INPUTS Y SELECTS ──────────────────────────────────────── */
#formLead .form-control,
#formLead .form-select {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  height: 60px;
  font-weight: 500;
}

#formLead .form-control:focus,
#formLead .form-select:focus {
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--color-primary);
  color: #fff;
  box-shadow: 0 0 0 0.2rem rgba(235, 86, 89, 0.25);
}

#formLead .form-control::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

/* Opciones del select sobre fondo oscuro */
#formLead .form-select option {
  background: var(--form-body-bg);
  color: #fff;
}

/* ─── TELÉFONO (intl-tel-input) ─────────────────────────────── */
#formLead .tel-input,
#formLead .iti input {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  height: 60px;
  font-size: 1rem;
  font-weight: 500;
  padding: 1rem;
}

#formLead .iti__flag-container {
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}

#formLead .iti__selected-flag {
  background: rgba(255, 255, 255, 0.05);
}

/* Código de país y flecha en blanco para fondo oscuro */
#formLead .iti__selected-dial-code,
#formLead .iti__arrow {
  color: #fff;
}

/* ─── FLOATING LABELS ───────────────────────────────────────── */
#formLead .form-floating > label {
  color: rgba(255, 255, 255, 0.6);
}

#formLead .form-floating > .form-control:focus ~ label,
#formLead .form-floating > .form-control:not(:placeholder-shown) ~ label,
#formLead .form-floating > .form-select ~ label {
  color: rgba(255, 255, 255, 0.85);
}

/* ─── CHECKBOXES RGPD ───────────────────────────────────────── */
#formLead .form-check-input {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
  width: 1.5em;
  height: 1.5em;
  flex-shrink: 0;
}

#formLead .form-check-input:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

#formLead .form-check-label {
  color: #fff;
}

#formLead .form-check-label a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: underline;
  text-underline-offset: 2px;
}

#formLead .form-check-label a:hover {
  color: #fff;
}

/* ─── BARRA DE PROGRESO ─────────────────────────────────────── */
#formLead .progress {
  background: rgba(255, 255, 255, 0.1);
  height: 8px;
  border-radius: 4px;
}

/* ─── VALIDACIÓN ────────────────────────────────────────────── */
#formLead .form-control.is-valid,
#formLead .was-validated .form-control:valid {
  border-color: var(--color-accent);
}

#formLead .form-control.is-invalid,
#formLead .was-validated .form-control:invalid {
  border-color: #ffb74d;
}

#formLead .invalid-feedback {
  color: #ffb74d;
  font-weight: 500;
  font-size: 0.85rem;
}

/* ─── TEXTO DE AYUDA Y SEGURIDAD ────────────────────────────── */
#formLead .text-white,
#formLead small.text-white {
  color: #fff !important;
}

/* ─── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 767px) {
  #formLead .form-control,
  #formLead .form-select,
  #formLead .tel-input,
  #formLead .iti input {
    height: 50px;
  }

  #formLead .miFormulario {
    padding: 1.5rem !important;
  }
}