/* Personalización del scrollbar en Webkit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 12px; /* Ancho del scrollbar vertical */
  height: 12px; /* Altura del scrollbar horizontal */
}

/* Estilo del "track" (la parte por donde se mueve el scroll) */
::-webkit-scrollbar-track {
  background: #222; /* Color de fondo del track */
  border-radius: 10px; /* Bordes redondeados */
}

/* Estilo del "thumb" (la parte del scroll que se mueve) */
::-webkit-scrollbar-thumb {
  background: #555; /* Color del thumb */
  border-radius: 10px; /* Bordes redondeados */
  border: 3px solid #222; /* Borde alrededor del thumb */
}

/* Estilo cuando el thumb es hover (cuando pasas el mouse sobre el scroll) */
::-webkit-scrollbar-thumb:hover {
  background: #888; /* Color más claro cuando el mouse pasa sobre el thumb */
}

/* Estilo del scrollbar horizontal (si lo necesitas) */
::-webkit-scrollbar-horizontal {
  height: 10px;
}

/* Personalización de scrollbar en Firefox */
scrollbar {
  width: 12px;
  height: 12px;
}

scrollbar[orient="vertical"] {
  background: #222;
}

scrollbar-thumb {
  background-color: #555;
  border-radius: 10px;
  border: 3px solid #222;
}

scrollbar-thumb:hover {
  background-color: #888;
}