/* Estilos de la encuesta dinámica (públicas y ocultas). Colores
   tomados del sitio principal para mantener consistencia de marca. */

/* La encuesta se muestra como capa sobre la página que la invoca: el
   fondo deja ver el sitio con un desenfoque, en vez del degradado azul
   que tapaba todo. El degradado queda solo como respaldo para cuando se
   abre el link directo, sin página detrás. */
body.encuesta-body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  font-family: 'Segoe UI', Arial, sans-serif;
  background: rgba(12, 20, 38, 0.45);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
  backdrop-filter: blur(10px) saturate(115%);
}

/* Link directo, sin sitio detrás: el blur no tiene nada que desenfocar,
   así que se pinta un fondo propio suave. */
body.encuesta-body.sin-fondo {
  background:
    radial-gradient(1200px 600px at 20% 0%, rgba(0, 120, 212, 0.18), transparent 60%),
    radial-gradient(900px 500px at 90% 100%, rgba(26, 26, 46, 0.22), transparent 60%),
    #eef3fb;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Dentro de un iframe: velo oscuro translúcido. El desenfoque de la página
   de atrás lo aplica el contenedor, porque backdrop-filter no cruza el
   límite del iframe — acá solo se oscurece para dar profundidad. */
body.encuesta-body.en-overlay {
  background: rgba(8, 14, 28, 0.58);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding: 1.5rem;
}

.encuesta-preview-banner {
  background: #fff4e5;
  color: #b25e00;
  border: 1px solid #f5c877;
  border-radius: 8px;
  padding: 0.6rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 1rem;
}

.encuesta-card {
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 560px;
  padding: 2rem;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.encuesta-header h2 {
  margin: 0 0 1rem;
  color: #1a1a2e;
  font-size: 1.4rem;
  text-align: center;
}

.encuesta-progress {
  margin-bottom: 1.5rem;
}
.progress-bar {
  background: #e2e6ea;
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
}
.progress-fill {
  background: linear-gradient(90deg, #0078d4, #00a3ff);
  height: 100%;
  transition: width 0.3s ease;
}
.progress-text {
  text-align: right;
  font-size: 0.8rem;
  color: #5a6472;
  margin-top: 0.3rem;
}

.pregunta-titulo {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1a1a2e;
  margin-bottom: 1rem;
}

.encuesta-separador {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0078d4;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 2px solid #e2e6ea;
  padding-bottom: 0.4rem;
  margin: 1.4rem 0 1rem;
}
.encuesta-pregunta:first-child .encuesta-separador,
.encuesta-separador:first-child {
  margin-top: 0;
}

.encuesta-opciones {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.encuesta-opcion {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border: 1px solid #e2e6ea;
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.encuesta-opcion:hover {
  border-color: #0078d4;
}
.encuesta-opcion.seleccionada {
  border-color: #0078d4;
  background: #f0f7ff;
}
.encuesta-opcion input {
  accent-color: #0078d4;
}

/* Punto 12 (correo del cliente, 28/10): el formulario que sale al
   terminar la encuesta mostraba la letra muy grande y no se alcanzaba
   a ver completo. Se reducen etiquetas, campos y separaciones; las
   preguntas de la encuesta conservan su tamano. */
.encuesta-form-group {
  margin-bottom: 0.55rem;
}
.encuesta-form-group label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: #1a1a2e;
  margin-bottom: 0.15rem;
}
.encuesta-form-group input,
.encuesta-form-group select,
.encuesta-form-group textarea {
  width: 100%;
  padding: 0.4rem 0.6rem;
  border: 1px solid #e2e6ea;
  border-radius: 8px;
  font-size: 0.8rem;
  min-height: 34px;
  box-sizing: border-box;
  font-family: inherit;
}
.encuesta-form-group textarea {
  min-height: 56px;
  resize: vertical;
}

/* Punto 13: indicativo del pais aparte del numero */
.encuesta-form-group .campo-telefono {
  display: flex;
  gap: 0.35rem;
  align-items: center;
}
.encuesta-form-group .campo-telefono select {
  width: auto;
  flex: 0 0 92px;
  padding: 0.4rem 0.3rem;
  font-size: 0.75rem;
  cursor: pointer;
}
.encuesta-form-group .campo-telefono input {
  flex: 1;
  min-width: 0;
}

.encuesta-pregunta input:not([type="radio"]):not([type="checkbox"]),
.encuesta-pregunta select,
textarea {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid #e2e6ea;
  border-radius: 8px;
  font-size: 0.92rem;
  box-sizing: border-box;
  font-family: inherit;
}

.encuesta-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 1.5rem;
}
.btn-encuesta {
  border: none;
  border-radius: 8px;
  padding: 0.65rem 1.3rem;
  font-size: 0.95rem;
  cursor: pointer;
}
.btn-encuesta.primario {
  background: #0078d4;
  color: #fff;
}
.btn-encuesta.secundario {
  background: #fff;
  color: #0078d4;
  border: 1px solid #0078d4;
}

.encuesta-final {
  text-align: center;
}
.icono-final {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.encuesta-cargando,
.encuesta-error {
  background: #fff;
  border-radius: 16px;
  padding: 2rem;
  text-align: center;
  color: #1a1a2e;
  max-width: 480px;
}
.encuesta-error {
  color: #a41c1c;
}

/* ============================================================
   Verificacion por WhatsApp del formulario final.
   No tenia estilos propios: el boton y los mensajes se veian
   sueltos y con tamanos distintos al resto del formulario.
   ============================================================ */
.verif-bloque {
  margin-top: 0.55rem;
  padding-top: 0.55rem;
  border-top: 1px dashed #e2e6ea;
}
.verif-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: #1a1a2e;
  margin-bottom: 0.2rem;
}
.verif-fila {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  margin-bottom: 0.3rem;
}
.verif-fila select {
  flex: 0 0 92px;
  padding: 0.4rem 0.3rem;
  border: 1px solid #e2e6ea;
  border-radius: 8px;
  font-size: 0.75rem;
  min-height: 34px;
  font-family: inherit;
  cursor: pointer;
}
.verif-fila input {
  flex: 1;
  min-width: 0;
  padding: 0.4rem 0.6rem;
  border: 1px solid #e2e6ea;
  border-radius: 8px;
  font-size: 0.8rem;
  min-height: 34px;
  box-sizing: border-box;
  font-family: inherit;
}
.verif-btn {
  background: #fff;
  color: #0078d4;
  border: 1px solid #0078d4;
  border-radius: 8px;
  padding: 0.4rem 0.8rem;
  font-size: 0.75rem;
  font-weight: 600;
  min-height: 34px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.verif-btn:hover:not(:disabled) { background: #f0f7ff; }
.verif-btn:disabled { opacity: .6; cursor: not-allowed; }
.verif-msg {
  font-size: 0.68rem;
  line-height: 1.35;
  min-height: 0;
  margin-bottom: 0.2rem;
}
.verif-msg.ok { color: #16a34a; }
.verif-msg.error { color: #dc2626; }
.verif-msg:empty { display: none; }