/* ============================================================================
 * SITI · Scrollbars (barras de desplazamiento)
 * ----------------------------------------------------------------------------
 * Asset compartido para TODO el proyecto. Reemplaza las barras nativas por unas
 * finas y redondeadas — vertical y horizontal — que se adaptan a los colores de
 * cada app (usa el acento al pasar el cursor). Basta con enlazar este CSS.
 *
 *   <link rel="stylesheet" href="/shared/siti-scrollbar.css">
 *
 * Para excluir un contenedor puntual, ponle la clase .siti-scroll-native.
 * ==========================================================================*/
:root {
  /* Tono neutro derivado del texto de la app + acento en hover. */
  --siti-sb-thumb: color-mix(in srgb, var(--ink, var(--text, #12302f)) 22%, transparent);
  --siti-sb-thumb-hover: var(--primary, var(--brand, var(--teal, #0e9f9a)));
  --siti-sb-size: 10px;
  --siti-sb-radius: 8px;
}

/* Firefox */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--siti-sb-thumb) transparent;
}

/* WebKit / Blink (Chrome, Edge, Safari) — aplica a todo lo desplazable */
*::-webkit-scrollbar {
  width: var(--siti-sb-size);
  height: var(--siti-sb-size);
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: var(--siti-sb-thumb);
  border-radius: var(--siti-sb-radius);
  /* El borde transparente + clip crea el "aire" alrededor del pulgar. */
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background-color .2s ease;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--siti-sb-thumb-hover);
  background-clip: padding-box;
}
*::-webkit-scrollbar-corner {
  background: transparent;
}

/* Escape hatch: volver a la barra nativa donde se necesite */
.siti-scroll-native {
  scrollbar-width: auto;
  scrollbar-color: auto;
}
.siti-scroll-native::-webkit-scrollbar { width: initial; height: initial; }
.siti-scroll-native::-webkit-scrollbar-thumb { background: initial; border: 0; border-radius: 0; }