/* MODO (neutros) */
:root {
    --c-bg: 243 242 242;
    --c-card: 255 255 255;
    --c-text: 18 18 18;
    --c-muted: 90 90 90;

    /* --font-title: "Space Grotesk", sans-serif; */
    /* --font-body: "Space Grotesk", sans-serif; */
    --font-title: "Google Sans", sans-serif;
    --font-body: "Google Sans", sans-serif;

    --r-default: 0.5rem;
    --r-lg: 1rem;
    --r-xl: 1.5rem;
}

/* Dark mode */
html.dark {
    --c-bg: 18 18 18;
    --c-card: 30 30 30;
    --c-text: 245 245 245;
    --c-muted: 170 170 170;
}

/* IDENTIDAD (brand) */
.theme-nac {
    --c-primary: 0 189 214;
    --c-primary2: 43 108 176;

    --c-btn-bg: var(--c-primary);
    --c-btn-text: 255 255 255;

    --font-title: "Space Grotesk", sans-serif;
    --font-body: "Roboto", sans-serif;
}

.theme-cvg {
    --c-primary: 234 42 51;
    --c-primary2: 236 201 75;

    --c-btn-bg: var(--c-primary);
    --c-btn-text: 255 255 255;
}

body {
    font-family: var(--font-body);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-title);
}

.emissive-cyan {
    box-shadow: 0 0 15px rgba(0, 189, 214, 0.2);
}

.emissive-orange {
    box-shadow: 0 0 15px rgba(255, 127, 0, 0.3);
}

.scanline {
    background: linear-gradient(to bottom, rgba(18, 18, 18, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(to right, rgba(255, 0, 0, 0.02), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.02));
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
}

main {
    margin-bottom: 2rem;
}

.standings-tabs-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

/* Scrollbars globales (vertical y horizontal) */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

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

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

*::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(0, 189, 214, 0.5), rgba(234, 42, 51, 0.45));
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

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

.standings-tabs-scroll::-webkit-scrollbar {
    height: 8px;
}

.standings-tabs-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.standings-tabs-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, rgba(0, 189, 214, 0.5), rgba(234, 42, 51, 0.45));
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.standings-chip,
.phase-chip {
    transition: all 180ms ease;
}