/* ====== Login / Registro — CSS limpio y 100% responsive ======
   - Scroll de **página** cuando el contenido supera el alto del viewport
   - Sin scroll horizontal en móvil
   - Centrado cómodo en desktop
   - Mantiene estética dorada sobre fondo oscuro
================================================================ */

/* Tokens base (pueden venir de theme; se dejan como fallback) */
:root{
  --login-max-w: 900px;        /* ancho máximo del contenedor principal */
  --card-max-w: 640px;         /* ancho máximo de la tarjeta */
  --gold-light: #f5e6b3;
  --gold: #d4a017;
  --gold-deep: #8b6b0c;
  --bg-dark: #0b0b0c;
}

/* Reseteos mínimos para evitar desbordes */
*,*::before,*::after{ box-sizing: border-box; }
html,body{ width:100%; height:100%; overflow-x:hidden; }

/* ===== Fondo / página ===== */
.login-page{
  min-height: 100dvh;          /* respeta barras móviles */
  width: 100%;
  margin: 0;
  display: grid;
  justify-items: center;       /* centra horizontalmente el wrapper */
  align-content: start;        /* permite que la página scrollee cuando haga falta */
  gap: 24px;
  padding: 24px 16px;          /* respiración superior/lat, mantiene scroll acorde */
  background: var(--bg-dark);
  color: var(--gold-light);
  position: relative;
  overflow-y: auto;            /* scroll en la página (no en el form) */
  -webkit-overflow-scrolling: touch;
}

/* Glow de fondo sin afectar el scroll */
.login-page::before{
  content:"";
  position: fixed;             /* no suma altura scrollable */
  inset: 0;
  background: radial-gradient(
    1200px 800px at 50% 25%,
    rgba(212,160,23,0.18) 0%,
    rgba(245,230,179,0.08) 40%,
    transparent 70%
  );
  pointer-events:none;
  z-index:0;
}

/* ===== Contenedor ===== */
.login-wrapper{
  width: min(100%, var(--login-max-w));
  display:grid; justify-items:center; row-gap: 0;
  position: relative; z-index:1; /* sobre el glow */
}

/* ===== Tarjeta ===== */
.login-card{
  width: min(100%, var(--card-max-w));
  display:grid; gap:24px;
  padding: clamp(24px, 5vw, 40px);
  border-radius: 20px;
  border: 1px solid rgba(212,160,23,0.28);
  background: rgba(15, 15, 15, 0.9);
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);
}

/* ===== Encabezado ===== */
.login-header{ display:grid; justify-items:center; gap:6px; text-align:center; }
.brand-title{ margin:6px 0 0; font-weight:700; font-size:clamp(1.6rem, 3.5vw, 2rem); color:var(--gold-light); }
.muted{ opacity:.85; }

/* ===== Form ===== */
.login-form{ display:grid; gap:18px; }
.form-field{ display:grid; gap:8px; }
.form-field label{ color:var(--gold-light); font-size:clamp(14px, 1.8vw, 16px); }
.form-field input{
  height: 50px;
  padding: 0 16px;
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--gold);
  background: rgba(0,0,0,0.55);
  color: var(--gold-light);
  font-size: 16px;
}
.form-field input::placeholder{ color: rgba(245,230,179,0.6); }
.form-field input:focus{ outline: none; box-shadow: 0 0 0 3px rgba(212,160,23,0.35); }

/* Flash messages */
.flash-box{ display:grid; gap:10px; margin-bottom:4px; }
.flash{ padding:12px 14px; border-radius:12px; font-size:15px; background:rgba(0,0,0,0.65); border:1px solid var(--gold); color:var(--gold-light); }
.flash.error{ border-color:#b91c1c; color:#fca5a5; background:rgba(185,28,28,0.25); }
.flash.success{ border-color:#15803d; color:#86efac; background:rgba(21,128,61,0.25); }

/* Enlaces extra */
.login-extra{ display:grid; justify-items:center; margin-top:8px; }
.link-ghost{ color:var(--gold-light); text-decoration:none; font-size:15px; }
.link-ghost:hover{ text-decoration:underline; }

/* Botón principal */
.btn.btn-primary.btn-block{
  width: 100%; height: 50px;
  border-radius: 12px; border: none;
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  color:#fff; font-weight:600; font-size:16px;
}
.btn.btn-primary.btn-block:hover{ filter: brightness(1.1); }
.btn.btn-primary.btn-block:active{ transform: translateY(1px); }

/* ===== Responsivo fino ===== */
@media (max-width: 600px){
  .login-page{ padding: 20px 12px; }
  .login-card{ border-radius:16px; }
}

@media (min-width: 1200px){
  .login-page{ padding-block: 48px; }
}

/* Accesibilidad / reduce motion */
@media (prefers-reduced-motion: reduce){
  .login-page::before{ background: rgba(212,160,23,0.10); }
}