/* Pantallas públicas de acceso: misma identidad visual que el login SGPM. */
:root { color-scheme:light; --red:#f3545d; --red-dark:#b52c3b; --ink:#262733; --muted:#666671; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); font:16px/1.6 Inter,system-ui,-apple-system,"Segoe UI",sans-serif; background:#24131b; }
body:before { content:""; position:fixed; inset:0; z-index:-1; background:linear-gradient(105deg,#1e0d16de,#300c1873),url('/assets/img/fondo-login2.png') center/cover no-repeat; }
button,input { font:inherit; } button,a { touch-action:manipulation; } button { cursor:pointer; }
.brand-top { max-width:1120px; margin:0 auto; padding:24px 24px 0; }
.brand-top__logo { width:64px; height:64px; object-fit:contain; }
.auth-page { padding:24px 24px 48px; }
.auth-card { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); max-width:1000px; margin:0 auto; border-radius:26px; background:#fff; box-shadow:0 25px 90px #0005; overflow:hidden; }
.auth-card__inner { min-width:0; padding:clamp(26px,4vw,52px); }
.auth-brand { display:flex; align-items:center; gap:12px; margin-bottom:27px; }
.auth-brand__logo { width:48px; height:48px; object-fit:contain; }
.auth-brand__name { font-size:18px; font-weight:700; letter-spacing:.06em; }
.auth-brand__sub { font-size:12px; color:var(--muted); }
.auth-title { margin:0 0 14px; font-size:clamp(26px,3vw,34px); font-weight:600; letter-spacing:-.04em; line-height:1.2; }
.auth-desc { margin:0 0 25px; color:var(--muted); font-size:14px; overflow-wrap:anywhere; }
.auth-visual { position:relative; min-height:350px; background:#e8e1d7 url('/assets/img/fondo-login-sgpm.png') center/cover no-repeat; }
.auth-visual:after { content:""; position:absolute; inset:50% 0 0; background:linear-gradient(transparent,#25121bdb); }
.auth-visual__caption { position:absolute; z-index:1; left:28px; right:28px; bottom:30px; color:#fff; }
.auth-visual__caption span { display:inline-block; background:#fff; color:#39323a; padding:7px 12px; border-radius:30px; font-size:10px; font-weight:700; letter-spacing:.12em; }
.auth-visual__caption p { margin:14px 0 0; font-size:25px; font-weight:600; line-height:1.3; letter-spacing:-.03em; }
.input-block { margin:0 0 20px; }
.input-label { display:block; margin-bottom:8px; font-size:13px; font-weight:600; color:#45404a; }
.input-block input { width:100%; min-width:0; min-height:48px; padding:12px 14px; border:1px solid #dedbe1; border-radius:11px; background:#faf9fb; color:var(--ink); outline:none; }
.input-block input:focus { border-color:var(--red); box-shadow:0 0 0 3px #f3545d20; background:#fff; }
input[name="codigo"] { font-size:23px; letter-spacing:.23em; font-variant-numeric:tabular-nums; }
input[name="codigo"]::placeholder { font-size:14px; letter-spacing:normal; }
.password-wrap { position:relative; } .password-wrap input { padding-right:54px; }
.toggle-pass { position:absolute; right:4px; top:4px; bottom:4px; width:44px; border:0; border-radius:9px; background:transparent; color:#8b2939; display:grid; place-items:center; }
.toggle-pass:hover { background:#ffecef; }
.eye { width:21px; height:21px; fill:currentColor; }
.eye-off { display:none; } .toggle-pass[aria-pressed="true"] .eye-open { display:none; } .toggle-pass[aria-pressed="true"] .eye-off { display:block; }
.btn-primary { display:block; min-height:48px; padding:13px 20px; border:1px solid transparent; border-radius:11px; background:var(--red-dark); color:#fff; font-weight:600; font-size:14px; }
.btn-primary:hover { background:#982334; } button:disabled { opacity:.65; cursor:wait; }
a,.link-muted { color:#a52d3c; font-size:13px; text-decoration:underline; text-underline-offset:4px; }
a:hover,.link-muted:hover { color:#78202b; }
.auth-foot { margin-top:22px; text-align:center; overflow-wrap:anywhere; }
.auth-alert { padding:13px 16px; border-radius:11px; margin:0 0 20px; font-size:14px; overflow-wrap:anywhere; }
.auth-alert--err { border:1px solid #f1c3cc; color:#8b2939; background:#fff2f4; }
.auth-alert--ok { border:1px solid #bcdfc9; color:#18513d; background:#edf9f2; }
.auth-password-help { padding:14px 16px; border:1px solid #eddae0; border-radius:12px; background:#fff7f8; margin:0 0 22px; font-size:13px; }
.auth-password-help p { margin:0 0 8px; font-weight:600; }
.auth-password-help ul { margin:0; padding-left:20px; display:grid; grid-template-columns:1fr 1fr; gap:5px 12px; }
.auth-password-help li.is-met { color:#18513d; font-weight:600; }
:is(a,button,input):focus-visible { outline:3px solid var(--red); outline-offset:3px; }
@media(max-width:720px) {
 .brand-top { padding:16px 18px 0; } .brand-top__logo { width:48px; height:48px; }
 .auth-page { padding:18px 14px 32px; } .auth-card { grid-template-columns:1fr; border-radius:22px; }
 .auth-visual { order:-1; min-height:140px; background-image:url('/assets/img/fondo-login-sgpm-mobile.webp'); background-position:center; }
 .auth-visual__caption { left:20px; bottom:17px; } .auth-visual__caption p { display:none; }
 .auth-card__inner { padding:28px 23px; } .auth-brand { margin-bottom:22px; }
 .input-block input { font-size:16px; } .input-block input[name="codigo"] { font-size:22px; }
}
@media(max-width:380px) { .auth-password-help ul { grid-template-columns:1fr; } }