:root {
    /*
    |--------------------------------------------------------------------------
    | Fondos
    |--------------------------------------------------------------------------
    */

    --color-bg: #07070d;
    --color-bg-deep: #050509;

    --color-sidebar: #160a16;
    --color-sidebar-soft: #1d0d1c;

    --color-surface: #0f0e17;
    --color-surface-soft: #151321;
    --color-surface-elevated: #1b1629;

    /*
    |--------------------------------------------------------------------------
    | Bordes
    |--------------------------------------------------------------------------
    */

    --color-border: #2a2734;
    --color-border-soft: rgba(255, 255, 255, 0.08);
    --color-border-accent: rgba(245, 24, 105, 0.35);

    /*
    |--------------------------------------------------------------------------
    | Texto
    |--------------------------------------------------------------------------
    */

    --color-text: #f8f7fb;
    --color-text-soft: #d7d3df;
    --color-muted: #aaa5b7;
    --color-muted-2: #777281;

    /*
    |--------------------------------------------------------------------------
    | Acentos
    |--------------------------------------------------------------------------
    */

    --color-pink: #f51869;
    --color-magenta: #d6208a;
    --color-purple: #9438ee;
    --color-violet: #7138f2;
    --color-blue: #3f7bff;
    --color-cyan: #08c8f4;

    /*
    |--------------------------------------------------------------------------
    | Estados
    |--------------------------------------------------------------------------
    */

    --color-success: #16e58f;
    --color-warning: #f7c948;
    --color-danger: #ff245f;
    --color-info: #38bdf8;

    /*
    |--------------------------------------------------------------------------
    | Gradientes
    |--------------------------------------------------------------------------
    */

    --gradient-primary:
        linear-gradient(
            135deg,
            var(--color-pink) 0%,
            var(--color-magenta) 35%,
            var(--color-purple) 70%,
            var(--color-violet) 100%
        );

    --gradient-brand:
        linear-gradient(
            90deg,
            var(--color-pink) 0%,
            var(--color-purple) 48%,
            var(--color-blue) 75%,
            var(--color-cyan) 100%
        );

    --gradient-panel:
        linear-gradient(
            135deg,
            rgba(245, 24, 105, 0.18) 0%,
            rgba(148, 56, 238, 0.15) 55%,
            rgba(63, 123, 255, 0.10) 100%
        );

    /*
    |--------------------------------------------------------------------------
    | Sombras
    |--------------------------------------------------------------------------
    */

    --shadow-card:
        0 24px 70px rgba(0, 0, 0, 0.45);

    --shadow-accent:
        0 14px 40px rgba(214, 32, 138, 0.20);

    /*
    |--------------------------------------------------------------------------
    | Radios
    |--------------------------------------------------------------------------
    */

    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 26px;

    /*
    |--------------------------------------------------------------------------
    | Layout
    |--------------------------------------------------------------------------
    */

    --sidebar-width: 274px;

    /*
    |--------------------------------------------------------------------------
    | Tipografía
    |--------------------------------------------------------------------------
    */

    --font-sans:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}


/*
|--------------------------------------------------------------------------
| Reset base
|--------------------------------------------------------------------------
*/

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    margin: 0;
    min-height: 100vh;

    font-family: var(--font-sans);

    background: var(--color-bg);
    color: var(--color-text);

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
    font: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
}

/*
|--------------------------------------------------------------------------
| Light Theme
|--------------------------------------------------------------------------
*/

html[data-theme="light"] {
    color-scheme: light;

    /*
    |--------------------------------------------------------------------------
    | Fondos
    |--------------------------------------------------------------------------
    */

    --color-bg: #f6f7fb;
    --color-bg-deep: #eef0f6;

    --color-sidebar: #ffffff;
    --color-sidebar-soft: #f8f8fb;

    --color-surface: #ffffff;
    --color-surface-soft: #f7f7fa;
    --color-surface-elevated: #ffffff;

    /*
    |--------------------------------------------------------------------------
    | Bordes
    |--------------------------------------------------------------------------
    */

    --color-border: #dedfe8;
    --color-border-soft: rgba(28, 24, 38, 0.08);

    --color-border-accent:
        rgba(226, 24, 107, 0.30);

    /*
    |--------------------------------------------------------------------------
    | Texto
    |--------------------------------------------------------------------------
    */

    --color-text: #17131d;
    --color-text-soft: #342f3c;

    --color-muted: #716b7c;
    --color-muted-2: #9993a3;

    /*
    |--------------------------------------------------------------------------
    | Sombras
    |--------------------------------------------------------------------------
    */

    --shadow-card:
        0 16px 45px rgba(35, 29, 48, 0.07);

    --shadow-accent:
        0 12px 32px rgba(214, 32, 138, 0.10);
}


/*
|--------------------------------------------------------------------------
| Body
|--------------------------------------------------------------------------
*/

html[data-theme="light"] body {
    background: var(--color-bg);
    color: var(--color-text);
}


/*
|--------------------------------------------------------------------------
| Application Background
|--------------------------------------------------------------------------
*/

html[data-theme="light"] .app-body {
    background:
        radial-gradient(
            circle at 88% 0%,
            rgba(113, 56, 242, 0.055),
            transparent 28%
        ),
        radial-gradient(
            circle at 15% 0%,
            rgba(245, 24, 105, 0.035),
            transparent 24%
        ),
        var(--color-bg);
}


/*
|--------------------------------------------------------------------------
| Sidebar
|--------------------------------------------------------------------------
*/

html[data-theme="light"] .app-sidebar {
    border-right:
        1px solid #e7e6ed;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfbfd 100%
        );

    box-shadow:
        8px 0 30px rgba(31, 25, 45, 0.035);
}


html[data-theme="light"] .sidebar-brand-name {
    color: #18131e;
}


html[data-theme="light"] .sidebar-brand-subtitle {
    color: #817a8a;
}


html[data-theme="light"] .sidebar-nav-label {
    color: #9993a2;
}


/*
|--------------------------------------------------------------------------
| Sidebar Links
|--------------------------------------------------------------------------
*/

html[data-theme="light"] .sidebar-link {
    color: #756f7f;
}


html[data-theme="light"] .sidebar-link:hover {
    color: #211b28;

    background:
        rgba(29, 23, 40, 0.04);
}


html[data-theme="light"] .sidebar-link.is-active {
    color: #21151f;

    border-color:
        rgba(226, 24, 107, 0.22);

    background:
        linear-gradient(
            90deg,
            rgba(245, 24, 105, 0.095),
            rgba(148, 56, 238, 0.045)
        );

    box-shadow:
        inset 3px 0 0
        rgba(245, 24, 105, 0.75);
}


html[data-theme="light"] .sidebar-link.is-disabled {
    color: #aaa5b0;
    opacity: 0.72;
}


/*
|--------------------------------------------------------------------------
| Sidebar User
|--------------------------------------------------------------------------
*/

html[data-theme="light"] .sidebar-user {
    border-color: #e3e2e9;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f8f7fb
        );

    box-shadow:
        0 12px 30px rgba(31, 24, 43, 0.055);
}


/*
|--------------------------------------------------------------------------
| Topbar
|--------------------------------------------------------------------------
*/

html[data-theme="light"] .app-topbar {
    border-bottom:
        1px solid #e5e4eb;

    background:
        rgba(255, 255, 255, 0.88);

    box-shadow:
        0 6px 24px rgba(34, 27, 47, 0.035);
}


html[data-theme="light"] .topbar-context {
    color: #777180;
}


html[data-theme="light"] .topbar-user {
    border-color: #dedde6;

    background:
        rgba(255, 255, 255, 0.96);

    box-shadow:
        0 8px 24px rgba(30, 24, 42, 0.055);
}


/*
|--------------------------------------------------------------------------
| Theme Toggle
|--------------------------------------------------------------------------
*/

html[data-theme="light"] .theme-toggle {
    border-color: #dedde6;

    background: #ffffff;

    color: #211b28;

    box-shadow:
        0 8px 22px rgba(31, 25, 45, 0.055);
}


html[data-theme="light"] .theme-toggle:hover {
    border-color:
        rgba(226, 24, 107, 0.30);

    background: #faf9fc;
}


/*
|--------------------------------------------------------------------------
| Page Header
|--------------------------------------------------------------------------
*/

html[data-theme="light"] .page-title {
    color: #17121c;
}


html[data-theme="light"] .page-description {
    color: #716a7b;
}


/*
|--------------------------------------------------------------------------
| Dashboard Hero
|--------------------------------------------------------------------------
*/

html[data-theme="light"] .dashboard-hero {
    border-color: #dedbe8;

    background:
        linear-gradient(
            115deg,
            #ffffff 0%,
            #faf7fd 48%,
            #f4effd 100%
        );

    box-shadow:
        0 18px 45px rgba(43, 31, 64, 0.07);
}


html[data-theme="light"] .dashboard-hero::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 5px;

    background:
        linear-gradient(
            180deg,
            var(--color-pink),
            var(--color-purple)
        );
}


html[data-theme="light"] .dashboard-hero::after {
    top: -145px;
    right: -115px;

    width: 330px;
    height: 330px;

    background:
        radial-gradient(
            circle,
            rgba(148, 56, 238, 0.10),
            rgba(245, 24, 105, 0.035) 55%,
            transparent 72%
        );
}


html[data-theme="light"] .dashboard-hero-title {
    color: #18121e;
}


html[data-theme="light"] .dashboard-hero-text {
    color: #746d7e;
}


/*
|--------------------------------------------------------------------------
| Status Pill
|--------------------------------------------------------------------------
*/

html[data-theme="light"] .status-pill {
    border-color:
        rgba(22, 173, 109, 0.18);

    background:
        rgba(18, 134, 88, 0.075);

    color: #087b4b;
}


html[data-theme="light"] .status-pill-dot {
    background: #10c77b;

    box-shadow:
        0 0 10px
        rgba(16, 199, 123, 0.40);
}


/*
|--------------------------------------------------------------------------
| Metric Cards
|--------------------------------------------------------------------------
*/

html[data-theme="light"] .metric-card {
    border-color: #dfdee6;

    background: #ffffff;

    box-shadow:
        0 14px 35px rgba(35, 28, 48, 0.055);
}


html[data-theme="light"] .metric-card::after {
    top: -72px;
    right: -64px;

    width: 150px;
    height: 150px;

    background:
        radial-gradient(
            circle,
            rgba(245, 24, 105, 0.075),
            rgba(148, 56, 238, 0.025) 58%,
            transparent 70%
        );
}


html[data-theme="light"] .metric-card:hover {
    border-color:
        rgba(226, 24, 107, 0.20);

    box-shadow:
        0 18px 42px rgba(35, 28, 48, 0.08);
}


html[data-theme="light"] .metric-icon {
    border-color:
        rgba(226, 24, 107, 0.18);

    background:
        linear-gradient(
            145deg,
            rgba(245, 24, 105, 0.075),
            rgba(148, 56, 238, 0.055)
        );
}


html[data-theme="light"] .metric-label {
    color: #686171;
}


html[data-theme="light"] .metric-value {
    color: #17121c;
}


html[data-theme="light"] .metric-note {
    color: #827b8c;
}


/*
|--------------------------------------------------------------------------
| Main Panels
|--------------------------------------------------------------------------
*/

html[data-theme="light"] .panel-card {
    border-color: #dfdee6;

    background: #ffffff;

    box-shadow:
        0 14px 38px rgba(35, 28, 48, 0.05);
}


html[data-theme="light"] .panel-title {
    color: #18131e;
}


html[data-theme="light"] .panel-subtitle {
    color: #777080;
}


/*
|--------------------------------------------------------------------------
| Quick Actions
|--------------------------------------------------------------------------
*/

html[data-theme="light"] .quick-action {
    border-color: #e2e1e8;

    background:
        linear-gradient(
            145deg,
            #fbfbfd,
            #f8f7fb
        );
}


html[data-theme="light"] .quick-action:hover {
    transform: translateY(-2px);

    border-color:
        rgba(226, 24, 107, 0.22);

    background: #ffffff;

    box-shadow:
        0 14px 30px rgba(38, 29, 51, 0.07);
}


html[data-theme="light"] .quick-action-icon {
    background:
        linear-gradient(
            145deg,
            rgba(148, 56, 238, 0.10),
            rgba(245, 24, 105, 0.06)
        );
}


html[data-theme="light"] .quick-action-title {
    color: #1c1622;
}


html[data-theme="light"] .quick-action-text {
    color: #787180;
}


/*
|--------------------------------------------------------------------------
| Status Items
|--------------------------------------------------------------------------
*/

html[data-theme="light"] .status-item {
    border-color: #e2e1e8;

    background:
        linear-gradient(
            145deg,
            #fbfbfd,
            #f8f7fb
        );
}


html[data-theme="light"] .status-item-title {
    color: #1b1521;
}


html[data-theme="light"] .status-item-text {
    color: #777080;
}


/*
|--------------------------------------------------------------------------
| Mobile Overlay
|--------------------------------------------------------------------------
*/

html[data-theme="light"] .sidebar-overlay {
    background:
        rgba(24, 19, 31, 0.32);
}

/*
|--------------------------------------------------------------------------
| Light Theme - Application
|--------------------------------------------------------------------------
*/

html[data-theme="light"] .app-body {
    background:
        radial-gradient(
            circle at 76% 0%,
            rgba(113, 56, 242, 0.08),
            transparent 30%
        ),
        radial-gradient(
            circle at 15% 10%,
            rgba(245, 24, 105, 0.07),
            transparent 28%
        ),
        var(--color-bg);
}


html[data-theme="light"] .app-sidebar {
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.99),
            rgba(248, 245, 250, 0.99)
        );
}


html[data-theme="light"] .app-topbar {
    background:
        rgba(255, 255, 255, 0.84);
}


html[data-theme="light"] .topbar-user,
html[data-theme="light"] .sidebar-user {
    background:
        rgba(255, 255, 255, 0.90);
}


html[data-theme="light"] .dashboard-hero {
    background:
        linear-gradient(
            110deg,
            rgba(255, 224, 236, 0.96),
            rgba(235, 227, 255, 0.98)
        );
}


html[data-theme="light"] .metric-card,
html[data-theme="light"] .panel-card {
    background:
        rgba(255, 255, 255, 0.94);
}


html[data-theme="light"] .quick-action,
html[data-theme="light"] .status-item {
    background:
        var(--color-surface-soft);
}


html[data-theme="light"] .quick-action:hover {
    background:
        var(--color-surface-elevated);
}


html[data-theme="light"] .sidebar-link:hover {
    background:
        rgba(24, 19, 31, 0.045);
}


html[data-theme="light"] .sidebar-link.is-active {
    background:
        linear-gradient(
            90deg,
            rgba(245, 24, 105, 0.12),
            rgba(214, 32, 138, 0.07)
        );
}


/*
|--------------------------------------------------------------------------
| Light Theme - Auth
|--------------------------------------------------------------------------
*/

html[data-theme="light"] .auth-page {
    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(245, 24, 105, 0.12),
            transparent 30%
        ),
        radial-gradient(
            circle at 78% 12%,
            rgba(113, 56, 242, 0.11),
            transparent 28%
        ),
        radial-gradient(
            circle at 58% 90%,
            rgba(8, 200, 244, 0.08),
            transparent 32%
        ),
        var(--color-bg-deep);
}


html[data-theme="light"] .auth-card {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.98),
            rgba(249, 242, 255, 0.98) 50%,
            rgba(255, 255, 255, 0.98)
        );
}


html[data-theme="light"] .auth-feature {
    background:
        rgba(255, 255, 255, 0.76);
}


html[data-theme="light"] .form-input {
    background:
        rgba(255, 255, 255, 0.94);

    color:
        var(--color-text);
}


html[data-theme="light"] .form-input:focus {
    background: #ffffff;
}