:root{
    --login-overlay: rgba(0,0,0,.55);
}

/* NUEVO: asegurar fullscreen real */
html, body{
    height: 100%;
    margin: 0;
}

.login-bg{
    width: 100%;
    min-height: 100vh;
    position: relative;

    /* CAMBIO CLAVE: que cubra todo */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    transition: background-image 900ms ease-in-out;
}

.login-bg::before{
    content:"";
    position:absolute;
    inset:0;
    background: var(--login-overlay);
}

.login-center{
    position: relative;
    z-index: 2;
    min-height: 100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 24px;
}

.login-card{
    width: 100%;
    max-width: 430px;
    border: 0;
    border-radius: 18px;
    overflow: hidden;
    background: rgba(255,255,255,.10);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 18px 60px rgba(0,0,0,.35);
}

.login-card .card-body{
    padding: 28px;
    background: rgba(255,255,255,.06);
}

.login-title{ color: #fff; }
.login-muted{ color: rgba(255,255,255,.75); }

.login-card label{ color: rgba(255,255,255,.85); }

.login-card .form-control{ border-radius: 12px; }
.login-card .btn{ border-radius: 12px; }

.login-links a{
    color: rgba(255,255,255,.85);
    text-decoration: none;
}
.login-links a:hover{ text-decoration: underline; }

.login-brand{
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 2;
    color: rgba(255,255,255,.9);
    font-weight: 600;
    letter-spacing: .2px;
}
/* ====== FIX: romper el container del layout SOLO en login ====== */
.login-page .container,
.login-page main.container,
.login-page .container-fluid {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.login-page main.container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Fondo realmente fullscreen */
.login-page .login-bg{
    position: fixed;   /* clave: sale del flujo del container */
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* El overlay y el contenido encima del fondo */
.login-page .login-bg::before{ z-index: 1; }
.login-page .login-center{ position: relative; z-index: 2; }
/* Altura real de la navbar Bootstrap */
:root{
    --navbar-height: 56px;
}

/* El fondo ocupa toda la pantalla MENOS la navbar */
.login-bg{
    position: fixed;
    top: var(--navbar-height);
    left: 0;
    right: 0;
    bottom: 0;

    width: 100vw;
    height: calc(100vh - var(--navbar-height));

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    z-index: 0;
}

/* Overlay sigue cubriendo todo el fondo */
.login-bg::before{
    content:"";
    position:absolute;
    inset:0;
    background: rgba(0,0,0,.55);
}

/* El contenido (card) va encima */
.login-center{
    position: relative;
    z-index: 2;
    min-height: calc(100vh - var(--navbar-height));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

/* Evita que el container limite el ancho */
main.container{
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* Altura real de la navbar Bootstrap */
:root{
    --navbar-height: 56px;
}

/* El fondo ocupa toda la pantalla MENOS la navbar */
.login-bg{
    position: fixed;
    top: var(--navbar-height);
    left: 0;
    right: 0;
    bottom: 0;

    width: 100vw;
    height: calc(100vh - var(--navbar-height));

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    z-index: 0;
}

/* Overlay sigue cubriendo todo el fondo */
.login-bg::before{
    content:"";
    position:absolute;
    inset:0;
    background: rgba(0,0,0,.55);
}

/* El contenido (card) va encima */
.login-center{
    position: relative;
    z-index: 2;
    min-height: calc(100vh - var(--navbar-height));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

/* Evita que el container limite el ancho */
main.container{
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}