/**
 * Scrollbar global del sitio — fino, discreto y con acento de marca.
 */

html {
    --orbe-scrollbar-size: 8px;
    --orbe-scrollbar-track: transparent;
    --orbe-scrollbar-thumb: rgba(0, 60, 50, 0.32);
    --orbe-scrollbar-thumb-hover: rgba(0, 146, 122, 0.75);
    scrollbar-width: thin;
    scrollbar-color: var(--orbe-scrollbar-thumb) var(--orbe-scrollbar-track);
}

html::-webkit-scrollbar,
body ::-webkit-scrollbar {
    width: var(--orbe-scrollbar-size);
    height: var(--orbe-scrollbar-size);
}

html::-webkit-scrollbar-track,
body ::-webkit-scrollbar-track {
    background: var(--orbe-scrollbar-track);
}

html::-webkit-scrollbar-thumb,
body ::-webkit-scrollbar-thumb {
    background-color: var(--orbe-scrollbar-thumb);
    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
    transition: background-color 0.2s ease;
}

html::-webkit-scrollbar-thumb:hover,
body ::-webkit-scrollbar-thumb:hover {
    background-color: var(--orbe-scrollbar-thumb-hover);
}

html::-webkit-scrollbar-corner,
body ::-webkit-scrollbar-corner {
    background: transparent;
}

/* Con un modal a pantalla completa abierto, la barra sale de pantalla; el padding compensa su ancho. */
html.ff-fs-scroll-lock {
    scrollbar-width: none;
    overflow-x: hidden;
}

html.ff-fs-scroll-lock::-webkit-scrollbar {
    width: 0;
    height: 0;
}