/* =========================
   Base / Reset
   ========================= */
html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

html, body {
    height: 100%;
    margin: 0;
}

/* Mantén el body limpio. NO margin-bottom fijo, NO overflow hidden global */
body {
    background-color: #f8f9fa; /* similar a bg-light */
}

/* Focus estilo bootstrap-friendly */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.25rem #258cfb;
}

/* Placeholder (si usas form-floating) */
.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* =========================
   Topbar (layout normal)
   ========================= */
.topbar-custom {
    background-color: #51565d !important;
    color: #ffffff;
}

    .topbar-custom .navbar-brand,
    .topbar-custom .nav-link {
        color: #ffffff !important;
    }

        .topbar-custom .nav-link:hover {
            color: #e5e5e5 !important;
        }

/* =========================
   Login Page (layout login)
   ========================= */

/* Bloquea el scroll SOLO en el login (evita scroll fantasma) */
body.login-page {
    overflow: hidden;
}

/* Wrapper del login dentro del <main> */
.login-main {
    height: 100%;
}

/* Panel de video */
.video-panel {
    position: relative;
    overflow: hidden;
    background: #111;
}

    .video-panel video {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        object-fit: cover;
    }

/* Overlay del video */
.video-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.15));
}

/* Badge texto sobre el video */
.brand-badge {
    position: relative;
    z-index: 2;
    color: #fff;
    padding: 24px;
}
.login-logo {
    height: 200px;
    width: auto;
    display: inline-block;
}

/* Si tu logo es oscuro y va sobre el video, lo blanqueamos */
.login-logo--light {
    filter: brightness(0) invert(1);
}
.login-card-logo {
    height: 100%; /* ajusta 56-80 según tu logo */
    width: auto;
    max-width: 100%;
    display: inline-block;
}
.auth-card {
    background: #fff;
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
}
/* Auth layout: estilo tipo adjunto */
.auth-page .auth-left {
    background-image: url('/img/login-bg.jpg'); /* cambia el nombre si ya tienes otro */
    background-size: cover;
    background-position: center;
    filter: blur(0px);
}

/* Si quieres el look “bokeh” suave como el adjunto */
.auth-page .auth-left {
    position: relative;
}

    .auth-page .auth-left::after {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,0.15);
        backdrop-filter: blur(2px);
    }