html,
body {
    margin: 0 !important;
    padding: 0 !important;
}

/* ========================================================================== 
   WRAPPER GENERAL
========================================================================== */

.interna-page .wrapper-contenido {
    margin: 0 !important;
    padding: 0 !important;

    /* mismo alto del header compacto */
    padding-top: 90px !important;

    display: flex !important;
    flex-direction: row;

    width: 100% !important;
}

/* ========================================================================== 
   GRILLA
========================================================================== */

.interna-page .container-fluid,
.interna-page .row {
    margin: 0 !important;
    padding: 0 !important;

    --bs-gutter-x: 0 !important;
    --bs-gutter-y: 0 !important;

    width: 100% !important;
}

.col-lg-3 {
    width: 25% !important;
}

.col-lg-9 {
    width: 75% !important;
}

/* ========================================================================== 
   SIDEBAR
========================================================================== */

.sidebar-muni {

    background-color: #ffffff;

    border-right: 1px solid #f0e6ec;

    margin: 0 !important;
    padding: 0 !important;

    position: sticky !important;

    /* SIEMPRE debajo del header */
    top: 90px !important;

    height: calc(100vh - 90px) !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    scroll-behavior: smooth;

    padding-bottom: 120px;

    transition:
        top 0.25s ease,
        height 0.25s ease;

    z-index: 10;

    /* Scroll moderno Firefox */
    scrollbar-width: thin;
    scrollbar-color: rgba(102, 36, 69, 0.25) transparent;
}

/* Scroll moderno Chrome */
.sidebar-muni::-webkit-scrollbar {
    width: 6px;
}

.sidebar-muni::-webkit-scrollbar-thumb {
    background: rgba(102, 36, 69, 0.25);
    border-radius: 20px;
}

.sidebar-muni::-webkit-scrollbar-track {
    background: transparent;
}

/* ========================================================================== 
   CONTENIDO DERECHO
========================================================================== */

.interna-page .col-lg-9 {
    padding: 2rem 3rem !important;
}

/* ========================================================================== 
   HEADER DEL SIDEBAR
========================================================================== */

.sidebar-muni .bg-dark {

    background-color: #4a1530 !important;

    padding: 1.3rem 1rem !important;

    color: white;

    font-weight: bold;

    text-align: center;

    letter-spacing: 1px;

    position: sticky;

    top: 0;

    z-index: 20;
}

/* ========================================================================== 
   ITEMS PRINCIPALES
========================================================================== */

.sidebar-item {

    display: block;

    padding: 1.05rem 1.4rem;

    color: #5c4d56;

    font-weight: 700;

    text-decoration: none;

    border-bottom: 1px solid #f6eff3;

    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        padding-left 0.25s ease;
}

/* Hover moderno */
.sidebar-item:hover {

    background-color: rgba(102, 36, 69, 0.05);

    color: #662445;

    padding-left: 1.7rem;
}

/* Activo */
.sidebar-item.active {

    background-color: #662445 !important;

    color: #ffffff !important;

    border-left: 5px solid #a42c94;
}

/* ========================================================================== 
   SUBITEMS
========================================================================== */

.sidebar-subitem {

    display: block;

    padding: 0.9rem 1.5rem 0.9rem 2.8rem;

    font-size: 0.85rem;

    color: #7d6c76;

    text-decoration: none;

    border-bottom: 1px solid #fbf8fa;

    background-color: #fdfbfe;

    transition:
        all 0.25s ease;
}

.sidebar-subitem:hover {

    color: #662445;

    background-color: rgba(102, 36, 69, 0.08);

    padding-left: 3.1rem;
}

.sidebar-subitem.active {

    color: #662445;

    font-weight: bold;

    background-color: rgba(102, 36, 69, 0.08);

    border-left: 4px solid #a42c94;
}

/* ========================================================================== 
   FLECHAS
========================================================================== */

.sidebar-item .icon-arrow {

    opacity: 0;

    transition: opacity 0.3s ease;
}

.sidebar-item.active .icon-arrow {

    opacity: 1;

    color: white;
}

/* Flecha collapse moderna */
.sidebar-chevron {

    transition: transform 0.3s ease;

    font-size: 0.8rem;
}

/* Girar al abrir */
.sidebar-item[aria-expanded="true"] .sidebar-chevron {

    transform: rotate(90deg);
}

/* ========================================================================== 
   RESPONSIVE
========================================================================== */

@media (max-width: 991px) {

    .col-lg-3,
    .col-lg-9 {
        width: 100% !important;
    }

    .sidebar-muni {

        position: relative !important;

        top: 0 !important;

        height: auto !important;

        overflow: visible !important;

        border-right: none;

        border-bottom: 1px solid #f0e6ec;
    }

    .interna-page .col-lg-9 {

        padding: 2rem 1.5rem !important;
    }

    .sidebar-item:hover {

        padding-left: 1.4rem;
    }

    .sidebar-subitem:hover {

        padding-left: 2.8rem;
    }
}
/* Flecha animada */
.sidebar-chevron {
    transition: transform 0.3s ease;
    font-size: 0.8rem;
}

/* Cuando está abierto */
.sidebar-item[aria-expanded="true"] .sidebar-chevron {
    transform: rotate(90deg);
}