/* =====================================================================
   Tradia · barra de scroll
   =====================================================================
   Archivo aparte, de un solo propósito, para poder incluirlo en TODAS las
   páginas (públicas y paneles) sin arrastrar nada más. Sin esto cada página
   mostraba la barra gris del sistema, con flechas incluidas: el único elemento
   de la pantalla que no era de la marca.

   Se pinta por duplicado a propósito, porque no hay un estándar único:
     - scrollbar-color / scrollbar-width  -> Firefox
     - ::-webkit-scrollbar-*              -> Chrome, Edge, Safari
   Los navegadores ignoran en silencio el bloque que no entienden, así que los
   dos pueden convivir sin condicionales.
   ===================================================================== */

:root {
  /* Le dice al navegador que el sitio es oscuro. Ademas de la barra, tiñe los
     controles nativos (menús desplegables, selectores de fecha, autocompletado),
     que en modo claro aparecían blancos sobre fondo oscuro. */
  color-scheme: dark;

  --tqs-pulgar: #2F7BFF;
  --tqs-pulgar-alto: #5AA0FF;
  --tqs-riel: rgba(255, 255, 255, .035);
}

/* ---------- Firefox ---------- */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--tqs-pulgar) transparent;
}

/* ---------- Chrome / Edge / Safari ---------- */
::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

::-webkit-scrollbar-track {
  background: var(--tqs-riel);
  border-radius: 100px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--tqs-pulgar-alto), var(--tqs-pulgar));
  border-radius: 100px;
  /* El borde transparente + background-clip deja aire alrededor del pulgar: es lo
     que hace que se lea como una pastilla flotando en el riel y no como un bloque
     que llena el canal de lado a lado. */
  border: 2px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #7FB6FF, var(--tqs-pulgar-alto));
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:active {
  background: var(--tqs-pulgar-alto);
  background-clip: padding-box;
}

/* Las flechas de arriba y abajo son lo que más delata la barra del sistema
   (Windows las pinta en gris con su propio estilo, imposible de tematizar). */
::-webkit-scrollbar-button {
  display: none;
}

/* Esquina donde se cruzan la barra vertical y la horizontal: por defecto queda un
   cuadrito gris opaco muy visible en fondos oscuros. */
::-webkit-scrollbar-corner {
  background: transparent;
}