/* ===== Variables y base ===== */
:root {
    --brand-blue: #1a237e; /* MISMO azul de la barra lateral */
    --brand-blue-2: #3949ab;
    --brand-blue-3: #303f9f;
}

html, body {
    height: 100%;
}

body {
    background-color: #f4f6fa;
    margin: 0;
    padding: 0;
}

/* ===== Contenedor y fila principales ===== */
.container-fluid {
    min-height: 100vh;            /* ocupa al menos todo el alto */
    display: flex;
    flex-direction: column;       /* header/row/footer en columna */
}

/* La fila principal crece y estira sus columnas */
.container-fluid > .row {
    flex: 1 1 auto;               /* crece para ocupar el espacio */
    display: flex;
    align-items: stretch;         /* columnas a misma altura */
}

/* ===== Sidebar (columna estática en escritorio) ===== */
.sidebar,
.static-sidebar {
    background-color: var(--brand-blue);
    color: white;
}

/* La columna azul se estira con el row y admite scroll interno si es necesario */
.static-sidebar {
    align-self: stretch;          /* estira a la altura del row */
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1rem !important;
}

/* El contenedor del menú puede scrollear si es largo */
.sidebar {
    min-height: 100vh;            /* nunca menos que la pantalla */
    transition: all 0.3s ease;
    overflow-y: auto;
}

.sidebar .nav-link { color: white; }
.sidebar h4 { color: white; }
.sidebar .nav-link.active { background-color: var(--brand-blue-2); }
.sidebar .nav-link:hover { background-color: var(--brand-blue-3); }

/* ===== Columna principal (contiene topbar + contenido + footer) ===== */
#main-col{
    display:flex;
    flex-direction:column;        /* topbar arriba, contenido al medio, footer abajo */
    min-width: 0;                 /* evita desbordes de gráficos/tablas */
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Zona de contenido que crece entre topbar y footer */
.main-content{
    flex: 1 1 auto;
    padding: 1rem;
}

/* ===== Topbar (mismo color que la lateral) ===== */
.topbar {
    background-color: var(--brand-blue);
    color: #fff;
    border-bottom: none;
    padding: 10px 20px;
    position: sticky;
    top: 0;
    z-index: 1025;
}

.topbar .right-rail {
    background: transparent;
    border-left: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    padding: .25rem 0;
    margin-right: 0;
    flex: 1 1 auto;
}

.topbar .logout-link {
    color: #fff !important;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem .75rem;
    border-radius: .5rem;
}
.topbar .logout-link:hover { background: rgba(255,255,255,.08); }
.topbar i, .topbar strong { color: #fff; }

/* ===== Estado colapsado en escritorio ===== */
body.sidebar-collapsed .static-sidebar { width: 64px; }
body.sidebar-collapsed .static-sidebar .nav-link span { display: none; }
body.sidebar-collapsed .static-sidebar h4 { display: none; }
/* NO ajustar width de .topbar: la grid maneja el ancho */

/* ===== Móvil: offcanvas ===== */
@media (max-width: 768px) {
    .topbar { width: 100% !important; }
    .sidebar-toggle { display: block; }
}

/* ===== Utilidades ===== */
.card { height: 100%; }
canvas { max-width: 100%; }
/* === FIX: deja que la fila crezca con el contenido === */
.container-fluid {
    /* seguimos asegurando altura mínima de pantalla, pero NO es flex contenedor */
    min-height: 100vh;
    display: block; /* <-- antes lo teníamos en flex; volver a block */
}

    /* La row ya es flex (Bootstrap), pero NO la limites como item flex del padre */
    .container-fluid > .row {
        min-height: 100vh; /* sidebar al menos a 100vh */
        /* anulamos el flex del item para que crezca con el contenido */
        flex: initial !important; /* <-- quita el flex: 1 1 auto; */
        align-items: stretch; /* columnas misma altura */
    }

/* (opcional) si dejaste algún overflow en la columna principal, quítalo */
#main-col {
    overflow: visible; /* asegura que no se “encierre” el contenido */
}
/* === Sidebar fijo en ESCRITORIO (soluciona el corte del azul) === */
@media (min-width: 992px) {
    .static-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0; /* ocupa todo el alto aunque el contenido sea largo */
        width: 260px; /* ancho del sidebar (ajusta si quieres) */
        height: 100vh; /* garantiza altura completa de la ventana */
        z-index: 1030; /* por encima del contenido */
    }
    /* El contenedor principal se desplaza a la derecha del sidebar fijo */
    #main-col {
        margin-left: 260px; /* igual al width del sidebar */
        width: calc(100% - 260px);
    }
}

/* Para que el topbar quede alineado cuando el sidebar está fijo */
@media (min-width: 992px) {
    .topbar {
        border-left: 0; /* por si algún borde se cruza */
    }
}

/* Opcional: sombreado sutil del sidebar fijo */
@media (min-width: 992px) {
    .static-sidebar {
        box-shadow: 1px 0 0 rgba(0,0,0,.06);
    }
}
/* ====== SOLUCIÓN DEFINITIVA: FRANJA AZUL COMO CAPA FIJA DE FONDO ====== */
@media (min-width: 992px) {
    /* 1) FONDO AZUL FIJO pegado al borde izquierdo, ocupa SIEMPRE toda la ventana */
    body::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 260px; /* ancho del sidebar */
        background: var(--brand-blue);
        z-index: 1000; /* debajo del sidebar real */
    }

    /* 2) El sidebar real va encima, transparente para que se vea el azul del fondo */
    .static-sidebar {
        position: fixed !important;
        top: 0;
        left: 0;
        bottom: 0;
        width: 260px !important; /* mismo ancho que el fondo */
        height: 100vh;
        background: transparent !important; /* ¡clave! ya tenemos el azul detrás */
        z-index: 1030; /* por encima del body::before */
        overflow-y: auto;
        padding: 1rem !important;
    }

    /* 3) Mover la columna principal a la derecha del sidebar fijo */
    #main-col {
        margin-left: 260px !important;
        width: calc(100% - 260px) !important;
        overflow: visible;
    }
}

/* Si usas modo colapsado en escritorio */
@media (min-width: 992px) {
    body.sidebar-collapsed::before {
        width: 72px; /* ancho colapsado */
    }

    body.sidebar-collapsed .static-sidebar {
        width: 72px !important;
    }

    body.sidebar-collapsed #main-col {
        margin-left: 72px !important;
        width: calc(100% - 72px) !important;
    }
}