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

/* Full-width forzado: anula contenedores/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.08fr 1fr; min-height: 100vh; width: 100%; }

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

.auth-brand-top { position: relative; z-index: 2; }
.auth-logo-row { display: flex; align-items: center; gap: .8rem; }
.auth-cap { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: rgba(255,255,255,.16); color: #fff; }
.auth-cap svg { width: 26px; height: 26px; }
.auth-wordmark { display: flex; align-items: baseline; gap: .5rem; font-family: var(--font-heading); line-height: 1; }
.auth-wordmark-d { font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 800; letter-spacing: .02em; }
.auth-wordmark-a { font-size: clamp(1rem, 1.7vw, 1.4rem); font-weight: 500; opacity: .92; }
.auth-wordmark-sub { margin: .55rem 0 0; font-size: var(--fs-xs); letter-spacing: .16em; text-transform: uppercase; opacity: .7; }

.auth-brand-mid { position: relative; z-index: 2; }
.auth-brand-title { font-family: var(--font-heading); font-size: clamp(2rem, 3.4vw, 2.9rem); font-weight: 700; margin: 0 0 .8rem; line-height: 1.08; }
.auth-brand-lead { font-size: clamp(1rem, 1.3vw, 1.12rem); opacity: .9; max-width: 42ch; margin: 0 0 2rem; line-height: 1.6; }

.auth-feats { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1.05rem; }
.auth-feats li { display: flex; align-items: flex-start; gap: .9rem; }
.auth-feat-ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: rgba(255,255,255,.14); }
.auth-feat-ic svg { width: 20px; height: 20px; color: #fff; }
.auth-feats li div { display: flex; flex-direction: column; gap: .1rem; }
.auth-feats li b { font-size: var(--fs-md); font-weight: 600; }
.auth-feats li small { font-size: var(--fs-sm); opacity: .78; }

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

/* ---- Panel del formulario ---- */
.auth-panel { display: grid; place-items: center; padding: clamp(1.5rem, 4vw, 3rem); width: 100%; }
.auth-box { width: 100%; max-width: 384px; }
.auth-box-brand { margin-bottom: 1.5rem; }
.auth-box-logo { max-height: 64px; max-width: 180px; object-fit: contain; }
.auth-mark { display: inline-grid; place-items: center; width: 58px; height: 58px; border-radius: 16px;
  background: linear-gradient(150deg, var(--color-primary), var(--color-primary-dark)); color: #fff;
  box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--color-primary) 60%, transparent); }
.auth-mark svg { width: 32px; height: 32px; }

.auth-box-title { font-family: var(--font-heading); font-size: 1.85rem; font-weight: 700; margin: 0 0 .4rem; }
.auth-box-sub { color: var(--color-muted); margin: 0 0 1.9rem; 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; }
.auth-field input { width: 100%; padding: .82rem .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: .45; padding: .3rem; }
.auth-pass-toggle.on, .auth-pass-toggle:hover { opacity: 1; }

.auth-submit { margin-top: .5rem; padding: .9rem; font-size: var(--fs-md); font-weight: 600; border-radius: 11px; }
.auth-foot { margin-top: 1.7rem; 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.5rem 1.6rem; gap: 1rem; }
  .auth-brand-mid, .auth-brand-foot { display: none; }
  .auth-brand-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .3rem; }
  .auth-wordmark-sub { width: 100%; margin-top: .2rem; }
  .auth-panel { padding-top: 2.5rem; align-items: start; }
}

/* Logo del instituto en el panel de marca */
.auth-brand-logo { max-height: 64px; max-width: 220px; object-fit: contain; }