/* --- Personalización de la Barra de Desplazamiento --- */

/* 1. El ancho de la barra */
::-webkit-scrollbar {
    width: 12px; /* Grosor de la barra */
}

/* 2. El fondo de la barra (el carril) */
::-webkit-scrollbar-track {
    background: #f1f1f1; /* Color gris muy clarito */
}

/* 3. La parte que se mueve (el pulgar) */
::-webkit-scrollbar-thumb {
    background: #003366; /* Azul oscuro corporativo */
    border-radius: 6px;   /* Bordes redondeados */
    border: 3px solid #f1f1f1; /* Un pequeño borde blanco para que se vea elegante */
}

/* 4. Cuando pasas el mouse por encima */
::-webkit-scrollbar-thumb:hover {
    background: #0055a5; /* Un azul un poco más claro al tocarlo */
}