/* =========================================================
   deRentas Alquileres — hoja de estilos compartida
   Reemplaza los bloques <style> repetidos que había en
   cada página (index, etapa1, etapa2, etapa3, prueba).
   ========================================================= */

:root{
  --dr-yellow: #F4C400;
  --dr-black: #0B0B0F;
}

/* ---------- Fondo general ---------- */
.dr-bg{
  background:
    radial-gradient(1200px 600px at 15% 0%, rgba(244,196,0,.10), transparent 60%),
    linear-gradient(180deg, #0B0B0F 0%, #0F172A 55%, #0B0B0F 100%);
}
body{ background:#000; }

/* ---------- Utilidades de marca ---------- */
.dr-card{ border-color: rgba(244,196,0,.22) !important; }
.dr-btn{ border-color: rgba(244,196,0,.30) !important; }
.dr-btn:hover{ background: rgba(244,196,0,.08) !important; }
.dr-title{ color:#fff; }
.dr-sub{ color: rgba(255,255,255,.72); }
.dr-divider{ border-color: rgba(244,196,0,.18) !important; }
.dr-glow{ box-shadow: 0 20px 60px rgba(0,0,0,.35); }

/* ---------- Tema oscuro sobre el contenido tipo "card" ---------- */
main, .card, .bg-white, .bg-white\/95, .bg-white\/80{
  background:#0b0b0f !important;
  color:#fff !important;
}
h1,h2,h3,h4,h5,p,li,span,div{ color:#fff !important; }

/* ---------- Encabezados del acordeón (amarillo) ---------- */
.accordion-toggle{
  background:#FFD400 !important;
  border:1px solid rgba(255,212,0,.42) !important;
  border-left:0 !important;
  border-radius:18px !important;
  padding:16px 18px !important;
  color:#000 !important;
  box-shadow:0 8px 20px rgba(0,0,0,.16);
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}
.accordion-toggle div,
.accordion-toggle span{ color:#000 !important; }
.accordion-toggle .text-sm{ color: rgba(0,0,0,.72) !important; }
.accordion-toggle:hover,
.accordion-toggle[aria-expanded="true"],
.accordion-toggle:focus{
  background:#FFD400 !important;
  color:#000 !important;
  transform: translateY(-1px);
  box-shadow:0 10px 24px rgba(0,0,0,.20);
  border-color: rgba(255,212,0,.52) !important;
  filter:brightness(.96);
}
.accordion-toggle:active{ transform: translateY(0); }

/* ---------- Banner de "ETAPA n" dentro del acordeón ---------- */
.process-banner{
  background:#FFD400 !important;
  color:#000 !important;
  border-radius: 18px;
  margin: 10px 0;
}
.process-banner h3, .process-banner p{ color:#000 !important; }

/* ---------- Botones genéricos ---------- */
button{
  background:#111 !important;
  color:#fff !important;
  border:1px solid #333 !important;
}
button:hover{ background:#1a1a1a !important; }

/* ---------- Botones del menú de inicio ---------- */
.menu-btn{
  text-decoration:none;
  cursor:pointer;
  width:100%;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,212,0,.35);
  background:#FFD400;
  color:#000;
  font-weight:900;
  letter-spacing:-.01em;
  transition: transform .08s ease, filter .12s ease;
}
.menu-btn:hover{ filter:brightness(.96); }
.menu-btn:active{ transform: translateY(1px); }

/* ---------- Gate de acceso (clave) ---------- */
#passGate{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:
    radial-gradient(1200px 600px at 10% 0%, rgba(255,212,0,.18), transparent 60%),
    radial-gradient(900px 500px at 90% 10%, rgba(255,212,0,.10), transparent 60%),
    radial-gradient(800px 400px at 50% 100%, rgba(255,255,255,.05), transparent 60%),
    #000;
}
#passCard{
  width:min(980px,100%);
  border-radius:22px;
  border:1px solid rgba(255,212,0,.28);
  background: rgba(0,0,0,.68);
  backdrop-filter: blur(10px);
  box-shadow:0 30px 90px rgba(0,0,0,.55);
  overflow:hidden;
}
#passCardHead{
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px;
  border-bottom:1px solid rgba(255,212,0,.16);
}
#passLogo{
  height:44px; width:44px;
  border-radius:999px;
  border:1px solid rgba(255,212,0,.28);
  background:#000;
  object-fit:cover;
}
#passTitle{ margin:0; font-size:20px; font-weight:900; letter-spacing:-.02em; color: rgba(255,255,255,.95); }
#passSub{ margin:4px 0 0; color: rgba(255,255,255,.65); font-size:13px; }
#passCardBody{ padding:18px 18px 20px; display:grid; gap:12px; }
#passInputWrap{
  display:flex; gap:10px; align-items:center;
  border:1px solid rgba(255,212,0,.22);
  border-radius:16px; padding:10px 12px;
  background: rgba(255,255,255,.04);
}
#passInput{
  flex:1; border:none; outline:none; background:transparent;
  color: rgba(255,255,255,.92); font-size:16px; padding:6px 4px;
}
#passInput::placeholder{ color: rgba(255,255,255,.45); }
#passBtn{
  border:1px solid rgba(255,212,0,.35);
  background:#FFD400; color:#000; font-weight:900;
  padding:10px 14px; border-radius:14px; cursor:pointer;
}
#passBtn:hover{ filter:brightness(.96); }
#passErr{ display:none; color: rgba(255,120,120,.95); font-size:13px; font-weight:700; }
#passHint{ color: rgba(255,255,255,.55); font-size:12px; }
@media (max-width:560px){
  #passTitle{ font-size:18px; }
  #passBtn{ padding:10px 12px; }
}

/* ---------- Estado de carga (evita "flash" de contenido protegido) ---------- */
.dr-auth-checking main,
.dr-auth-checking #menuInicio{ visibility:hidden; }

/* ---------- Impresión ---------- */
@media print{
  .no-print{ display:none !important; }
  body{ background:#fff !important; }
  .card{ box-shadow:none !important; border:1px solid #e5e7eb !important; }
  .accordion-content{ display:block !important; }
}