/* Agrega esto dentro de tus estilos para matar el scroll horizontal definitivamente */
body, html {
    overflow-x: hidden;
    width: 100%;
}

#wrapper {
    overflow-x: hidden;
    width: 100%;
}
#btn_CotizaProyect {
    transition: all 0.25s ease;
    border: none;
}

    /* HOVER */
    #btn_CotizaProyect:hover {
        background-color: #ff0000;
        color: white;
        transform: translateY(-6px) scale(1.05);
        box-shadow: 0 20px 60px rgba(255,0,0,0.75), 0 0 25px rgba(255,0,0,0.45);
    }

    /* PRESSED */
    #btn_CotizaProyect:active {
        background-color: #000000;
        color: white;
        transform: translateY(2px) scale(0.98);
        box-shadow: 0 4px 10px rgba(0,0,0,0.35);
    }

/* Estilos base del Sidebar */
#sidebar {
    min-height: 100vh;
    width: 280px;
    margin-left: -280px; /* Oculto inicialmente */
    transition: margin 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: #0F172A;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    position: fixed;
    top: 100px; /* Abajo de la barra superior */
    z-index: 1020;
}

#page-content-wrapper {
    width: 100%;
    transition: padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    padding-top: 0;
}

/* Comportamiento al activar la hamburguesa (Reduce el contenido) */
#wrapper.toggled #sidebar {
    margin-left: 0;
}

@media (min-width: 802px) {
    #wrapper.toggled #page-content-wrapper {
        padding-left: 280px; /* Acorta el ancho del contenido restando el sidebar */
    }
}


/* Efectos visuales de los items del menú */
.hover-sidebar-item {
    transition: all 0.2s;
    opacity: 0.75;
}

    .hover-sidebar-item:hover {
        background-color: rgba(56, 189, 248, 0.08) !important;
        color: #38BDF8 !important;
        opacity: 1;
    }

.active-sidebar-item {
    background-color: rgba(56, 189, 248, 0.12) !important;
    color: #38BDF8 !important;
    font-weight: 600;
}

#btn_Menu:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

/* ==========================================================================
   REDISEÑO DE LA BARRA DE DESPLAZAMIENTO (SCROLLBAR) PREMIUM 
   ========================================================================== */

/* 1. Para navegadores basados en Webkit (Chrome, Edge, Safari, Opera) */
::-webkit-scrollbar {
    width: 10px; /* Ancho de la barra vertical */
    height: 10px; /* Alto de la barra horizontal (si existiera) */
}

/* El fondo por donde corre la barra (Track) */
::-webkit-scrollbar-track {
    background: #070a12; /* El mismo fondo oscuro de tu sitio */
}

/* La barrita que se mueve (Thumb) */
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1); /* Un blanco muy sutil y transparente */
    border-radius: 20px; /* Bordes completamente redondeados */
    border: 2px solid #070a12; /* Crea un efecto de espacio alrededor */
    transition: background 0.3s ease;
}

    /* Comportamiento al pasar el mouse por encima (Hover) */
    ::-webkit-scrollbar-thumb:hover {
        background: #ff843d; /* Tu acento naranja premium al interactuar */
    }

/* 2. Para Firefox (Soporte estándar moderno) */
html {
    scrollbar-width: thin; /* Hace la barra más delgada */
    scrollbar-color: rgba(255, 255, 255, 0.1) #070a12; /* [Color del botón] [Color del fondo] */
}