/* Uses the shared brand tokens from variables.css (--bg-primary,
   --text-primary, --accent-primary, --font-main) instead of its own
   competing --accent/--bg pair — this page used to look like a different
   product from the rest of the site. */

/* No align-items:center on body — with a card taller than the viewport
   (email/password + Turnstile), that clips its top off-screen with no
   way to scroll up to it (classic flexbox-centering overflow bug). Same
   root cause already fixed in the other apps' AuthShell.jsx via
   min-h-screen + overflow-y-auto + margin:auto on the card instead of
   centering the whole flex container — mirrored here. */
body {
    margin: 0;
    /* padding-top reserva el alto real de <grakkad-bar> (var publicada por el
       propio componente al cargar, 0px de respaldo antes de eso) más el
       margen original de 2rem — sin esto el body no sabe que la barra fixed
       existe y la tarjeta arranca debajo de ella, tapada. */
    padding: calc(var(--grakkad-bar-height, 0px) + 2rem) 0 2rem;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-main);
    overflow-y: auto;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    box-sizing: border-box;
}

/* Grakkad ecosystem bar (Fase 3): en cada otra app es el primer bloque
   normal de <body> y ocupa el ancho completo sin ayuda — acá body es un
   flex container que centra su contenido, así que <grakkad-bar> (otro
   hijo más del flex) terminaba angosto y flotando a mitad de página en vez
   de fijo arriba. La propia hoja de estilos del componente pone
   `:host{ position:relative }`, así que hace falta más especificidad que
   un simple selector de elemento para ganarle desde acá — de ahí el
   !important, no una elección al azar. Sacarlo del flujo flex con
   position:fixed no descentra el login-box: solo queda un hijo del flex
   (el resto sigue centrado igual que antes). */
grakkad-bar {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
}

/* Abstract Background */
.bg-gradient {
    position: absolute;
    /* top/left explicitos: sin esto, un position:absolute sin top/left usa su
       posicion ESTATICA (donde caeria en flujo normal) como valor por
       defecto — es decir, empujado por el padding-top del body. Con el
       padding-top fijo de 2rem eso daba una franja de 32px invisible
       (mismo color que el borde del propio degrade), pero al pasar el
       padding-top a calc(var(--grakkad-bar-height)+2rem) la franja crecio a
       84px y quedo visible como una barra negra solida entre la barra del
       ecosistema y el degrade real. */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%, var(--bg-secondary) 0%, var(--bg-primary) 100%);
    z-index: -1;
}

.bg-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    filter: blur(80px);
}

/* Wraps .login-box + the footer text below it — mirrors the other apps'
   AuthShell structure (max-w-sm flex-col items-center gap-6 m-auto) so
   the card itself stays the same height everywhere; only this wrapper
   carries the max-width/centering, not the card. */
.login-wrap {
    width: 100%;
    max-width: 384px;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.login-box {
    width: 100%;
    padding: 4rem 3rem;
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 2px;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.8);
    text-align: center;
    animation: fadeIn 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.logo {
    font-size: 1.125rem;
    line-height: 1.4;
    letter-spacing: 0.15rem;
    font-weight: 200;
    margin-bottom: 2.5rem;
    color: var(--text-primary);
}

.form-group {
    position: relative;
    margin-bottom: 2.5rem;
    text-align: left;
}

.form-label {
    display: block;
    font-size: 0.65rem;
    letter-spacing: 0.2rem;
    color: var(--text-secondary);
    margin-bottom: 0.8rem;
    text-transform: uppercase;
}

.form-input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 0.8rem 0;
    font-size: 1rem;
    font-weight: 300;
    font-family: var(--font-main);
    transition: border-color 0.4s;
    box-sizing: border-box;
}

.form-input:focus {
    outline: none;
    border-bottom-color: var(--accent-primary);
}

.btn-login {
    width: 100%;
    background: var(--accent-primary);
    color: var(--bg-primary);
    border: none;
    border-radius: var(--border-radius-sm);
    padding: 1.2rem;
    font-size: 0.75rem;
    letter-spacing: 0.3rem;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    margin-top: 1rem;
    transition: var(--transition-fast);
}

.btn-login:hover {
    background: var(--accent-hover);
    transform: scale(1.02);
}

.error-msg {
    color: #ff4d4d;
    font-size: 0.75rem;
    margin-top: 1.5rem;
    display: none;
    font-weight: 300;
}

/* Sibling of .login-box now (not a child) — .login-wrap's own gap
   provides the space above, so no margin-top here. */
.login-footer {
    text-align: center;
}

.footer-link {
    font-size: 0.7rem;
    color: var(--text-secondary);
    opacity: 0.7;
    letter-spacing: 0.1rem;
}

.footer-copyright {
    margin-top: 0.6rem;
    font-size: 0.55rem;
    color: var(--text-secondary);
    opacity: 0.35;
    letter-spacing: normal;
}