/* =====================================================================
   Rabie — Login
   Panel de marca + formulario en una card centrada. Solo esta pantalla:
   no comparte selectores con el panel administrativo.
   ===================================================================== */
:root{
  --lg-brand-1:#000549; --lg-brand-2:#2a3fa0; --lg-accent:#5b7cff;
  --lg-green:#18a558; --lg-green-2:#0f8a48;
  --lg-ink:#141b34; --lg-muted:#8a94a6; --lg-line:#e6eaf2;
}

.rb-login *{ box-sizing:border-box; }
.rb-login{
  /* ocupa exactamente el viewport: la pantalla de login no scrollea */
  box-sizing:border-box; width:100%; height:100%; min-height:100dvh; flex:1 0 auto; overflow:auto;
  display:flex; align-items:center; justify-content:center; padding:28px 18px;
  font-family:'Roboto','Open Sans',Arial,sans-serif; color:var(--lg-ink);
  background:radial-gradient(1200px 700px at 15% 10%, #3547b5 0%, transparent 60%),
             radial-gradient(900px 600px at 85% 90%, #4055c9 0%, transparent 55%),
             linear-gradient(135deg,#000549 0%, #1b2570 55%, #000431 100%);
}

/* Sin scroll de página en el login (la clase la pone el propio blade).
   El min-width:100vw del CSS de auth provocaba además scroll horizontal. */
html.rb-login-page, body.rb-login-page{
  height:100%; min-height:100%; max-width:100%; min-width:0 !important; overflow:hidden;
  margin:0; padding:0;
  /* el body de auth es blanco: se pinta del navy base para que ninguna franja
     (barra de 1-3px del centrado flex) se vea blanca sobre el degradado */
  background:#000431;
}

/* ---------- card ---------- */
.rb-login .lg-card{
  width:100%; max-width:940px; display:grid; grid-template-columns:1fr 1fr;
  background:#fff; border-radius:22px; overflow:hidden;
  box-shadow:0 30px 80px rgba(4,8,35,.45);
}

/* ---------- panel de marca ---------- */
.rb-login .lg-brand{
  position:relative; padding:48px 40px; display:flex; flex-direction:column; justify-content:center; gap:22px;
  background:linear-gradient(150deg,var(--lg-brand-1) 0%, var(--lg-brand-2) 100%); color:#fff; overflow:hidden;
}
.rb-login .lg-brand::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(520px 240px at 100% 0, rgba(91,124,255,.28), transparent 62%),
             radial-gradient(420px 220px at 0 100%, rgba(91,124,255,.18), transparent 60%);
}
.rb-login .lg-brand > *{ position:relative; z-index:1; }
.rb-login .lg-logo{ width:230px; max-width:100%; height:auto; display:block; }
.rb-login .lg-claim{ font-size:14.5px; line-height:1.6; color:#c3caf3; max-width:330px; }
.rb-login .lg-apps{ display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.rb-login .lg-app{
  display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:999px;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16);
  font-size:11.5px; font-weight:700; letter-spacing:.03em; color:#e7eaff;
}
.rb-login .lg-app i{ font-size:11px; color:var(--lg-accent); }

/* ---------- formulario ---------- */
.rb-login .lg-form{ padding:48px 44px; display:flex; flex-direction:column; justify-content:center; }
.rb-login .lg-title{ margin:0 0 5px; font-size:26px; font-weight:800; letter-spacing:.2px; }
.rb-login .lg-sub{ margin:0 0 26px; font-size:13.5px; color:var(--lg-muted); }

.rb-login .lg-fld{ margin-bottom:15px; }
.rb-login .lg-fld label{
  display:block; margin:0 0 6px; font-size:10px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--lg-muted);
}
.rb-login .lg-input{ position:relative; display:flex; align-items:center; }
.rb-login .lg-input > i{
  position:absolute; left:14px; font-size:13px; color:#b3bac7; pointer-events:none; transition:color .16s;
}
.rb-login .lg-input input{
  width:100%; height:48px; border:1.5px solid var(--lg-line); border-radius:12px; background:#fff;
  padding:0 44px 0 40px; font-size:14.5px; font-weight:600; color:var(--lg-ink); transition:.16s; outline:none;
}
.rb-login .lg-input input::placeholder{ color:#b9c0cc; font-weight:500; }
.rb-login .lg-input input:focus{ border-color:var(--lg-brand-2); box-shadow:0 0 0 4px rgba(42,63,160,.12); }
.rb-login .lg-input input:focus + i, .rb-login .lg-input input:focus ~ i{ color:var(--lg-brand-2); }
.rb-login .lg-eye{
  position:absolute; right:8px; width:34px; height:34px; border:none; background:transparent; color:#b3bac7;
  border-radius:9px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:.16s;
}
.rb-login .lg-eye:hover{ background:#f1f4fa; color:var(--lg-brand-2); }
.rb-login .lg-hint{ display:block; margin-top:6px; font-size:11.5px; color:#c53a2c; font-weight:700; min-height:14px; }

.rb-login .lg-btn{
  width:100%; height:50px; margin-top:10px; border:none; border-radius:12px; cursor:pointer;
  background:linear-gradient(135deg,var(--lg-green),var(--lg-green-2)); color:#fff;
  font-size:14.5px; font-weight:800; letter-spacing:.03em;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  box-shadow:0 8px 20px rgba(24,165,88,.28); transition:.18s;
}
.rb-login .lg-btn:hover{ transform:translateY(-1px); box-shadow:0 12px 26px rgba(24,165,88,.36); }
.rb-login .lg-btn:active{ transform:translateY(0); }
.rb-login .lg-btn[disabled]{ opacity:.75; cursor:progress; transform:none; }

/* ---------- errores ---------- */
.rb-login .lg-alert{
  display:flex; align-items:flex-start; gap:10px; margin:0 0 20px; padding:12px 14px;
  border-radius:12px; background:#fdeceb; border:1px solid #f7cfcb; color:#a4291b;
  font-size:12.5px; font-weight:700; line-height:1.45;
}
.rb-login .lg-alert i{ font-size:14px; margin-top:1px; }

.rb-login .lg-foot{ margin-top:22px; font-size:11.5px; color:#b3bac7; text-align:center; }

/* ---------- responsive ---------- */
@media (max-width:880px){
  .rb-login .lg-card{ grid-template-columns:1fr; max-width:460px; }
  .rb-login .lg-brand{ padding:32px 30px; align-items:center; text-align:center; gap:16px; }
  .rb-login .lg-logo{ width:190px; margin:0 auto; }
  .rb-login .lg-claim{ max-width:none; font-size:13.5px; }
  .rb-login .lg-apps{ justify-content:center; }
  .rb-login .lg-form{ padding:32px 26px 30px; }
  .rb-login .lg-title{ font-size:22px; }
}
@media (prefers-reduced-motion:reduce){ .rb-login *{ transition:none !important; } }