/**
 * Identidad corporativa SJ Confiable
 * Azul rey #0050b3 | Gris claro #a9a9a9 | Blanco #ffffff
 */
:root,
[data-bs-theme="light"] {
    --sj-brand-royal: #0050b3;
    --sj-brand-gray: #a9a9a9;
    --sj-brand-white: #ffffff;

    --sj-navy-deep: #003d8a;
    --sj-navy: #004494;
    --sj-navy-mid: #0050b3;
    --sj-blue: #0050b3;
    --sj-blue-mid: #0050b3;
    --sj-blue-light: #4d8fd4;
    --sj-blue-glow: #b3cce8;
    --sj-gray: #a9a9a9;
    --sj-gray-dark: #8f8f8f;
    --sj-gray-light: #e8e8e8;
    --sj-gray-muted: #a9a9a9;
    --sj-border-solid: #d0d0d0;

    --sj-page-bg: #ffffff;
    --sj-page-text: #333333;
    --sj-surface: #ffffff;
    --sj-surface-muted: #f5f5f5;
    --sj-surface-elevated: #ffffff;
    --sj-border: rgba(169, 169, 169, 0.45);
    --sj-border-soft: rgba(169, 169, 169, 0.28);
    --sj-table-body-bg: #ffffff;
    --sj-table-striped: rgba(169, 169, 169, 0.14);
    --sj-muted-text: #a9a9a9;
    --sj-footer-bg: #f5f5f5;

    --sj-navbar-gradient: linear-gradient(
        180deg,
        var(--sj-navy-deep) 0%,
        var(--sj-navy) 38%,
        var(--sj-navy-mid) 100%
    );
    --sj-hero-gradient: linear-gradient(
        135deg,
        var(--sj-navy-deep) 0%,
        var(--sj-navy-mid) 48%,
        var(--sj-navy) 100%
    );
    --sj-btn-gradient: linear-gradient(135deg, var(--sj-navy) 0%, var(--sj-brand-royal) 100%);
    --sj-navbar-glow-line: linear-gradient(to bottom, rgba(77, 143, 212, 0.35), rgba(77, 143, 212, 0));
    --sj-navbar-hover-bg: rgba(255, 255, 255, 0.12);
    --sj-focus-ring: rgba(0, 80, 179, 0.25);
    --sj-shadow-brand: rgba(0, 80, 179, 0.22);

    --bs-primary: #0050b3;
    --bs-primary-rgb: 0, 80, 179;
    --bs-secondary: #a9a9a9;
    --bs-secondary-rgb: 169, 169, 169;
    --bs-link-color: #0050b3;
    --bs-link-hover-color: #003d8a;
    --bs-border-color: #d0d0d0;
    --bs-secondary-color: #a9a9a9;
}

[data-bs-theme="dark"] {
    --sj-brand-royal: #0050b3;
    --sj-brand-gray: #a9a9a9;
    --sj-brand-white: #ffffff;

    --sj-navy-deep: #003d8a;
    --sj-navy: #004494;
    --sj-navy-mid: #0050b3;
    --sj-blue: #0050b3;
    --sj-blue-light: #4d8fd4;
    --sj-blue-glow: #b3cce8;
    --sj-gray: #a9a9a9;
    --sj-gray-dark: #8f8f8f;
    --sj-gray-light: #5c5c5c;
    --sj-gray-muted: #a9a9a9;
    --sj-border-solid: #6e6e6e;

    --sj-page-bg: #2e2e2e;
    --sj-page-text: #ffffff;
    --sj-surface: #383838;
    --sj-surface-muted: #424242;
    --sj-surface-elevated: #4a4a4a;
    --sj-border: rgba(169, 169, 169, 0.38);
    --sj-border-soft: rgba(169, 169, 169, 0.22);
    --sj-table-body-bg: #383838;
    --sj-table-striped: rgba(169, 169, 169, 0.12);
    --sj-muted-text: #a9a9a9;
    --sj-footer-bg: #2e2e2e;

    --sj-hero-gradient: linear-gradient(
        135deg,
        var(--sj-navy-deep) 0%,
        var(--sj-navy-mid) 50%,
        var(--sj-navy) 100%
    );
    --sj-btn-gradient: linear-gradient(135deg, var(--sj-navy) 0%, var(--sj-brand-royal) 100%);
    --sj-focus-ring: rgba(0, 80, 179, 0.4);
    --sj-shadow-brand: rgba(0, 80, 179, 0.35);

    --bs-primary: #4d8fd4;
    --bs-primary-rgb: 77, 143, 212;
    --bs-secondary: #a9a9a9;
    --bs-secondary-rgb: 169, 169, 169;
    --bs-body-bg: #2e2e2e;
    --bs-body-color: #ffffff;
    --bs-secondary-color: #a9a9a9;
    --bs-border-color: rgba(169, 169, 169, 0.38);
    --bs-link-color: #4d8fd4;
    --bs-link-hover-color: #b3cce8;
}

/* —— Gris corporativo visible (modo claro) —— */
.text-muted,
.text-secondary,
.small.text-muted {
    color: var(--sj-brand-gray) !important;
}
.stat-tile-label,
.sj-panel-footer,
.sj-panel-footer__resumen,
.panel-cli-solic-resumen,
.widget-title-actions {
    color: var(--sj-brand-gray);
}
.table-legacy {
    border-color: var(--sj-border-solid) !important;
}
.card,
.dash-widget,
.stat-tile {
    border-color: var(--sj-border-soft) !important;
}
hr,
.border,
.border-top,
.border-bottom {
    border-color: var(--sj-border) !important;
}

/* Bootstrap — botones y enlaces */
.btn-primary {
    --bs-btn-bg: var(--sj-brand-royal);
    --bs-btn-border-color: var(--sj-brand-royal);
    --bs-btn-hover-bg: #003d8a;
    --bs-btn-hover-border-color: #003d8a;
    --bs-btn-active-bg: #003670;
    --bs-btn-active-border-color: #003670;
    --bs-btn-focus-shadow-rgb: 0, 80, 179;
}
.btn-outline-primary {
    --bs-btn-color: var(--sj-brand-royal);
    --bs-btn-border-color: var(--sj-brand-royal);
    --bs-btn-hover-bg: var(--sj-brand-royal);
    --bs-btn-hover-border-color: var(--sj-brand-royal);
    --bs-btn-active-bg: #003d8a;
    --bs-btn-active-border-color: #003d8a;
    --bs-btn-focus-shadow-rgb: 0, 80, 179;
}
.btn-outline-secondary {
    --bs-btn-color: var(--sj-brand-gray);
    --bs-btn-border-color: var(--sj-brand-gray);
    --bs-btn-hover-bg: var(--sj-brand-gray);
    --bs-btn-hover-border-color: var(--sj-brand-gray);
    --bs-btn-hover-color: #fff;
}
.text-primary {
    color: var(--sj-brand-royal) !important;
}
.border-primary {
    border-color: var(--sj-brand-royal) !important;
}
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.sj-panel-btn-add):not(.sj-panel-btn-ghost) {
    color: var(--sj-brand-royal);
}
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.sj-panel-btn-add):not(.sj-panel-btn-ghost):hover {
    color: var(--sj-navy-deep);
}

/* —— Modo oscuro: componentes globales —— */
[data-bs-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.sj-panel-btn-add):not(.sj-panel-btn-ghost) {
    color: var(--sj-blue-light);
}
[data-bs-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.sj-panel-btn-add):not(.sj-panel-btn-ghost):hover {
    color: var(--sj-blue-glow);
}
[data-bs-theme="dark"] .text-primary {
    color: var(--sj-blue-light) !important;
}
[data-bs-theme="dark"] .btn-primary {
    --bs-btn-bg: var(--sj-brand-royal);
    --bs-btn-border-color: var(--sj-brand-royal);
    --bs-btn-hover-bg: #4d8fd4;
    --bs-btn-hover-border-color: #4d8fd4;
}
[data-bs-theme="dark"] .btn-outline-secondary {
    --bs-btn-color: var(--sj-brand-gray);
    --bs-btn-border-color: var(--sj-brand-gray);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--sj-brand-gray);
    --bs-btn-hover-border-color: var(--sj-brand-gray);
}
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: var(--sj-surface-muted) !important;
    border-color: var(--sj-border-solid) !important;
    color: var(--sj-brand-white) !important;
}
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    border-color: var(--sj-blue-light) !important;
    box-shadow: 0 0 0 0.15rem var(--sj-focus-ring) !important;
    color: var(--sj-brand-white) !important;
}
[data-bs-theme="dark"] .form-control::placeholder {
    color: var(--sj-brand-gray) !important;
}
[data-bs-theme="dark"] .form-select option {
    background: var(--sj-surface-elevated);
    color: var(--sj-brand-white);
}
[data-bs-theme="dark"] .text-muted,
[data-bs-theme="dark"] .text-secondary {
    color: var(--sj-brand-gray) !important;
}

/* —— Gris visible en modo claro: formularios, tablas, hints —— */
.form-text,
.form-hint,
small.text-muted,
.sj-form-hint {
    color: var(--sj-brand-gray) !important;
}
.form-control,
.form-select {
    border-color: var(--sj-border-solid) !important;
}
.form-control::placeholder {
    color: var(--sj-brand-gray) !important;
    opacity: 0.85;
}
.table-legacy tbody td,
.table-legacy tbody th {
    border-color: var(--sj-border-solid) !important;
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-bg-type: var(--sj-table-striped);
}
footer.border-top,
#app-page footer {
    color: var(--sj-brand-gray);
    background: var(--sj-footer-bg);
    border-color: var(--sj-border-solid) !important;
}
.widget-title-actions,
.dash-notif-card__cliente,
.dash-notif-card__fecha {
    color: var(--sj-brand-gray);
}