/* Acceso inspirado en la referencia solicitada: identidad verde y tarjeta sobre fondo claro.
 * Solo /acceso. Paleta municipal, Source Sans 3 y los controles compartidos de auth.css.
 * Escala: tarjeta 28 px, piezas del panel 16 px, controles 12 px, etiquetas redondas.
 * Una entrada breve ya definida en auth.css; el fondo permanece inmóvil.
 */
.auth-login {
    --auth-forest: #034415;
    --auth-forest-2: #07671e;
    --auth-highlight: #d6ea39;
    --auth-on-forest: #dcebdd;
    --auth-line: #7b8e80;
    --auth-field: #f4f7f4;
    --auth-card-shadow: 0 24px 64px -24px rgba(20, 66, 34, 0.3);
}

.auth-login .auth-shell {
    min-height: 100dvh;
    grid-template-columns: minmax(0, 57fr) minmax(0, 43fr);
}

.auth-login .auth-hero {
    min-height: 100dvh;
    gap: 24px;
    padding: clamp(28px, 3vw, 44px);
    background:
        radial-gradient(ellipse at 30% 94%, rgba(18, 161, 250, 0.24), transparent 35%),
        radial-gradient(ellipse at -12% 48%, rgba(170, 200, 5, 0.17), transparent 40%),
        linear-gradient(145deg, #034415, #06611b 55%, #087528);
}

.auth-login .auth-hero::before {
    display: block;
    background: repeating-radial-gradient(circle at 80% 102%, rgba(255, 255, 255, 0.055) 0 1px, transparent 1px 36px);
    pointer-events: none;
}

.auth-login .auth-stripe { display: none; }
.auth-login .auth-mobile-title { display: none; }

.auth-login .auth-logo-card {
    padding: 14px 18px;
    border-radius: 16px;
    background: #f9fbf9;
    box-shadow: 0 12px 32px -18px rgba(0, 30, 8, 0.45);
}

.auth-login .auth-logo-card:hover { transform: none; }
.auth-login .auth-logo-card img { width: clamp(175px, 15vw, 220px); }

.auth-login .auth-pill {
    display: inline-flex;
    padding: 8px 12px;
    border-color: rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 0.75rem;
    backdrop-filter: none;
    white-space: nowrap;
}

.auth-login .auth-pill svg { stroke: var(--auth-highlight); }
.auth-login .auth-hero-copy { max-width: 620px; }

.auth-login .auth-kicker {
    margin-bottom: 18px;
    color: var(--auth-highlight);
    font-size: 0.82rem;
    font-weight: 750;
    letter-spacing: 0.06em;
}

.auth-login .auth-kicker::before { display: block; width: 26px; }

.auth-login .auth-hero h1 {
    max-width: 590px;
    margin: 0 0 20px;
    font-size: clamp(2.5rem, 3.2vw, 3.125rem);
    font-weight: 780;
    letter-spacing: -0.04em;
    line-height: 1.08;
    text-wrap: balance;
}

.auth-login .auth-highlight { color: var(--auth-highlight); }

.auth-login .auth-hero-copy > p {
    max-width: 48ch;
    color: var(--auth-on-forest);
    font-size: 1rem;
    line-height: 1.65;
}

.auth-login .auth-features {
    display: grid;
    max-width: 460px;
    gap: 10px;
    margin-top: 28px;
    animation-delay: 360ms;
}

.auth-login .auth-features li {
    display: flex;
    gap: 14px;
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.075);
    animation: none;
    transition: none;
    backdrop-filter: none;
}

.auth-login .auth-feature-icon {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
}

.auth-login .auth-features strong { color: #fff; font-size: 0.94rem; }
.auth-login .auth-features span { color: #fff; font-size: 0.82rem; }
.auth-login .auth-hero-bottom { gap: 20px; }

.auth-login .auth-department {
    gap: 12px;
    padding: 10px 14px 10px 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    background: rgba(0, 34, 12, 0.35);
}

.auth-login .auth-department span,
.auth-login .auth-date { color: var(--auth-on-forest); }

.auth-login .auth-panel {
    min-height: 100dvh;
    padding: 44px clamp(24px, 3.5vw, 64px);
    background:
        radial-gradient(circle at 1px 1px, rgba(5, 102, 26, 0.08) 1px, transparent 0) 0 0 / 22px 22px,
        linear-gradient(160deg, #f6f9f5, #ebf2eb);
}

.auth-login .auth-card {
    max-width: 460px;
    padding: clamp(28px, 2.6vw, 44px);
    border: 1px solid #fff;
    border-radius: 28px;
    background: #fff;
    box-shadow: var(--auth-card-shadow);
}

.auth-login .auth-card::before {
    display: block;
    right: 32px;
    left: 32px;
    height: 3px;
    background: linear-gradient(90deg, #057f14, #aac805 40%, #f8d509 68%, #12a1fa);
}

.auth-login .auth-heading { margin-bottom: 28px; }

.auth-login .auth-greeting {
    gap: 7px;
    padding: 6px 10px;
    background: var(--auth-green-soft);
    font-size: 0.78rem;
    font-weight: 700;
}

.auth-login .auth-heading h2 {
    margin: 16px 0 10px;
    font-size: clamp(1.75rem, 2.1vw, 2.1rem);
    font-weight: 780;
    letter-spacing: -0.035em;
    line-height: 1.12;
    text-wrap: balance;
}

.auth-login .auth-heading p { font-size: 0.94rem; line-height: 1.6; }
.auth-login .auth-form { gap: 20px; }
.auth-login .auth-field { gap: 7px; }
.auth-login .auth-field label { font-size: 0.85rem; font-weight: 700; }
.auth-login .auth-label-row { gap: 8px; flex-wrap: wrap; }
.auth-login .auth-link { font-size: 0.79rem; }

.auth-login .auth-input {
    min-height: 52px;
    border: 1px solid var(--auth-line);
    border-radius: 12px;
    background: var(--auth-field);
}

.auth-login .auth-input-icon { width: 44px; }
.auth-login .auth-input:hover:not(:focus-within) { border-color: #657d6b; }
.auth-login .auth-input input { padding: 14px 12px 14px 0; font-size: 1rem; }
.auth-login .auth-input input::placeholder { color: var(--auth-ink-3); opacity: 1; }
.auth-login .auth-eye { width: 44px; min-height: 48px; border-radius: 0 11px 11px 0; }

.auth-login .auth-submit {
    min-height: 54px;
    margin-top: 2px;
    border-radius: 12px;
    background: linear-gradient(105deg, #337d40, #05661a);
    box-shadow: 0 10px 22px -10px rgba(5, 102, 26, 0.5);
    font-size: 1rem;
    font-weight: 750;
    letter-spacing: 0;
}

.auth-login .auth-submit:hover { background: #04531a; }
.auth-login .auth-submit:disabled { cursor: progress; opacity: 0.8; }

.auth-login .auth-security {
    gap: 12px;
    margin-top: 24px;
    padding: 14px;
    border: 0;
    border-radius: 12px;
    background: #f0f6f1;
}

.auth-login .auth-security p { font-size: 0.8rem; line-height: 1.5; }
.auth-login .auth-footer,
.auth-login .auth-install { max-width: 460px; }
.auth-login .auth-footer { gap: 10px; margin-top: 28px; font-size: 0.75rem; }
.auth-login .auth-install:not(:has(> :not([hidden]))) { display: none; }
.auth-login .auth-install [hidden] { display: none; }
.auth-login .auth-footer a { display: inline-flex; align-items: center; min-height: 36px; }

.auth-login a:focus-visible,
.auth-login button:focus-visible { outline: 3px solid var(--auth-green-dark); outline-offset: 4px; }
.auth-login .auth-hero a:focus-visible { outline-color: var(--auth-highlight); }
.auth-login .auth-eye:focus-visible { outline-offset: -5px; }

/* Portátiles: reduce el espacio ornamental para mantener el acceso visible. */
@media (min-width: 961px) and (max-width: 1200px) {
    .auth-login .auth-shell { grid-template-columns: minmax(0, 1fr) minmax(440px, 1fr); }
    .auth-login .auth-hero { padding: 32px; }
    .auth-login .auth-panel { padding: 32px 24px; }
    .auth-login .auth-pill { display: none; }
    .auth-login .auth-hero h1 { font-size: 2.7rem; }
    .auth-login .auth-date { display: none; }
}

@media (min-width: 961px) and (max-height: 800px) {
    .auth-login .auth-hero { gap: 24px; padding-top: 28px; padding-bottom: 28px; }
    .auth-login .auth-logo-card img { width: 180px; }
    .auth-login .auth-hero h1 { font-size: clamp(2.3rem, 3.2vw, 3rem); margin-bottom: 14px; }
    .auth-login .auth-kicker { margin-bottom: 12px; }
    .auth-login .auth-features { margin-top: 20px; gap: 8px; }
    .auth-login .auth-features li { padding: 9px 12px; }
    .auth-login .auth-panel { padding-top: 28px; padding-bottom: 28px; }
}

/* Teléfono y tablet: identidad compacta y formulario primero, sin el bloque promocional. */
@media (max-width: 960px) {
    .auth-login .auth-shell { display: block; }
    .auth-login .auth-hero {
        min-height: 0;
        display: block;
        padding: max(24px, env(safe-area-inset-top)) 24px 50px;
    }
    .auth-login .auth-hero-copy,
    .auth-login .auth-hero-bottom,
    .auth-login .auth-pill { display: none; }
    .auth-login .auth-mobile-title { display: block; color: #fff; font-size: 1rem; }
    .auth-login .auth-mobile-title strong { display: block; font-size: 1.22rem; }
    .auth-login .auth-logo-card { padding: 8px 12px; border-radius: 12px; }
    .auth-login .auth-logo-card img { width: 150px; }
    .auth-login .auth-panel {
        min-height: 0;
        margin-top: 0;
        padding: 0 20px max(24px, env(safe-area-inset-bottom));
    }
    .auth-login .auth-card { margin-top: -26px; padding: 28px; border-radius: 24px; }
    .auth-login .auth-heading h2 { font-size: 1.85rem; }
    .auth-login .auth-footer { justify-content: center; text-align: center; gap: 4px 14px; margin-top: 20px; }
    .auth-login .auth-footer a { min-height: 44px; }
}

@media (max-width: 400px) {
    .auth-login .auth-hero { padding-right: 20px; padding-left: 20px; }
    .auth-login .auth-logo-card img { width: 130px; }
    .auth-login .auth-panel { padding-right: 14px; padding-left: 14px; }
    .auth-login .auth-card { padding: 24px 20px; }
    .auth-login .auth-heading { margin-bottom: 22px; }
    .auth-login .auth-heading h2 { font-size: 1.75rem; }
    .auth-login .auth-form { gap: 16px; }
    .auth-login .auth-link { font-size: 0.77rem; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-login *, .auth-login *::before, .auth-login *::after {
        animation: none !important;
        transition: none !important;
    }
}