/* 1. MODO CLARO (Default) */
:root {
    --main-purple: #481F67;
    --main-purple-action: #6A0DAD;
    --main-focus: #8C78f0;

    --font-primary: 'Google Sans', sans-serif;
    --font-secondary: 'DM Mono', monospace;

    --text-main: #212529;
    --text-body: #444444;
    --text-muted: #666666;
    --text-inverse: white;

    --bg-main: #F9F9F9;
    --bg-secondary: white;
    --bg-hover: #E5E4E2;

    --border-color: #E9ECEF;

    --status-success: #10B981;
    --status-warning: #FFDC58;
    --status-alert: #F33A6A;
    --smart-spacing: -0.025em;

    /* Standards */
    --font-size-modal-title: clamp(0.85rem, 2.5vw, 0.95rem);
    --font-family-modal-title: var(--font-secondary);
    --font-weight-modal-title: 500;
    --modal-title-transform: uppercase;
}

body.dark-mode {
    --bg-main: #121212;
    --bg-secondary: #1e1e1e;
    --bg-hover: #2d2d2d;
    --text-main: #f1f1f1;
    --text-body: #b0b0b0;
    --text-muted: #7a7a7a;
    --border-color: #2c2c2c;
    --main-purple: #bb86fc;
    --main-purple-action: #d7b7fd;
    --text-inverse: #121212;
    --text-static-white: #f1f1f1;
}

/* --- Global Smart Scrollbar --- */
/* Para Chrome, Safari y Edge */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

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

::-webkit-scrollbar-thumb {
    background-color: rgba(128, 128, 128, 0.2);
    border: 1px solid transparent;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(128, 128, 128, 0.4);
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

* {
    scrollbar-width: thin;
    scrollbar-color: rgba(128, 128, 128, 0.2) transparent;
}