/* ==========================================================================
   SIDEBAR BASE
   ========================================================================== */
.side { 
    width: var(--side-width); 
    border-right: 1px solid var(--line); 
    display: flex; 
    flex-direction: column; 
    transition: width var(--transition); 
    flex-shrink: 0; 
    background: #fff;
}

.nav { 
    padding: 10px 0; 
    display: flex; 
    flex-direction: column; 
    gap: 2px; 
    list-style: none;
    margin: 0;
}

/* Limpieza general de listas y enlaces */
#navContainer ul, #navContainer li {
    list-style: none !important;
    padding: 0;
    margin: 0;
}

#navContainer a {
    text-decoration: none !important;
    color: var(--text);
    display: flex;
    align-items: center;
    transition: all 0.2s ease;
}

/* ==========================================================================
   NIVEL 1 (PADRES)
   ========================================================================== */
.nav-link { 
    display: flex !important; 
    justify-content: space-between; 
    padding: 10px 15px; 
    border: none; 
    background: transparent; 
    cursor: pointer; 
    width: 100%; 
    border-left: 4px solid transparent !important;
}

/* Contenedor interno: Icono + Texto */
.nav-link > span:first-child {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nav-link:hover, 
.nav-link[aria-expanded="true"]:not(.collapsed) { 
    background: #f8f9fa; 
}

/* Iconos Cuadrados */
.ico-box { 
    min-width: 32px; 
    height: 32px; 
    border-radius: 8px; 
    color: #fff; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-weight: 800; 
    font-size: 11px;
    flex-shrink: 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.nav-link .lbl {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

/* ==========================================================================
   NIVEL 2 (SUBMENÚS)
   ========================================================================== */
.nav-sublist {
    background: #fafafa; 
    margin: 0;
    padding: 5px 0;
}

.nav-link-sub {
    padding: 8px 15px 8px 58px; /* Alineado con el texto del padre */
    color: var(--muted);
    font-size: 13px;
    border-left: 4px solid transparent !important;
}

.nav-link-sub:hover {
    background: rgba(0,0,0,0.03);
    color: var(--accent);
}

/* ==========================================================================
   ESTADOS (ACTIVO Y COLAPSADO)
   ========================================================================== */

/* Margen Rojo Activo (Solo para el seleccionado) */
.nav-link.active, 
.nav-link-sub.active {
    border-left-color: var(--accent) !important;
    background: rgba(176, 0, 32, 0.05) !important;
    color: var(--accent) !important;
    font-weight: 600;
}

/* Flecha (Chevron) */
.chevron-icon {
    font-size: 12px;
    color: var(--muted);
    transition: transform 0.3s ease;
}

/* Girar flecha cuando el menú está abierto */
.nav-link:not(.collapsed) .chevron-icon {
    transform: rotate(180deg);
}
/* Cuando el sidebar tiene la clase .collapsed */
.side.collapsed {
    width: 70px; /* Ancho mini */
}

/* Ocultar etiquetas y flechas en modo mini */
.side.collapsed .lbl, 
.side.collapsed .chevron-icon, 
.side.collapsed .nav-sublist,
.side.collapsed .sideFooter span {
    display: none !important;
}

/* Centrar los iconos en modo mini */
.side.collapsed .nav-link {
    justify-content: center;
    padding: 10px 0;
}

.side.collapsed .ico-box {
    margin: 0; /* Quita el margen derecho para que quede centrado */
}
/* Footer */
.sideFooter {
    margin-top: auto;
    padding: 20px 15px;
    border-top: 1px solid var(--line);
}
/* Forzar que Bootstrap oculte los menús si no tienen la clase .show */
.collapse:not(.show) {
    display: none !important;
}

/* Asegurar que la animación de Bootstrap funcione */
.collapsing {
    height: 0;
    overflow: hidden;
    transition: height 0.35s ease;
}
/* Color para Ambiente de Pruebas (Ámbar/Dorado Suave) */
.topbar.env-testing {/* 
    background: linear-gradient(135deg, #b45309 0%, #d97706 100%) !important; Ámbar intenso */
    border-bottom: 3px solid #f59e0b; /* Línea inferior dorada brillante */
}

/* Texto de la marca en modo pruebas para asegurar contraste */
/* .topbar.env-testing .brand h1,
.topbar.env-testing 
{
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
} */

/* Indicador visual "TESTING" */
/*  */





/* 1. EL CONTENEDOR PADRE (El que hace la magia de izquierda/derecha) */
.p-3.bg-light.border-top.d-flex {
    display: flex !important;
    justify-content: space-between !important; /* Manda uno a cada lado */
    align-items: center !important;
    width: 100%;
}

/* 2. EL CONTENEDOR DE LA PAGINACIÓN (Cajita de botones) */
.pagination-container {
    display: flex !important;
    background: #fff;
    /*border: 1px solid #d9534f;  Borde rojo UJED */
    border-radius: 6px;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

/* 3. LAS FLECHAS ROJAS */
.pag-btn {
    background-color: #d9534f !important; /* Rojo */
    color: white !important;
    border: none;
    padding: 0 12px;
    height: 38px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background 0.2s;
}

.pag-btn:hover:not(:disabled) {
    background-color: #b52b27 !important;
}

.pag-btn:disabled {
    background-color: #f5c6c4 !important;
    cursor: not-allowed;
}

/* 4. LOS NÚMEROS (Lista horizontal) */
.pag-list {
    display: flex !important;
    flex-direction: row !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.pag-link-num {
    border: none;
    background: white;
    color: #495057;
    padding: 0 15px;
    height: 38px;
    display: flex;
    align-items: center;
    font-weight: 600;
    cursor: pointer;
    border-right: 1px solid #f0f0f0;
    transition: all 0.2s;
}

/* Número Activo */
.pag-link-num.active {
    color: #d9534f !important;
    background-color: #fff5f5 !important;
    box-shadow: inset 0 -3px 0 #d9534f;
}

.pag-link-num:hover:not(.active) {
    background-color: #f8f9fa;
}

/* --- PAGINACIÓN (Se mantiene igual, está correcta) --- */
.p-3.bg-light.border-top.d-flex {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100%;
}

.form-select-sm {
    height: 31px;
    font-size: 0.85rem;
    border-color: #dee2e6;
    cursor: pointer;
}

.form-select-sm:focus {
    border-color: #800000; /* Color guinda/institucional */
    box-shadow: 0 0 0 0.25rem rgba(128, 0, 0, 0.1);
}

/* #btnCatNew {
    background-color: #007bff;
    border: none;
    transition: all 0.2s;
}

#btnCatNew:hover {
    background-color: #0056b3;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
} */