/*
 * Scrollbar estilo WinUI 2.6 (Fluent), adaptado del tema de Files.
 * Reemplaza el SCSS original compilado a CSS plano para que el navegador
 */

:root {
    /* Tinte "mica" de fondo de la pista en hover */
    --mica-tint: 0, 0%, 95%;
    --mica-tint-opacity: 0.8;
    /* WinUI control-strong-fill-default */
    --winui-control-strong-fill: rgba(0, 0, 0, 0.447);
    /* Flechas negras (tema claro) */
    --sb-caret-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6.10204 16.9814C5.0281 16.9814 4.45412 15.7165 5.16132 14.9083L10.6831 8.59765C11.3804 7.80083 12.6199 7.80083 13.3172 8.59765L18.839 14.9083C19.5462 15.7165 18.9722 16.9814 17.8983 16.9814H6.10204Z' fill='hsl(0, 0%25, 0%25, 0.447)'/%3E%3C/svg%3E");
    --sb-caret-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6.10204 8C5.0281 8 4.45412 9.2649 5.16132 10.0731L10.6831 16.3838C11.3804 17.1806 12.6199 17.1806 13.3172 16.3838L18.839 10.0731C19.5462 9.2649 18.9722 8 17.8983 8H6.10204Z' fill='hsl(0, 0%25, 0%25, 0.447)'/%3E%3C/svg%3E");
    --sb-caret-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 17.8983C9 18.9722 10.2649 19.5462 11.0731 18.839L17.3838 13.3172C18.1806 12.6199 18.1806 11.3804 17.3838 10.6831L11.0731 5.16132C10.2649 4.45412 9 5.02809 9 6.10204V17.8983Z' fill='hsl(0, 0%25, 0%25, 0.447)'/%3E%3C/svg%3E");
    --sb-caret-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M15 17.8983C15 18.9722 13.7351 19.5462 12.9268 18.839L6.61617 13.3172C5.81935 12.6199 5.81935 11.3804 6.61617 10.6831L12.9268 5.16132C13.7351 4.45412 15 5.02809 15 6.10204L15 17.8983Z' fill='hsl(0, 0%25, 0%25, 0.447)'/%3E%3C/svg%3E");
}

:root[data-theme="dark"] {
    --mica-tint: 0, 0%, 13%;
    --winui-control-strong-fill: rgba(255, 255, 255, 0.545);
    /* Flechas blancas (tema oscuro) */
    --sb-caret-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6.10204 16.9814C5.0281 16.9814 4.45412 15.7165 5.16132 14.9083L10.6831 8.59765C11.3804 7.80083 12.6199 7.80083 13.3172 8.59765L18.839 14.9083C19.5462 15.7165 18.9722 16.9814 17.8983 16.9814H6.10204Z' fill='hsl(0, 0%25, 100%25, 0.545)'/%3E%3C/svg%3E");
    --sb-caret-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6.10204 8C5.0281 8 4.45412 9.2649 5.16132 10.0731L10.6831 16.3838C11.3804 17.1806 12.6199 17.1806 13.3172 16.3838L18.839 10.0731C19.5462 9.2649 18.9722 8 17.8983 8H6.10204Z' fill='hsl(0, 0%25, 100%25, 0.545)'/%3E%3C/svg%3E");
    --sb-caret-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 17.8983C9 18.9722 10.2649 19.5462 11.0731 18.839L17.3838 13.3172C18.1806 12.6199 18.1806 11.3804 17.3838 10.6831L11.0731 5.16132C10.2649 4.45412 9 5.02809 9 6.10204V17.8983Z' fill='hsl(0, 0%25, 100%25, 0.545)'/%3E%3C/svg%3E");
    --sb-caret-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M15 17.8983C15 18.9722 13.7351 19.5462 12.9268 18.839L6.61617 13.3172C5.81935 12.6199 5.81935 11.3804 6.61617 10.6831L12.9268 5.16132C13.7351 4.45412 15 5.02809 15 6.10204L15 17.8983Z' fill='hsl(0, 0%25, 100%25, 0.545)'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --mica-tint: 0, 0%, 13%;
        --winui-control-strong-fill: rgba(255, 255, 255, 0.545);
        --sb-caret-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6.10204 16.9814C5.0281 16.9814 4.45412 15.7165 5.16132 14.9083L10.6831 8.59765C11.3804 7.80083 12.6199 7.80083 13.3172 8.59765L18.839 14.9083C19.5462 15.7165 18.9722 16.9814 17.8983 16.9814H6.10204Z' fill='hsl(0, 0%25, 100%25, 0.545)'/%3E%3C/svg%3E");
        --sb-caret-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6.10204 8C5.0281 8 4.45412 9.2649 5.16132 10.0731L10.6831 16.3838C11.3804 17.1806 12.6199 17.1806 13.3172 16.3838L18.839 10.0731C19.5462 9.2649 18.9722 8 17.8983 8H6.10204Z' fill='hsl(0, 0%25, 100%25, 0.545)'/%3E%3C/svg%3E");
        --sb-caret-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 17.8983C9 18.9722 10.2649 19.5462 11.0731 18.839L17.3838 13.3172C18.1806 12.6199 18.1806 11.3804 17.3838 10.6831L11.0731 5.16132C10.2649 4.45412 9 5.02809 9 6.10204V17.8983Z' fill='hsl(0, 0%25, 100%25, 0.545)'/%3E%3C/svg%3E");
        --sb-caret-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M15 17.8983C15 18.9722 13.7351 19.5462 12.9268 18.839L6.61617 13.3172C5.81935 12.6199 5.81935 11.3804 6.61617 10.6831L12.9268 5.16132C13.7351 4.45412 15 5.02809 15 6.10204L15 17.8983Z' fill='hsl(0, 0%25, 100%25, 0.545)'/%3E%3C/svg%3E");
    }
}

::-webkit-scrollbar {
    display: block;
    inline-size: 14px;
    border-radius: 12px;
}

/* Mapeo de flechas por eje: vertical usa arriba/abajo, horizontal izquierda/derecha */
::-webkit-scrollbar:vertical {
    --scrollbar-caret-top: var(--sb-caret-up);
    --scrollbar-caret-bottom: var(--sb-caret-down);
}

::-webkit-scrollbar:horizontal {
    --scrollbar-caret-top: var(--sb-caret-left);
    --scrollbar-caret-bottom: var(--sb-caret-right);
}

::-webkit-scrollbar:hover {
    background:
        var(--scrollbar-caret-bottom) bottom center/contain no-repeat,
        var(--scrollbar-caret-top) top center/contain no-repeat,
        hsl(var(--mica-tint), var(--mica-tint-opacity));
}

::-webkit-scrollbar-thumb {
    border: 6px solid transparent;
    border-block: none;
    border-radius: 14px;
    background-color: var(--winui-control-strong-fill);
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    border: 4px solid transparent;
    border-block: none;
    background-color: var(--winui-control-strong-fill);
    background-clip: padding-box;
}

::-webkit-scrollbar-button:single-button {
    display: block;
    block-size: 14px;
}

/* Fallback mínimo para Firefox */
@supports not selector(::-webkit-scrollbar) {
    html {
        scrollbar-width: auto;
        scrollbar-color: var(--winui-control-strong-fill) transparent;
    }
}