/* MrVUCEM — Vistas de acceso: login y registro */

/* ---------- Auth ---------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .auth { grid-template-columns: 1fr; } .auth-aside { display: none; } }
.auth-main { display: grid; place-items: center; padding: 2.5rem 1.5rem; }
.auth-card { width: 100%; max-width: 420px; }
.auth-card .brand { margin-bottom: 1.8rem; }
.auth-aside {
  background: linear-gradient(150deg, #0b2a6b 0%, #0d2350 45%, #05403a 100%);
  color: #fff; padding: 3rem; display: flex; flex-direction: column; justify-content: center; gap: 1.2rem;
  position: relative; overflow: hidden;
}
.auth-aside::after {
  content: ""; position: absolute; inset: 0; opacity: .25;
  background-image: url("../img/pattern-grid.svg"); background-size: 40px 40px;
}
.auth-aside > * { position: relative; z-index: 1; }
.auth-aside h2 { color: #fff; }
.auth-aside p, .auth-aside li { color: rgba(255,255,255,.8); }
.auth-aside .check-list svg { color: #2ee0c4; }
.auth-aside .check-list strong { color: #fff; }
/* ---------- Variante compacta (alta de cuenta) ----------
   El alta tiene siete campos: sin apretar, no cabe en una pantalla de
   portátil y obliga a desplazar antes de llegar al botón. */
.auth-compacta .auth-main { padding: 1.2rem 1.5rem; }
.auth-compacta .auth-card { max-width: 460px; }
.auth-compacta .auth-card .brand { margin-bottom: 1.1rem; }
.auth-compacta .auth-card h1 { font-size: 1.5rem; margin-bottom: .25rem; }
.auth-compacta form { margin-top: 1.2rem; }
.auth-compacta .field { gap: .28rem; margin-bottom: .7rem; }
.auth-compacta .field label { font-size: .84rem; }
.auth-compacta .form-row { gap: .8rem; }
.auth-compacta .input,
.auth-compacta .select { padding: .58rem .8rem; font-size: .92rem; }
.auth-compacta .checkbox { font-size: .83rem; margin-bottom: .45rem; }
.auth-compacta .checkbox + .checkbox { margin-bottom: .9rem; }
.auth-compacta .btn-lg { padding: .78rem 1.2rem; }
.auth-compacta .auth-aside { padding: 2.5rem; }

.divider { display: flex; align-items: center; gap: .8rem; color: var(--muted); font-size: .8rem; margin: 1.2rem 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.social-btns { display: grid; gap: .6rem; }