:root {
    --width: 250px;          /* Ancho del sidebar expandido */
    --collapsed-width: 70px; /* Ancho del sidebar colapsado */
}

/* Estilos globales */
body.has-sidebar {
    transition: margin-left 0.3s cubic-bezier(0.45, 0.05, 0.23, 0.97);
}


.custom-sidebar-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 1000;
}

/* Sidebar */
.sidebar {
    width: var(--width);
    height: 100vh;
    background: linear-gradient(137deg, #1e1e1e 0%, #303030 35%, #000000 100%);
    color: #fff;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1;
    overflow-x: hidden;
    border-right: 1px solid #1A1A1A;
}

/* Estilos para los elementos span dentro de los enlaces */
.sidebar nav ul li a span {
    opacity: 1;
    transition: opacity 0.6s ease-in-out; /* Duración y suavidad de la opacidad */
}

/* Colapsar sidebar */
body.sidebar-collapsed .sidebar {
    width: var(--collapsed-width);
}

.sidebar .logo {
    padding: 5px !important;
    text-align: left;
    background-color: #1A1A1A;
    color: #fff;
    max-height: 60px !important;
    min-height: 60px !important;
    display: flex;
    align-items: center;
    transition: margin-left 0.8s cubic-bezier(0.45, 0.05, 0.23, 0.97);
}

.sidebar nav ul {
    list-style: none;
    padding: 0;
    margin-top: 10px !important;
    margin-left: 0px !important;
}

.sidebar nav ul li {
    padding: 9px;
    transition: max-width 0.6s ease-in-out, opacity 0.6s ease-in-out;
    margin: 7px 14px;
    border-radius: 13px;
}

body.sidebar-collapsed  .sidebar nav ul li {
    margin: 9px;
}

.sidebar nav ul li:hover {
    background-color: #444;
}

.sidebar nav ul li a {
    color: #fff;
    text-decoration: none;
    display: flex !important;
    align-items: center !important;
}

.menu-svg-icon {
    width: 30px;
    height: 30px;
    margin-right: 10px;
}
@media (min-width: 769px) {
    .toggle-sidebar-btn {
    position: absolute;
    top: 0px;
    border-radius: 0px 0px 10px 0px;
    left: var(--width);
    cursor: pointer;
    background-color: transparent;
    color: #fff;
    padding: 5px;
    z-index: 0;
    transition: left 0.3s ease-in-out;
    width: 55px !important;
    border: none !important;
    }
body.sidebar-collapsed .toggle-sidebar-btn {
    left: var(--collapsed-width) !important;
    }
    body.sidebar-collapsed {
        margin-left: 70px !important;
    }

body.sidebar-collapsed {
    margin-left: 70px !important; /* Mantiene el margen colapsado */
    }
    .sidebar {
    transition: width 0.3s cubic-bezier(0.45, 0.05, 0.23, 0.97);
    }
    body.has-sidebar {
    margin-left: 250px !important; /* Margen izquierdo para el sidebar expandido */
}

body.sidebar-collapsed.has-sidebar {
    margin-left: 70px !important; /* Margen izquierdo para el sidebar colapsado */
    }
}

/* Nueva clase para la animación de desvanecimiento */
.sidebar.fade-out {
    opacity: 0; /* Comienza completamente transparente */
    transition: opacity 0.3s ease; /* Duración y tipo de transición */
}

.sidebar.fade-in {
    opacity: 1; /* Termina completamente visible */
    transition: opacity 0.3s ease; /* Duración y tipo de transición */
}

button:hover, button:focus {
    background-color: transparent !important;
    }
    
.content {
    margin-left: var(--width);
    padding: 20px;
    transition: margin-left 0.2s cubic-bezier(0.45, 0.05, 0.23, 0.97);
}

/* Colapsar sidebar */
.sidebar.collapsed {
    width: var(--collapsed-width);
}

body.sidebar-collapsed .content {
    margin-left: var(--collapsed-width);
    transition: margin-left 0.3s cubic-bezier(0.45, 0.05, 0.23, 0.97); /* Asegúrate de que esta transición también esté sincronizada */
}

/* Responsivo */
@media (max-width: 768px) {
    .sidebar {
        width: var(--width); /* Ancho del sidebar en móviles */
        left: 0;
        transition: width 0.3s cubic-bezier(0.48, 0.22, 0, 1.27);
    overflow-x: hidden;
    border-right: 0px solid #1A1A1A;
        
    }

    .sidebar.collapsed {
        width: var(--collapsed-width); /* Ancho del sidebar colapsado */
        left: var(--collapsed-width); /* Asegúrate de que se colapse correctamente */
    }

    .toggle-sidebar-btn {
        bottom: 20px;
        right: 20px;
        bottom: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 100px;
        position: fixed;
        z-index: 1001;
        transition: left 0.3s ease-in-out;
        left: unset !important;
        width: 65px!important;
        height: 65px!important;
        max-width: 65px!important;
    }
    .content {
        margin-left: 0; /* Resetear margen en móvil cuando esté colapsado */
    }

    :root {
        --width: 250px;          /* Ancho del sidebar expandido */
        --collapsed-width: 0;    /* Ancho del sidebar colapsado */
    }

    body.sidebar-collapsed .toggle-sidebar-btn {
        bottom: 20px !important;
        right: 20px !important;
        height: 65px;
        bottom: 20px;
        width: 65px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 100px;
        position: fixed !important;
        z-index: 1001;
        transition: left 0.3s ease-in-out;
    }

    body.sidebar-collapsed .sidebar .logo {
        opacity: 0 !important;
        transition: opacity 0s !important;
        margin-bottom: 10px;
    }

    /* Fondo negro semi-transparente */
    .overlay {
        position: fixed;
        top: 0!important;
        bottom: 0px!important;
        left: 0!important;
        width: 100%!important;
        height: auto !important;
        background-color: rgb(19 21 31 / 95%);
        z-index: 0;
        display: none;
    }
    #sidebar > div > h2.expanded-logo > img {
    width: 90% !important;
        
    }
     body.sidebar-collapsed {
        margin-left: var(--collapsed-width); /* Esto debe estar en sintonía con el sidebar */
    }
    #toggleSidebar > img {
        transition: left 0.3s ease-in-out;
        width: 65px!important;
        height: 65px!important;
        max-width: 65px!important;
    }
    .profile-modal.expanded {
    left: 10px!important;
    position: fixed !important;
    opacity: 1;
    bottom: 74px!important;
    width: 230px!important;
    }
    .profile-modal.collapsed {
    opacity: 0;
    left: -250px !important;
    bottom: 74px !important;
    }
    .profile-block {
    padding: 10px 0px !important;
        
    }
    .profile-block {
    transition: width 0.3s cubic-bezier(0.48, 0.22, 0, 1.27) !important;
    }
    .sidebar.collapsed .profile-block {
    transition: width 0.3s cubic-bezier(0.48, 0.22, 0, 1.27) !important;
    }
    .profile-modal .modal-content {
    transition: width 0.3s cubic-bezier(0.48, 0.22, 0, 1.27) !important;
    }
}

/* Mostrar el fondo negro solo cuando el sidebar está visible */
body:not(.sidebar-collapsed) .overlay {
    display: block;
}

#sidebar > div > a.collapsed-logo > img  {
    display: flex;
    align-items: center;
    justify-content: center;
}

body.sidebar-collapsed .sidebar nav ul li {
    padding: 9px;
    transition: margin-left 0.3s ease-in-out;
    margin: 9px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.sidebar-collapsed .menu-svg-icon {
    margin-right: 0px !important;
}

.single-content h2:last-child {
    margin: 0.3em 0.3em !important;
}

.single-content h2 {
    margin: 0.3em 0.3em !important;
}

/* Ocultar inicialmente los spans */
.sidebar nav ul li a span {
    opacity: 1;
    position: absolute; /* Los span no afectan el ancho del contenedor */
    left: 60px; /* Ajusta la posición de los spans fuera del ancho del sidebar colapsado */
    white-space: nowrap;
    transition: opacity 0.4s ease-in-out, left 0.3s ease-in-out; /* Animación suave para opacidad y movimiento */
}

/* Cuando el sidebar está colapsado, ocultamos los spans */
body.sidebar-collapsed .sidebar nav ul li a span {
    opacity: 0;
    left: 100px; /* Desplaza el span aún más para ocultarlo mientras está colapsado */
}

/* Cuando el sidebar está expandido, el span aparece suavemente */
body:not(.sidebar-collapsed) .sidebar nav ul li a span {
    opacity: 1;
    left: 52px; /* Retorna el span a su posición original */
    transition: opacity 0.8s cubic-bezier(0.66, -0.09, 0.58, 1), left 0.3s ease-in-out;
}

.menu-item-has-children > a > span {
    font-weight: 500;
    color: #fff;
}

/* Oculta el toggle de los elementos de segundo nivel cuando el sidebar está colapsado */
.sidebar-collapsed .sub-menu .menu-item-has-children > .submenu-toggle {
    display: none;
}

/* Estilo inicial del logo cuando el sidebar está expandido */
.collapsed-logo {
    width: 100%;
    height: auto;
    margin: auto !important;
    max-width: 65px !important; /* Tamaño máximo del logo cuando el sidebar está expandido */
    transition: max-width 0.3s ease-in-out, opacity 0.3s ease-in-out;
    opacity: 1; /* El logo es completamente visible cuando el sidebar está expandido */
    margin: 10px auto; /* Centrado horizontalmente */
}

/* Cuando el sidebar está colapsado */
body.sidebar-collapsed .collapsed-logo {
    opacity: 0.8; /* Opcional: Puedes reducir la opacidad un poco para dar la sensación de menor protagonismo */
    transition: max-width 0.6s ease-in-out, opacity 0.6s ease-in-out;
}

/* Logo completamente oculto en móviles cuando el sidebar está colapsado */
@media (max-width: 768px) {
    body.sidebar-collapsed .collapsed-logo {
        max-width: 0; /* El logo puede desaparecer en pantallas más pequeñas si lo prefieres */
        opacity: 0; /* El logo desaparece completamente en dispositivos móviles */
    }
}

body.sidebar-collapsed .submenu-toggle {
    position: absolute;
    right: 2px;
    top: 32px;
    transform: translateX(27%);
    background: none;
    border: none;
    font-size: 14px;
    background: #2f2f2f;
}

/* Estilos para los elementos de menú */
.sidebar-menu {
    list-style: none;
    padding: 0;
}

.sidebar-menu li {
    position: relative; /* Asegura que los hijos puedan posicionarse en relación con el padre */
}

/* Botón de colapso de submenús */
.submenu-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    background: #1e1e1e;
    padding: 12px;
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
    border: none;
    color: #a9a9a9 !important;
}

.submenu-toggle {
    position: absolute; /* Alineación a la derecha del menú padre */
    right: 10px; /* Ajusta este valor según sea necesario */
    top: 50%; /* Centrado verticalmente */
    transform: translateY(-50%); /* Ajuste para centrar */
    background: none;
    border: none;
    font-size: 14px;
    cursor: pointer;
}

button:hover, button:focus {
    background-color: #d9d9d91f !important;
    color: #bdbdbd !important;
}

/* Estilos para los submenús colapsados en el estado expandido */
.custom-sidebar-wrapper.collapsed .sidebar-menu .sub-menu {
    display: none;
}

.sidebar-menu .sub-menu {
    display: none; /* Todos los submenús colapsados por defecto */
}

.sidebar-menu .menu-item-has-children.open .sub-menu {
    display: block; /* Muestra el submenú cuando está abierto */
}

.fa-solid, .fas {
    font-size: 12px;
}

body.sidebar-collapsed .fa-solid, .fas {
    font-size: 9px;
}

body.sidebar-collapsed .sidebar-menu .sub-menu {
    padding-left: 6px;
    transition: width 0.3s cubic-bezier(0.45, 0.05, 0.23, 0.97);
}

body.sidebar-collapsed .sidebar-menu .sub-menu li:hover {
    background-color: transparent;
}

body.sidebar-collapsed .menu-svg-icon {
    max-width: 100% !important;
}

/* Estilo general para la sidebar y submenús */

[type=button], [type=submit], button {
    border: 0px transparent !important;
}

.regular-text {
    width: 45em;
    border: 1px solid #e3e3e3 !important;
}

.submenu-toggle button {
   background: transparent !important;
}

.sidebar-menu .sub-menu {
    border-left: 2px solid transparent;
    border-image: linear-gradient(to bottom, transparent 0%, #555 5%, #555 85%, transparent 100%) 1;
    padding-left: 1px;
    margin-left: 35px !important;
    display: none;
}

.submenu-toggle img {
    max-width: 15px !important;
        
    } 


.sidebar.open .sub-menu {
    display: block; /* Mostrar submenú cuando la sidebar está abierta */
}

/* Estilo para enlaces dentro del submenú */
.sidebar-menu .sub-menu li a {
    color: #ccc;
    font-size: 14px;
    display: block;
}

.sidebar-menu .sub-menu li:hover {
    background-color: #383838;
}

/* Efecto hover para resaltar submenús */
.sidebar-menu .sub-menu li a:hover {
    color: #fff;
}

/* Estilo del hilo (thread) vertical en el submenú */
.sidebar-menu .sub-menu li::after {
    content: '';
    position: absolute;
    left: 0px;
    bottom: 20px;
    margin-left: -20px;
    background-image: url(https://softdemo.net/wp-content/uploads/2024/10/Arrow-of.svg);
    background-size: 22px 22px;
    background-repeat: no-repeat;
    transition: width 0.3s cubic-bezier(0.13, 0.57, 1, 0.47);
    width: 22px;
    height: 22px;
    color: #555;
}

/* Tooltip solo visible cuando el sidebar está colapsado */
.sidebar-collapsed .menu-item a .menu-item:hover::after {
    content: attr(title);
    position: fixed;
    top: auto;
    left: 78px;
    transform: translateX(0%);
    background: rgb(42 42 42);
    color: white;
    padding: 5px 13px;
    border-radius: 9px;
    white-space: nowrap;
    z-index: 99999;
    font-size: 15px;
}

/* Triángulo en el lado izquierdo del tooltip solo visible cuando el sidebar está colapsado */
.sidebar-collapsed .menu-item a .menu-item:hover::before {
    content: '';
    position: fixed;
    left: 62px;
    top: auto;
    border-style: solid;
    border-width: 8px;
    border-color: transparent rgb(42 42 42) transparent transparent;
    transform: translateX(0%);
    z-index: 99999;
    margin-top: 10px;
}

/* Oculta el tooltip cuando el sidebar no está colapsado */
.menu-item a .menu-item:hover::after,
.menu-item a .menu-item:hover::before {
    content: none; /* Asegúrate de que no aparezca cuando el sidebar no está colapsado */
}

/* Desactivar tooltip para todos los elementos dentro del menú con ID "menu-perfil" */
#menu-perfil .menu-item:hover::after,
#menu-perfil .menu-item:hover::before {
    content: none; /* Asegúrate de que no aparezca el tooltip en el menú */
}



/* Bloque de perfil en la parte inferior */
.profile-block {
    display: flex;
    gap: 0.8em;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 10px;
    border-top: 1px solid #373737;
    position: fixed;
    bottom: 0px;
    background: #1a1a1a;
    width: var(--width);
    transition: width 0.3s cubic-bezier(0.45, 0.05, 0.23, 0.97);
    z-index: 999;
}
.sidebar.collapsed .profile-block {
    width: var(--collapsed-width);
    transition: width 0.3s cubic-bezier(0.45, 0.05, 0.23, 0.97);
}

.profile-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid #36363682;
}

.profile-name {
    margin-bottom: 0px !important;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2em;
    transition: width 0.3s cubic-bezier(0.45, 0.05, 0.23, 0.97);
}

.profile-email  {
    margin-bottom: 0px !important;
    font-size: 12px;
    line-height: 1.2em;
    color: #d7d7d7;
}

.sidebar.collapsed .profile-info {
    display: none;
    margin-left: 8px;
}
.sidebar.expanded .profile-info {
    display: block;
}

/* Modal de perfil */
.profile-modal {
    display: none;
    position: absolute;
    width: var(--width);
    height: auto;
    justify-content: left;
    align-items: center;
    z-index:0 !important;
    bottom: 10px;
    transition: left 0.3s ease, opacity 0.3s ease; /* Transición suave */
    opacity: 0; /* Oculto inicialmente */
}

.profile-modal.expanded {
    left: 260px;
    opacity: 1; /* Mostrar con animación */
}

.profile-modal.collapsed {
    left: 80px;
    opacity: 1; /* Mostrar con animación */
}

/* Ajuste para que aparezca el modal al abrirlo */
#profileModal.show {
    display: flex;
    opacity: 1;
}

.profile-modal .modal-content {
    background: #fff;
    padding: 10px;
    border-radius: 20px;
    width: var(--width);
    border-top: 1px solid #373737;
    background: #222222;
}
.close-modal {
    float: right;
    cursor: pointer;
    color: #787878;
    width: 25px;
    height: 25px;
    background: #2a2a2a;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 26px;
}
.close-modal:hover {
    color: #f2f2f2;

}

/* Bloque de perfil en MODAL */
.modal-profile-block {
    display: flex;
    gap: 0.8em;
    align-items: center;
    padding: 0px;
    transition: width 0.3s cubic-bezier(0.45, 0.05, 0.23, 0.97);
}

.modal-profile-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 2px solid #36363682;
}
.modal-profile-name {
    margin-bottom: 0px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2em;
    color: #ffffff;
}

.modal-profile-email  {
    margin-bottom: 0px;
    font-size: 12px;
    line-height: 1.2em;
    color: #d7d7d7;
}

.modal-divider {
    width: 100%;
    border: none;
    border-top: 1px solid #373737;
    margin: 10px 0;
}

#profileModal > div > hr {
    background-color: unset;
}

#menu-perfil {
    list-style: none;
    padding: 0;
    margin-top: 10px;
    margin-left: 0px;
    background: linear-gradient(180deg, #3130301f 0%, #292929b3 35%, #181818d6 100%);
    padding: 10px;
    border-radius: 15px;
    margin-bottom: 0px;
}

/* Cambia el color del texto del menú */
.menu-item .menu-link span {
    color: #ccc;
}

body.sidebar-collapsed .dashboard-menu .menu-svg-icon {
    margin-right: 10px !important;
}


.menu-item .menu-link span:hover {
    color: #ffffff;
}

/* Estilos para los elementos del menú en dashboard-menu */
.dashboard-menu li {
    background: transparent; /* Fondo transparente */
    border-radius: 9px; /* Bordes redondeados */
    padding: 7px; /* Espaciado interno */
    transition: max-width 0.6s ease-in-out, opacity 0.6s ease-in-out; /* Transiciones */
    margin-bottom: 5px;
}

/* Opcional: Estilo para el texto del menú */
.dashboard-menu li a {
    width: 100%;
    text-decoration: none;
    display: flex !important;
    align-items: center !important;
}

/* Estilo adicional para el hover si lo deseas */
.dashboard-menu li:hover {
    background: rgba(0, 0, 0, 0.1); /* Ejemplo de fondo en hover */
}
.dashboard-menu li.log {
    background: #2b2b2b;
}

.profile-info {
    opacity: 0; /* Inicialmente invisible */
    transition: opacity 0.3s ease; /* Transición suave para la opacidad */
    display: none; /* Para ocultar al inicio si es necesario */
}

.sidebar:not(.collapsed) .profile-info {
    display: block; /* Muestra el perfil cuando el sidebar está abierto */
    opacity: 1; /* Asegúrate de que la opacidad sea 1 cuando se muestra */
}

/* Para seleccionar todos los ul dentro de .dashboard-menu */
.dashboard-menu ul {
    list-style: none !important;
    margin: 6px 0 !important;
}