/* 2026-11-07: la pantalla de entrada. Es la primera impresión del sistema y la única que ve
   alguien que todavía no es cliente, así que vale la pena que se vea bien. */

.lg-fondo {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
    background: #0f172a;
}

/* Dos manchas de color desenfocadas: dan profundidad sin pesar como una imagen de fondo, que
   habría que servir, cachear y además se ve mal en pantallas angostas. */
.lg-fondo::before,
.lg-fondo::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .5;
    pointer-events: none;
}

.lg-fondo::before { width: 420px; height: 420px; background: #1E40AF; top: -120px; left: -90px; }
.lg-fondo::after  { width: 380px; height: 380px; background: #0EA5E9; bottom: -140px; right: -80px; }

.lg-caja {
    position: relative;
    width: 100%;
    max-width: 400px;
    padding: 2.4rem 2rem 2rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 2px 6px rgba(0,0,0,.12), 0 28px 60px -22px rgba(0,0,0,.6);
}

.lg-marca { text-align: center; margin-bottom: 1.8rem; }

.lg-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 17px;
    margin-bottom: .9rem;
    background: linear-gradient(135deg, #1E40AF, #0EA5E9);
    color: #fff;
    box-shadow: 0 8px 20px -8px rgba(30, 64, 175, .7);
}

.lg-marca h1 { margin: 0; font-size: 1.5rem; font-weight: 750; letter-spacing: -.02em; color: #0f172a; }
.lg-marca p  { margin: .2rem 0 0; font-size: .85rem; color: #64748b; }

.lg-campo { margin-bottom: .9rem; }

.lg-campo label {
    display: block;
    font-size: .78rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: .3rem;
}

.lg-campo input {
    width: 100%;
    padding: .78rem .9rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 11px;
    background: #f8fafc;
    font: inherit;
    font-size: .95rem;
    color: #0f172a;
    transition: border-color .12s, background-color .12s;
}

.lg-campo input:focus {
    outline: none;
    border-color: #1E40AF;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(30, 64, 175, .12);
}

.lg-entrar {
    width: 100%;
    margin-top: .5rem;
    padding: .85rem 1rem;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, #1E40AF, #2563EB);
    color: #fff;
    font: inherit;
    font-size: .98rem;
    font-weight: 650;
    cursor: pointer;
    box-shadow: 0 8px 20px -8px rgba(30, 64, 175, .75);
    transition: transform .12s;
}

.lg-entrar:hover { transform: translateY(-1px); }
.lg-entrar:active { transform: translateY(0); }

/* --- entrar con huella --- */

/* Oculto por omisión: lo muestra passkeys.js solo si el navegador y el aparato lo permiten.
   Un botón de huella que no hace nada es peor que no tenerlo. */
.lg-huella {
    display: none;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    width: 100%;
    margin-top: .9rem;
    padding: .8rem 1rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    font: inherit;
    font-size: .93rem;
    font-weight: 600;
    color: #1e293b;
    cursor: pointer;
    transition: border-color .12s, background-color .12s;
}

.lg-huella:hover { border-color: #1E40AF; background: #f8fafc; }
.lg-huella.ocupado { opacity: .6; cursor: default; }

/* Cuando este aparato ya tiene una passkey activada, el camino rápido es el principal. */
.lg-huella.destacado {
    border-color: #1E40AF;
    background: rgba(30, 64, 175, .06);
    color: #1E40AF;
}

.lg-o {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin: 1.2rem 0 .2rem;
    font-size: .76rem;
    color: #94a3b8;
}

.lg-o::before, .lg-o::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e2e8f0;
}

.passkey-msg {
    display: none;
    margin-top: .8rem;
    padding: .6rem .8rem;
    border-radius: 10px;
    font-size: .85rem;
}

.passkey-msg.error { background: #fef2f2; color: #b91c1c; }
.passkey-msg.ok    { background: #f0fdf4; color: #15803d; }
.passkey-msg.info  { background: #f0f9ff; color: #0369a1; }

.lg-pie { margin-top: 1.6rem; text-align: center; font-size: .75rem; color: #94a3b8; }