/*
 * Capa de identidad visual. Se carga después del CSS del template.
 * Los valores de --brand-primary y --brand-secondary provienen de Marca en appsettings.json.
 */
:root {
    --brand-primary: #2888C5;
    --brand-primary-rgb: 40, 136, 197;
    --brand-on-primary: #000000;
    --brand-secondary: #9FD300;
    --brand-secondary-rgb: 159, 211, 0;
    --brand-on-secondary: #141B2B;
    --brand-accent-on-primary: #000000;
    --brand-primary-hover: var(--brand-primary);
    --brand-primary-hover: color-mix(in srgb, var(--brand-primary) 86%, black);
    --brand-secondary-hover: var(--brand-secondary);
    --brand-secondary-hover: color-mix(in srgb, var(--brand-secondary) 86%, black);
    --brand-focus-ring: rgba(var(--brand-primary-rgb), 0.25);
    --brand-success: #198754;
    --brand-warning: #FFC107;
    --brand-danger: #DC3545;
    --brand-info: #0DCAF0;
    --bs-primary: var(--brand-primary);
    --bs-primary-rgb: var(--brand-primary-rgb);
    --bs-secondary: var(--brand-secondary);
    --bs-secondary-rgb: var(--brand-secondary-rgb);
}

a,
.text-primary,
.link-primary {
    color: var(--brand-primary) !important;
}

a:hover,
.link-primary:hover {
    color: var(--brand-primary-hover) !important;
}

.bg-primary,
.progress-bar,
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
.page-item.active .page-link,
.dropdown-item.active,
.dropdown-item:active {
    color: var(--brand-on-primary) !important;
    background-color: var(--brand-primary) !important;
}

.border-primary,
.page-item.active .page-link {
    border-color: var(--brand-primary) !important;
}

.btn-primary {
    color: var(--brand-on-primary) !important;
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.btn-check:checked + .btn-primary,
.show > .btn-primary.dropdown-toggle {
    color: var(--brand-on-primary) !important;
    background-color: var(--brand-primary-hover) !important;
    border-color: var(--brand-primary-hover) !important;
}

.btn-primary:focus,
.btn-check:focus + .btn-primary {
    color: var(--brand-on-primary) !important;
    background-color: var(--brand-primary-hover) !important;
    border-color: var(--brand-primary-hover) !important;
    box-shadow: 0 0 0 0.25rem var(--brand-focus-ring) !important;
}

.btn-outline-primary {
    color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary.active {
    color: var(--brand-on-primary) !important;
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}

.btn-secondary {
    color: var(--brand-on-secondary) !important;
    background-color: var(--brand-secondary) !important;
    border-color: var(--brand-secondary) !important;
}

.btn-secondary:hover,
.btn-secondary:active,
.btn-secondary.active {
    color: var(--brand-on-secondary) !important;
    background-color: var(--brand-secondary-hover) !important;
    border-color: var(--brand-secondary-hover) !important;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 0.25rem var(--brand-focus-ring) !important;
}

.form-check-input:checked {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}

.nav-tabs-custom .nav-item .nav-link.active {
    color: var(--brand-on-primary) !important;
    background-color: var(--brand-primary) !important;
    font-weight: 600;
}

.nav-tabs-custom .nav-item .nav-link::after {
    background-color: var(--brand-primary) !important;
}

.brand-auth-background {
    background-color: var(--brand-primary) !important;
}

.brand-report-title {
    color: var(--brand-primary) !important;
    font-size: 18px;
}

.brand-secondary-panel {
    color: var(--brand-on-secondary) !important;
    background-color: var(--brand-secondary) !important;
    border: 1px solid var(--brand-secondary) !important;
}

body[data-sidebar="dark"] .vertical-menu,
body[data-sidebar="dark"] .navbar-brand-box {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}

@media (min-width: 992px) {
    body[data-sidebar="dark"] .vertical-menu::before {
        background-color: var(--brand-primary) !important;
    }
}

body[data-sidebar="dark"] .hamburger-icon span {
    background-color: var(--brand-accent-on-primary) !important;
}

body[data-sidebar="dark"] #sidebar-menu ul li.menu-title,
body[data-sidebar="dark"] #sidebar-menu ul li a,
body[data-sidebar="dark"] #sidebar-menu ul li a .nav-icon,
body[data-sidebar="dark"] #sidebar-menu ul li ul.sub-menu li a {
    color: var(--brand-accent-on-primary) !important;
    fill: var(--brand-accent-on-primary) !important;
}

body[data-sidebar="dark"] #sidebar-menu ul li a:hover,
body[data-sidebar="dark"] #sidebar-menu ul li a:focus,
body[data-sidebar="dark"] #sidebar-menu ul li a:hover .nav-icon,
body[data-sidebar="dark"] #sidebar-menu ul li a:focus .nav-icon,
body[data-sidebar="dark"] #sidebar-menu ul li.mm-active > a,
body[data-sidebar="dark"] #sidebar-menu ul li.mm-active > a .nav-icon,
body[data-sidebar="dark"] #sidebar-menu ul li.mm-active .mm-show .mm-active > a {
    color: var(--brand-accent-on-primary) !important;
    fill: var(--brand-accent-on-primary) !important;
}

body[data-sidebar="dark"] #sidebar-menu ul li.mm-active > a::before {
    background-color: var(--brand-accent-on-primary) !important;
}

body[data-layout-mode="dark"][data-sidebar="dark"] #sidebar-menu ul li.mm-active > a,
body[data-layout-mode="dark"][data-sidebar="dark"] #sidebar-menu ul li.mm-active > a .nav-icon,
body[data-layout-mode="dark"][data-sidebar="dark"] #sidebar-menu ul li.mm-active .mm-show .mm-active > a {
    color: var(--brand-accent-on-primary) !important;
    fill: var(--brand-accent-on-primary) !important;
}

body[data-layout-mode="dark"][data-sidebar="dark"] #sidebar-menu ul li.mm-active > a::before {
    background-color: var(--brand-accent-on-primary) !important;
}

body[data-sidebar="dark"][data-sidebar-size="sm"] .vertical-menu #sidebar-menu > ul > li:hover > a,
body[data-sidebar="dark"][data-sidebar-size="sm"] .vertical-menu #sidebar-menu > ul ul {
    background-color: var(--brand-primary) !important;
}

body[data-topbar="dark"] .ishorizontal-topbar,
body[data-topbar="dark"] .isvertical-topbar,
body[data-layout="horizontal"][data-topbar="colored"] .ishorizontal-topbar {
    background-color: var(--brand-primary) !important;
}

body[data-topbar="dark"] .header-item,
body[data-topbar="dark"] .header-item i,
body[data-topbar="dark"] .user-name,
body[data-topbar="dark"] .page-title {
    color: var(--brand-accent-on-primary) !important;
    fill: var(--brand-accent-on-primary) !important;
}

.badge-soft-primary {
    color: var(--brand-primary) !important;
    background-color: rgba(var(--brand-primary-rgb), 0.12) !important;
}