/*
 * Barras de scroll de toda la app (caja, panel, web pública, reserva online).
 * Se carga desde templates/_scrollbars.html.twig en el <head> de cada página.
 *
 * 1. SIEMPRE visibles, también en móvil y tablet: así se ve que hay más contenido.
 *    Las barras "superpuestas" de macOS/iOS/Android se esconden solas; con
 *    ::-webkit-scrollbar el navegador pinta la nuestra y ya no desaparece.
 * 2. En un ORDENADOR (html.is-desktop, lo decide el script del parcial) son
 *    gruesas: hay pantallas táctiles de PC que no arrastran el contenido con el
 *    dedo y hay que coger la barra; con 6 px no se puede.
 *
 * Ojo: en Chrome, si un elemento tiene scrollbar-width o scrollbar-color, deja
 * de usar ::-webkit-scrollbar. Por eso aquí solo se ponen para Firefox y ninguna
 * hoja debe usar scrollbar-width (ni "none" para esconder: la barra se ve siempre).
 */

:root {
    --sb-size: 8px;
    --sb-thumb: rgba(168, 97, 78, .55);       /* cobre */
    --sb-thumb-active: rgba(138, 78, 58, .9); /* cobre hondo */
    --sb-track: rgba(36, 28, 25, .06);
}
html.is-desktop {
    --sb-size: 18px;
}

/* Chrome, Edge, Safari, Android, iOS */
::-webkit-scrollbar {
    width: var(--sb-size);
    height: var(--sb-size);
    -webkit-appearance: none;
}
::-webkit-scrollbar-track {
    background: var(--sb-track);
    border-radius: var(--sb-size);
}
::-webkit-scrollbar-thumb {
    min-width: 44px;
    min-height: 44px;
    background: var(--sb-thumb);
    background-clip: padding-box;
    border: 2px solid transparent;
    border-radius: var(--sb-size);
}
html.is-desktop ::-webkit-scrollbar-thumb {
    min-width: 64px;
    min-height: 64px;
    border-width: 3px;
}
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active {
    background-color: var(--sb-thumb-active);
}
::-webkit-scrollbar-corner {
    background: transparent;
}

/* Firefox (no entiende ::-webkit-scrollbar): no se puede dar el grosor en px. */
@supports not selector(::-webkit-scrollbar) {
    * {
        scrollbar-color: var(--sb-thumb) var(--sb-track);
        scrollbar-width: thin;
    }
    html.is-desktop * {
        scrollbar-width: auto;
    }
}

/* Barras del menú lateral del panel (KaiAdmin usa jquery.scrollbar, que dibuja
   las suyas de 4 px y solo al pasar el ratón): visibles y gruesas también. */
.scrollbar-inner > .scroll-element,
.scrollbar-outer > .scroll-element {
    opacity: 1 !important;
}
.scrollbar-inner > .scroll-element.scroll-y { width: var(--sb-size) !important; }
.scrollbar-inner > .scroll-element.scroll-x { height: var(--sb-size) !important; }
.scrollbar-inner > .scroll-element .scroll-bar {
    background-color: var(--sb-thumb) !important;
    border-radius: var(--sb-size) !important;
}

/* La barra no se imprime. */
@media print {
    ::-webkit-scrollbar { display: none; }
}