:root,
html[data-theme="dark"] {
    --color-primary: #7b2ff7;
    --color-secondary: #9b59b6;
    --color-primary-light: #9b8ff7;
    --color-primary-strong: #7b41ff;
    --color-secondary-light: #b59ff5;
    --color-accent-cool: #6f7cff;

    --color-success: #00e396;
    --color-danger: #ff4560;
    --color-warning: #ff8a00;
    --color-success-strong: #2af5b3;
    --color-danger-strong: #ff5f77;

    --text-main: #ffffff;
    --text-main-strong: #e2e0ff;
    --text-on-accent: #ffffff;
    --text-muted: #9090b0;
    --text-soft: #c0c0e0;
    --text-soft-strong: #b0b0ff;
    --text-subtle: #555577;
    --success-text: #34d399;
    --danger-text: #f87171;
    --transparent: transparent;

    --bg-main: #0f0f24;
    --bg-main-soft: #11142c;
    --bg-main-strong: #0b0d1d;
    --bg-main-accent: #161936;
    --bg-card: #1a1a38;
    --bg-elevated: #1a1a3a;
    --bg-neutral: #1e1e38;
    --bg-overlay: rgba(5, 7, 18, 0.62);
    --bg-overlay-soft: rgba(5, 7, 18, 0.45);
    --bg-overlay-strong: rgba(0, 0, 0, 0.75);

    --filter-bg: #252540;
    --filter-bg-strong: rgba(38, 38, 67, 0.9);
    --filter-border: #3a3a5c;
    --hover-bg: #2e2e5e;
    --range-bg: #2e1a5e;
    --input-bg: rgba(255, 255, 255, 0.07);
    --input-bg-focus: rgba(255, 255, 255, 0.09);
    --input-border: rgba(255, 255, 255, 0.08);
    --input-border-strong: rgba(155, 143, 247, 0.5);
    --input-shadow-focus: 0 0 0 4px rgba(123, 65, 255, 0.15);
    --select-option-bg: #2a2d52;

    --border-soft: #2e2e4e;
    --border-soft-strong: #2a2a4a;
    --border-strong: #2a2a4a;

    --success-bg: #0d2e1a;
    --danger-bg: #2e0d0d;
    --error-bg: rgba(220, 38, 38, 0.12);
    --error-border: rgba(220, 38, 38, 0.25);
    --error-border-strong: rgba(220, 53, 69, 0.8);
    --error-outline: 0 0 0 0.2rem rgba(220, 53, 69, 0.22);
    --error-outline-strong: rgba(220, 53, 69, 0.7);
    --error-text: #ffc7c7;
    --danger-soft-text: #ffb4bc;
    --warning-bg: rgba(255, 138, 0, 0.14);
    --warning-border: rgba(255, 138, 0, 0.28);
    --warning-text: #ffd29a;

    --glass-bg: rgba(255, 255, 255, 0.04);
    --glass-bg-soft: rgba(255, 255, 255, 0.03);
    --glass-bg-strong: rgba(255, 255, 255, 0.05);
    --glass-bg-stronger: rgba(255, 255, 255, 0.08);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-border-strong: rgba(255, 255, 255, 0.14);
    --glass-border-soft: rgba(255, 255, 255, 0.06);
    --glass-border-subtle: rgba(255, 255, 255, 0.04);
    --glass-highlight: rgba(255, 255, 255, 0.06);
    --glass-highlight-soft: rgba(255, 255, 255, 0.03);
    --glass-highlight-strong: rgba(255, 255, 255, 0.07);

    --page-bg-color: #0b0d1d; /* sólido: iOS Safari tiñe sus barras y el rebote con background-color, no con degradados */
    --page-bg:
        radial-gradient(circle at top left, rgba(123, 47, 247, 0.16), transparent 28%),
        radial-gradient(circle at bottom right, rgba(111, 124, 255, 0.14), transparent 24%),
        linear-gradient(145deg, #0b0d1d 0%, #11142c 54%, #161936 100%);
    --sidebar-bg: linear-gradient(180deg, rgba(24, 27, 54, 0.96) 0%, rgba(13, 16, 34, 0.98) 100%);
    --sidebar-glow: radial-gradient(circle, rgba(123, 47, 247, 0.2), transparent 70%);
    --topbar-bg: linear-gradient(180deg, rgba(11, 13, 29, 0.88) 0%, rgba(11, 13, 29, 0.35) 100%);
    --interactive-accent-soft: rgba(155, 143, 247, 0.14);
    --interactive-accent-muted: rgba(155, 143, 247, 0.08);
    --interactive-accent-border: rgba(155, 143, 247, 0.18);
    --interactive-accent-border-strong: rgba(155, 143, 247, 0.24);
    --interactive-accent-focus: rgba(123, 47, 247, 0.55);
    --interactive-accent-focus-strong: rgba(123, 47, 247, 0.65);
    --interactive-accent-glow: linear-gradient(135deg, rgba(123, 47, 247, 0.34), rgba(111, 124, 255, 0.22));
    --interactive-accent-sheen: linear-gradient(90deg, transparent, rgba(123, 47, 247, 0.15), transparent);
    --interactive-accent-panel: linear-gradient(90deg, rgba(123, 47, 247, 0.16), rgba(155, 143, 247, 0.08));
    --interactive-accent-contrast: rgba(123, 47, 247, 0.18);
    --interactive-accent-outline: rgba(123, 47, 247, 0.3);
    --interactive-accent-overlay: rgba(123, 47, 247, 0.08);

    --table-surface: linear-gradient(180deg, rgba(23, 26, 52, 0.84) 0%, rgba(14, 17, 36, 0.94) 100%);
    --table-header-bg: linear-gradient(90deg, rgba(121, 45, 247, 0.92), rgba(177, 108, 221, 0.9));
    --table-row-bg: rgba(255, 255, 255, 0.02);
    --table-row-alt: rgba(255, 255, 255, 0.035);
    --table-row-hover: rgba(155, 143, 247, 0.08);
    --modal-surface: linear-gradient(180deg, rgba(28, 31, 59, 0.96) 0%, rgba(17, 19, 38, 0.98) 100%);
    --table-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
    --table-cell-icon-shadow: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25));
    --modal-shadow: 0 30px 70px rgba(0, 0, 0, 0.34);
    --modal-footer-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));

    --chart-positive: #9b8ff7;
    --chart-positive-end: #c6b8ff;
    --chart-negative: #ff6b7a;
    --chart-negative-end: #ff9aa5;
    --chart-card-bg-start: rgba(24, 26, 52, 0.82);
    --chart-card-bg-end: rgba(13, 16, 34, 0.92);
    --chart-card-border: rgba(255, 255, 255, 0.08);
    --chart-card-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
    --chart-card-hover-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
    --chart-card-hover-border: rgba(123, 47, 247, 0.32);
    --chart-grid-soft: rgba(255, 255, 255, 0.05);
    --chart-grid-strong: rgba(255, 255, 255, 0.16);
    --chart-area-start: #7b41ff;
    --chart-area-end: #b59ff5;
    --chart-donut-track: rgba(255, 255, 255, 0.06);
    --chart-marker-fill: #ffffff;
    --chart-donut-label: #9090b0;
    --chart-donut-value: #ffffff;
    --chart-stroke-contrast: #0f0f24;
    --chart-glow: rgba(123, 47, 247, 0.35);
    --chart-tooltip-theme: dark;
    --chart-theme-mode: dark;
    --chart-bg: transparent;
    --chart-expand-overlay: rgba(0, 0, 0, 0.75);
    --chart-kpi-hover-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);

    --button-shadow-soft: 0 3px 10px rgba(37, 99, 235, 0.3);
    --button-shadow-strong: 0 5px 15px rgba(37, 99, 235, 0.4);
    --button-shadow-primary: 0 12px 28px rgba(92, 59, 201, 0.26);
    --button-shadow-primary-hover: 0 16px 32px rgba(92, 59, 201, 0.34);
    --button-shadow-cta: 0 14px 28px rgba(108, 67, 220, 0.28);
    --sidebar-shadow: 28px 0 60px rgba(0, 0, 0, 0.34);
    --sidebar-brand-shadow: 0 18px 40px rgba(123, 65, 255, 0.24);
    --sidebar-active-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 8px 18px rgba(0, 0, 0, 0.16);
    --sidebar-icon-active-shadow: 0 10px 22px rgba(40, 26, 97, 0.28);

    /* ── UiMetadata.Grid tokens ──
       Solo quedan acá los que son overrides REALES (valor/token base
       distinto del que grid.css usaría por su propio fallback si esta
       redeclaración no existiera) — auditoría de theming (docs/css-theming-audit.md,
       sección 2.4): de los ~25 --grid-* que había acá, 19 apuntaban al
       mismo --token-base que grid.css ya usa como fallback (ej.
       --grid-table-header-bg: var(--table-header-bg) acá vs.
       var(--table-header-bg, literal) en grid.css — mismo resultado, doble
       trabajo) y se borraron sin cambiar nada visual. Estos 5 SÍ producen
       un valor distinto al fallback de grid.css y deben quedarse: */
    --grid-btn-primary-bg          : linear-gradient(135deg, var(--color-primary-light), var(--color-primary-strong));
    --grid-btn-primary-shadow      : var(--button-shadow-primary);
    --grid-btn-primary-shadow-hover: var(--button-shadow-primary-hover);
    --grid-pagination-bg-dark      : var(--bg-main-accent);
    --grid-modal-overlay           : var(--bg-overlay);
}

/*************** badge ***************/
.table-badge[data-badge-value="owner"] {
    border: 1px solid #7b2ff7;
    color: #7b2ff7;
}

.table-badge[data-badge-value="edit"] {
    border: 1px solid #2563eb;
    color: #2563eb;
}

.table-badge[data-badge-value="read"] {
    border: 1px solid #6b7280;
    color: #6b7280;
}