/* ============================================================
   CobraClaro - Overrides de Tabler (CDN)
   Paleta de marca:
   #221831  morado oscuro  -> navbar / fondo oscuro
   #465779  azul pizarra   -> primario / secundario
   #99b3c6  azul grisáceo  -> acento / info / muted
   #d3d7e7  lavanda claro  -> fondos suaves / superficies
   ============================================================ */

/* ---------- Variables de marca ---------- */
:root {
    --cc-deep: #221831;
    --cc-slate: #465779;
    --cc-mist: #99b3c6;
    --cc-lavender: #d3d7e7;
}

/* ---------- Modo claro (por defecto) ---------- */
:root,
[data-bs-theme="light"] {
    --tblr-primary: #465779;
    --tblr-primary-rgb: 70, 87, 121;
    --tblr-secondary: #5f7189;
    --tblr-secondary-rgb: 95, 113, 137;
    --tblr-success: #5f8a8e;
    --tblr-success-rgb: 95, 138, 142;
    --tblr-warning: #c9b089;
    --tblr-warning-rgb: 201, 176, 137;
    --tblr-danger: #c0555f;
    --tblr-danger-rgb: 192, 85, 95;
    --tblr-info: #465779;
    --tblr-info-rgb: 70, 87, 121;
    --tblr-muted: #77819f;

    /* Navbar con morado oscuro de la paleta */
    --tblr-navbar-bg: #221831;
    --navbar-bg-color: #221831;
}

/* ---------- Modo oscuro (misma paleta, versiones más claras) ---------- */
[data-bs-theme="dark"] {
    --tblr-primary: #a9c3d6;
    --tblr-primary-rgb: 169, 195, 214;
    --tblr-secondary: #c3d3e1;
    --tblr-secondary-rgb: 195, 211, 225;
    --tblr-success: #7fb0b3;
    --tblr-success-rgb: 127, 176, 179;
    --tblr-warning: #dcc08f;
    --tblr-warning-rgb: 220, 192, 143;
    --tblr-danger: #e07079;
    --tblr-danger-rgb: 224, 112, 121;
    --tblr-info: #a9c3d6;
    --tblr-info-rgb: 169, 195, 214;
    --tblr-muted: #99b3c6;

    --tblr-navbar-bg: #1a112a;
    --navbar-bg-color: #1a112a;
    --tblr-body-bg: #16101f;
    --tblr-bg-surface: #1d1528;
    --tblr-card-bg: #1d1528;
    --tblr-card-bg-color: #1d1528;
    --tblr-border-color: #3a2f4a;
}

/* ---------- Navbar (marca) ---------- */
.navbar-dark {
    background-color: var(--navbar-bg-color, #221831);
    --tblr-secondary: #99b3c6;
    --tblr-secondary-rgb: 153, 179, 198;
}

.navbar-dark .navbar-brand,
.navbar-dark .nav-link,
.navbar-dark .nav-link-title {
    color: rgba(255, 255, 255, 0.92);
}

.navbar-dark .nav-link:hover,
.navbar-dark .nav-link.active {
    color: #99b3c6;
}

.navbar-dark .dropdown-toggle {
    color: rgba(255, 255, 255, 0.92);
}

/* Menús desplegables sensibles al tema (también los de la navbar oscura) */
.dropdown-menu,
.navbar-dark .dropdown-menu {
    background-color: var(--tblr-dropdown-bg, #ffffff);
    color: var(--tblr-dropdown-color, inherit);
    border-color: var(--tblr-dropdown-border-color, rgba(0, 0, 0, 0.125));
}

.navbar-dark .dropdown-menu .dropdown-item {
    color: var(--tblr-dropdown-color, inherit);
}

.navbar-dark .dropdown-menu .dropdown-item:hover,
.navbar-dark .dropdown-menu .dropdown-item:focus {
    background-color: var(--tblr-dropdown-link-hover-bg, rgba(0, 0, 0, 0.05));
}

/* ============================================================
   Modern SaaS Dashboard - refinamientos
   ============================================================ */
.cc-kpi .card-body {
    padding: 1.25rem 1.25rem 1.1rem;
}

.cc-kpi-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.9rem;
    flex-shrink: 0;
}

.cc-kpi-value {
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.cc-kpi-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--tblr-muted, #77819f);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cc-module-card {
    transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    border: 1px solid var(--tblr-border-color, rgba(0, 0, 0, 0.08));
    background: var(--tblr-card-bg, #ffffff);
}

.cc-module-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(34, 24, 49, 0.08);
    border-color: var(--tblr-primary, #465779);
}

.cc-module-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.7rem;
    background: rgba(70, 87, 121, 0.08);
    color: var(--tblr-primary, #465779);
}

[data-bs-theme="dark"] .cc-module-icon {
    background: rgba(169, 195, 214, 0.12);
    color: var(--tblr-primary, #a9c3d6);
}

.page-header .page-title {
    font-weight: 700;
    letter-spacing: -0.02em;
}