/* ===================================================================
   LIGHT MODE — Tema claro Oficyna (rediseño)
   Superficies blancas, texto ink #12141d, acento azul #0075f2.
   Sobrescribe css/styles.css (tema oscuro por defecto).
   =================================================================== */

body.light-mode {
    /* ═══ MARCA ═══ */
    --brand: #0075f2;
    --brand-400: #3d9bff;
    --brand-300: #66b8ff;
    --brand-200: #99d0ff;
    --brand-100: #d6ebff;
    --brand-50: #eef6ff;
    --brand-glow: rgba(0, 117, 242, .30);
    --grad-brand: linear-gradient(180deg, var(--brand-400), var(--brand) 55%, #0059c9);
    --text-brand: #0075f2;
    --orb-a: rgba(0, 117, 242, .10);
    --orb-b: rgba(51, 160, 255, .08);
    --orb-c: rgba(102, 198, 255, .07);

    /* ═══ SUPERFICIES ═══ */
    --bg: #f6f7fb;
    --bg-card: linear-gradient(158deg, #ffffff, #fbfbff);
    --bg-card-solid: #ffffff;
    --surface: #ffffff;
    --surface-2: #f6f7fb;
    --surface-3: #eef0f6;
    --surface-hover: #f1f2f6;
    --surface-active: #e6e8f0;
    --bg-elev: #ffffff;
    --overlay: rgba(10, 11, 18, .45);
    --glass-strong: rgba(255, 255, 255, .86);
    --shine: rgba(255, 255, 255, .9);

    /* ═══ TEXTO ═══ */
    --text: #12141d;
    --text-muted: #4d5266;
    --text-dim: #767c93;
    --text-2: #4d5266;
    --text-3: #666c80;
    --text-4: #767c93;

    /* ═══ BORDES ═══ */
    --border: #e0e2ea;
    --border-2: #e8e9ef;
    --border-3: #f1f2f6;
    --border-light: #e8e9ef;
    --border-strong: #c7cad6;

    /* ═══ ACENTOS ═══ */
    --green: #0e9f6e;
    --green-dim: #e6f7f1;
    --green-deep: #c9f0e2;
    --green-dark: #0b7d57;
    --green-grad: linear-gradient(160deg, var(--brand-400), var(--brand));

    --gold: #0075f2;
    --gold-light: #3d9bff;
    --gold-dark: #0059c9;
    --gold-glow: #0075f2;
    --gold-dim: rgba(0, 117, 242, .12);

    --blue: #0075f2;
    --blue-dim: rgba(0, 117, 242, .10);
    --cyan: #0891b2;
    --cyan-dim: rgba(8, 145, 178, .10);
    --red: #e5484d;
    --red-dim: #fdeced;
    --orange: #d97706;
    --orange-dim: #fdf3e3;
    --purple: #7c3aed;
    --purple-dim: rgba(124, 58, 237, .10);
    --magenta: #db2777;
    --magenta-dim: rgba(219, 39, 119, .10);
    --indigo: #4f46e5;
    --indigo-dim: rgba(79, 70, 229, .10);

    /* ═══ SOMBRAS ═══ */
    --shadow-sm: 0 1px 3px rgba(10, 11, 18, .06), 0 1px 2px rgba(10, 11, 18, .04);
    --shadow-md: 0 8px 22px -8px rgba(10, 11, 18, .14), 0 2px 6px -2px rgba(10, 11, 18, .06);
    --shadow-lg: 0 18px 40px -12px rgba(10, 11, 18, .18), 0 4px 10px -4px rgba(10, 11, 18, .08);
    --shadow-brand: 0 10px 26px -10px rgba(0, 117, 242, .42);

    --light-aura:
        radial-gradient(80% 55% at 50% -14%, color-mix(in srgb, var(--brand-50) 70%, transparent), transparent 70%),
        radial-gradient(55% 45% at 100% 0%, rgba(0, 117, 242, .05), transparent 60%);
    --light-aura-v: linear-gradient(180deg, color-mix(in srgb, var(--brand-50) 90%, transparent), transparent 58%);
    --light-aura-h: linear-gradient(90deg, color-mix(in srgb, var(--brand-50) 90%, transparent), transparent 62%);
}

/* ═══ BODY ═══ */
body.light-mode {
    background-color: var(--bg);
    background-image: var(--light-aura);
    background-attachment: fixed;
    color: var(--text);
}

/* ═══ AMBIENT (modo claro: una sola superficie, sin rejilla) ═══ */
body.light-mode .ambient { display: none; }

/* ═══ SELECTION / FOCUS / SCROLLBAR ═══ */
body.light-mode ::selection { background: rgba(0, 117, 242, .18); color: #12141d; }
body.light-mode :focus-visible { outline-color: var(--brand-300); }
body.light-mode * { scrollbar-color: var(--border-strong) transparent; }
body.light-mode ::-webkit-scrollbar-thumb { background: var(--border-strong); background-clip: content-box; }

/* ═══ SIDEBAR ═══ */
body.light-mode .sidebar {
    background: transparent;
    background-color: transparent;
    background-image: none;
    border-right: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: width .3s var(--ease), transform .3s var(--ease);
}
body.light-mode .sidebar::before { opacity: 0; }
body.light-mode .sidebar::after { display: none; }
@media (max-width: 992px) {
    body.light-mode .sidebar {
        background: color-mix(in srgb, var(--surface) 88%, transparent);
        backdrop-filter: blur(20px) saturate(1.2);
        -webkit-backdrop-filter: blur(20px) saturate(1.2);
        border-right: 1px solid var(--border);
        box-shadow: 12px 0 40px rgba(20, 30, 50, .12);
    }
}
body.light-mode .sidebar-header {
    background: none;
    border-bottom: 0;
}
body.light-mode .sidebar-brand .name { color: var(--text); }
body.light-mode .sidebar-brand .sub { color: var(--text-4); }
body.light-mode .sidebar-logo img {
    filter: none;
}
body.light-mode .nav-section-label { color: var(--text-4); }
body.light-mode .nav-link-sidebar { color: var(--text-2); }
body.light-mode .nav-link-sidebar:hover { color: var(--text); background: var(--surface-hover); }
body.light-mode .nav-link-sidebar.active {
    color: var(--brand);
    background: linear-gradient(100deg, var(--brand-50), transparent 130%);
    box-shadow: 0 12px 24px -16px var(--brand-glow), inset 0 1px 0 rgba(255, 255, 255, .9);
}
body.light-mode .nav-link-sidebar.active::before { background: var(--brand); }
body.light-mode .nav-link-sidebar.active .nav-icon { color: var(--brand); }
body.light-mode .nav-link-sidebar .nav-badge {
    background: var(--brand);
    color: #fff;
    border-color: rgba(255, 255, 255, .4);
}
body.light-mode .nav-submenu { background: rgba(10, 11, 18, .02); }
body.light-mode .nav-submenu .nav-link-sidebar::before { background: var(--border-strong); }
body.light-mode .nav-submenu .nav-link-sidebar.active { color: var(--brand); }
body.light-mode .sidebar.collapsed .nav-submenu.open {
    background: var(--glass-strong);
    border-color: var(--border);
    box-shadow: var(--shadow-lg);
}
body.light-mode .sidebar.collapsed .nav-submenu.open .nav-text { color: var(--text-2); }
body.light-mode .sidebar-footer { border-top: 0; }
body.light-mode .sidebar-user:hover { background: var(--surface-hover); }
body.light-mode .sidebar-user-info .name { color: var(--text); }
body.light-mode .sidebar-user-info .role { color: var(--text-4); }

/* ═══ TOPBAR ═══ */
body.light-mode .topbar {
    background: transparent;
    background-color: transparent;
    background-image: none;
    border-bottom: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
body.light-mode .crumb-root { color: var(--text-4); }
body.light-mode .crumb-current { color: var(--text); }
body.light-mode .icon-btn {
    background: rgba(10, 11, 18, .03);
    border-color: var(--border);
    color: var(--text-2);
}
body.light-mode .icon-btn:hover {
    color: var(--brand);
    background: var(--brand-50);
    border-color: color-mix(in srgb, var(--brand) 30%, var(--border));
}
body.light-mode .search-trigger kbd { background: rgba(10, 11, 18, .05); color: var(--text-4); }
body.light-mode .notif-btn { color: #b45309; }
body.light-mode .notif-btn:hover { color: #92400e; background: rgba(245, 158, 11, .14); border-color: rgba(245, 158, 11, .35); }
body.light-mode .user-menu-btn:hover { background: var(--surface-hover); border-color: var(--border); }
body.light-mode .user-menu-btn .u-name { color: var(--text); }
body.light-mode .user-menu-btn .u-role { color: var(--text-4); }
body.light-mode .notif-dot { border-color: #fff; }

/* ═══ PAGE HEAD ═══ */
body.light-mode .page-eyebrow { color: var(--brand); }
body.light-mode .page-title {
    background: linear-gradient(92deg, var(--text), color-mix(in srgb, var(--brand) 62%, var(--text)));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
body.light-mode .page-sub { color: var(--text-3); }
body.light-mode .live-pill { color: #0b7d57; background: var(--green-dim); border-color: rgba(14, 159, 110, .3); }

/* ═══ CARDS ═══ */
body.light-mode .kpi {
    background: linear-gradient(155deg, color-mix(in srgb, #ffffff 88%, transparent), color-mix(in srgb, var(--brand-50) 60%, transparent));
    border-color: color-mix(in srgb, var(--border-strong) 60%, transparent);
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -8px 18px -14px rgba(0, 117, 242, .18);
}
body.light-mode .card {
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    border-color: color-mix(in srgb, var(--border-strong) 60%, transparent);
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .9);
}
body.light-mode .kpi::after { opacity: .07; }
body.light-mode .kpi:hover::after { opacity: .13; }
body.light-mode .kpi:hover,
body.light-mode .card:not(.kpi):hover {
    border-color: color-mix(in srgb, var(--brand) 32%, var(--border));
    box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, .9), 0 18px 32px -22px rgba(0, 117, 242, .5);
}
body.light-mode .kpi-value {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: currentColor;
    color: var(--text);
}
body.light-mode .stat-box-value { color: var(--text); }
body.light-mode .kpi-label { color: var(--text-3); }
body.light-mode .card-head h3 { color: var(--text); }
body.light-mode .ch-sub { color: var(--text-4); }
body.light-mode .kpi-bar { background: rgba(10, 11, 18, .08); }
body.light-mode .doughnut-legend > div span:last-child { color: var(--brand); }

/* ═══ STAT BOXES (tono por tarjeta) ═══ */
body.light-mode .stat-box {
    background:
        linear-gradient(150deg, color-mix(in srgb, var(--tone) 10%, transparent), transparent 62%),
        #ffffff;
    border-color: color-mix(in srgb, var(--tone) 22%, var(--border-2));
}
body.light-mode .stat-box:hover {
    border-color: color-mix(in srgb, var(--tone) 48%, var(--border));
    box-shadow: var(--shadow-md), 0 14px 28px -20px var(--tone);
}

/* ═══ CHIPS (periodos de gráfico) ═══ */
body.light-mode .chip {
    background: rgba(10, 11, 18, .04);
    border-color: var(--border);
    color: var(--text-3);
    box-shadow: 0 1px 2px rgba(10, 11, 18, .05);
}
body.light-mode .chip:hover { color: var(--brand); background: var(--brand-50); }
body.light-mode .chip.is-on,
body.light-mode .chip.active {
    background: var(--grad-brand);
    color: #fff;
    border-color: transparent;
}

/* ═══ TABLE ═══ */
body.light-mode .activity-table thead th {
    background: var(--surface-2);
    color: var(--text-3);
    border-bottom-color: var(--border);
}
body.light-mode .activity-table tbody td { color: var(--text-2); border-bottom-color: var(--border-3); }
body.light-mode .activity-table tbody tr:hover { background: rgba(0, 117, 242, .045); }
body.light-mode .activity-scroll { scrollbar-color: var(--brand) transparent; }
body.light-mode .activity-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, var(--brand-100), var(--brand)) !important;
}
body.light-mode .activity-scroll::-webkit-scrollbar-thumb:hover { background: var(--brand) !important; }

body.light-mode .status-badge.paid      { background: var(--green-dim);  color: #0b7d57; border-color: rgba(14, 159, 110, .30); }
body.light-mode .status-badge.pending   { background: var(--orange-dim); color: #b45309; border-color: rgba(217, 119, 6, .30); }
body.light-mode .status-badge.cancelled { background: var(--red-dim);    color: #b91c1c; border-color: rgba(229, 72, 77, .30); }

/* ═══ TEXTO THEME-AWARE ═══ */
body.light-mode .cell-bright { color: var(--text); }
body.light-mode .legend-pct { color: var(--brand); }

/* ═══ THEME TOGGLE ═══ */
body.light-mode .theme-toggle-track {
    background: radial-gradient(circle at 50% 50%, rgba(245, 158, 11, .22), transparent 72%);
    border-color: rgba(180, 83, 9, .22);
}
body.light-mode .theme-toggle:hover .theme-toggle-track {
    border-color: rgba(180, 83, 9, .42);
    background: var(--surface-hover);
}
body.light-mode .theme-toggle input:checked ~ .theme-toggle-track {
    background: radial-gradient(circle at 50% 50%, rgba(245, 158, 11, .24), transparent 72%);
    border-color: rgba(180, 83, 9, .28);
}
body.light-mode .theme-icon-sun { color: #b45309; text-shadow: 0 0 8px rgba(180, 83, 9, .45); }
body.light-mode .theme-icon-moon { color: #475569; }

/* ═══ MISC ═══ */
body.light-mode .sidebar-overlay { background: rgba(10, 11, 18, .35); }
body.light-mode .sidebar-tooltip {
    background: var(--glass-strong);
    color: var(--text);
    border-color: var(--border);
    box-shadow: var(--shadow-lg);
}
body.light-mode .menu {
    background: var(--glass-strong);
    border-color: var(--border);
    box-shadow: var(--shadow-lg);
}
body.light-mode .menu-item { color: var(--text-2); }
body.light-mode .menu-item:hover { background: var(--surface-hover); color: var(--text); }
body.light-mode .menu-item.danger { color: var(--red); }
body.light-mode .menu-item.danger:hover { background: var(--red-dim); }
body.light-mode .menu-sep { background: var(--border-2); }
body.light-mode .menu-label { color: var(--text-4); }


/* ===== TOPBAR QUICK LINKS HOVER POR ENTIDAD - MODO CLARO ===== */
body.light-mode .topbar-right .quick-facturacion:hover {
    color: #16a34a !important;
    background: rgba(22, 163, 74, .10) !important;
    border-color: rgba(22, 163, 74, .38) !important;
}

body.light-mode .topbar-right .quick-carteras:hover {
    color: #0284c7 !important;
    background: rgba(2, 132, 199, .10) !important;
    border-color: rgba(2, 132, 199, .38) !important;
}

body.light-mode .topbar-right .quick-personas:hover,
body.light-mode #personasBtn.open {
    color: #db2777 !important;
    background: rgba(219, 39, 119, .10) !important;
    border-color: rgba(219, 39, 119, .38) !important;
}


/* ===== DOCK MOVIL - MODO CLARO ===== */
@media (max-width: 992px) {
    body.light-mode .topbar-quick {
        background: color-mix(in srgb, var(--surface-1) 90%, transparent);
        border-top-color: var(--border-2);
        box-shadow: 0 -10px 28px -20px rgba(15, 23, 42, .35);
    }
    body.light-mode .topbar-quick .quick-link { color: var(--text-3); }
    body.light-mode .topbar-quick .quick-carteras i   { color: #0284c7; }
    body.light-mode .topbar-quick .quick-facturacion i{ color: #16a34a; }
    body.light-mode .topbar-quick .quick-personas i   { color: #db2777; }
}