/*==================================================

  SIDEBAR - DULKO v1.0

==================================================*/

.dulko-layout {

    display: flex;

    min-height: calc(100vh - var(--header-height));

    align-items: flex-start;

}



/*==================================================

  SIDEBAR

==================================================*/



.dulko-sidebar {

    width: 260px;

    min-width: 260px;

    background: #FFF;

    border-right: 1px solid #ECECEC;

    transition: all .30s ease;

    overflow-x: hidden;

    overflow-y: auto;

    box-shadow: 2px 0 12px rgba(0,0,0,.05);

    scrollbar-width: thin;

    scrollbar-color: #B8B8B8 transparent;

}



    .dulko-sidebar::-webkit-scrollbar {

        width: 7px;

    }



    .dulko-sidebar::-webkit-scrollbar-track {

        background: transparent;

    }



    .dulko-sidebar::-webkit-scrollbar-thumb {

        background: #C8C8C8;

        border-radius: 20px;

    }



        .dulko-sidebar::-webkit-scrollbar-thumb:hover {

            background: #A8A8A8;

        }



    /*==================================================

  SIDEBAR CONTRAÍDO

==================================================*/



    .dulko-sidebar.collapsed {

        width: 70px;

        min-width: 70px;

    }



        .dulko-sidebar.collapsed span {

            opacity: 0;

            visibility: hidden;

        }



        .dulko-sidebar.collapsed .menu-item {

            justify-content: center;

            padding: 0;

            width: 70px;

            overflow: hidden;

        }



            .dulko-sidebar.collapsed .menu-item i {

                margin: 0;

                width: 100%;

                text-align: center;

                font-size: 20px;

            }



            .dulko-sidebar.collapsed .menu-item span {

                display: none;

            }



/*==================================================

    TABS SIDEBAR

==================================================*/



.sidebar-tabs {

    display: flex;

    margin: 20px 16px 18px;

    padding: 4px;

    background: #F4F5F7;

    border: 1px solid #E6E8EC;

    border-radius: 18px;

    overflow: hidden;

    box-shadow: inset 0 1px 2px rgba(255,255,255,.8), inset 0 -1px 2px rgba(0,0,0,.03);

}



/*==================================================

    TAB

==================================================*/



.sidebar-tab {

    flex: 1;

    padding: 11px 10px;

    border: none;

    background: transparent;

    border-radius: 12px;

    color: #7B7B7B;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

    text-decoration: none;

    transition: background .25s, color .25s, box-shadow .25s;

    cursor: pointer;

}



    .sidebar-tab:hover {

        color: var(--color-principal);

    }



    .sidebar-tab.active {

        background: #FFFFFF;

        color: var(--color-principal);

        box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);

    }



    .sidebar-tab:focus {

        outline: none;

    }





/*==================================================

  MENÚ

==================================================*/



.dulko-sidebar-menu {

    display: flex;

    flex-direction: column;

    padding: 8px 15px 0;

}



/*==================================================

  ITEMS

==================================================*/



.menu-item {

    display: flex;

    align-items: center;

    gap: 15px;

    height: 48px;

    padding: 0 20px;

    color: #4D2A7A;

    text-decoration: none;

    font-size: 15px;

    font-weight: 500;

    transition: .25s;

    white-space: nowrap;

}



    /*==================================================

  ICONOS

==================================================*/



    .menu-item i {

        width: 26px;

        text-align: center;

        font-size: 18px;

    }



    /*==================================================

  TEXTO

==================================================*/



    .menu-item span {

        transition: .25s;

    }



    /*==================================================

  HOVER

==================================================*/



    .menu-item:hover {

        background: #F4F0FA;

        color: #4D2A7A;

    }



    /*==================================================

  ACTIVO

==================================================*/



    .menu-item.active {

        background: #4D2A7A;

        color: #FFF;

        border-radius: 0 12px 12px 0;

    }



/*==================================================

  CONTENIDO

==================================================*/



.dulko-main {

    flex: 1;

    min-width: 0;

    padding: 25px;

    transition: .30s;

    min-height: calc(100vh - var(--header-height));

    overflow-x: hidden;

}



/*==================================================

    TABLET / MOBILE

==================================================*/



@media (max-width:991px) {



    .dulko-layout {

        display: block;

    }



    .dulko-main {

        width: 100%;

        padding: 20px;

    }



    .dulko-sidebar {

        position: fixed;

        top: var(--header-height);

        bottom: 90px; /* deja espacio para el bottom nav */

        left: -270px;

        width: 260px;

        overflow-y: auto;

        overflow-x: hidden;

        -webkit-overflow-scrolling: touch;

        background: #FFF;

        box-shadow: 0 10px 30px rgba(0,0,0,.18);

        transition: left .30s ease;

        z-index: 2500;

        touch-action: pan-y;

        overscroll-behavior: contain;

    }



        .dulko-sidebar.open {

            left: 0;

        }



    .dulko-sidebar-menu {

        padding: 15px 0 25px;

    }

}



/*==================================================

    MENU DESPLEGABLE

==================================================*/



.menu-group {

    display: flex;

    flex-direction: column;

}



.menu-toggle {

    justify-content: space-between;

    cursor: pointer;

    user-select: none;

}



.menu-left {

    display: flex;

    align-items: center;

    gap: 15px;

}



.flecha {

    width: auto !important;

    font-size: 13px !important;

    transition: .30s;

    color: #A18BBB;

}



.menu-group.open .flecha {

    transform: rotate(180deg);

}



/*==================================================

    SUBMENU

==================================================*/



.submenu {

    max-height: 0;

    overflow: hidden;

    transition: max-height .35s ease;

    margin-left: 18px;

    border-left: 2px solid #E5D7F8;

}



.menu-group.open .submenu {

    max-height: 400px;

}



.submenu a {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 12px 18px;

    text-decoration: none;

    color: #6B5A82;

    font-size: 14px;

    border-radius: 12px;

    margin: 4px 0 4px 12px;

    transition: .25s;

}



    .submenu a i {

        width: 18px;

        text-align: center;

        font-size: 13px;

        color: #8D63C4;

    }



    .submenu a:hover {

        background: #F7F2FD;

        color: #4D2A7A;

        transform: translateX(4px);

    }



    .submenu a.active {

        background: #EFE5FC;

        color: #4D2A7A;

        font-weight: 700;

    }