:root {
    --sidebar-width: 280px;
    --primary-dark: #1a1c1e;
    --accent-blue: #0d6efd;
    --dashboard-highlight: #ff9800;
    --bg-light: #f4f7f6;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-light);
    overflow-x: hidden;
}

/* --- SIDEBAR --- */
#sidebar {
    width: var(--sidebar-width);
    height: 100vh;
    position: fixed;
    background: var(--primary-dark);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1050;
    color: white;
    display: flex;
    flex-direction: column;
}

/* LA RUEDA DEL MOUSE FUNCIONA AQUÍ */
.sidebar-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

    /* Scrollbar fina elegante */
    .sidebar-scroll::-webkit-scrollbar {
        width: 5px;
    }

    .sidebar-scroll::-webkit-scrollbar-track {
        background: rgba(255,255,255,0.05);
    }

    .sidebar-scroll::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,0.2);
        border-radius: 10px;
    }

        .sidebar-scroll::-webkit-scrollbar-thumb:hover {
            background: var(--dashboard-highlight);
        }

#sidebar.active {
    margin-left: calc(-1 * var(--sidebar-width));
}

.sidebar-header {
    padding: 25px;
    background: rgba(0,0,0,0.2);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    flex-shrink: 0;
}

#sidebar ul li a {
    padding: 12px 25px;
    display: flex;
    align-items: center;
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    font-size: 0.88rem;
    transition: 0.2s;
}

    #sidebar ul li a:hover {
        background: rgba(255,255,255,0.05);
        color: white;
    }

    #sidebar ul li a.active-link-dashboard {
        background: var(--dashboard-highlight) !important;
        color: #000 !important;
        font-weight: 700;
        border-left: 5px solid #fff;
    }

/* --- CONTENIDO --- */
#content {
    width: calc(100% - var(--sidebar-width));
    margin-left: var(--sidebar-width);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 100vh;
}

    #content.active {
        width: 100%;
        margin-left: 0;
    }

.main-navbar {
    padding: 12px 30px;
    background-color: #ffffff !important;
    position: sticky;
    top: 0;
    z-index: 1030;
    border-bottom: 1px solid #e0e0e0;
}

/* RESPONSIVO */
@media (max-width: 992px) {
    #sidebar {
        margin-left: calc(-1 * var(--sidebar-width));
    }

        #sidebar.active {
            margin-left: 0;
        }

    #content {
        width: 100%;
        margin-left: 0;
    }
}

.login-body {
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('../img/fondologi.png') center/cover;
    height: 100vh;
}

/* --- LOGIN REFORZADO (CENTRADITO) --- */
.login-body {
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('../img/fondologi.png') center/cover no-repeat fixed;
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Asegura que el div de contenido en el login sea transparente y centrado */
.login-content-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100vh;
}

/* El Card del Login */
.login-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(15px); /* Efecto cristal */
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 40px;
    width: 100%;
    max-width: 400px; /* Tamaño estándar de login */
    box-shadow: 0 15px 35px rgba(0,0,0,0.5);
    color: white;
}