/* ============================================================
   ESTILOS - Formulario Cliente Inmobiliaria
   Secciones:
     1. Layout general
     2. Cards
     3. Inputs y labels
     4. Legal
     5. Mensajes
     6. Botones
     7. Banner verificado
     8. Árbol de preguntas
     9. Opciones como botones
    10. Barra de progreso
    11. Mensaje final
    12. Responsive
============================================================ */

/* ── 1. Layout general ─────────────────────────────────── */
.cassa-wrap {
  max-width: 540px;
  margin: 16px auto;
  padding: 8px;
  font-family: system-ui, Segoe UI, Roboto, Arial;
}

.page-title {
  margin: 16px 0 8px;
  font-size: 28px;
  font-weight: 500;
}

/* ── 2. Cards ───────────────────────────────────────────── */
.card {
  margin: 16px 0;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
}

.card-title {
  margin: 0 0 12px;
}

/* ── 3. Inputs y labels ─────────────────────────────────── */
.label {
  display: block;
  margin: 8px 0 4px;
}

.input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
}

/* Inputs dinámicos dentro del árbol de preguntas */
#q-input input,
#q-input select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  margin-top: 10px;
}

#q-input select {
  appearance: auto;
  -webkit-appearance: menulist;
  padding-right: 36px;
}

/* ── 4. Legal ───────────────────────────────────────────── */
.legal {
  margin-top: 16px;
}

.legal-label {
  font-size: 0.95em;
}

.legal-label a {
  color: #0078d4;
  text-decoration: underline;
}

/* ── 5. Mensajes ────────────────────────────────────────── */
.msg {
  margin-top: 12px;
  color: #374151;
}

/* ── 6. Botones ─────────────────────────────────────────── */
.btn {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 0;
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
}

.btn-primary {
  background: #2563eb;
  color: #fff;
}

.btn-success {
  background: #059669;
  color: #fff;
}

.btn-ghost {
  margin: 10px 0 0;
  background: #fff;
  border: 1px solid #d1d5db;
  color: #111827;
}

/* ── 7. Banner verificado ───────────────────────────────── */
.verified {
  margin: 12px 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
}

#verified-banner         { display: none; }
#verified-banner.show    { display: block; }

/* ── 8. Árbol de preguntas ──────────────────────────────── */
.q-title {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.q-help-short {
  margin: 6px 0 10px;
  color: #374151;
}

.q-help-long {
  margin: 0 0 12px;
  color: #374151;
  white-space: pre-line;
}

.q-input {
  width: 100%;
  box-sizing: border-box;
  overflow: visible;
}

/* ── 9. Opciones como botones ───────────────────────────── */
.option-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.option-btn {
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  white-space: normal;
  word-break: break-word;
  line-height: 1.2;
  min-height: 44px;   /* área táctil mínima en móvil */
  font-size: 16px;
}

.option-btn:hover {
  border-color: #9ca3af;
  background: #f9fafb;
}

.option-btn.selected {
  border-color: #2563eb;
  outline: 2px solid rgba(37, 99, 235, 0.25);
  background: #f8fafc;
}

/* ── 10. Barra de progreso ──────────────────────────────── */
#progressWrap {
  margin: 12px 0;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 14px;
}

.progress-track {
  height: 10px;
  background: #e6e6e6;
  border-radius: 999px;
  overflow: hidden;
}

#progressBar {
  height: 10px;
  width: 0%;
  background: #cc0056;  /* ← cambia aquí el color de la barra */
  transition: width 0.3s ease;
}

/* ── 11. Mensaje final ──────────────────────────────────── */
.finish {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
}

/* ── 12. Responsive ─────────────────────────────────────── */
@media (max-width: 480px) {
  .cassa-wrap {
    padding: 12px;
  }

  /* Evita zoom automático en iOS/Android */
  select,
  input {
    font-size: 16px;
  }

  .q-title {
    font-size: 16px;
    line-height: 1.4;
  }

  .option-btn {
    padding: 14px;
  }
}