#panel-principal {
    height: 95vh;
}

/* HC */

/*
.modal-body {  
    height: 700px;
}
*/

.lang-icon{   /* HC: Para que el exportador a csv quede a la derecha */
    position: absolute !important;
    right: 0;
    top: 0;
  }
.seleccionado{
    background-color: rgba(187, 98, 98, 0.555);
}
.pie_pagina {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: red;
    color: white;
    text-align: center;
  }

/* Formatos para Pivot (DataTables) */
.pivot_size{
    font-size: 0.8rem;
  }
.pivot_nro{
    text-align: right;
  }
.pivot_rojo{
        color: red;
  }
.no_seleccionable {
    font-weight: bold;
    background-color: #f1f0f0;
    color: #b6b1b1;
    cursor: not-allowed;
}
.pivot_titulo {
  background-color: #F0F0F0 !important;    
}
/* Para PERFECT SCROLL BAR  */
        /* Base: HTML y BODY ocupan el 100% del viewport y controlan el overflow global */
        html, body {
            height: 100vh; /* 100% del alto del viewport */
            width: 100vw;  /* 100% del ancho del viewport */
            margin: 0;
            padding: 0;
            overflow: hidden; /* ¡Crucial! Evita el scroll global del navegador */
        }

        /* BODY como Contenedor CSS Grid principal */
        body {
            display: grid;
            grid-template-rows: auto 1fr; /* 'auto' para la navbar, '1fr' para el contenido restante */
            grid-template-columns: 1fr; /* Una sola columna para el ancho total */
        }

        /* Navbar: Ocupa la primera fila de la grilla del body */
        .navbar {
            grid-row: 1;
            grid-column: 1;
            z-index: 1030;
            /* No necesitamos una altura fija aquí, 'auto' de grid-template-rows lo manejará */
        }

        /* Área de Contenido Principal: Ocupa la segunda fila y todo el ancho */
        .main-content-area {
            grid-row: 2;
            grid-column: 1;
            display: grid; /* Convertir esta área en un contenedor Grid para sus columnas internas */
            grid-template-columns: 4fr 8fr; /* Divide el espacio en 4/12 y 8/12 */
            grid-template-rows: 1fr; /* Una sola fila para el contenido que se estira verticalmente */
            overflow: hidden; /* Evita scroll a este nivel */
        }

        /* === Paneles Principales === */

        /* Panel Izquierdo (4/12 de ancho) */
        .left-panel {
            grid-column: 1;
            grid-row: 1;
            display: grid;
            grid-template-rows: auto 1fr; /* Fila auto para la sección fija, 1fr para el contenido scrollable */
            overflow: hidden;
            border-right: 1px solid #ccc;
        }

        /* Panel Derecho (8/12 de ancho) */
        .right-panel {
            grid-column: 2;
            grid-row: 1;
            overflow: hidden;
            /* Aquí, el right-panel es directamente el .scrollable-content */
        }

        /* Sección superior fija de la columna izquierda (el selector) */
        .fixed-section {
            grid-row: 1;
            grid-column: 1;
            padding: 15px;
            border-bottom: 1px solid #ccc;
            /* Añadimos un ID para obtener su altura con JS */
        }

        /* Contenedor de las dos sub-columnas scrollables dentro del panel izquierdo */
        .scroll-container-left {
            grid-row: 2; /* Ocupa la segunda fila de la grilla del panel izquierdo (el espacio restante) */
            grid-column: 1;
            display: grid; /* Convertir este contenedor en Grid para sus dos sub-columnas */
            grid-template-columns: 1fr 1fr; /* Dos columnas de igual ancho (50% cada una) */
            grid-template-rows: 1fr; /* Una sola fila que ocupa todo el alto */
            overflow: hidden; /* Evita scroll a este nivel */
        }

        /* === Contenedores con contenido scrollable y sus wrappers === */

        /* El contenedor externo de la zona de scroll (tendrá bordes, colores, etc.) */
        .scrollable-content {
            /* IMPORTANTE: La altura de este div será ajustada por JS con un calc() */
            width: 100%;
            overflow: hidden;
            min-height: 0;
            display: grid;
            grid-template-rows: 1fr;
            grid-template-columns: 1fr;
            position: relative; /* Permite que PerfectScrollbar posicione la barra dentro de este elemento */
        }

        /* El NUEVO div WRAPPER donde PerfectScrollbar realmente se inicializará */
        .scroll-wrapper {
            grid-row: 1;
            grid-column: 1;
            overflow-y: auto; /* Habilita el scroll vertical nativo antes que PerfectScrollbar lo tome */
            overflow-x: auto; /* Habilita el scroll horizontal si es necesario */
            padding: 15px 25px 30px 15px; /* top right bottom left (30px para el final de la barra) */
            min-height: 0; /* Crucial para Grid y desbordamiento interno */
        }
        .scroll-wrapper .content-horizontal {
            min-width: 150%; 
        }
        /* --- Estilos de Ejemplo para Visualización (puedes eliminarlos en producción) --- */
        /*.bg-primary-subtle { background-color: #e0f2f7 !important; }
        .xbg-secondary-subtle { background-color: #f0f0f0 !important; }
        .xbg-info-subtle { background-color: #d9edf7 !important; }
        .xbg-warning-subtle { background-color: #fff3cd !important; }
        .xbg-danger-subtle { background-color: #f2dede !important; } */
/* PARA PERFECT SCROLL BAR (FIN) */