/* DP Encuestas — página de registro de visitantes (móvil primero) */

.dpe-reg {
  --reg-ocean: #0b5568;
  --reg-ocean-deep: #083f4e;
  --reg-turquesa: #19a7a0;
  --reg-ink: #1c2b2f;
  --reg-ink-soft: #5a6e72;
  --reg-line: #e4ddd2;
  --reg-chip-bg: #f1ede5;
  --reg-amber: #b36f05;
  --reg-ok: #1e7f4f;

  max-width: 560px;
  margin: 0 auto;
  padding: 40px 16px 80px;
  color: var(--reg-ink);
  font-size: 16px;
  line-height: 1.5;
}

.dpe-reg-card {
  background: #fff;
  border: 1px solid var(--reg-line);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(11, 85, 104, 0.08);
  padding: 28px 22px;
}
.dpe-reg-card[hidden] { display: none; }
.dpe-reg h2 { margin: 0 0 6px; font-size: 24px; font-weight: 800; color: var(--reg-ink); }
.dpe-reg-soft { color: var(--reg-ink-soft); margin: 0 0 18px; font-size: 15px; }

.dpe-reg-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 6px; }
.dpe-reg-head .dpe-reg-soft { margin-bottom: 0; }

.dpe-reg .dpe-reg-pin {
  width: 100%; padding: 14px; font-size: 30px; text-align: center;
  letter-spacing: 0.4em; border: 1.5px solid var(--reg-line); border-radius: 12px;
  margin-bottom: 14px; background: #fff; color: var(--reg-ink);
}

.dpe-reg-label {
  display: block; font-weight: 700; font-size: 15px;
  margin: 20px 0 8px; color: var(--reg-ink);
}

/* Stepper */
.dpe-reg-stepper { display: flex; align-items: center; gap: 18px; }
.dpe-reg .dpe-reg-step {
  width: 64px; height: 64px; border-radius: 16px; border: 1.5px solid var(--reg-line);
  background: var(--reg-chip-bg); color: var(--reg-ink);
  font-size: 32px; font-weight: 700; cursor: pointer; line-height: 1;
}
.dpe-reg .dpe-reg-step:active { background: var(--reg-line); }
.dpe-reg-count {
  min-width: 72px; text-align: center; font-size: 44px; font-weight: 800;
  font-variant-numeric: tabular-nums; color: var(--reg-ocean-deep);
}

/* Chips */
.dpe-reg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dpe-reg .dpe-reg-chip {
  border: 1.5px solid var(--reg-line); background: var(--reg-chip-bg);
  color: var(--reg-ink); border-radius: 12px;
  padding: 12px 16px; font-size: 15px; font-weight: 500; cursor: pointer;
  line-height: 1.2;
}
.dpe-reg .dpe-reg-chip[aria-pressed="true"] {
  background: rgba(25, 167, 160, 0.14);
  border-color: var(--reg-turquesa);
  color: var(--reg-ocean-deep);
  font-weight: 700;
}
.dpe-reg-chips-nac .dpe-reg-chip { padding: 10px 13px; font-size: 14px; }

/* Botones */
.dpe-reg .dpe-reg-btn {
  display: block; width: 100%;
  border: none; border-radius: 14px; cursor: pointer;
  font-size: 18px; font-weight: 700; padding: 15px;
}
.dpe-reg .dpe-reg-btn-primary { background: var(--reg-ocean); color: #fff; }
.dpe-reg .dpe-reg-btn-primary:active { background: var(--reg-ocean-deep); }
.dpe-reg .dpe-reg-btn-primary:disabled { opacity: 0.6; }
.dpe-reg .dpe-reg-btn-big { margin-top: 26px; padding: 18px; font-size: 20px; }
.dpe-reg .dpe-reg-link {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--reg-ink-soft); font-size: 14px; text-decoration: underline;
  text-underline-offset: 3px;
}
.dpe-reg-links { text-align: center; margin: 14px 0 0; }

/* Mensajes */
.dpe-reg-error { color: var(--reg-amber); font-size: 14px; margin: 12px 0 0; text-align: center; }
.dpe-reg-error[hidden] { display: none; }
.dpe-reg-ok { color: var(--reg-ok); font-weight: 700; font-size: 15px; margin: 12px 0 0; text-align: center; }
.dpe-reg-ok[hidden] { display: none; }