/* Paleta de Colores (Naranja, Amarillo, Rojo, Negro) */
:root {
    --bg-main: #111827;
    --bg-sidebar-nav: #1f2937;
    --text-main: #f9fafb;
    --text-muted: #9ca3af;
    --accent-color: #FFA500; /* Naranja como color de acento principal */
    --sidebar-width: 260px;
    --sidebar-width-collapsed: 88px; /* Nueva variable para el ancho colapsado */
}

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

/* Utility class to prevent scrolling */
body.overflow-hidden {
    overflow: hidden;
}

/* Estilos Generales */
body {
    background-color: var(--bg-main);
    color: var(--text-main);
    display: flex;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    transition: margin-left 0.3s ease;
}

a {
    color: var(--text-main);
    text-decoration: none;
}

    a:hover {
        color: #e5e7eb;
    }

hr {
    border-color: rgba(156, 163, 175, 0.2);
}

/* Sidebar */
.sidebar {
    width: var(--sidebar-width);
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background-color: var(--bg-sidebar-nav);
    padding: 1.25rem;
    transition: width 0.3s ease; /* Transición de ancho en lugar de transform */
    z-index: 1030;
    overflow-x: hidden; /* Ocultar contenido que se desborde horizontalmente */
}

.sidebar .logo {
    font-size: 1.5rem; /* Ajustado para el nuevo layout */
    font-weight: bold;
    text-align: center;
    display: flex; /* Usar flexbox */
    flex-direction: column; /* Apilar verticalmente */
    align-items: center; /* Centrar horizontalmente */
    justify-content: center; /* Centrar verticalmente */
    margin-bottom: 1rem;
    color: var(--text-main);
}

.sidebar-logo-img {
    max-width: 80px;
    max-height: 80px;
    width: auto;
    height: auto;
    margin-bottom: 0.5rem;
}

.sidebar .nav-link {
    color: var(--text-muted);
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    margin-bottom: 0.25rem;
    display: flex; /* Usar flex para alinear icono y texto */
    align-items: center;
    white-space: nowrap; /* Evitar que el texto se divida en varias líneas */
}

    .sidebar .nav-link:hover,
    .sidebar .nav-link.active {
        background-color: var(--accent-color);
        color: var(--text-main);
    }

    .sidebar .nav-link .bi {
        margin-right: 0.75rem;
        font-size: 1.5rem; /* Iconos de menú más grandes */
        transition: margin 0.3s ease;
    }

/* New Page Wrapper to contain Navbar and Main Content */
.page-wrapper {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    transition: margin-left 0.3s ease;
    margin-left: var(--sidebar-width);
    min-width: 0; /* CORRECCIÓN CLAVE: Evita que el flex-item se expanda con contenido ancho */
}

/* Main Content Area */
.main-content {
    position: relative; /* Necesario para contener el overlay */
    flex-grow: 1;
    /* margin-left is now on page-wrapper */
    display: flex;
    flex-direction: column;
}

/* Navbar */
.navbar {
    background-color: var(--bg-sidebar-nav);
    padding: 0.75rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1020;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    width: 100%;
}

.navbar #sidebar-toggle {
    color: var(--text-main);
    font-size: 1.5rem;
}

.navbar .user-info {
    color: var(--text-main);
    display: flex;
    align-items: center;
}

    .navbar .user-info .bi {
        font-size: 1.5rem;
    }

/* Área de contenido principal donde se renderizan las vistas */
.content-fluid {
    padding: 0 !important; /* Eliminar el padding */
    flex-grow: 1;
    display: flex; /* Make it a flex container */
    flex-direction: column; /* Stack children vertically */
    height: 100%; /* Explicitly set height to 100% of its flex parent */
}

/* --- NUEVOS ESTILOS PARA EL ESTADO COLAPSADO --- */
body.sidebar-collapsed .sidebar {
    width: var(--sidebar-width-collapsed); /* Ancho reducido */
}

body.sidebar-collapsed .page-wrapper {
    margin-left: var(--sidebar-width-collapsed); /* Margen ajustado */
}

/* Ocultar el texto del logo y de los enlaces */
body.sidebar-collapsed .sidebar .logo-text,
body.sidebar-collapsed .sidebar .nav-link-text {
    display: none;
}

.sidebar .nav-link-text {
    font-size: 0.9rem; /* Ajuste para que el texto largo no se corte */
}

/* Centrar los íconos cuando está colapsado */
body.sidebar-collapsed .sidebar .nav-link {
    justify-content: center;
}

    body.sidebar-collapsed .sidebar .nav-link .bi {
        margin-right: 0; /* Eliminar margen del ícono */
    }

/* Ajustar el logo cuando está colapsado */
body.sidebar-collapsed .sidebar .logo .bi {
    margin-bottom: 0;
}

/* Loading Overlay Styles */
#loadingOverlay {
    position: absolute; /* Cambiado de fixed a absolute */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(17, 24, 39, 0.8); /* Color de fondo principal con más opacidad */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--text-main);
    font-size: 1.5rem;
    z-index: 9999; /* Asegurarse de que esté por encima de todo */
}

#loadingOverlay .spinner-border {

    width: 3rem;

    height: 3rem;

    margin-bottom: 1rem;

}



/* Estilos para la tarjeta y tabla de rotación de productos */

.card {

    background-color: #ffffff;

    border: none; /* El tema oscuro puede añadir bordes que no queremos */
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Allow cards to grow within their flex container */
    min-height: 0; /* Allow the content to shrink properly */
}

/* Specific card for Product Rotation */
.rotacion-card {
    flex-grow: 1; /* Make this specific card grow */
    height: 100%; /* Make card fill its parent's height */
}

.rotacion-card .card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 0; /* Ensure content can shrink */
}

.rotacion-card #tableContainer {
    flex-grow: 1;
    display: flex;
    flex-direction: column; /* Allow tableContainer to be a flex parent for its content */
    overflow-y: auto; /* Allow internal scrolling if content is too tall */
    min-height: 0; /* Important for flex items with overflow */
}



.card-header {

    background-color: #f8f9fa; /* Un gris muy claro para el encabezado, se ve profesional */

    color: #212529;

    border-bottom: 1px solid #dee2e6;

}



.table-rotacion {

    background-color: #ffffff;

    color: #212529; /* Texto oscuro para contraste sobre fondo blanco */

}



    .table-rotacion thead th {

        color: #212529;

        font-weight: bold;

    }



    .table-rotacion tbody td {

        font-weight: bold;

        color: #343a40;

    }

.pagination-info {
    color: black !important;
    font-weight: bold;
    align-self: center;
}

/* Estilos personalizados para la tabla de rotación */
.table-rotacion {
    border: 1px solid black; /* Borde exterior de la tabla */
}

.table-rotacion th,
.table-rotacion td {
    border: 1px solid black; /* Bordes de las celdas */
    font-weight: bold; /* Asegurar que el texto sea negrita */
    color: #212529; /* Asegurar color de texto oscuro para contraste */
}

/* Sobrescribir el color de borde de Bootstrap para .table-bordered */
.table-bordered {
    border-color: black !important;
}

.table-bordered th,
.table-bordered td {
    border-color: black !important;
}

/* Estilos para la barra de búsqueda */
#serverSearchInput.form-control {
    border-color: black !important;
}

.input-group-text {
    border-color: black !important;
    background-color: #e9ecef; /* Mantener un color de fondo claro para el icono */
    color: #212529; /* Color del icono */
}

/* Estilos para el filtro de mes */
#monthFilter.form-select {
    border-color: black !important;
}

/* Estilos para la paginación */
.pagination .page-link {
    font-weight: bold;
    color: black !important;
}

/* Eliminar padding del container-fluid dentro del main-content */
.main-content .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Ensure container-fluid within main content takes full height and uses flex for its children */
.main-content .container-fluid {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Sidebar Footer */
.sidebar-footer {
    position: absolute;
    bottom: 1rem;
    left: 1.25rem;
    right: 1.25rem;
    text-align: center;
}

.footer-text {
    font-size: 0.8rem; /* Small text */
    color: var(--text-muted);
    white-space: nowrap; /* Prevent text wrapping */
}

/* Hide footer text when sidebar is collapsed */
body.sidebar-collapsed .footer-text {
    display: none;
}

/* Estilo para el botón de paginación activo */
.pagination .page-item.active .page-link {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    color: black !important;
}

/* Estilos para la cabecera de la tabla de rotación */
.table-rotacion thead th {
    text-transform: uppercase;
    background-color: var(--accent-color);
    color: black;
}

/* Pulsing Dot Animation */
@keyframes pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 165, 0, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(255, 165, 0, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 165, 0, 0);
    }
}

.pulsing-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: var(--accent-color);
    border-radius: 50%;
    margin-left: auto; /* Push to the right */
    animation: pulse 2s infinite;
}

/* --- REUSABLE STYLES FOR CUSTOM TABLES --- */
.custom-styled-table thead th {
    background-color: var(--accent-color) !important;
    color: black !important;
    text-align: center;
    vertical-align: middle;
    text-transform: uppercase;
}

.custom-styled-table tbody td {
    font-weight: bold;
}

.text-end-numeric {
    text-align: right;
}

/* Chart container styles */
.chart-container {
    position: relative;
    height: 400px;
}

/* --- ESTILOS RESPONSIVOS PARA TABLET Y MÓVIL --- */
@media (max-width: 991.98px) {
    /* Ocultar sidebar por defecto fuera de la pantalla */
    .sidebar {
        position: fixed;
        left: calc(-1 * var(--sidebar-width)); /* Oculto a la izquierda */
        transition: left 0.3s ease-in-out;
    }

    /* Mostrar sidebar cuando tenga la clase .show */
    .sidebar.show {
        left: 0;
    }

    /* El contenido principal ocupa todo el ancho */
    .page-wrapper {
        margin-left: 0 !important;
    }

    /* Ocultar el texto del logo y enlaces siempre en móvil (ya que el menú está oculto) */
    .sidebar .logo-text,
    .sidebar .nav-link-text {
        display: inline-block !important; /* Asegurarse que el texto sea visible cuando el menú se muestre */
    }

    /* No colapsar el body en móvil, usamos el offcanvas */
    body.sidebar-collapsed .sidebar {
        width: var(--sidebar-width);
    }

    body.sidebar-collapsed .main-content {
        margin-left: 0;
    }

    body.sidebar-collapsed .sidebar .nav-link {
        justify-content: flex-start;
    }

    body.sidebar-collapsed .sidebar .nav-link .bi {
        margin-right: 0.75rem;
    }

    /* Overlay para el fondo cuando el menú está abierto */
    .sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 1029; /* Debajo del sidebar */
        display: none; /* Oculto por defecto */
    }

    .sidebar-overlay.show {
        display: block;
    }

    /* Estilos para el contenedor del gráfico */
    .chart-container {
        width: 100%;
        min-height: 300px;
        height: auto !important; /* Permitir que la altura se ajuste */
    }
    
    /* Ajustar títulos de las tarjetas para que no se desborden */
    .card-title {
        font-size: 1.1rem; /* Reducir ligeramente para que quepa mejor */
        word-wrap: break-word;
        overflow-wrap: break-word;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        hyphens: auto;
    }

    .navbar {
        justify-content: flex-end;
    }

    /* CORRECCIÓN: Anclar el botón de hamburguesa a la navbar en móvil */
    .navbar #sidebar-toggle {
        position: absolute; /* Anclar a la navbar (que es 'sticky') */
        top: 0.75rem;    /* Alinear con el padding superior de la navbar */
        left: 1.5rem;    /* Alinear con el padding izquierdo de la navbar */
        z-index: 1021;   /* Mantenerlo por encima de la navbar pero no necesariamente de todo */
        transition: none; /* Eliminar transición de movimiento */
    }
}

.chart-title {
    color: black;
    font-weight: bold;
}

/* Nuevo estilo para forzar el scroll horizontal en la tabla de ventas en móviles */
@media (max-width: 767.98px) { /* Asumir un breakpoint común para móviles */
    .ventas-table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* Para un desplazamiento suave en iOS */
    }
    
    .ventas-table-scroll table {
        width: 100%; /* Asegurar que la tabla ocupe todo el ancho disponible */
        min-width: 700px; /* Establecer un ancho mínimo para forzar el scroll si es necesario */
    }
}