/* =========================================================
   COMPONENT: SIDE PANEL - VERSION FIX SCROLL
   ========================================================= */

:root {
    /* Ajusta a la altura real de tu barra azul */
    --sp-header-height: 118px;
    --sp-width: 450px;
    --sp-z-index: 1020;
    --sp-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* =========================================================
   1. FIX GLOBAL DE SCROLL (LO QUE SOLUCIONA TU PROBLEMA)
   ========================================================= */

/* Forzamos al navegador a permitir el scroll vertical SIEMPRE */
/* BUSCA ESTE BLOQUE EN TU CSS Y REEMPLÁZALO */
html, body {
    height: auto !important;
    /* CAMBIO 1: Usar vh (viewport height) asegura que cubra la pantalla */
    min-height: 100vh;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    /* CAMBIO 2: Convertir el body en una columna flexible */
    display: flex;
    flex-direction: column;
}

/* Transiciones suaves */
body, #wrapper {
    transition: var(--sp-transition);
}

body {
    position: relative;
    width: 100%;
    /* Quitamos box-sizing global si rompe tu template, 
       pero para el padding push suele ser necesario */
    box-sizing: border-box;
    padding: 0;
}

/* Espacio extra al final del contenido para que nada se corte */
#wrapper {
    display: block;
    width: 100%;
    /* COLCHÓN INFERIOR: Esto asegura que el Copyright no tape tus inputs */
    padding-bottom: 120px !important;
}

/* =========================================================
   2. GESTIÓN DE EMPUJE (PUSH)
   ========================================================= */

/* --- EMPUJE A LA IZQUIERDA --- */
body.sp-pushed-left {
    padding-left: var(--sp-width) !important;
    margin-left: 0 !important;
}

    body.sp-pushed-left #wrapper {
        width: 100% !important;
        margin-left: 0 !important;
    }

/* --- EMPUJE A LA DERECHA --- */
body.sp-pushed-right {
    padding-right: var(--sp-width) !important;
    margin-right: 0 !important;
}

    body.sp-pushed-right #wrapper {
        width: 100% !important;
        margin-right: 0 !important;
    }

/* =========================================================
   3. EL PANEL
   ========================================================= */
.sidepanel {
    position: fixed;
    top: var(--sp-header-height);
    height: calc(100vh - var(--sp-header-height));
    width: var(--sp-width);
    background-color: #fff;
    z-index: var(--sp-z-index);
    /* CAMBIO CLAVE: Flex Column para header/body/footer */
    display: flex;
    flex-direction: column;
    /* Sombra y Transición */
    box-shadow: 0 5px 25px rgba(0,0,0,0.15);
    transition: transform var(--sp-transition), width 0.3s ease;
    /* CAMBIO: Quitamos el scroll de aquí. El panel NO debe scrollear, solo su contenido */
    overflow: hidden;
}

    /* Posiciones */
    .sidepanel.right {
        right: 0;
        transform: translateX(100%);
        border-left: 1px solid #dee2e6;
    }

    .sidepanel.left {
        left: 0;
        transform: translateX(-100%);
        border-right: 1px solid #dee2e6;
    }

    /* Estados */
    .sidepanel.open {
        transform: translateX(0);
    }

    .sidepanel.pinned {
        box-shadow: none;
        border: 1px solid #e3e6f0;
    }

#sp-btn-pin.active {
    color: #007bff !important;
}

    #sp-btn-pin.active i {
        transform: rotate(45deg);
        transition: transform 0.3s ease;
    }

.sidepanel-footer:empty {
    display: none !important;
}

.sidepanel-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* =========================================================
   4. OVERLAY
   ========================================================= */
.sidepanel-overlay {
    position: fixed;
    top: var(--sp-header-height);
    left: 0;
    width: 100%;
    height: calc(100vh - var(--sp-header-height));
    background: rgba(0,0,0,0.4);
    z-index: calc(var(--sp-z-index) - 1);
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}

    .sidepanel-overlay.active {
        opacity: 1;
        visibility: visible;
    }

/* =========================================================
   5. INTERNOS (Header, Body, Footer)
   ========================================================= */
.sidepanel-header {
    /* Altura fija para el título */
    flex: 0 0 60px;
    padding: 0 1.5rem;
    background: #f8f9fc;
    border-bottom: 1px solid #e3e6f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 10;
}

.sidepanel-body {
    /* CAMBIO: Flex grow 1 hace que ocupe todo el espacio disponible entre header y footer */
    flex: 1 1 auto;
    position: relative; /* Necesario para los hijos absolutos */
    /* CAMBIO: Ocultamos el scroll aquí, lo delegamos a .sp-view */
    overflow: hidden;
    background: #fff;
    padding: 0;
}

.sidepanel-footer {
    /* Altura automática según contenido */
    flex: 0 0 auto;
    padding: 1rem;
    background: #fff;
    border-top: 1px solid #e3e6f0;
    z-index: 10;
}

/* Vistas apiladas */
.sp-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Ocupa todo el .sidepanel-body */
    /* CAMBIO: AQUÍ ES DONDE VA EL SCROLL */
    /* Esto permite que cada vista tenga su propia posición de scroll */
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1.5rem;
    animation: spFadeIn 0.25s forwards;
}

    .sp-view.hidden-in-stack {
        display: none;
    }

@keyframes spFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* =========================================================
   EXTRA: SCROLLBAR ESTILIZADA (Webkit: Chrome, Edge, Safari)
   ========================================================= */
/* Esto hace que la barra sea más elegante y delgada */
.sp-view::-webkit-scrollbar {
    width: 8px;
}

.sp-view::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.sp-view::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

    .sp-view::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }

/* =========================================================
   6. MÓVIL
   ========================================================= */
@media (max-width: 992px) {
    :root {
        --sp-width: 100% !important;
    }

    .sidepanel {
        top: 0 !important;
        height: 100% !important;
        width: 100% !important;
        border: none !important;
    }

    .sidepanel-overlay {
        top: 0 !important;
        height: 100% !important;
    }

    body.sp-pushed-left {
        padding-left: 0 !important;
    }

    body.sp-pushed-right {
        padding-right: 0 !important;
    }

    #sp-btn-pin {
        display: none !important;
    }
}