/* ===== Login split-screen — DREA Ayacucho ===== */

/* Full-width forzado: anula cualquier contenedor/centrado del shell */
html, body.auth-body { margin: 0 !important; padding: 0 !important; width: 100%; min-height: 100vh; }
body.auth-body { background: var(--color-bg); font-family: var(--font-body); color: var(--color-text); overflow-x: hidden; }
body.auth-body .auth-split,
body.auth-body main,
body.auth-body .container,
body.auth-body .app-main,
body.auth-body .content { max-width: none !important; margin: 0 !important; padding: 0 !important; width: 100% !important; }

.auth-split { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; width: 100%; }

/* ---- Panel de marca ---- */
.auth-brand {
  position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(150deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  padding: clamp(2rem, 4vw, 3.5rem);
  display: flex; flex-direction: column; justify-content: space-between;
}
.auth-brand-glow { position: absolute; border-radius: 50%; filter: blur(8px); pointer-events: none; }
.auth-brand-glow-1 { width: 460px; height: 460px; background: rgba(255,255,255,.10); top: -160px; right: -160px; }
.auth-brand-glow-2 { width: 360px; height: 360px; background: var(--color-accent); opacity: .18; bottom: -140px; left: -120px; }

.auth-brand-top { position: relative; z-index: 2; }
.auth-wordmark { display: flex; align-items: baseline; gap: .55rem; font-family: var(--font-heading); line-height: 1; }
.auth-wordmark-d { font-size: clamp(2rem, 3.4vw, 2.8rem); font-weight: 800; letter-spacing: .02em; }
.auth-wordmark-a { font-size: clamp(1.1rem, 1.8vw, 1.5rem); font-weight: 500; opacity: .92; }
.auth-wordmark-sub { margin: .35rem 0 0; font-size: var(--fs-sm); letter-spacing: .14em; text-transform: uppercase; opacity: .72; }

.auth-brand-mid { position: relative; z-index: 2; }
.auth-illu { width: 100%; max-width: 380px; height: auto; display: block; margin: 0 auto 1.6rem; }
.auth-brand-title { font-family: var(--font-heading); font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 700; margin: 0 0 .5rem; }
.auth-brand-lead { font-size: var(--fs-md); opacity: .88; max-width: 32ch; margin: 0 0 1.6rem; line-height: 1.55; }
.auth-feats { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .7rem; }
.auth-feats li { display: flex; align-items: center; gap: .7rem; font-size: var(--fs-sm); opacity: .95; }
.auth-feats span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.18); font-size: .7rem; flex: none; }

.auth-brand-foot { position: relative; z-index: 2; font-size: var(--fs-xs); opacity: .65; }

/* ---- Panel del formulario ---- */
.auth-panel { display: grid; place-items: center; padding: clamp(1.5rem, 4vw, 3rem); width: 100%; }
.auth-box { width: 100%; max-width: 380px; }
.auth-box-brand { margin-bottom: 1.4rem; }
.auth-box-logo { max-height: 64px; max-width: 180px; object-fit: contain; }
.brand-mark-lg {
  display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 16px;
  background: var(--color-primary); color: #fff; font-family: var(--font-heading);
  font-weight: 700; font-size: 1.4rem;
}
.auth-box-title { font-family: var(--font-heading); font-size: 1.8rem; font-weight: 700; margin: 0 0 .4rem; }
.auth-box-sub { color: var(--color-muted); margin: 0 0 1.8rem; font-size: var(--fs-md); }

.auth-error {
  background: #FCE8E8; color: #9B1C1C; border: 1px solid #F5C6C6;
  border-radius: 10px; padding: .7rem .9rem; font-size: var(--fs-sm); margin-bottom: 1.2rem;
}

.auth-form { display: flex; flex-direction: column; gap: 1rem; }
.auth-field { display: flex; flex-direction: column; gap: .4rem; }
.auth-field > span { font-size: var(--fs-sm); font-weight: 600; color: var(--color-text); }
.auth-field input {
  width: 100%; padding: .8rem .9rem; border: 1.5px solid var(--color-border);
  border-radius: 11px; font: inherit; background: var(--color-surface); transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
}
.auth-field input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent); }
.auth-pass { position: relative; display: block; }
.auth-pass input { padding-right: 2.8rem; }
.auth-pass-toggle { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: 1.1rem; opacity: .5; padding: .3rem; }
.auth-pass-toggle.on, .auth-pass-toggle:hover { opacity: 1; }

.auth-submit { margin-top: .4rem; padding: .85rem; font-size: var(--fs-md); font-weight: 600; border-radius: 11px; }
.auth-foot { margin-top: 1.6rem; text-align: center; font-size: var(--fs-sm); }
.auth-foot a { color: var(--color-muted); text-decoration: none; }
.auth-foot a:hover { color: var(--color-primary); }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .auth-split { grid-template-columns: 1fr; }
  .auth-brand { padding: 1.6rem; min-height: auto; }
  .auth-brand-mid, .auth-brand-foot { display: none; }
  .auth-brand-top { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .4rem; }
  .auth-wordmark-sub { width: 100%; }
  .auth-panel { padding-top: 2.5rem; align-items: start; }
}