html {
    scrollbar-width: thin;
    scrollbar-color: #e2e8f0e0 rgba(2, 6, 23, 0.9);
    scrollbar-gutter: auto;
    overflow-y: auto;
}

html[data-app-shell="true"],
html[data-app-shell="true"] body {
    height: 100%;
    overflow: hidden;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 0.62rem;
    height: 0.62rem;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
    background: rgba(2, 6, 23, 0.94);
    border-left: 1px solid rgba(148, 163, 184, 0.05);
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
    border: 2px solid rgba(2, 6, 23, 0.94);
    border-radius: 9999px;
    background: rgba(226, 232, 240, 0.9);
    background-clip: padding-box;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
    background: rgba(248, 250, 252, 0.96);
}

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

@media (prefers-color-scheme: dark) {
    html {
        scrollbar-color: rgba(226, 232, 240, 0.88) rgba(2, 6, 23, 0.92);
    }

    html::-webkit-scrollbar-track,
    body::-webkit-scrollbar-track {
        background: rgba(2, 6, 23, 0.96);
        border-left: 1px solid rgba(148, 163, 184, 0.05);
    }
}

/* Tema claro del shell de aplicación.
   Las reglas de arriba son el aspecto oscuro por defecto, que es el correcto
   para el sitio público y las pantallas de auth (siempre oscuras). Solo el
   shell de app —el único que tiene tema— cambia a gris claro cuando no lleva
   `.dark`. */
html[data-app-shell="true"]:not(.dark) {
    scrollbar-color: rgba(148, 163, 184, 0.7) rgba(241, 245, 249, 0.9);
}

html[data-app-shell="true"]:not(.dark)::-webkit-scrollbar-track,
html[data-app-shell="true"]:not(.dark) body::-webkit-scrollbar-track {
    background: rgba(241, 245, 249, 0.9);
    border-left: 1px solid rgba(148, 163, 184, 0.18);
}

html[data-app-shell="true"]:not(.dark)::-webkit-scrollbar-thumb,
html[data-app-shell="true"]:not(.dark) body::-webkit-scrollbar-thumb {
    border: 2px solid rgba(241, 245, 249, 0.9);
    background: rgba(148, 163, 184, 0.7);
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06);
}

html[data-app-shell="true"]:not(.dark)::-webkit-scrollbar-thumb:hover,
html[data-app-shell="true"]:not(.dark) body::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, 0.85);
}