/* 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; }

/* 2026-11-08: antes era un cuadro con degradado y un icono de MudBlazor dentro. Ahora es el logo
   de verdad (el mismo PNG que se instala en el telefono), para que lo que ve al entrar sea lo
   mismo que ve en su pantalla de inicio. El cuadro azul ya viene dibujado en la imagen. */
.lg-icono {
    display: inline-block;
    width: 64px;
    height: 64px;
    margin-bottom: .9rem;
    border-radius: 17px;
    box-shadow: 0 8px 20px -8px rgba(23, 37, 84, .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; }

/* =====================================================================================
   2026-11-08: el registro (/registro). Reusa lg-fondo, lg-caja, lg-campo y lg-entrar;
   aqui solo lo que esa pantalla necesita de mas.
   ===================================================================================== */

/* El formulario es mas largo que el de entrar: en una pantalla de escritorio una caja de
   420px con ocho campos se ve como un tubo. */
.rg-caja { max-width: 480px; }

/* La direccion publica, en vivo mientras escribe el nombre. Es lo que hace que entienda de
   golpe que lo que esta creando es una pagina que sus clientes van a abrir. */
.rg-slug {
    margin-top: .4rem;
    font-size: .8rem;
    color: #475569;
    background: #EFF6FF;
    border: 1px solid #DBEAFE;
    border-radius: 9px;
    padding: .45rem .6rem;
    word-break: break-all;
}
.rg-slug b { color: #1D4ED8; font-weight: 650; }

.rg-nota { margin-top: .35rem; font-size: .76rem; color: #64748b; line-height: 1.35; }
.rg-opcional { font-weight: 400; color: #94a3b8; }

/* Separa "de que es el negocio" de "quien es usted": son dos preguntas distintas y en una
   columna de ocho campos iguales se leen como una sola lista interminable. */
.rg-separador {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin: 1.4rem 0 1rem;
    color: #94a3b8;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.rg-separador::before,
.rg-separador::after { content: ""; flex: 1; height: 1px; background: #e2e8f0; }

.lg-campo select {
    width: 100%;
    padding: .62rem .7rem;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    font-size: .95rem;
    font-family: inherit;
    background: #fff;
    color: #0f172a;
}
.lg-campo select:focus { outline: none; border-color: #1D4ED8; box-shadow: 0 0 0 3px rgba(29,78,216,.12); }

.lg-registro { margin-top: .9rem; }
.lg-registro a { color: #1D4ED8; font-weight: 650; text-decoration: none; }
.lg-registro a:hover { text-decoration: underline; }