:root {
    --bg: #0f0f11;
    --surface: #17171a;
    --surface2: #1e1e23;
    --surface3: #25252c;
    --border: #2a2a35;
    --border2: #35353f;
    --text: #e8e8f0;
    --text2: #9090a8;
    --text3: #60607a;
    --accent: #7c6af7;
    --accent2: #5d4fd6;
    --accent-soft: rgba(124,106,247,0.12);
    --green: #34d399;
    --green-soft: rgba(52,211,153,0.12);
    --red: #f87171;
    --red-soft: rgba(248,113,113,0.12);
    --amber: #fbbf24;
    --amber-soft: rgba(251,191,36,0.12);
    --blue: #60a5fa;
    --blue-soft: rgba(96,165,250,0.12);
    --pink: #f472b6;
    --sidebar-w: 240px;
    --header-h: 52px;
    --radius: 8px;
    --radius-lg: 12px;
}

/* Tema claro */
body.light {
    --bg: #f0f0f5;
    --surface: #ffffff;
    --surface2: #f5f5fa;
    --surface3: #ebebf2;
    --border: #e0e0ea;
    --border2: #d0d0de;
    --text: #111118;
    --text2: #4a4a62;
    --text3: #9090aa;
    --accent: #6b58e8;
    --accent2: #5244c4;
    --accent-soft: rgba(107,88,232,0.10);
    --green: #059669;
    --green-soft: rgba(5,150,105,0.10);
    --red: #dc2626;
    --red-soft: rgba(220,38,38,0.10);
    --amber: #d97706;
    --amber-soft: rgba(217,119,6,0.10);
    --blue: #2563eb;
    --blue-soft: rgba(37,99,235,0.10);
}

/* Transiciones suaves */
body { transition: background 0.25s, color 0.25s; }
.sidebar, .header, .card, .table-wrap, .calendar-wrap,
.modal, .pos-right, .pos-left { transition: background 0.25s, border-color 0.25s; }