/* Definir el color primario personalizado */
 :root {
     --bs-primary-custom: #8CBFD7;
     --bs-sidebar-width: 280px;
 }

 /* Estilos para el cuerpo y el contenedor principal */
 body {
     background-color: #f8f9fa;
     /* Fondo gris claro */
     font-family: 'Inter', sans-serif;
     display: flex;
     flex-direction: column;
     min-height: 100vh;

 }


 footer {
     margin-top: auto;
     /* Empuja el footer al final */
 }


 /* ------------------------------------ */
 /* Estilos de la Barra Lateral (Sidebar)*/
 /* ------------------------------------ */
 .sidebar {
     width: var(--bs-sidebar-width);
     height: 100vh;
     position: fixed;
     top: 0;
     left: 0;
     z-index: 1050;
     /* Por encima del contenido, debajo del navbar */
     background-color: var(--bs-primary-custom);
     color: #fff;
     padding: 0;
     transition: transform 0.3s ease;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     overflow-y: auto;
     /* Permite scroll si el menú es largo */
 }

 /* Ocultar la barra de desplazamiento en Chrome/Safari/Opera */
 .sidebar::-webkit-scrollbar {
     display: none;
 }

 /* Ocultar la barra de desplazamiento en IE/Edge/Firefox */
 .sidebar {
     -ms-overflow-style: none;
     /* IE and Edge */
     scrollbar-width: none;
     /* Firefox */
 }

 .sidebar-header {
     padding: 1.5rem 1rem;
     border-bottom: 1px solid rgba(255, 255, 255, 0.2);
 }

 .sidebar-menu a {
     color: #fff;
     padding: 1rem 1rem;
     display: block;
     text-decoration: none;
     transition: background-color 0.2s;
     border-radius: 0.5rem;
     margin: 0.5rem 0.75rem;
 }

 .sidebar-menu a:hover,
 .sidebar-menu a.active {
     background-color: rgba(255, 255, 255, 0.2);
     font-weight: 600;
 }

 .sidebar-menu a i {
     margin-right: 0.75rem;
     width: 20px;
     /* Para alinear mejor los iconos */
     text-align: center;
 }

 /* Estilos para el submenú */
 .submenu-links {
     padding-left: 0;
     list-style: none;
     background-color: rgba(0, 0, 0, 0.1);
     margin: 0 0.75rem 0.5rem 0.75rem;
     border-radius: 0 0 0.5rem 0.5rem;
 }

 .submenu-links a {
     padding: 0.75rem 1rem 0.75rem 3.5rem;
     /* Ajuste para indentación */
     font-size: 0.95rem;
     margin: 0;
     border-radius: 0;
 }

 .submenu-links a:hover,
 .submenu-links a.active {
     background-color: rgba(255, 255, 255, 0.1);
 }

 .submenu-title {
     /* Estilo para el enlace principal que actúa como botón de colapso */
     margin-bottom: 0;
     padding-bottom: 0;
 }

 .submenu-title a {
     /* Remover el margen inferior del enlace principal para unirlo al submenú */
     margin-bottom: 0;
 }

 /* Rotación del icono de flecha del colapso */
 .submenu-title a .fa-chevron-down {
     transition: transform 0.3s ease;
 }

 .submenu-title a[aria-expanded="true"] .fa-chevron-down {
     transform: rotate(180deg);
 }

 /* ------------------------------------ */
 /* Estilos del Contenido Principal       */
 /* ------------------------------------ */
 .main-content {
     /* Por defecto, sin sidebar-closed, el margen se aplica (sidebar abierto) */
     margin-left: var(--bs-sidebar-width);
     padding-top: 56px;
     /* Espacio para el navbar */
     transition: margin-left 0.3s ease;
     min-height: 100vh;
 }

 /* Ajuste del contenido principal cuando el sidebar está colapsado */
 body.sidebar-closed .main-content {
     margin-left: 0;
 }

 /* ------------------------------------ */
 /* Estilos del Navbar (Encabezado)      */
 /* ------------------------------------ */
 .navbar {
     background-color: #ffffff;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
     position: fixed;
     top: 0;
     width: 100%;
     z-index: 1040;
     padding: 0.5rem 1rem;
 }

 .toggle-btn {
     color: var(--bs-primary-custom);
     border: none;
     background: none;
     padding: 0.5rem;
     font-size: 1.5rem;
     cursor: pointer;
     transition: color 0.2s;
 }

 .toggle-btn:hover {
     color: #007bff;
     /* Color de realce */
 }

 /* ------------------------------------ */
 /* Ajustes Responsivos                  */
 /* ------------------------------------ */

 /* En pantallas pequeñas, el sidebar siempre inicia colapsado y el contenido ocupa todo el ancho */
 @media (max-width: 991.98px) {
     .sidebar {
         transform: translateX(-100%);
     }

     .sidebar.show {
         transform: translateX(0);
         /* Se muestra al hacer click */
     }

     .main-content {
         margin-left: 0;
         /* Aseguramos que el contenido esté siempre a la izquierda en móvil */
     }

     /* Oscurecer el fondo cuando el sidebar está abierto en móvil */
     .sidebar-overlay {
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: rgba(0, 0, 0, 0.5);
         z-index: 1045;
         /* Entre el sidebar y el contenido */
         display: none;
     }

     body.sidebar-open .sidebar-overlay {
         display: block;
     }
 }

 /* En pantallas grandes (desktop) */
 @media (min-width: 992px) {

     /* Cuando el sidebar está cerrado en desktop */
     body.sidebar-closed .sidebar {
         transform: translateX(-100%);
     }

     body.sidebar-closed .main-content {
         margin-left: 0;
         /* Contenido ocupa todo el ancho */
     }
 }

 /* Estilos para el logo */
 .logo-img {
     max-height: 40px;
     width: auto;
 }

 .navbar-brand img {
     max-height: 30px;
 }

 .login-container {
     width: 100%;
     max-width: 500px;
     /* Ancho máximo para el formulario */
     padding: 1rem;

     /* Centrado en la página */
     margin: 0 auto;
     position: relative;
     top: 50%;
     transform: translateY(-50%);
     display: flex;
     justify-content: center;
     align-items: center;

     /* Estilo visual */
     background: #ffffff;
     border-radius: 12px;

     /* Efecto 3D */
     box-shadow: 15px 15px 30px rgba(0, 0, 0, 0.3);
     transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
     transition: transform 0.6s ease, box-shadow 0.6s ease;
 }

 .card {
     border: none;
     border-radius: 1rem;
     box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
 }

 .login-header {
     text-align: center;
     padding: 1.5rem 0;
     border-bottom: 1px solid #eee;
 }

 .logo-img {
     max-height: 50px;
     width: auto;
     /* Aplicar color al logo si es necesario (asumimos que es blanco/claro) */
     filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.1));
 }

 .btn-custom {
     background-color: var(--bs-primary-custom);
     border-color: var(--bs-primary-custom);
     color: white;
     font-weight: bold;
     transition: background-color 0.2s, border-color 0.2s;
 }

 .btn-custom:hover,
 .btn-custom:focus {
     /* background-color: var(--bs-btn-hover-bg); */
     border-color: var(--bs-btn-hover-bg);
     box-shadow: 0 0 0 0.25rem rgba(140, 191, 215, 0.5);
     /* Sombra para el foco */
 }

 .form-control:focus {
     border-color: var(--bs-primary-custom);
     box-shadow: 0 0 0 0.25rem rgba(140, 191, 215, 0.25);
 }

 */ .link-custom {
     color: var(--bs-link-color);
 }

 .link-custom:hover {
     color: var(--bs-link-hover-color);
 }

 /* Color corporativo */
 .swal2-popup {
     font-size: 1rem;
 }

 .form-label {
     font-weight: 600;
     color: #333;
 }

 .form-control {
     border-radius: 6px;
     border: 1px solid #8CBFD7;
 }

 .form-control:focus {
     border-color: #8CBFD7;
     box-shadow: 0 0 5px rgba(140, 191, 215, 0.5);
 }

 .btn-corporativo {
     background-color: #8CBFD7;
     color: #fff;
     font-weight: 600;
     border-radius: 6px;
 }

 .btn-corporativo:hover {
     background-color: #6faac4;
 }