/* Scrollbars compartidos: superficies discretas, sin botones de flecha. */
:root {
  --scrollbar-track: color-mix(in srgb, #d8d0c3 42%, transparent);
  --scrollbar-thumb: #66705d;
  --scrollbar-thumb-hover: #3e4838;
  --scrollbar-thumb-active: #283124;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

*::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

*::-webkit-scrollbar-track {
  border-radius: 999px;
  background: var(--scrollbar-track);
}

*::-webkit-scrollbar-thumb {
  min-width: 44px;
  min-height: 44px;
  border: 3px solid transparent;
  border-radius: 999px;
  background: var(--scrollbar-thumb);
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover);
}

*::-webkit-scrollbar-thumb:active {
  background-color: var(--scrollbar-thumb-active);
}

/*
 * Chromium, Edge y Safari pueden reservar botones distintos para cada eje.
 * El selector general y los estados de dirección fuerzan que todos ocupen 0 px.
 */
*::-webkit-scrollbar-button,
*::-webkit-scrollbar-button:increment,
*::-webkit-scrollbar-button:decrement,
*::-webkit-scrollbar-button:start,
*::-webkit-scrollbar-button:end {
  -webkit-appearance: none;
  appearance: none;
  display: none;
  width: 0;
  height: 0;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  background-image: none;
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

@media (forced-colors: active) {
  :root,
  * {
    scrollbar-color: CanvasText Canvas;
  }
}