/* ════════════════════════════════════════════════════════════════════
   registro-noche.css — el REGISTRO en "Noche" (rediseño Apple, etapa 2,
   noviembre 2026). Renders aprobados:
   docs/redisenio-apple/etapa2-registro-paso1.png / -paso3.png
   Todo bajo body.to-noche: $REGISTRO_NOCHE = false en registerUser.php
   devuelve el registro de siempre. Solo la piel: el paso a paso, la
   validación, el OTP, Google y el alta no se tocan. Sin backdrop-filter
   ni animaciones nuevas.
   ════════════════════════════════════════════════════════════════════ */

body.to-noche { background: var(--n-bg); color: var(--n-txt); font-family: var(--to-font); -webkit-font-smoothing: antialiased; }
body.to-noche #main { background: var(--n-bg); }
body.to-noche .checkout-header { background: #000 !important; border-bottom: 1px solid rgba(255,255,255,.07); }

/* ── Contenedor: sin la tarjeta blanca, todo sobre negro ────────────── */
body.to-noche .register-section { background: var(--n-bg); }
body.to-noche .register-card { background: transparent; border: 0; box-shadow: none; color: var(--n-txt); }
body.to-noche .register-card .card-title { color: var(--n-txt); }
body.to-noche .register-card .col-form-label,
body.to-noche .register-card label { color: var(--n-sec); font-weight: 600; }

/* ── Encabezado del paso 1 ──────────────────────────────────────────── */
body.to-noche .reg-hero__title { font-family: var(--to-font); color: var(--n-txt) !important; font-weight: 700; letter-spacing: -.035em; line-height: 1.06; }
body.to-noche .reg-hero__sub { color: var(--n-sec); }
body.to-noche .reg-proof__chip { background: var(--n-card); border: 1px solid var(--n-borde); color: var(--n-txt); }
body.to-noche .reg-proof__chip i { color: var(--to-amarillo); }
/* La nota "es gratis" tiene estilo inline: se pisa con !important. */
body.to-noche .reg-gratis-note {
  background: rgba(52,199,89,.12) !important; color: #5ee08a !important;
  border: 1px solid rgba(52,199,89,.35);
}

/* ── Barra de avance y títulos ──────────────────────────────────────── */
body.to-noche .wiz-progress-top { color: var(--n-ter); }
body.to-noche .wiz-progress-top .wiz-free { color: #5ee08a; }
body.to-noche .wiz-progress-bar { background: #2c2c2e; }
body.to-noche .wiz-progress-bar i { background: var(--to-amarillo); }
body.to-noche .wiz-title { color: var(--n-txt); font-weight: 700; letter-spacing: -.035em; font-size: 30px; line-height: 1.08; }
body.to-noche .wiz-sub { color: var(--n-sec); font-size: 15.5px; }
body.to-noche .wiz-back { color: var(--n-sec); }

/* ── Campos ─────────────────────────────────────────────────────────── */
body.to-noche .register-card .form-control,
body.to-noche .register-card .form-select,
body.to-noche .wiz-zona-buscar,
body.to-noche .wiz-prov select {
  background-color: var(--n-card); border: 1px solid var(--n-borde); color: var(--n-txt); border-radius: 14px;
}
body.to-noche .register-card .form-control::placeholder,
body.to-noche .wiz-zona-buscar::placeholder { color: var(--n-ter); }
body.to-noche .register-card .form-control:focus,
body.to-noche .wiz-zona-buscar:focus {
  background-color: var(--n-card); color: var(--n-txt);
  border-color: var(--to-amarillo); box-shadow: 0 0 0 3px rgba(255,209,26,.2);
}
body.to-noche .register-card .input-group-text { background: var(--n-card); border-color: var(--n-borde); color: var(--n-sec); }
body.to-noche .wiz-search-clear { color: var(--n-sec); }
body.to-noche .wiz-search-clear:active { background: #2c2c2e; }

/* ── Chips de oficio y zona: elegido = amarillo pleno ───────────────── */
body.to-noche .wiz-chip { background: var(--n-card); border: 1px solid var(--n-borde); color: var(--n-txt); font-weight: 500; }
body.to-noche .wiz-chip.sel { background: var(--to-amarillo); border-color: var(--to-amarillo); color: #000; font-weight: 700; }
body.to-noche .wiz-selpill { background: rgba(255,209,26,.14); border: 1px solid rgba(255,209,26,.4); color: var(--to-amarillo); }
body.to-noche .wiz-okbox { background: rgba(52,199,89,.12); color: #5ee08a; border: 1px solid rgba(52,199,89,.3); }
body.to-noche .wiz-prov { background: var(--n-card); border-color: var(--n-borde); color: var(--n-txt); }
body.to-noche .wiz-note { color: var(--n-ter); }
body.to-noche .wiz-link-btn { color: var(--n-txt); }

/* ── Botones ────────────────────────────────────────────────────────── */
body.to-noche .register-card .btn-secondary,
body.to-noche .wiz-continuar {
  background: var(--to-amarillo) !important; border: 0 !important; color: #000 !important;
  border-radius: 999px !important; font-weight: 700; box-shadow: none;
}
body.to-noche .wiz-continuar:disabled { background: #2c2c2e !important; color: var(--n-ter) !important; opacity: 1; }

/* ── Garantía, confianza y pie ──────────────────────────────────────── */
body.to-noche .plan-garantia { background: var(--n-card); border: 1px solid var(--n-borde); }
body.to-noche .plan-garantia .pg-icon { color: var(--to-verde-ok); }
body.to-noche .plan-garantia .pg-text strong { color: var(--n-txt); }
body.to-noche .plan-garantia .pg-text span { color: var(--n-sec); }
body.to-noche .plan-footer-info { background: transparent; border-color: var(--n-borde); color: var(--n-sec); }
body.to-noche .plan-footer-info .pf-item { color: var(--n-txt); }
body.to-noche .plan-social { color: var(--n-sec); }
body.to-noche .register-card .small { color: var(--n-sec); }
body.to-noche .register-card .small a { color: var(--n-txt); }
body.to-noche .we-lista { background: var(--n-card); color: var(--n-txt); }

/* ── Footer: gris claro, como el resto del sitio ────────────────────── */
body.to-noche .footer {
  background-color: var(--c-bg) !important; color: var(--c-sec) !important;
  border-top: 0 !important; margin-top: 0 !important;
}
body.to-noche .footer h4 { color: var(--c-txt); }
body.to-noche .footer a { color: var(--c-sec); }

/* ── Paso 3 (datos) ─────────────────────────────────────────────────── */
body.to-noche .step2-bar__back { background: transparent !important; border: 0 !important; color: var(--n-sec) !important; box-shadow: none !important; padding-left: 0; }
body.to-noche .register-card hr { border-color: var(--n-borde) !important; opacity: 1; }
body.to-noche .register-card .card-title { border-bottom-color: var(--n-borde); font-family: var(--to-font); letter-spacing: -.02em; }
body.to-noche .register-card .card-title i { color: var(--to-amarillo); }
/* Recuadro de términos: tiene estilos inline → se pisan con !important. */
body.to-noche #terminosBox { background: var(--n-card) !important; border-color: var(--n-borde) !important; }
body.to-noche #terminosBox label { color: var(--n-txt) !important; }
body.to-noche #terminosBox a { color: var(--to-amarillo); }
body.to-noche #togglePassword { background: var(--n-card); border-color: var(--n-borde); color: var(--n-sec); }