/* Define la variable para el color de fondo del menú */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@200;300;400;500;600;700&display=swap");

:root {
    --menu-bg-color: rgba(122, 174, 233, 0.767); /* Color por defecto */
    --primary-solid-color: #4399d3; /* NUEVO: Color sólido para otros componentes */
    --secondary-solid-color: #2c3e50; /* NUEVO: Color para submenús, con fallback */
}

html,
body {
    overflow-x: hidden;
}


#main-navbar {
    zoom: 0.9;
}

@media (max-width: 768px) {
    /* ==========================================================================
       ESTILOS PARA MÓVIL (max-width: 768px)
       ========================================================================== */

    /* Forzar SIEMPRE el layout de menú lateral en móvil */
    /* Usamos 'body.sidebar-layout' para aumentar especificidad y evitar conflictos */
    body.sidebar-layout #main-navbar {
        position: fixed;
        top: 0;
        left: 0;
        width: 200px; /* Ancho fijo y predecible para el menú lateral en móvil */
        height: 100vh;
        transform: translateX(-100%); /* Menú oculto por defecto */
        z-index: 1050; /* Asegura que esté por encima de todo */
        transition: transform 0.3s ease-in-out;
        align-items: flex-start;
        overflow-y: auto;
        zoom: 1; /* Anula el zoom global para evitar comportamientos extraños en móvil */
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    /* Cuando el menú está visible (NO colapsado) */
    body.sidebar-layout:not(.sidebar-collapsed) #main-navbar {
        transform: translateX(0); /* Lo trae a la vista */
    }

    body.sidebar-layout #main-navbar::-webkit-scrollbar {
        display: none;
    }

    /* El contenido principal no debe tener margen izquierdo en móvil */
    body.sidebar-layout #content-pusher {
        margin-left: 0;
        transition: filter 0.3s ease-in-out;
    }

    /* Overlay para oscurecer el contenido cuando el menú está abierto */
    body.sidebar-layout:not(.sidebar-collapsed) #content-pusher {
        filter: brightness(0.5);
    }

    /* Forzar que los elementos del menú sean verticales */
    body #main-navbar .container-fluid,
    body #main-navbar .navbar-collapse,
    body #main-navbar .navbar-nav {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

    /* SOLUCIÓN: Corrige el despliegue de submenús en móvil */
    body.sidebar-layout #main-navbar .dropdown-menu {
        padding-left: 0; /* Elimina el padding que empuja todo el submenú */
        background-color: rgba(0, 0, 0, 0.2); /* Fondo oscuro para diferenciarlo */
        /* SOLUCIÓN: Se resetea la posición para que el submenú se integre en el flujo vertical del menú.
           Esto evita que los submenús se solapen con los elementos de abajo. */
        position: static;
        width: 100%;
        /* SOLUCIÓN DEFINITIVA: Se oculta el submenú por defecto en móvil para evitar los "huecos" en blanco.
           Bootstrap y nuestro JS lo mostrarán al añadir la clase .show */
        display: none;
        max-height: none; /* Resetea la animación de altura del modo escritorio */
        transition: none; /* Anula transiciones que no aplican en móvil */
    }

    /* SOLUCIÓN: Cuando el JS añada la clase .show, el submenú se hará visible.
       Esto es crucial para que el acordeón en móvil funcione. */
    body.sidebar-layout #main-navbar .dropdown-menu.show {
        display: block;
    }

    body.mobile-menu-hidden #main-navbar {
        transform: translateX(-100%);
    }

    body.mobile-menu-hidden #content-pusher {
        filter: none;
    }

    #mobile-menu-open-trigger {
        display: none;
        position: fixed;
        top: 0.75rem;
        left: 0.75rem;
        z-index: 1070;
        background-color: rgba(0, 0, 0, 0.5);
        border: none;
        width: 46px;
        height: 46px;
        border-radius: 50%;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.3rem;
    }

    body.mobile-menu-hidden #mobile-menu-open-trigger {
        display: flex;
    }

    /* Asegurar que el botón de hamburguesa siempre sea visible en móvil */
    body #sidebar-collapse-toggler {
        display: block !important;
    }
}

/* ==========================================================================
   Estilos del Header y Menú de Navegación
   ========================================================================== */
/* -------------------------------------------------------------------------- */
/* Estilos Base de la Barra de Navegación (reemplaza a .bg-dark y .navbar-dark) */
/* -------------------------------------------------------------------------- */
/* Define la apariencia de la barra.
   El color de fondo se controla con la variable --menu-bg-color */
#main-navbar {
    /* SOLUCIÓN: Se aplica el mismo degradado vertical que en las cabeceras de los módulos.
       Esto unifica la apariencia de toda la aplicación. */
    background: linear-gradient(to bottom, var(--secondary-solid-color, #2c3e50), var(--primary-solid-color, #4399d3));
    /* Se eliminan los filtros de desenfoque para quitar el efecto "glass". */
    /* SOLUCIÓN: Se añade un z-index alto para asegurar que el menú esté por encima de otros contenidos. */
    z-index: 1040;
}

/* Color del título/brand de la aplicación */
#main-navbar .navbar-brand {
    color: #fff;
}
#main-navbar .navbar-brand:hover,
#main-navbar .navbar-brand:focus {
    color: #fff;
}

/* Color de los enlaces de navegación principales */
#main-navbar .nav-link {
    color: rgba(255, 255, 255, 0.986);
    font-weight: 500; /* Hacemos la fuente un poco más gruesa */
}

/* Evita que los elementos del menú principal se envuelvan en dos filas en modo horizontal.
   Esto fuerza a que todos los elementos intenten caber en una sola línea. */
#main-navbar .navbar-nav {
    flex-wrap: nowrap;
}

/* Color de los enlaces al pasar el mouse o al enfocarlos */
#main-navbar .nav-link:hover,
#main-navbar .nav-link:focus {
    color: rgba(255, 255, 255, 0.75);
}

/* Color del enlace activo (si se usa la clase .active) */
#main-navbar .nav-link.active {
    color: #fff;
    font-weight: bold; /* Texto en negrita para el enlace activo */
}

/* Estilo del botón "hamburguesa" para que sea visible en fondos oscuros */
#main-navbar .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.1);
}

#main-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* -------------------------------------------------------------------------- */
/* Estilos Generales de Componentes del Menú                                  */
/* -------------------------------------------------------------------------- */

/* Estilo para el display de la sucursal en la barra */
.branch-display {
    background-color: rgba(255, 255, 255, 0.15); /* Un poco más opaco para mejor visibilidad */
    /* Efecto glass moderno (desenfoque del fondo) */
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    padding: 5px 10px;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-weight: 500;
    color: #fff; /* Aseguramos el color blanco del texto para buen contraste */
}
/* Ocultar el texto de la sucursal por defecto en modo colapsado */
body.sidebar-layout.sidebar-collapsed .branch-display .branch-text {
    display: none;
}

/* Espaciado y alineación para los iconos del menú */
.nav-link i, .dropdown-item i {
    margin-right: 8px;
    width: 1.2em; /* Ayuda a alinear el texto si no todos los items tienen icono */
}

/* Corrige la alineación del toggle en el menú horizontal.
   Al hacer el enlace un contenedor flex, el div interno y la flecha del toggle se alinean horizontalmente. */
#main-navbar .nav-link.dropdown-toggle {
    display: flex;
    align-items: center;
}

/* -------------------------------------------------------------------------- */
/* Estilos para Submenús (Dropdowns) en modo horizontal (default)             */
/* -------------------------------------------------------------------------- */
#main-navbar .dropdown-menu {
    position: absolute; /* Asegura que el submenú se posicione correctamente respecto a su padre en modo horizontal */
    background-color: var(--secondary-solid-color, #2c3e50); /* Usa el color secundario dinámico */
    border: none;
    margin-top: 0; /* SOLUCIÓN: Se elimina el margen para que no haya un hueco entre el menú y el submenú. */
    border-radius: 0.25rem;
    /* SOLUCIÓN DEFINITIVA: Se sobreescriben las variables CSS de Bootstrap para controlar el color del texto. */
    --bs-dropdown-link-color: #f7f4f4bb;
    --bs-dropdown-link-hover-color: #fff;
    --bs-dropdown-link-hover-bg: #34495e;

    /* SOLUCIÓN: Animación de aparición para el submenú horizontal */
    display: block; /* Se mantiene en el layout para poder animar */
    opacity: 0;
    visibility: hidden;
    transform: translateY(0); /* Se elimina el deslizamiento para evitar el hueco durante la animación. */
    pointer-events: none; /* Evita interacción cuando está oculto */
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
} 

/* Se mantiene el flex para alinear icono y texto, pero el color ya no se define aquí. */
#main-navbar .dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
}

/* Estado visible del submenú horizontal */
#main-navbar .dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    /* transform: translateY(0); */ /* Ya no es necesario */
    pointer-events: auto;
}

/* Se elimina esta regla, ya que el color de hover ahora se controla con la variable --bs-dropdown-link-hover-bg.
   Esto evita conflictos y simplifica el código. */
/*
#main-navbar .dropdown-menu .dropdown-item:hover,
#main-navbar .dropdown-menu .dropdown-item:focus {
    color: #fff;
    background-color: #34495e; /* Un poco más claro al pasar el mouse */
/* } */

/* Color del separador en los submenús */
#main-navbar .dropdown-divider {
    border-color: rgba(255, 255, 255, 0.15);
}

/* Botón para colapsar/expandir el sidebar (hamburguesa) */
#sidebar-collapse-toggler {
    display: none; /* Oculto por defecto */
    color: rgba(255, 255, 255, 0.55);
    border: none;
    font-size: 1.5rem;
    margin-right: 0.5rem;
}
#sidebar-collapse-toggler:hover {
    color: #fff;
}
/* Mostrar solo en modo sidebar */
body.sidebar-layout #sidebar-collapse-toggler {
    display: block;
}

/* -------------------------------------------------------------------------- */
/* Estilos para el Layout de Menú Lateral (Sidebar)                           */
/* -------------------------------------------------------------------------- */
/* Estos estilos se activan cuando el body tiene la clase .sidebar-layout */
@media (min-width: 769px) {
    /* Alinea el toggle (flecha) del dropdown a la derecha en modo sidebar */
    body.sidebar-layout #main-navbar .nav-link.dropdown-toggle {
        display: flex;
        justify-content: space-between; /* Esto ahora funcionará correctamente */
        align-items: center;
        width: 100%;
    }

    /* NUEVO: Hace que el contenido (icono+texto) ocupe el espacio disponible */
    body.sidebar-layout #main-navbar .nav-link.dropdown-toggle > div {
        flex-grow: 1;
    }


    /* define al ancho del menu principal, Pero modo lateral */
    /* define la altura del MENU MODO LATERAL aqui aqui */
    body.sidebar-layout #main-navbar {
        width: 200px; /* SOLUCIÓN: Se reduce el ancho del menú lateral. */
        height: 120vh;
        position: fixed;
        top: 0;
        left: 0;
        transition: width 0.3s ease-in-out;
        align-items: flex-start; /* Alinea los items al inicio */
        overflow-y: auto; /* Permite el scroll con la rueda del mouse */

        /* SOLUCIÓN: Ocultar la barra de scroll en diferentes navegadores */
        -ms-overflow-style: none;  /* IE y Edge */
        scrollbar-width: none;  /* Firefox */
    }

    /* SOLUCIÓN: Ocultar la barra de scroll para navegadores Webkit (Chrome, Safari) */
    body.sidebar-layout #main-navbar::-webkit-scrollbar {
        display: none;
    }

    /* Fuerza la dirección vertical para los componentes de la barra */
    body.sidebar-layout #main-navbar .container-fluid,
    body.sidebar-layout #main-navbar .navbar-collapse,
    body.sidebar-layout #main-navbar .navbar-nav {
        flex-direction: column;
        align-items: flex-start;
        width: 100%; /* Ocupa todo el ancho del sidebar */
    }

    /* SOLUCIÓN: Elimina el padding horizontal del contenedor del menú en modo lateral.
    Esto permite que los submenús se expandan a todo lo ancho. */
    body.sidebar-layout #main-navbar .container-fluid {
        padding-left: 0;
        padding-right: 0;
    }

    body.sidebar-layout #main-navbar .navbar-nav .nav-item {
        width: 100%;
    }

    /* SOLUCIÓN: Reduce el espaciado vertical entre los elementos del menú en modo lateral.
    Se reduce el padding superior e inferior de los enlaces principales. */
    body.sidebar-layout #main-navbar .nav-link {
        padding-top: 0.4rem;
        padding-bottom: 0.4rem;
    }

    /* Resetea los estilos del dropdown para que se integre en el flujo vertical */
    body.sidebar-layout #main-navbar .dropdown-menu {
        position: static !important;
        border: none;
        background-color: transparent; /* SOLUCIÓN: Se quita el fondo para que no haya diferencia con el menú principal. */
        width: 100%;
        box-shadow: none;
        margin-top: 0;
        /* SOLUCIÓN DEFINITIVA: Se sobreescriben las variables de Bootstrap también para el modo lateral. */
        --bs-dropdown-link-color: #fff;
        --bs-dropdown-link-hover-color: #fff;

        /* SOLUCIÓN: Animación de despliegue para el submenú lateral */
        max-height: 0;
        overflow: hidden;
        padding-top: 0; padding-bottom: 0; /* Se anula el padding cuando está cerrado */
        transition: max-height 0.35s ease-out, padding 0.35s ease-out;
    }

    body.sidebar-layout #main-navbar .dropdown-menu.show {
        max-height: 400px; /* Altura máxima para el despliegue */
        padding: 0 0 0.5rem 1rem; /* Se restaura el padding cuando está abierto */
    }
    body.sidebar-layout #main-navbar .dropdown-item {
        /* Se anula el padding-left para que el fondo del hover ocupe todo el ancho. */
        padding: .5rem 1rem .5rem 0;
        border-left: 3px solid transparent; /* Espacio para el borde de hover */
        transition: all 0.2s ease-in-out;
        display: flex;
        align-items: center;
    }

    /* NUEVO: Añade un margen al texto del submenú para separarlo del icono */
    body.sidebar-layout #main-navbar .dropdown-item .dropdown-item-text {
        margin-left: 8px;
    }

    /* Efecto hover para los sub-items en modo lateral */
    body.sidebar-layout #main-navbar .dropdown-item:hover {
        color: #fff;
        background-color: rgba(255, 255, 255, 0.05); /* Resaltado sutil */
        border-left-color: #0d6efd; /* Color de acento de Bootstrap */
    }

    /* Empuja el contenido principal hacia la derecha para dejar espacio al sidebar */
    body.sidebar-layout #content-pusher {
        transition: margin-left 0.2s ease-in-out;
        margin-left: 180px; /* AJUSTE POR ZOOM: 200px (ancho original) * 0.9 (zoom) = 180px */
    }

    /* --- SOLUCIÓN: Estilos para el item activo en el menú lateral --- */

    /* Estilo para el toggle de un submenú que tiene un hijo activo */
    body.sidebar-layout #main-navbar .nav-item > .nav-link.dropdown-toggle.active {
        background-color: rgba(0, 0, 0, 0.2); /* Un fondo oscuro sutil para indicar la sección activa */
        font-weight: 600;
        color: #fff;
        border-radius: 4px;
        margin: 0 0.5rem; /* Pequeño margen para que no se pegue a los bordes */
        width: calc(100% - 1rem);
    }

    /* SOLUCIÓN: Estilo para el enlace principal activo (que NO es un submenú) */
    body.sidebar-layout #main-navbar .nav-item > .nav-link.active:not(.dropdown-toggle) {
        background-color: #ffffff;
        color: #000000 !important; /* Se fuerza el color negro para el texto. */
        font-weight: 600;
        border-top-left-radius: 15px;
        border-bottom-left-radius: 15px;
        position: relative;
        border-left: none;
    }

    /* Estilo específico para el enlace de submenú activo */
    /* SOLUCIÓN: Se aumenta la especificidad del selector para asegurar que los estilos se apliquen correctamente. */
    body.sidebar-layout #main-navbar .dropdown-menu .dropdown-item.active {
        background-color: #ffffff; /* Fondo blanco para fusionarse con el contenido */
        /* SOLUCIÓN DEFINITIVA: Se sobreescribe la variable de color de Bootstrap para el elemento activo. */
        --bs-dropdown-link-color: #000000;
        font-weight: 600;
        border-top-left-radius: 15px;
        border-bottom-left-radius: 15px;
        position: relative; /* Necesario para posicionar los pseudo-elementos */
        border-left: none; /* Se quita el borde de acento para un look más limpio */
    }

    /* Se asegura que el estado hover no cambie el estilo del item activo */
    body.sidebar-layout #main-navbar .dropdown-menu .dropdown-item.active:hover,
    body.sidebar-layout #main-navbar .nav-item > .nav-link.active:not(.dropdown-toggle):hover {
        --bs-dropdown-link-hover-color: var(--primary-solid-color, #4399d3);
        background-color: #ffffff; /* Mantiene el fondo blanco en hover */
        color: #000000 !important;
    }

    /* SOLUCIÓN: Se aplica el color primario también al icono del submenú activo para que sea visible. */
    body.sidebar-layout #main-navbar .dropdown-menu .dropdown-item.active i {
        color: var(--primary-solid-color, #4399d3);
    }

    /* SOLUCIÓN: Pseudo-elementos para crear el efecto de esquina "abierta" a la derecha */
    body.sidebar-layout #main-navbar .dropdown-menu .dropdown-item.active::before,
    body.sidebar-layout #main-navbar .dropdown-menu .dropdown-item.active::after,
    body.sidebar-layout #main-navbar .nav-item > .nav-link.active:not(.dropdown-toggle)::before,
    body.sidebar-layout #main-navbar .nav-item > .nav-link.active:not(.dropdown-toggle)::after {
        content: '';
        position: absolute;
        right: 0;
        width: 15px;
        height: 15px;
        /* El fondo es el color del menú, y el borde curvo será del color del elemento activo (blanco) */
        background-color: var(--primary-solid-color, #4399d3);
    }

    body.sidebar-layout #main-navbar .dropdown-menu .dropdown-item.active::before,
    body.sidebar-layout #main-navbar .nav-item > .nav-link.active:not(.dropdown-toggle)::before {
        top: -15px;
        border-radius: 0 0 15px 0; /* Curva inferior derecha */
        box-shadow: 5px 5px 0 2px #ffffff; /* Crea la curva blanca expansiva */
    }

    body.sidebar-layout #main-navbar .dropdown-menu .dropdown-item.active::after,
    body.sidebar-layout #main-navbar .nav-item > .nav-link.active:not(.dropdown-toggle)::after {
        bottom: -15px;
        border-radius: 0 15px 0 0; /* Curva superior derecha */
        box-shadow: 5px -5px 0 2px #ffffff; /* Crea la curva blanca expansiva */
    }
}
/* -------------------------------------------------------------------------- */
/* Estilos para el Menú Lateral COLAPSADO                                     */
/* -------------------------------------------------------------------------- */

@media (min-width: 769px) {
    body.sidebar-layout.sidebar-collapsed #main-navbar {
        width: 80px; /* Ancho solo para iconos */
    }

    body.sidebar-layout.sidebar-collapsed #content-pusher {
        margin-left: 72px; /* AJUSTE POR ZOOM: 80px (ancho colapsado) * 0.9 (zoom) = 72px */
    }

    /* Ocultar texto y ajustar elementos cuando está colapsado */
    body.sidebar-layout.sidebar-collapsed .nav-link-text,
    body.sidebar-layout.sidebar-collapsed .navbar-brand,
    body.sidebar-layout.sidebar-collapsed .nav-link.dropdown-toggle::after {
        display: none;
    }

    /* Ajustar los enlaces para que solo contengan el icono centrado */
    body.sidebar-layout.sidebar-collapsed .nav-link {
        position: relative; /* Necesario para el indicador de submenú */
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }

    body.sidebar-layout.sidebar-collapsed .nav-link i {
        font-size: 1.3rem; /* Aumenta el tamaño del icono */
        margin: 0;
    }

    /* Indicador (toggler) para menús con submenú en modo colapsado */
    body.sidebar-layout.sidebar-collapsed .nav-link.dropdown-toggle::after {
        display: block; /* Sobrescribe el display:none anterior */
        content: '';
        position: absolute;
        bottom: 8px;
        right: 8px;
        width: 8px;
        height: 8px;
        background-color: #0d6efd; /* Color de acento de Bootstrap */
        border-radius: 50%;
        border: 1px solid #fff;
    }

    /* Comportamiento de la sucursal en modo colapsado (tooltip) */
    body.sidebar-layout.sidebar-collapsed .branch-display-li {
        justify-content: center;
    }
    body.sidebar-layout.sidebar-collapsed .branch-display {
        position: relative;
    }
    body.sidebar-layout.sidebar-collapsed .branch-display:hover .branch-text {
        display: block;
        position: absolute;
        left: 90%; /* Posiciona a la derecha del contenedor del icono */
        top: 50%;
        transform: translateY(-50%);
        white-space: nowrap;
        background-color: #34495e;
        padding: 5px 10px;
        border-radius: 5px;
        z-index: 1051; /* Encima de otros elementos */
        margin-left: 10px;
    }

    /* Estilo de submenú flotante (flyout) para el modo colapsado */
    body.sidebar-layout.sidebar-collapsed .nav-item {
        position: relative;
        z-index: 1; /* Establece un contexto de apilamiento base */
    }

    /* Al pasar el mouse sobre el item de la sucursal, se eleva su z-index para que el tooltip aparezca por encima de los submenús */
    body.sidebar-layout.sidebar-collapsed .branch-display-li:hover {
        z-index: 2; /* Valor superior al z-index:1 de los otros nav-item */
    }

    body.sidebar-layout.sidebar-collapsed .dropdown-menu {
        position: absolute !important;
        left: 80px; /* Aparece a la derecha del sidebar colapsado */
        top: 0;
        width: auto; /* El ancho se ajustará al contenido (los iconos) */
        min-width: 80px; /* Un ancho mínimo para mantener la forma */
        background-color: #34495e; /* Fondo oscuro sólido para el flyout */
        border-radius: 0 0.25rem 0.25rem 0;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
        padding: 0.5rem 0 !important;
    }

    /* Restaurar apariencia de los items en el submenú flotante */
    body.sidebar-layout.sidebar-collapsed .dropdown-item {
        padding: 0.75rem 0; /* Ajustamos el padding para centrar verticalmente */
        border-left: none; /* Quita el borde lateral */
        /* font-size: 0;  <-- Eliminamos este método antiguo */
        justify-content: center; /* Centra el icono horizontalmente */
        display: flex;
        align-items: center;
    }

    /* NUEVO: Oculta el texto de los submenús cuando el menú está colapsado */
    body.sidebar-layout.sidebar-collapsed .dropdown-item .dropdown-item-text {
        display: none;
    }

    body.sidebar-layout.sidebar-collapsed .dropdown-item:hover {
        border-left: none;
        background-color: #4e6a85;
    }

    body.sidebar-layout.sidebar-collapsed .dropdown-item i {
        font-size: 1.3rem; /* Mismo tamaño que los iconos del menú principal */
        margin: 0; /* Eliminamos márgenes */
    }
}



/* ==========================================================================
   Estilos para Cabeceras de Módulos (Gestión de Clientes, Productos, etc.)
   ========================================================================== */
.module-header {
    /* SOLUCIÓN: Se cambia el degradado a vertical (de arriba hacia abajo),
       empezando por el color secundario y terminando en el primario. */
    background: linear-gradient(to bottom, var(--secondary-solid-color, #2c3e50), var(--primary-solid-color, #4399d3));
    color: #ffffff;
    padding: 1rem 1.5rem;
    margin-top: 1rem; /* Añade espacio entre el menú y la cabecera del módulo */
    border-radius: 0.375rem; /* Radio de borde estándar de Bootstrap */
}

/* Título dentro de la cabecera del módulo */
.module-header h1, .module-header h2, .module-header h3 {
    color: #ffffff;
    margin-bottom: 0; /* Quitamos el margen por defecto para alinear mejor */
}

/* Estilos para los inputs de búsqueda dentro de la cabecera */
.module-header .form-control {
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

.module-header .form-control::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

/* Estilo para los iconos de input-group (como en Proveedores) */
.module-header .input-group-text {
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

/* Ocultar el interruptor de layout en dispositivos móviles, ya que el layout es forzado. */
@media (max-width: 992px) {
    #menu-layout-toggle-li {
        display: none !important;
    }
}

/* Contenedor del interruptor */
#main-navbar .form-check.form-switch {
    padding-left: 3em; /* Más espacio para el nuevo icono */
}

/* Base del interruptor (la 'pista' donde se mueve el icono) */
#main-navbar .form-check-input {
    width: 2.8em;
    height: 1.4em;
    position: relative; /* SOLUCIÓN: Establece el contexto de posicionamiento para el pseudo-elemento. */
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.25);
    border-color: transparent;
    /* Se elimina la imagen de fondo (el círculo) por defecto de Bootstrap */
    background-image: none;
}

/* SOLUCIÓN: Se elimina la sombra (box-shadow) que aparece al hacer clic en el interruptor.
   Esto asegura que solo se vea nuestro icono personalizado. */
#main-navbar .form-check-input:focus {
    box-shadow: none !important;
}

/* SOLUCIÓN: Se rediseña el pseudo-elemento ::after para que sea una línea en lugar de un círculo. */
#main-navbar .form-check-input::after {
    content: '';
    display: block;
    position: absolute;
    background-color: #fff; /* Color de la línea */
    border-radius: 2px;
    /* Se quita pointer-events para que la transición funcione correctamente con el cambio de left */
    transition: all 0.2s ease-in-out, left 0.2s ease-in-out;
    
    /* Estado por defecto (MODO SUPERIOR): La línea es VERTICAL */
    width: 3px;
    height: 12px;
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
}

/* Cuando el interruptor está activado (MODO LATERAL): La línea se vuelve HORIZONTAL */
#main-navbar .form-check-input:checked::after {
    width: 12px;
    height: 3px;
    left: calc(100% - 12px - 5px); /* SOLUCIÓN: Se calcula la nueva posición para el estado activado. */
    transform: translateY(-50%);
}

/* --- INICIO: Estilos para Notificaciones de Campana --- */
#notification-bell-container .nav-link {
    position: relative;
    font-size: 1.5rem; /* Icono de campana más grande */
}

/* Base para las insignias de notificación */
.notification-badge {
    position: absolute;
    font-size: 0.65rem;
    font-weight: bold;
    padding: 2px 5px;
    border-radius: 50%;
    border: 1px solid white;
    line-height: 1;
    display: none; /* Ocultas por defecto, JS las muestra si el conteo > 0 */
}

/* Insignia de Stock Bajo (roja, arriba a la derecha) */
.stock-badge {
    top: 5px;
    right: -5px;
    background-color: var(--danger-color, #dc3545);
    color: white;
}

/* Insignia de Próximos a Vencer (amarilla, arriba a la izquierda) */
.expiring-badge {
    top: 5px;
    left: -5px;
    background-color: #ffc107; /* Amarillo de Bootstrap */
    color: #000;
}

/* SOLUCIÓN: Se añaden los estilos para las nuevas insignias de cuentas. */
/* Insignia de Cuentas por Cobrar (verde, abajo a la izquierda) */
.cxc-badge {
    bottom: 5px;
    left: -5px;
    background-color: #198754; /* Verde de Bootstrap (success) */
    color: white;
}

/* Insignia de Cuentas por Pagar (roja, abajo a la derecha) */
.cxp-badge {
    bottom: 5px;
    right: -5px;
    background-color: var(--danger-color, #dc3545);
    color: white;
}

/* Animación para la campana cuando hay notificaciones */
@keyframes ring {
    0%, 100% { transform: rotate(0); }
    10%, 30%, 50%, 70%, 90% { transform: rotate(-10deg); }
    20%, 40%, 60%, 80% { transform: rotate(10deg); }
}

.has-notifications .bi-bell-fill {
    animation: ring 1.5s ease-in-out;
}

/* --- INICIO: Estilos para marcas de deuda (SOLUCIÓN FINAL) --- */

/* 1. Base para tarjetas con marcas */
.has-pending-debt .client-card,
.has-overdue-debt .client-card {
    position: relative;
    overflow: hidden;
}

/* 2. Marca para DEUDA PENDIENTE (Esquina amarilla en la parte inferior izquierda) */
/* Usa ::before para el triángulo amarillo. */
.has-pending-debt .client-card::before {
    content: '';
    position: absolute;
    bottom: 0; /* Posición inferior */
    left: 0;   /* Posición izquierda */
    border-width: 40px 40px 0 0; /* Crea el triángulo en la esquina correcta */
    border-style: solid;
    border-color: #ffc107 transparent transparent transparent; /* Color amarillo */
    box-shadow: 2px -2px 5px rgba(0, 0, 0, 0.15);
    z-index: 1;
}
/* Usa ::after para el icono sobre el triángulo. */
.has-pending-debt .client-card::after {
    content: "\f332"; /* Icono de Bootstrap 'bi-exclamation-triangle-fill' */
    font-family: 'bootstrap-icons';
    position: absolute;
    bottom: 5px; /* Posición inferior */
    left: 5px;   /* Posición izquierda */
    color: #000;
    font-size: 12px;
    z-index: 2;
}

/* 3. Marca para DEUDA VENCIDA (Cinta roja en la esquina superior izquierda) */
/* Usa el pseudo-elemento ::before del contenedor de la columna. */
/* Esto evita CUALQUIER conflicto con los pseudo-elementos de .client-card. */
.has-overdue-debt::before {
    content: "VENCIDO";
    position: absolute;
    top: 20px;
    left: -30px;
    transform: rotate(-45deg);
    background-color: #dc3545;
    color: white;
    padding: 2px 30px;
    font-size: 0.6rem;
    font-weight: bold;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    z-index: 3;
}


/* --- FIN: Estilos para marcas de deuda --- */
/* Estilos compartidos para filas de cuentas y amortizaciones */
.cuenta-row,
.proveedor-cuenta-row {
    cursor: pointer;
}

.toggle-cell {
    width: 40px;
}

.amortizacion-row .amortizacion-details {
    background: #e8f4ff;
    border-left: 4px solid rgba(44, 123, 229, 0.4);
}

.amortizacion-items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.amortizacion-item {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.5rem;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.amortizacion-item button {
    align-self: flex-end;
}