/* Contenedor principal del menú lateral */
ul.modern-tabs {
   list-style: none;
   padding: 10px 0;
   margin: 0;
   width: 250px;
   background-color: #004276;
   display: flex;
   flex-direction: column;
   align-items: center;
   min-height: 100vh;
   border-right: 1px solid #2e2e2e;

   position: fixed;         /* <-- hace que flote */
   top: 0;                  /* <-- pegado arriba */
   left: 0;                 /* <-- pegado al borde izquierdo */
   z-index: 1000;           /* <-- se asegura que esté por encima */
}

ul.modern-tabs .ui-state-default, 
ul.modern-tabs .ui-widget-content 
ul.modern-tabs .ui-state-default, 
ul.modern-tabs .ui-widget-header 
ul.modern-tabs .ui-state-default {
   border: none !important;
   font-weight: bold;
   color: #e9edf2;
   background: linear-gradient(to right, #5772FE, #2ea1f0) !important;
}

ul.modern-tabs li.tab-activated:hover{
   color: black;
   background: white !important;
}
 
 /* Estilo para cada botón principal */
 ul.modern-tabs > li {
   margin: 10px 0;
   width: 100%;
   text-align: center;
   transition: background 0.3s ease, transform 0.2s ease;
   height: 50px;
 }
 
 ul.modern-tabs > li:hover {
   background: #d8d9de;
   transform: translateX(2px);
   border-left: 3px solid #4a78f0;
   border-radius: 4px 0 0 4px;
 }
 
 /* Enlace principal con ícono */
 ul.modern-tabs > li > a {
   display: block;
   align-items: center; /* centra verticalmente ícono y texto */
   gap: 8px; /* espacio entre ícono y texto */
   cursor: pointer;
   color: #BDBDC7;
   padding: 10px;
   line-height: 30px;
   text-decoration: none;
   transition: all 0.3s ease-in-out;
   font-size: 14px;
 }
/*
 ul.modern-tabs > li > a:hover {
   color: #fff;
 }*/
 
 /* Íconos grandes de los tabs */
 ul.modern-tabs img.modern-icon {
   width: 28px;
   height: 28px;
   margin-bottom: 5px;
   /*filter: brightness(1.3);*/
   float: left;
   padding-left: 12px;
 }
  
ul.modern-tabs > li:hover ul.modern-subtabs {
   display: block;
 }
 
 ul.modern-subtabs img.modern-icon-small {
   width: 22px;
   height: 22px;
   position: relative;
   float: left;
   padding-left: 12px;
}

 /* Submenús ocultos por defecto */
 ul.modern-subtabs {
   list-style: none;
   padding: 3px 0px;
   margin: 0;
   background-color: #24273b;
   display: none;
 }

 
 /* Subitems */
 ul.modern-subtabs > li {
   margin: 1px 0;
 }
 
 ul.modern-subtabs > li > a {
   display: block;
   cursor: pointer;
   color: #BDBDC7;
   padding: 10px;
   line-height: 30px;
   border-bottom: none;
   background: #343957; 
   text-decoration: none;
   -webkit-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
 }
 
 ul.modern-subtabs > li > a:hover {
   background: #FFF;
   color: black;
   line-height: 2;
 }

 ul.modern-tabs > li > a.link-activated {
   background: white;
   color:black;
   line-height: 2;
}

 ul.modern-subtabs > li > a.link-activated {
   background: white;
   color:black;
}

 /* Menú colapsado: solo íconos */
ul.modern-tabs.menu-collapsed {
   width: 60px; /* o lo que necesites para íconos */
   align-items: center;
}

ul.modern-tabs.menu-collapsed > li > a {
   justify-content: center; /* centra los íconos */
   font-size: 0; /* oculta texto si lo hubiera */
}

ul.modern-tabs.menu-collapsed .modern-icon {
   padding-left: 0;
   margin: 0 auto;
   float: none;
}


 /* Menú colapsado: solo íconos */
 ul.modern-subtabs.menu-collapsed {
   width: 60px; /* o lo que necesites para íconos */
   align-items: center;
}

ul.modern-subtabs.menu-collapsed > li > a {
   justify-content: center; /* centra los íconos */
   font-size: 0; /* oculta texto si lo hubiera */
}

ul.modern-subtabs.menu-collapsed .modern-icon {
   padding-left: 0;
   margin: 0 auto;
   float: none;
}


.menu-collapsed ul.modern-subtabs {
   display: block !important;
 }

  /* Menú colapsado: solo íconos */
ul.modern-subtabs.menu-collapsed {
   width: 60px; /* o lo que necesites para íconos */
   align-items: center;
}

ul.modern-subtabs.menu-collapsed > li > a {
   justify-content: center; /* centra los íconos */
   font-size: 0; /* oculta texto si lo hubiera */
}

ul.modern-subtabs.menu-collapsed .modern-icon {
   padding-left: 0;
   margin: 0 auto;
   float: none;
}


.toggle-button {
   position: fixed;
   top: 20px;
   left: 260px;
   transition: left 0.3s ease;
   z-index: 1200;
}

ul.modern-tabs.menu-collapsed + .toggle-button {
   left: 70px;
}

.toggle-button {
   position: fixed;
   top: 30px;
   left: 260px; /* ajusta esto según el ancho de tu menú */
   z-index: 1100;
   background-color: #4A6CFA;
   color: white;
   border: none;
   padding: 10px 12px;
   border-radius: 4px;
   cursor: pointer;
   transition: left 0.3s ease;
}

.menu-collapsed + .toggle-button {
   left: 20px; /* se mueve a la izquierda cuando el menú está colapsado */
}