/* =========================================================================
   SCROLLBAR.CSS — Scrollbar personalizado, reutilizable y aislado
   Compatible: Chrome / Edge / Safari (WebKit) + Firefox (scrollbar-width/color)
   No depende de Bootstrap 5 ni de ningún framework — solo CSS puro.
   Para usarlo en otro proyecto: copiá este archivo completo y linkealo,
   o pegá el bloque tal cual dentro de un <style>.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1) VARIABLES DE COLOR (:root)
   Definimos acá la paleta del scrollbar como variables CSS propias.
   Así, para reutilizar este bloque en otro proyecto, solo hay que cambiar
   estos 4 valores (no hace falta tocar el resto del archivo).
   Los valores por defecto están tomados de la paleta del sitio
   (dorado CERES sobre fondo navy).
   ------------------------------------------------------------------------- */
:root {
  --scrollbar-width: 9px;              /* ancho del scrollbar (8-10px) */
  --scrollbar-track: rgba(6, 12, 75, 0.06);   /* track: color muy sutil, casi invisible */
  --scrollbar-thumb: #f89f28;          /* thumb: color principal (dorado CERES) */
  --scrollbar-thumb-hover: #c9861a;    /* thumb en hover: versión más oscura */
  --scrollbar-radius: 100px;           /* bordes redondeados tipo "píldora" */
}

/* -------------------------------------------------------------------------
   2) WEBKIT / CHROMIUM (Chrome, Edge, Safari, Opera)
   Estos navegadores usan pseudo-elementos ::-webkit-scrollbar-*.
   Se aplica de forma global (*) para cubrir tanto la ventana como
   cualquier contenedor con overflow (por ej. un div con scroll interno).
   ------------------------------------------------------------------------- */

/* Ancho/alto total del scrollbar (vertical y horizontal) */
*::-webkit-scrollbar {
  width: var(--scrollbar-width);
  height: var(--scrollbar-width);
}

/* Fondo del "riel" por donde se desliza el thumb */
*::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: var(--scrollbar-radius);
}

/* La "barrita" que se arrastra */
*::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: var(--scrollbar-radius);
  /* borde transparente + background-clip crea un pequeño margen
     entre el thumb y el track, dando efecto "flotante" */
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background-color 0.25s ease, opacity 0.25s ease;
}

/* Estado hover: color más oscuro, transición suave (definida arriba) */
*::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover);
}

/* Esquina donde se cruzan scrollbar vertical y horizontal */
*::-webkit-scrollbar-corner {
  background: transparent;
}

/* -------------------------------------------------------------------------
   3) FIREFOX
   Firefox no soporta ::-webkit-scrollbar-*, usa estas dos propiedades
   estándar en su lugar. "thin" ya da un ancho delgado similar al de arriba.
   scrollbar-color recibe: <color-thumb> <color-track>
   ------------------------------------------------------------------------- */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* -------------------------------------------------------------------------
   4) DEGRADACIÓN ELEGANTE
   No se necesita ningún @supports ni fallback extra: si un navegador no
   entiende ::-webkit-scrollbar-* ni scrollbar-color/width, simplemente
   ignora esas reglas y muestra el scrollbar nativo del sistema operativo.
   Nada se rompe, no hay errores ni layout shift.
   ========================================================================= */