/* ==========================================================================
   BioWay - Encuesta de hábitos de reciclaje (encuesta-reciclaje.php)

   CONTRATO CON js/encuesta-reciclaje.js — estas clases las busca o las
   conmuta el script; renombrarlas rompe el formulario:
     selectores  .autocomplete-option .checkbox-checkmark .checkbox-group
                 .counter-number .counter-text .ranking-group .ranking-help
                 .survey-header
     estados     active compact completed hidden highlighted loading show verified

   Criterio de diseño: es un formulario largo que se responde una sola vez y
   casi siempre desde el teléfono. Prioridad absoluta a que se entienda en qué
   paso vas, qué falta y que no se pueda tocar sin querer la opción de al lado.
   ========================================================================== */

.encuesta { padding: 0 5vw 90px; }
.encuesta .contenedor { max-width: 760px; margin: 0 auto; }

/* ── Progreso: sin esto la encuesta parece infinita ── */
.survey-header {
  position: sticky; top: 92px; z-index: 20;
  background: rgba(252, 253, 249, .94); backdrop-filter: blur(10px);
  padding: 16px 0 14px; margin-bottom: 26px;
  border-bottom: 1px solid var(--menta-suave);
}
.survey-header.compact { padding: 10px 0 8px; }

.progress-bar, #progressBar {
  height: 7px; border-radius: 100px; background: var(--menta-suave); overflow: hidden;
}
.progress-bar > *, #progressBar > * {
  display: block; height: 100%; border-radius: 100px;
  background: var(--grad-marca);
  transition: width .45s cubic-bezier(.2, .8, .2, 1);
}
#currentSection {
  display: block; margin-top: 9px;
  font: 700 12.5px var(--cuerpo); letter-spacing: .4px; color: var(--medio);
}

/* ── Secciones del formulario ── */
.survey-section, .seccion {
  background: #fff; border: 1px solid #E8F2EA; border-radius: 22px;
  padding: 30px; margin-bottom: 20px;
}
.survey-section.hidden, .seccion.hidden, .hidden { display: none !important; }

.encuesta h2 {
  font: 800 21px var(--display); color: var(--tinta);
  margin-bottom: 8px; letter-spacing: -.4px;
}
.encuesta h3 { font: 700 16px var(--display); color: var(--tinta); margin: 22px 0 10px; }
.encuesta p  { font-size: 15px; color: var(--texto); line-height: 1.65; }

/* ── Pregunta ── */
.pregunta, .question { margin-bottom: 26px; }
.pregunta:last-child, .question:last-child { margin-bottom: 0; }
.encuesta label {
  display: block; font: 600 15px var(--cuerpo);
  color: var(--tinta); margin-bottom: 10px; line-height: 1.5;
}

/* ── Opciones: área táctil generosa, el dedo no es un ratón ── */
.checkbox-group, .radio-group {
  display: flex; flex-direction: column; gap: 9px;
}
.checkbox-group label, .radio-group label,
.opcion {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; margin: 0;
  background: var(--papel-2); border: 1px solid #E4F1E7; border-radius: 14px;
  cursor: pointer; font-weight: 500; transition: .18s;
  min-height: 52px;
}
.checkbox-group label:hover, .radio-group label:hover, .opcion:hover {
  border-color: var(--light); background: var(--menta-suave);
}
.checkbox-group input, .radio-group input { margin-top: 2px; flex: none; }

/* la marca que el script conmuta al seleccionar */
.checkbox-checkmark {
  width: 22px; height: 22px; flex: none; border-radius: 7px;
  border: 2px solid #CFE5D6; background: #fff;
  display: grid; place-items: center; transition: .15s;
}
input:checked + .checkbox-checkmark,
.checkbox-checkmark.active {
  background: var(--primary); border-color: var(--primary);
}
.checkbox-checkmark::after {
  content: ""; width: 10px; height: 6px;
  border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff;
  transform: rotate(-45deg) scale(0); transition: transform .15s;
}
input:checked + .checkbox-checkmark::after,
.checkbox-checkmark.active::after { transform: rotate(-45deg) scale(1); }

/* opción resaltada por el script (p. ej. la que falta por contestar) */
.highlighted {
  border-color: var(--amarillo) !important;
  box-shadow: 0 0 0 3px rgba(245, 192, 67, .22);
}

/* ── Contador de selecciones ("elige hasta 3") ── */
.counter-text {
  display: inline-flex; align-items: center; gap: 7px;
  font: 600 13px var(--cuerpo); color: var(--texto); margin-top: 10px;
}
.counter-number {
  display: inline-grid; place-items: center; min-width: 26px; height: 26px;
  padding: 0 8px; border-radius: 100px;
  background: var(--menta-suave); color: var(--primary);
  font-weight: 800; font-size: 13px;
}
.counter-number.completed { background: var(--primary); color: #fff; }

/* ── Ranking: ordenar por importancia ── */
.ranking-group { display: flex; flex-direction: column; gap: 9px; margin-top: 10px; }
.ranking-group > * {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; background: var(--papel-2);
  border: 1px solid #E4F1E7; border-radius: 14px;
}
.ranking-help {
  font-size: 13px; color: var(--medio); margin-top: 8px;
  padding-left: 16px; border-left: 2px solid var(--menta);
}

/* ── Campos de texto y autocompletado de colonia ── */
.encuesta input[type="text"],
.encuesta input[type="email"],
.encuesta input[type="number"],
.encuesta textarea, .encuesta select {
  width: 100%; padding: 14px 16px;
  border: 1px solid #DDF0E2; border-radius: 12px;
  font: inherit; font-size: 16px;   /* 16px evita el zoom en iOS */
  color: var(--tinta); background: var(--papel-2); transition: .2s;
}
.encuesta input:focus, .encuesta textarea:focus, .encuesta select:focus {
  outline: none; border-color: var(--medio); background: #fff;
  box-shadow: 0 0 0 4px rgba(45, 130, 89, .13);
}

.autocomplete-wrapper, #coloniaDropdown { position: relative; }
#coloniaDropdown {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 30;
  background: #fff; border: 1px solid #DDF0E2; border-radius: 14px;
  margin-top: 6px; max-height: 240px; overflow-y: auto;
  box-shadow: 0 14px 32px rgba(13, 69, 44, .14);
  display: none;
}
#coloniaDropdown.show { display: block; }
.autocomplete-option {
  padding: 12px 16px; cursor: pointer; font-size: 15px;
  color: var(--texto); border-bottom: 1px solid #F0F6F2;
}
.autocomplete-option:last-child { border-bottom: 0; }
.autocomplete-option:hover, .autocomplete-option.active {
  background: var(--menta-suave); color: var(--primary); font-weight: 600;
}

/* ── Verificación anti-robot ── */
#recaptchaBox {
  display: flex; align-items: center; gap: 13px;
  padding: 16px; margin-top: 8px;
  background: var(--papel-2); border: 1px solid #DDF0E2; border-radius: 14px;
  cursor: pointer; transition: .2s;
}
#recaptchaBox:hover { border-color: var(--light); }
#recaptchaBox.verified { border-color: var(--medio); background: var(--menta-suave); }
#recaptchaCheckbox {
  width: 26px; height: 26px; flex: none; border-radius: 8px;
  border: 2px solid #CFE5D6; background: #fff; display: grid; place-items: center;
}
#recaptchaCheckbox.verified { background: var(--primary); border-color: var(--primary); }

/* ── Navegación entre pasos ── */
.survey-nav, .navegacion {
  display: flex; gap: 12px; justify-content: space-between;
  margin-top: 26px; padding-top: 22px; border-top: 1px solid #EDF5EF;
}
#prevBtn, #nextBtn, #submitBtn {
  font: 700 15.5px var(--cuerpo); padding: 15px 32px; border-radius: 100px;
  cursor: pointer; border: none; min-height: 50px; transition: .18s;
}
#nextBtn, #submitBtn {
  background: var(--primary); color: #fff;
  box-shadow: 0 8px 22px rgba(14, 79, 48, .22);
}
#nextBtn:hover, #submitBtn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(14, 79, 48, .3); }
#prevBtn {
  background: #fff; color: var(--texto); border: 1px solid #DDF0E2;
}
#prevBtn:hover { border-color: var(--medio); color: var(--primary); }
#prevBtn.hidden, #nextBtn.hidden, #submitBtn.hidden { display: none; }

/* estado de envío */
#submitBtn.loading { opacity: .7; pointer-events: none; }
#submitBtn.loading::after {
  content: ""; display: inline-block; width: 15px; height: 15px; margin-left: 10px;
  border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff;
  border-radius: 50%; animation: girar .8s linear infinite; vertical-align: -2px;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ── Resultado del envío ── */
#successMessage, #errorMessage {
  display: none; padding: 26px; border-radius: 18px; margin-top: 22px;
  font-size: 15.5px; line-height: 1.65;
}
#successMessage.show, #errorMessage.show { display: block; }
#successMessage {
  background: var(--menta-suave); border: 1px solid var(--light); color: var(--primary);
}
#errorMessage {
  background: #FDF5F5; border: 1px solid #F3D0D0; color: #b3261e;
}

/* ── Responsive ── */
@media (max-width: 720px) {
  .encuesta { padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
  .survey-header { top: 0; }
  .survey-section, .seccion { padding: 22px 18px; border-radius: 18px; }
  .encuesta h2 { font-size: 19px; }
  .survey-nav, .navegacion { flex-direction: column-reverse; }
  #prevBtn, #nextBtn, #submitBtn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}