/* Estilos para navegadores basados en Webkit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 5px; /* Ancho de la barra de desplazamiento */
    height: 5px; /* Altura de la barra de desplazamiento horizontal */
}

::-webkit-scrollbar-track {
    background: #000; /* Color de fondo del track de la barra de desplazamiento */
    border-radius: 10px; /* Bordes redondeados del track */
}

::-webkit-scrollbar-thumb {
    background: #022d55; /* Color del pulgar (thumb) de la barra de desplazamiento */
    border-radius: 10px; /* Bordes redondeados del pulgar */
}

::-webkit-scrollbar-thumb:hover {
    background: #022d55; /* Color del pulgar al pasar el cursor por encima */
}

/* Estilos para Firefox */
html {
    scrollbar-width: thin; /* Ancho de la barra de desplazamiento (thin, auto, none) */
    scrollbar-color: #022d55 #000; /* Color del pulgar y el track de la barra de desplazamiento */
}

/* Para otros navegadores (IE, Edge antes de Chromium) */
body {
    -ms-overflow-style: -ms-autohiding-scrollbar; /* Oculta automáticamente la barra de desplazamiento en IE y Edge */
}

/* Para personalizar el scroll en dispositivos móviles */
body {
    -webkit-overflow-scrolling: touch; /* Habilita el desplazamiento suave en iOS */
}