/* public/assets/css/pages/auth.css
   Especifico de la pagina de login (APP/views/auth/login.php). A diferencia
   de los archivos en css/components/, esto no es un componente reutilizable
   en otras pantallas: es el layout propio de /login (panel visual + tarjeta
   de acceso), con la gama del color_principal por defecto (#0076A5, no hay
   usuario logueado todavia). */

body.auth-login-page {
    /* calc(.../var(--app-escala-compacta)): compensa el "zoom" compacto de
       base.css (ver esa variable en base.css) para que el login siga
       ocupando exactamente una pantalla sin hueco de mas ni scroll. */
    height: calc(100vh / var(--app-escala-compacta));
    overflow: hidden;
}

body.auth-login-page .app-header {
    display: none;
}

body.auth-login-page .app-main {
    max-width: 100%;
    width: 100%;
    padding: 0;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
}

body.auth-login-page .app-footer {
    flex: 0 0 auto;
    padding: var(--app-space-sm) var(--app-space-md);
}

.auth-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    background:
        radial-gradient(circle at top left, rgba(var(--app-primary-rgb), 0.18), transparent 32%),
        radial-gradient(circle at bottom right, rgba(var(--app-tono-75-rgb), 0.28), transparent 30%),
        var(--app-bg);
}
@media (min-width: 1021px) {
    .auth-wrapper { grid-template-columns: minmax(0, 1fr) 520px; }
}

.auth-visual {
    display: none;
    position: relative;
    min-height: 0;
    align-items: center;
    padding: clamp(1.5rem, 4vw, 4rem);
    color: var(--app-on-primary);
    background: linear-gradient(135deg, rgba(var(--app-primary-rgb), 0.94) 0%, rgba(var(--app-primary-dark-rgb), 0.96) 60%, rgba(15, 23, 42, 0.96) 100%);
    overflow: hidden;
}
@media (min-width: 1021px) {
    .auth-visual { display: flex; }
}

.auth-visual::after {
    content: "";
    position: absolute;
    right: -140px;
    bottom: -140px;
    width: 360px;
    height: 360px;
    border-radius: 999px;
    background: rgba(var(--app-tono-75-rgb), 0.28);
}

.auth-visual::before {
    content: "";
    position: absolute;
    left: -90px;
    top: -90px;
    width: 220px;
    height: 220px;
    border-radius: 999px;
    background: rgba(var(--app-tono-75-rgb), 0.16);
}

.auth-visual-content { position: relative; z-index: 1; max-width: 680px; max-height: 100%; overflow-y: auto; }

.auth-pill {
    display: inline-flex;
    align-items: center;
    margin-bottom: 1.1rem;
    padding: .45rem .85rem;
    border-radius: 999px;
    color: var(--app-on-primary);
    font-size: .9rem;
    font-weight: 700;
    background: rgba(var(--app-on-primary-rgb), 0.14);
    border: 1px solid rgba(var(--app-on-primary-rgb), 0.20);
}

.auth-visual-title {
    max-width: 720px;
    margin: 0;
    color: var(--app-on-primary);
    font-size: clamp(1.9rem, 4vw, 3rem);
    line-height: 1.05;
    font-weight: 900;
}

.auth-visual-content p { max-width: 560px; margin: 1.2rem 0 0; color: rgba(var(--app-on-primary-rgb), 0.78); font-size: 1.05rem; line-height: 1.5; }

.auth-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; margin-top: 1.6rem; }
.auth-feature { min-width: 0; padding: 1rem; border-radius: var(--app-radius-md); background: rgba(var(--app-on-primary-rgb), 0.12); border: 1px solid rgba(var(--app-on-primary-rgb), 0.16); backdrop-filter: blur(12px); }
.auth-feature span { display: block; margin-bottom: .45rem; color: var(--app-tono-75); font-size: .85rem; font-weight: 700; }
.auth-feature strong { display: block; color: var(--app-on-primary); font-size: .98rem; line-height: 1.25; }

.auth-panel { min-height: 0; display: flex; align-items: center; justify-content: center; padding: var(--app-space-lg) var(--app-space-md); overflow-y: auto; }
@media (min-width: 1021px) {
    .auth-panel { padding: clamp(1rem, 3vw, 2.5rem); }
}

.auth-card {
    width: 100%;
    max-width: 440px;
    background: var(--app-surface);
    border-radius: var(--app-radius-lg);
    padding: var(--app-space-lg) var(--app-space-md);
    box-shadow: var(--app-shadow-card);
    border: 1px solid var(--app-border-soft);
    margin: auto;
}
@media (min-width: 421px) {
    .auth-card {
        border-radius: var(--app-radius-xl);
        padding: clamp(var(--app-space-lg), 3vw, var(--app-space-xl));
    }
}

.auth-brand { text-align: center; margin-bottom: var(--app-space-lg); }
.auth-logo { display: flex; justify-content: center; margin-bottom: var(--app-space-md); }
/* logo_system.png es blanco: necesita un fondo de color (degradado de marca)
   para verse, a diferencia del logo del nav que flota libre cuando es oscuro. */
.auth-logo-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--app-space-sm) var(--app-space-md);
    border-radius: var(--app-radius-md);
    background: var(--app-gradient);
    box-shadow: 0 10px 24px rgba(var(--app-primary-rgb), 0.28);
}
.auth-logo img { max-width: 130px; max-height: 60px; object-fit: contain; }

.auth-title { margin: 0; font-size: var(--app-text-xl); line-height: 1.2; color: var(--app-text); font-weight: 700; letter-spacing: -0.03em; }
.auth-subtitle { margin: var(--app-space-sm) 0 0; font-size: var(--app-text-sm); color: var(--app-text-soft); line-height: 1.5; }

.auth-form { display: flex; flex-direction: column; gap: var(--app-space-md); }
.auth-form .form-group { display: flex; flex-direction: column; gap: var(--app-space-sm); margin: 0; }
.auth-form .form-group label { font-size: var(--app-text-sm); font-weight: 700; color: #334155; }
.auth-form .form-group input {
    min-height: 46px;
    padding: var(--app-space-md) var(--app-space-md);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-md);
    font-size: var(--app-text-md);
    background: var(--app-surface-soft);
    color: var(--app-text);
    width: 100%;
}
.auth-form .form-group input:focus { outline: none; border-color: var(--app-primary); background: var(--app-surface); }

.btn-auth {
    margin-top: var(--app-space-xs);
    width: 100%;
    border: none;
    border-radius: var(--app-radius-md);
    padding: var(--app-space-md) var(--app-space-lg);
    cursor: pointer;
    font-size: var(--app-text-md);
    font-weight: 600;
    color: var(--app-on-primary);
    /* Overlay oscuro (mismo patron que header.css/footer.css/.app-button):
       sin el, el extremo mas claro de --app-gradient (--app-tono-75) pierde
       contraste contra el texto blanco y se lee borroso. */
    background: linear-gradient(rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.22)), var(--app-gradient);
    box-shadow: 0 14px 28px rgba(var(--app-primary-rgb), 0.22);
    transition: transform .2s ease, box-shadow .2s ease;
}
.btn-auth:hover { transform: translateY(-1px); box-shadow: 0 18px 36px rgba(var(--app-primary-rgb), 0.28); }

.auth-footer { margin-top: var(--app-space-lg); text-align: center; }
.auth-footer p { margin: 0 0 var(--app-space-xs); font-size: var(--app-text-xs); color: var(--app-text-muted); }
.auth-footer p:last-child { margin-bottom: 0; }
.auth-footer a { color: var(--app-primary); font-weight: 700; }
.auth-footer a:hover { text-decoration: underline; }

@media (max-height: 700px) {
    .auth-card { padding: var(--app-space-lg); }
    .auth-brand { margin-bottom: var(--app-space-md); }
    .auth-logo { margin-bottom: var(--app-space-sm); }
    .auth-logo img { max-height: 42px; }
    .auth-form { gap: var(--app-space-md); }
}