:root {

    --color-primary: #98CE1A;
    --color-secondary: #164552;
    --color-accent: #B88731;

    --color-bg: #FEFEFD;
    --color-light: #BDC1A5;

    --color-text-dark: #164552;
    --color-text-light: #FFFFFF;

}


/* ===================================================== */
/* BOTONES */
/* ===================================================== */

.btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-primary:hover {
    background-color: #7fb315;
    border-color: #7fb315;
}

.btn-secondary {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
}

.btn-accent {
    background-color: var(--color-accent);
    color: white;
}


/* ===================================================== */
/* LOGIN */
/* ===================================================== */

.bg-login {
    background: linear-gradient(
        135deg,
        var(--color-secondary),
        var(--color-primary)
    );
}

.card-login {
    border-radius: 12px;
    border: none;
}

.text-primary-custom {
    color: var(--color-secondary);
}

.text-accent {
    color: var(--color-accent);
}


/* ===================================================== */
/* LAYOUT */
/* ===================================================== */

.layout {
    display: flex;
    width: 100%;
    min-height: 100vh;
}


/* ===================================================== */
/* SIDEBAR */
/* ===================================================== */

.sidebar {

    width: 240px;
    background: #124c56;
    color: white;

    transition: all .3s;
    overflow: visible;
    position: relative;
}


.sidebar .logo {
    text-align: center;
    padding: 15px;
}


/* ================= MENU ================= */

.menu-item {

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 10px 15px;

    color: white;
    text-decoration: none;
    cursor: pointer;
}

.menu-item:hover {
    background: #0f3f46;
}


.menu-item i {
    width: 20px;
    text-align: center;
}


/* ================= SUBMENU ================= */

.submenu a {

    display: flex;
    align-items: center;
    gap: 8px;

    padding: 8px 15px 8px 35px;

    color: white;
    text-decoration: none;
}

.submenu a:hover {
    background: #1f6f7c;
}


/* ================= ACTIVE ================= */

.menu-item.active {
    background: #98CE1A;
    color: black !important;
    font-weight: bold;
}

.submenu a.active {
    background: #B88731;
    color: white !important;
}


/* ===================================================== */
/* MAIN */
/* ===================================================== */

.main {
    flex: 1;
    min-width: 0;
    background: #f4f6f9;
}


/* ===================================================== */
/* TOPBAR */
/* ===================================================== */

.topbar {

    height: 50px;

    background: #124c56;
    color: white;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 15px;
}


/* ===================================================== */
/* CONTENT */
/* ===================================================== */

.content {
    padding: 15px;
}



/* ===================================================== */
/* SIDEBAR COLLAPSE */
/* ===================================================== */

.layout.sidebar-collapsed .sidebar {
    width: 70px;
}


/* ocultar SOLO texto */

.layout.sidebar-collapsed .menu-item span {
    display: none;
}

.layout.sidebar-collapsed .sidebar .logo div {
    display: none;
}


/* centrar iconos */

.layout.sidebar-collapsed .menu-item {
    justify-content: center;
}


/* iconos más grandes */

.layout.sidebar-collapsed .menu-item i {
    font-size: 18px;
}


/* ===================================================== */
/* SUBMENU FLOTANTE */
/* ===================================================== */

.layout.sidebar-collapsed .submenu {

    position: absolute;

    left: 70px;

    background: #124c56;

    min-width: 200px;

    display: none;

    z-index: 1000;
}


/* mostrar submenu cuando bootstrap lo abre */

.layout.sidebar-collapsed .collapse.show {
    display: block;
}