/* Fondo transparente del documento dentro del iframe */
body.formulario-bg-transparente {
  background: transparent !important;
}

/* Contenedor principal */
body.formulario-bg-transparente .formulario-container {
  background-color: #158cc6; /* mismo tono que .conmutador-nube */
  color: #ffffff !important; /* texto base blanco */
  padding: 20px;
  border-radius: 0;
}

/* =========================================================
   1) FORZAR TEXTO BLANCO (el gris viene por reglas posteriores
      o con !important en otros CSS). Aqui subimos especificidad
      al maximo y lo aplicamos a todo el contenido.
   ========================================================= */
html body.formulario-bg-transparente .formulario-container,
html body.formulario-bg-transparente .formulario-container * {
  color: #ffffff !important;
}

/* Asegurar encabezados y textos (por si traen clases de bootstrap) */
html body.formulario-bg-transparente .formulario-container p,
html body.formulario-bg-transparente .formulario-container h1,
html body.formulario-bg-transparente .formulario-container h2,
html body.formulario-bg-transparente .formulario-container h3,
html body.formulario-bg-transparente .formulario-container h4,
html body.formulario-bg-transparente .formulario-container h5,
html body.formulario-bg-transparente .formulario-container h6,
html body.formulario-bg-transparente .formulario-container .fw-semibold,
html body.formulario-bg-transparente .formulario-container .mb-1,
html body.formulario-bg-transparente .formulario-container .mb-0,
html body.formulario-bg-transparente .formulario-container .text-muted,
html body.formulario-bg-transparente .formulario-container .text-secondary,
html body.formulario-bg-transparente .formulario-container .text-body-secondary,
html body.formulario-bg-transparente .formulario-container .text-body {
  color: #ffffff !important;
}

/* =========================================================
   2) LABELS BLANCOS (incluye form-label y labels de switches)
   ========================================================= */
html body.formulario-bg-transparente .formulario-container label,
html body.formulario-bg-transparente .formulario-container .form-label,
html body.formulario-bg-transparente .formulario-container .form-check-label {
  color: #ffffff !important;
  font-weight: 600;
}

/* Links dentro del bloque azul */
html body.formulario-bg-transparente .formulario-container a {
  color: #ffffff !important;
  text-decoration: underline;
}
html body.formulario-bg-transparente .formulario-container a:hover {
  color: #eaf4ff !important;
  text-decoration: underline;
}
html body.formulario-bg-transparente .formulario-container a:active {
  color: #d6eaff !important;
  text-decoration: underline;
}

/* =========================================================
   EXCEPCIONES: inputs/textarea/select deben seguir legibles
   (despues del “* { color: blanco }” los regresamos a oscuro)
   ========================================================= */
html body.formulario-bg-transparente .formulario-container .form-control,
html body.formulario-bg-transparente .formulario-container .form-select,
html body.formulario-bg-transparente .formulario-container input,
html body.formulario-bg-transparente .formulario-container textarea,
html body.formulario-bg-transparente .formulario-container select {
  background-color: #ffffff !important;
  color: #323c46 !important;
}

/* Placeholder legible */
html body.formulario-bg-transparente .formulario-container .form-control::placeholder,
html body.formulario-bg-transparente .formulario-container input::placeholder,
html body.formulario-bg-transparente .formulario-container textarea::placeholder {
  color: rgba(50, 60, 70, 0.65) !important;
}

/* Borde de inputs/select */
html body.formulario-bg-transparente .formulario-container .form-control,
html body.formulario-bg-transparente .formulario-container .form-select {
  border-color: #0093b4 !important;
  border-width: 2px !important;
}

/* Textarea alto similar a .text-area-alto */
html body.formulario-bg-transparente .formulario-container textarea.form-control {
  min-height: 10vh;
}

/* Botón principal */
html body.formulario-bg-transparente .formulario-container .btn.btn-primary {
  border-width: 0;
}

/* Grupo de teléfono: dropdown toggle */
html body.formulario-bg-transparente .formulario-container .telefono-dropdown-toggle {
  border-color: #0093b4 !important;
  border-width: 2px !important;
}

/* El buscador sticky del dropdown debe conservar fondo blanco */
html body.formulario-bg-transparente .formulario-container .telefono-buscar-wrapper {
  background: #ffffff !important;
}

/* IMPORTANTE:
   El dropdown-menu NO debe heredar blanco (si no, se vuelve ilegible).
   Forzamos texto oscuro solo dentro del menú del dropdown. */
html body.formulario-bg-transparente .formulario-container .telefono-dropdown-menu,
html body.formulario-bg-transparente .formulario-container .telefono-dropdown-menu * {
  color: #323c46 !important;
}

/* Y el input de busqueda dentro del dropdown tambien oscuro */
html body.formulario-bg-transparente .formulario-container .telefono-buscar-wrapper .form-control {
  color: #323c46 !important;
}

/* Wrapper del iframe (por si también lo usas dentro del iframe) */
.iframe-wrapper {
  width: 100%;
  max-width: 100%;
  background: transparent !important;
}

.iframe-wrapper iframe {
  width: 100%;
  min-height: 600px;
  border: none;
  display: block;
  background-color: transparent !important;
}


/* Switch (checkbox) seleccionado: que se note sobre fondo azul */
.formulario-container .form-check-input:checked {
  background-color: #25d366 !important; /* verde */
  border-color: #25d366 !important;
}

/* Efecto “glow” suave para que resalte (sin verse exagerado) */
.formulario-container .form-check-input:focus {
  box-shadow: 0 0 0 0.2rem rgba(37, 211, 102, 0.35) !important;
  border-color: #25d366 !important;
}

/* Estado hover opcional para que se perciba interactivo */
.formulario-container .form-check-input:hover {
  border-color: #25d366 !important;
}

/* Cuando NO está seleccionado, que no sea blanco puro */
.formulario-container .form-check-input:not(:checked) {
  background-color: rgba(255, 255, 255, 0.25) !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
}

/* Overlay / box de carga: texto y spinner en negro */
.formulario-container .form-loading-box,
.formulario-container .form-loading-box span,
.formulario-container .form-loading-box .spinner-border {
  color: #000000 !important;
}

/* Asegurar que el borde del spinner también sea negro */
.formulario-container .form-loading-box .spinner-border {
  border-color: #000000 !important;
  border-right-color: transparent !important;
}