/*
 * Pantallas de acceso de SICAT: /login (personal territorial) y /admin/login.
 * Una sola hoja para ambas. Sin portada ni capa de «cargando»: el formulario se puede
 * usar en cuanto pinta. El panel visual solo existe de 992 px en adelante.
 */

body.public-login-body,
body.admin-login-body {
    margin: 0;
    background: #fbfaf6;
}

.public-login-main,
.admin-login-main {
    display: block;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    padding: 0;
}

.lg {
    --lg-ink: #12261f;
    --lg-ink-2: #3d5249;
    --lg-muted: #5a6c63;
    --lg-green-950: #0f241d;
    --lg-green-900: #16332a;
    --lg-green-800: #1f4338;
    --lg-green-700: #2d5a4b;
    --lg-green-50: #f0f5f1;
    --lg-gold: #c49a6c;
    --lg-gold-300: #e6d194;
    --lg-gold-700: #7c5f30;
    --lg-paper: #fbfaf6;
    --lg-line: rgba(18, 38, 31, .22);

    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 100vh;
    min-height: 100dvh;
    color: var(--lg-ink);
    background: var(--lg-paper);
    font-family: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.lg *,
.lg *::before,
.lg *::after { box-sizing: border-box; }

/* ---------- Panel del formulario ---------- */

.lg-panel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(2rem, 6vw, 3.5rem) clamp(1.25rem, 6vw, 3.5rem);
}

.lg-panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--lg-green-700), var(--lg-gold));
}

.lg-card { width: min(100%, 25rem); }

.lg-brand {
    display: flex;
    width: max-content;
    max-width: 100%;
    border-radius: 8px;
}

.lg-brand img {
    display: block;
    width: auto;
    height: clamp(2.6rem, 2.2rem + 1.6vw, 3.2rem);
}

.lg-kicker {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 1.6rem 0 0;
    font: 700 .72rem/1.3 'Montserrat', sans-serif;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lg-green-700);
}

.lg-kicker::before {
    content: "";
    width: 1.75rem;
    height: 2px;
    border-radius: 2px;
    background: var(--lg-gold);
}

.lg-card h1 {
    margin: .7rem 0 0;
    font: 800 clamp(1.6rem, 1.35rem + 1.1vw, 2rem)/1.15 'Montserrat', sans-serif;
    letter-spacing: -.02em;
    color: var(--lg-green-900);
}

.lg-lead {
    margin: .6rem 0 0;
    font-size: .95rem;
    line-height: 1.55;
    color: var(--lg-ink-2);
}

.lg-alert {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin: 1.25rem 0 0;
    padding: .75rem .9rem;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: .9rem;
    line-height: 1.45;
}

.lg-alert .bi { flex: none; margin-top: .1rem; }
.lg-alert--error { color: #7a271a; background: #fdf1ef; border-color: #e3b4ac; }
.lg-alert--aviso { color: #5c4320; background: #f6f1e7; border-color: #c4a574; }

.lg-form {
    display: grid;
    gap: 1.1rem;
    margin: 1.5rem 0 0;
}

.lg-field label {
    display: block;
    margin: 0 0 .4rem;
    font: 700 .82rem/1.3 'Montserrat', sans-serif;
    color: var(--lg-green-900);
}

.lg-input {
    position: relative;
    display: flex;
    align-items: center;
}

.lg-input > .bi {
    position: absolute;
    left: .95rem;
    font-size: 1rem;
    color: var(--lg-muted);
    pointer-events: none;
}

.lg-input input {
    width: 100%;
    min-height: 3.1rem;
    padding: .7rem 1rem .7rem 2.7rem;
    border: 1px solid var(--lg-line);
    border-radius: 14px;
    background: #fff;
    /* 16 px: en iPhone evita el zoom automático al enfocar. */
    font: inherit;
    font-size: 1rem;
    color: var(--lg-ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.lg-input input::placeholder { color: #8b998f; }

.lg-input input:focus {
    outline: none;
    border-color: var(--lg-green-700);
    box-shadow: 0 0 0 4px rgba(45, 90, 75, .18);
}

.lg-input--pass input { padding-right: 3.3rem; }

.lg-input__toggle {
    position: absolute;
    right: .3rem;
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: none;
    font-size: 1.05rem;
    color: var(--lg-muted);
    cursor: pointer;
}

.lg-input__toggle:hover { color: var(--lg-green-800); background: var(--lg-green-50); }

.lg-input__toggle:focus-visible,
.lg-submit:focus-visible,
.lg a:focus-visible {
    outline: 3px solid var(--lg-gold);
    outline-offset: 2px;
}

.lg-field.is-invalid input { border-color: #b3372a; }

.lg-field__error,
.lg-hint {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin: .4rem 0 0;
    font-size: .82rem;
    line-height: 1.35;
}

.lg-field__error { color: #9a2c20; }
.lg-hint { color: var(--lg-gold-700); }
.lg-field__error[hidden],
.lg-hint[hidden] { display: none; }

.lg-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    min-height: 3.2rem;
    margin-top: .2rem;
    padding: .8rem 1.4rem;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, #34695a 0%, #23473c 100%);
    box-shadow: 0 14px 28px -16px rgba(18, 38, 31, .85);
    font: 700 1rem/1.1 'Montserrat', sans-serif;
    color: #fff;
    cursor: pointer;
    transition: transform .15s ease, filter .15s ease;
}

.lg-submit:hover { transform: translateY(-1px); filter: brightness(1.07); }

.lg-submit[disabled] {
    transform: none;
    filter: none;
    opacity: .88;
    cursor: progress;
}

.lg-submit__spinner {
    display: none;
    width: 1.05rem;
    height: 1.05rem;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: lg-giro .7s linear infinite;
}

.lg-submit.is-busy .lg-submit__spinner { display: inline-block; }
.lg-submit.is-busy .bi { display: none; }

@keyframes lg-giro {
    to { transform: rotate(360deg); }
}

.lg-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .4rem 1.25rem;
    margin: 1.4rem 0 0;
    font-size: .88rem;
}

.lg-links a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 2.2rem;
    font-weight: 600;
    color: var(--lg-green-700);
    text-decoration: none;
    border-radius: 6px;
}

.lg-links a:hover { color: var(--lg-green-900); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Panel visual (solo escritorio) ---------- */

.lg-visual { display: none; }

@media (min-width: 992px) {
    .lg { grid-template-columns: minmax(26rem, .88fr) minmax(0, 1.12fr); }
    .lg--admin { grid-template-columns: minmax(0, 1.12fr) minmax(26rem, .88fr); }
    .lg--admin .lg-visual { order: -1; }

    .lg-visual {
        position: relative;
        isolation: isolate;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        min-height: 100vh;
        min-height: 100dvh;
        padding: clamp(2rem, 4vw, 3.5rem);
        overflow: hidden;
        color: #fff;
        background:
            radial-gradient(46rem 30rem at 90% -10%, rgba(196, 154, 108, .3), transparent 60%),
            linear-gradient(160deg, var(--lg-green-950) 0%, var(--lg-green-900) 46%, var(--lg-green-800) 100%);
    }

    /* Trama de puntos dorados: se ve mientras llega la primera foto o si no hay fotos. */
    .lg-visual::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -3;
        background-image: radial-gradient(rgba(230, 209, 148, .2) 1.2px, transparent 1.7px);
        background-size: 22px 22px;
        -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
        mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
    }
}

.lg-foto {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .9s ease;
}

.lg-foto.is-activa { opacity: 1; }

.lg-visual__velo {
    position: absolute;
    inset: 0;
    z-index: -1;
    /* Oscurece la mitad inferior para que el texto se lea sobre cualquier fotografía. */
    background: linear-gradient(180deg, rgba(8, 20, 16, .42) 0%, rgba(8, 20, 16, .1) 28%, rgba(8, 20, 16, .66) 56%, rgba(8, 20, 16, .93) 100%);
}

/* El paisaje ilustrado del acceso administrativo solo necesita sombra abajo, bajo el texto. */
.lg--admin .lg-visual__velo {
    background: linear-gradient(180deg, rgba(8, 20, 16, 0) 38%, rgba(8, 20, 16, .62) 68%, rgba(8, 20, 16, .9) 100%);
}

.lg-visual__svg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
}

.lg-visual__marca {
    position: absolute;
    top: clamp(2rem, 4vw, 3.5rem);
    left: clamp(2rem, 4vw, 3.5rem);
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .42rem .9rem;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 999px;
    background: rgba(8, 20, 16, .35);
    font: 600 .78rem/1.3 'Montserrat', sans-serif;
    color: rgba(255, 255, 255, .92);
}

.lg-visual__marca i {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--lg-gold-300);
}

.lg-visual__eyebrow {
    margin: 0;
    font: 700 .72rem/1.3 'Montserrat', sans-serif;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lg-gold-300);
}

.lg-visual__titulo {
    max-width: 22ch;
    margin: .7rem 0 0;
    font: 800 clamp(1.7rem, 1.1rem + 1.9vw, 2.6rem)/1.1 'Montserrat', sans-serif;
    letter-spacing: -.025em;
    text-wrap: balance;
}

.lg-visual__texto {
    max-width: 46ch;
    margin: .8rem 0 0;
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .85);
}

.lg-visual__credito {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 1.4rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, .22);
    font-size: .84rem;
    color: rgba(255, 255, 255, .86);
}

.lg-visual__credito[hidden] { display: none; }

.lg-visual__chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 1.3rem 0 0;
    padding: 0;
    list-style: none;
}

.lg-visual__chips li {
    padding: .35rem .8rem;
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 999px;
    background: rgba(8, 20, 16, .3);
    font: 600 .76rem/1.3 'Montserrat', sans-serif;
}

/* Paisaje de milpa del acceso administrativo: movimiento muy leve. */
@media (prefers-reduced-motion: no-preference) {
    .lg-visual__svg .al-cloud { animation: lg-nube 26s ease-in-out infinite alternate; }
    .lg-visual__svg .al-cloud--b { animation-duration: 34s; }
    .lg-visual__svg .al-corn { transform-box: fill-box; transform-origin: 50% 100%; animation: lg-mecer 5.5s ease-in-out infinite alternate; }
    .lg-visual__svg .al-corn--2 { animation-duration: 6.4s; }
    .lg-visual__svg .al-corn--4 { animation-duration: 7.1s; }
}

@keyframes lg-nube {
    from { transform: translateX(-14px); }
    to { transform: translateX(22px); }
}

@keyframes lg-mecer {
    from { transform: rotate(-1.6deg); }
    to { transform: rotate(1.6deg); }
}

@media (prefers-reduced-motion: reduce) {
    .lg-foto,
    .lg-submit,
    .lg-input input { transition: none; }
    .lg-submit__spinner { animation-duration: 1.4s; }
}

/* Pantallas bajas (teléfono acostado): el formulario arranca arriba en vez de centrarse. */
@media (max-height: 560px) {
    .lg-panel { align-items: flex-start; }
    .lg-kicker { margin-top: 1rem; }
}