body {
    background-color: #f8f9fa;
}

/*
 * La cabecera superior (.navbar.sticky-top en header.php) y el panel lateral
 * (.sidebar .position-sticky en sidebar.php) son ambos elementos "sticky".
 * Bootstrap asigna a .sticky-top un z-index de 1020 por defecto, así que si
 * el menú lateral usara esa misma clase (o cualquier elemento con el mismo
 * z-index) competirían por la pila de apilamiento y, al hacer scroll, el que
 * apareciera despues en el HTML (el menú lateral) se dibujaría por encima de
 * la cabecera. Para evitarlo se fija explícitamente un z-index mayor para la
 * cabecera y se ancla el menú lateral justo debajo de ella (misma altura que
 * el navbar, ~56px).
 */
.navbar.sticky-top {
    z-index: 1030;
}

.sidebar .position-sticky {
    top: 56px;
    z-index: 1020;
}

.sidebar .nav-link {
    color: #212529;
}

.sidebar .nav-link.active,
.sidebar .nav-link.fw-bold {
    color: #0d6efd;
    font-weight: 600;
}

.sidebar .nav-link i {
    margin-right: .4rem;
    width: 1.2rem;
    display: inline-block;
    text-align: center;
}

.card .card-title {
    font-size: .95rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #6c757d;
}

.kpi-value {
    font-size: 1.9rem;
    font-weight: 700;
}

table.table-sticky thead th {
    position: sticky;
    top: 56px;
    background: #fff;
    z-index: 1;
}

@media print {
    .no-print, nav, .sidebar { display: none !important; }
    main { width: 100% !important; margin: 0 !important; }
}

/*
 * Pantalla de login: panel dividido en dos columnas a partir de "md"
 * (izquierda: color institucional + nombre de la app; derecha: formulario).
 * En pantallas estrechas la columna izquierda se oculta (d-none d-md-flex
 * en el HTML) y solo se muestra el formulario, centrado.
 */
body.login-page {
    background-color: #f1f3f5;
    min-height: 100vh;
}

.login-shell {
    min-height: 100vh;
    display: flex;
}

.login-aside {
    flex: 1 1 45%;
    background: linear-gradient(135deg, #0d6efd 0%, #0a4fb8 100%);
}

.login-main {
    flex: 1 1 55%;
}

.login-card {
    max-width: 380px;
}

/* Logo de la app (variante en blanco) en la pantalla de login. */
.login-logo {
    height: 64px;
    width: auto;
}

.login-logo-badge {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #0d6efd 0%, #0a4fb8 100%);
}

.login-logo-sm {
    height: 36px;
    width: auto;
}