/* Pantalla de inicio de sesión del DAM.
   Consume los tokens de tokens.css — cargar siempre antes que este archivo. */

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font);
    background: var(--grad-navy);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

:focus-visible { outline: 2px solid var(--cian); outline-offset: 2px; border-radius: 4px; }

.login-card {
    max-width: 460px; width: 100%; text-align: center;
    padding: 48px 40px; border-radius: var(--radio);
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(6px);
}
.login-logo { height: 34px; margin-bottom: 18px; }
.login-eyebrow { display: block; font-weight: 700; letter-spacing: .06em; font-size: .74rem; text-transform: uppercase; color: var(--cian); margin-bottom: 14px; }
.login-card h1 { margin: 0 0 10px; font-size: 1.55rem; font-weight: 800; }
.login-card h1 span { color: var(--menta); }
.login-lead { margin: 0 0 28px; font-size: .92rem; color: rgba(255,255,255,.65); line-height: 1.55; }
.login-error {
    margin: 0 0 24px; padding: 12px 16px; border-radius: 10px;
    background: rgba(220,74,74,.14); border: 1px solid rgba(220,74,74,.45);
    color: #ffb4b4; font-size: .86rem; line-height: 1.5;
}
.login-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 13px 26px; border-radius: 999px;
    background: #fff; color: var(--navy); text-decoration: none;
    font-weight: 700; font-size: .95rem;
    transition: transform .15s ease, box-shadow .15s ease;
}
.login-btn:hover { transform: translateY(-2px); box-shadow: var(--sombra-oscura); }
.login-foot { margin: 30px 0 0; font-size: .74rem; color: rgba(255,255,255,.38); }