:root {
    --sys-primary: #1e3a8a;
    --sys-primary-dark: #182e6e;
    --sys-primary-soft: #edeff6;
    --sys-primary-text: #ffffff;
    --sys-accent: #2563eb;
    --sys-accent-dark: #1f53c5;
    --sys-sidebar: #0a2540;
    --sys-sidebar-dark: #081f35;
    --sys-sidebar-hover: #273f57;
    --sys-sidebar-active: #133a7a;
    --sys-sidebar-text: #ffffff;
    --sys-bg: #f4f6f9;
    --sys-surface: #ffffff;
    --sys-surface-soft: #fafbfc;
    --sys-text: #172033;
    --sys-muted: #787e89;
    --sys-border: #e3e4e7;
    --sys-radius: 12px;

    --sidebar-bg: var(--sys-sidebar);
    --sidebar-dark: var(--sys-sidebar-dark);
    --sidebar-hover: var(--sys-sidebar-hover);
    --sidebar-active: var(--sys-sidebar-active);
    --sidebar-text: var(--sys-sidebar-text);
    --sidebar-text-light: color-mix(in srgb, var(--sys-sidebar-text) 80%, transparent);
    --sidebar-accent: var(--sys-accent);

    --azul: var(--sys-primary);
    --azul-hover: var(--sys-primary-dark);
    --azul-oscuro: var(--sys-primary-dark);
    --azul-suave: var(--sys-primary-soft);
    --azul-2: var(--sys-accent);
    --fondo: var(--sys-bg);
    --blanco: var(--sys-surface);
    --superficie: var(--sys-surface);
    --superficie-2: var(--sys-surface-soft);
    --texto: var(--sys-text);
    --texto-suave: var(--sys-muted);
    --suave: var(--sys-muted);
    --borde: var(--sys-border);

    --brand: var(--sys-primary);
    --brand-dark: var(--sys-primary-dark);
    --brand-soft: var(--sys-primary-soft);
    --navy: var(--sys-sidebar);
    --page-bg: var(--sys-bg);
    --surface: var(--sys-surface);
    --surface-soft: var(--sys-surface-soft);
    --text: var(--sys-text);
    --muted: var(--sys-muted);
    --border: var(--sys-border);
    --info: var(--sys-accent);
    --info-dark: var(--sys-accent-dark);
    --radius: var(--sys-radius);
    --radio: var(--sys-radius);
    --radio-grande: calc(var(--sys-radius) + 14px);
    --radio-md: var(--sys-radius);
    --radio-lg: calc(var(--sys-radius) + 4px);
    --radio-xl: calc(var(--sys-radius) + 10px);

    --dash-blue: var(--sys-primary);
    --dash-blue-2: var(--sys-accent);
    --dash-blue-soft: var(--sys-primary-soft);
    --dash-bg: var(--sys-bg);
    --dash-surface: var(--sys-surface);
    --dash-text: var(--sys-text);
    --dash-muted: var(--sys-muted);
    --dash-border: var(--sys-border);

    --inventory-blue: var(--sys-primary);
    --inventory-blue-hover: var(--sys-primary-dark);
    --inventory-blue-soft: var(--sys-primary-soft);
    --inventory-bg: var(--sys-bg);
    --inventory-card: var(--sys-surface);
    --inventory-text: var(--sys-text);
    --inventory-muted: var(--sys-muted);
    --inventory-border: var(--sys-border);

    --plans-blue: var(--sys-primary);
    --plans-blue-dark: var(--sys-primary-dark);
    --plans-blue-soft: var(--sys-primary-soft);
    --plans-bg: var(--sys-bg);
    --plans-card: var(--sys-surface);
    --plans-text: var(--sys-text);
    --plans-muted: var(--sys-muted);
    --plans-border: var(--sys-border);

    --socios-primary: var(--sys-primary);
    --socios-primary-hover: var(--sys-primary-dark);
    --socios-bg: var(--sys-bg);
    --socios-card: var(--sys-surface);
    --socios-text: var(--sys-text);
    --socios-muted: var(--sys-muted);
    --socios-border: var(--sys-border);

    --trainer-blue: var(--sys-primary);
    --trainer-blue-dark: var(--sys-primary-dark);
    --trainer-blue-soft: var(--sys-primary-soft);
    --trainer-bg: var(--sys-bg);
    --trainer-card: var(--sys-surface);
    --trainer-text: var(--sys-text);
    --trainer-muted: var(--sys-muted);
    --trainer-border: var(--sys-border);

    --health-navy: var(--sys-sidebar);
    --health-blue: var(--sys-primary);
    --health-blue-soft: var(--sys-primary-soft);
    --health-border: var(--sys-border);
    --health-muted: var(--sys-muted);
    --health-bg: var(--sys-bg);
    --health-card: var(--sys-surface);

    --profile-bg: var(--sys-bg);
    --profile-card: var(--sys-surface);
    --profile-text: var(--sys-text);
    --profile-muted: var(--sys-muted);
    --profile-border: var(--sys-border);
    --profile-primary: var(--sys-primary);
    --profile-primary-hover: var(--sys-primary-dark);
    --profile-soft: var(--sys-primary-soft);
    --profile-radius: var(--sys-radius);

    --report-primary: var(--sys-sidebar);
    --report-primary-soft: var(--sys-primary-soft);
    --report-blue: var(--sys-primary);
    --report-blue-dark: var(--sys-primary-dark);
    --report-text: var(--sys-text);
    --report-muted: var(--sys-muted);
    --report-border: var(--sys-border);
    --report-bg: var(--sys-bg);
    --report-card: var(--sys-surface);

    --service-primary: var(--sys-primary);
    --service-primary-dark: var(--sys-primary-dark);
    --service-primary-soft: var(--sys-primary-soft);
    --service-bg: var(--sys-bg);
    --service-surface: var(--sys-surface);
    --service-text: var(--sys-text);
    --service-heading: var(--sys-text);
    --service-muted: var(--sys-muted);
    --service-border: var(--sys-border);
    --service-border-strong: var(--sys-border);
    --service-radius: var(--sys-radius);

    --tf-primary: var(--sys-primary);
    --tf-primary-dark: var(--sys-primary-dark);
    --tf-soft: var(--sys-primary-soft);
    --tf-bg: var(--sys-bg);
    --tf-text: var(--sys-text);
    --tf-muted: var(--sys-muted);
    --tf-border: var(--sys-border);

    --caja-azul: var(--sys-primary);
    --caja-azul-oscuro: var(--sys-primary-dark);
    --caja-azul-suave: var(--sys-primary-soft);
    --caja-fondo: var(--sys-bg);
    --caja-blanco: var(--sys-surface);
    --caja-texto: var(--sys-text);
    --caja-suave: var(--sys-muted);
    --caja-borde: var(--sys-border);

    --ventas-azul: var(--sys-primary);
    --ventas-azul-oscuro: var(--sys-primary-dark);
    --ventas-azul-suave: var(--sys-primary-soft);
    --ventas-fondo: var(--sys-bg);
    --ventas-blanco: var(--sys-surface);
    --ventas-texto: var(--sys-text);
    --ventas-suave: var(--sys-muted);
    --ventas-borde: var(--sys-border);

    --notif-azul: var(--sys-primary);
    --notif-azul-hover: var(--sys-primary-dark);
    --notif-fondo: var(--sys-bg);
    --notif-blanco: var(--sys-surface);
    --notif-texto: var(--sys-text);
    --notif-suave: var(--sys-muted);
    --notif-borde: var(--sys-border);
}

body.configuracion-page {
    --cfg-primary: var(--sys-sidebar);
    --cfg-blue: var(--sys-primary);
    --cfg-blue-dark: var(--sys-primary-dark);
    --cfg-blue-soft: var(--sys-primary-soft);
    --cfg-text: var(--sys-text);
    --cfg-muted: var(--sys-muted);
    --cfg-border: var(--sys-border);
    --cfg-border-soft: var(--sys-border);
    --cfg-bg: var(--sys-bg);
    --cfg-card: var(--sys-surface);
}

html, body { background-color: var(--sys-bg); color: var(--sys-text); }

.btn-primary,
.btn-custom-primary,
.page-primary-action,
.swal2-confirm.swal2-styled {
    background-color: var(--sys-primary) !important;
    border-color: var(--sys-primary) !important;
    color: var(--sys-primary-text) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-custom-primary:hover,
.page-primary-action:hover {
    background-color: var(--sys-primary-dark) !important;
    border-color: var(--sys-primary-dark) !important;
}
.text-primary { color: var(--sys-primary) !important; }
.bg-primary { background-color: var(--sys-primary) !important; }
.border-primary { border-color: var(--sys-primary) !important; }
.page-item.active .page-link,
.pagination .active .page-link {
    background-color: var(--sys-primary) !important;
    border-color: var(--sys-primary) !important;
}
.form-control:focus,
.form-select:focus,
.custom-select:focus {
    border-color: var(--sys-accent) !important;
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--sys-accent) 18%, transparent) !important;
}
.modal-header-brand {
    background: linear-gradient(135deg, var(--sys-primary), var(--sys-primary-dark)) !important;
}
.card-custom,
.card,
.modal-content {
    border-radius: var(--sys-radius);
}

.sidebar,
#sidebar,
aside.sidebar {
    background: var(--sys-sidebar) !important;
    color: var(--sys-sidebar-text) !important;
    scrollbar-color: #8c959d var(--sys-sidebar) !important;
}
.sidebar::-webkit-scrollbar-track,
#sidebar::-webkit-scrollbar-track,
aside.sidebar::-webkit-scrollbar-track,
.sidebar *::-webkit-scrollbar-track {
    background: var(--sys-sidebar) !important;
}