/* ==========================================================================
   TLC · Theme layer on top of Bootstrap 5.3
   Light, spacious, premium-SaaS direction. Institutional palette: navy,
   red (sampled straight from the real logo), gray, white.
   Load this AFTER bootstrap.min.css.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Sora:wght@600;700&display=swap');

:root {
    /* ---- Brand palette ---------------------------------------------------
     --tlc-red-brand is the exact red sampled from the TLC logo file, used
     only where the logo itself needs to feel "the same red" (the top
     accent line, the active-page rail). --tlc-red is a hair deeper —
     easier to read as text/fills at UI sizes without looking neon. */
    --tlc-navy: #101B33;
    --tlc-navy-2: #16233F;
    --tlc-red-brand: #E31414;
    --tlc-red: #D21414;
    --tlc-red-hover: #AD0F10;
    --tlc-red-soft: #FDECEC;
    --tlc-bg: #ECEEF3;
    --tlc-surface: #FCFCFD;
    --tlc-border: #E4E7EE;
    --tlc-border-strong: #D3D7E1;
    --tlc-text: #1B2333;
    --tlc-text-muted: #6B7686;
    --tlc-success: #1E9E6B;
    --tlc-success-soft: #E5F7EF;
    --tlc-danger: #D64545;
    --tlc-danger-soft: #FBEAEA;
    --tlc-warning: #C7821A;
    --tlc-warning-soft: #FCF1DF;
    /* Accent tints for dashboard widgets (stat card icons, chart series,
     donut segments) — separate from the strict brand palette above so
     data can stay readable/distinguishable without diluting the red/navy
     brand identity used everywhere else (nav, buttons, links). */
    --tlc-tint-red-bg: var(--tlc-red-soft);
    --tlc-tint-red-fg: var(--tlc-red);
    --tlc-tint-navy-bg: #EEF1F7;
    --tlc-tint-navy-fg: var(--tlc-navy);
    --tlc-tint-amber-bg: #FBF1DF;
    --tlc-tint-amber-fg: #B4790E;
    --tlc-tint-teal-bg: #E4F5F3;
    --tlc-tint-teal-fg: #128C7E;
    --tlc-tint-violet-bg: #F1EAFB;
    --tlc-tint-violet-fg: #7C3AED;
    /* Nav text/icon/emphasis colors — separate from --tlc-navy because navy
     itself is meant to stay dark in both themes (it's a brand color, not
     a text-on-surface color), so anything using it as text needs its own
     token that actually flips for readability in dark mode. */
    --tlc-nav-text: #4A5468;
    --tlc-nav-icon: var(--tlc-navy);
    --tlc-nav-emphasis: var(--tlc-navy);
    --tlc-radius-sm: 7px;
    --tlc-radius: 10px;
    --tlc-radius-lg: 14px;
    /* Two shadow scales: a barely-there ambient one for things resting on
     the page (cards), a stronger one reserved for things that float. */
    --tlc-shadow-card: 0 1px 2px rgba(16, 27, 51, .04), 0 1px 1px rgba(16, 27, 51, .03);
    --tlc-shadow-float: 0 12px 32px rgba(16, 27, 51, .12), 0 2px 8px rgba(16, 27, 51, .06);
    --tlc-rail-w: 62px;
    --tlc-panel-w: 222px;
    --tlc-topbar-h: 60px;
    --tlc-accent-bar-h: 3px;
    /* ---- Bootstrap variable overrides ------------------------------------ */
    --bs-body-font-family: 'Inter', system-ui, -apple-system, sans-serif;
    --bs-body-color: var(--tlc-text);
    --bs-body-bg: var(--tlc-bg);
    --bs-border-color: var(--tlc-border);
    --bs-border-radius: var(--tlc-radius-sm);
    --bs-primary: var(--tlc-red);
    --bs-primary-rgb: 210, 20, 20;
    --bs-link-color: var(--tlc-red);
    --bs-link-hover-color: var(--tlc-red-hover);
}

[data-bs-theme="dark"] {
    --tlc-bg: #0D1420;
    --tlc-surface: #141C2B;
    --tlc-border: #232E45;
    --tlc-border-strong: #2C3A57;
    --tlc-text: #E9ECF3;
    --tlc-text-muted: #8E99B2;
    --tlc-red-soft: #3A1416;
    --tlc-success-soft: #123626;
    --tlc-danger-soft: #3A1E21;
    --tlc-warning-soft: #332711;
    --tlc-shadow-card: 0 1px 2px rgba(0, 0, 0, .3);
    --tlc-shadow-float: 0 14px 34px rgba(0, 0, 0, .5);
    --tlc-nav-text: #AEB8CC;
    --tlc-nav-icon: #8B96AE;
    --tlc-nav-emphasis: #F2F4F8;
    --tlc-tint-red-bg: #3A1416;
    --tlc-tint-navy-bg: #1B2740;
    --tlc-tint-navy-fg: #C6CEE2;
    --tlc-tint-amber-bg: #33270F;
    --tlc-tint-amber-fg: #E3AA4C;
    --tlc-tint-teal-bg: #0F2E2A;
    --tlc-tint-teal-fg: #4FD1C1;
    --tlc-tint-violet-bg: #2A1F42;
    --tlc-tint-violet-fg: #B794F6;
}

.font-heading {
    font-family: 'Sora', 'Inter', sans-serif;
}

body {
    min-height: 100vh;
    font-size: .875rem;
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Sora', 'Inter', sans-serif;
    letter-spacing: -.01em;
}

/* A slim brand line across the very top of every screen — a quiet,
   consistent signature that doesn't require a big logo treatment on
   every single page. */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--tlc-accent-bar-h);
    background: var(--tlc-red-brand);
    z-index: 1040;
    pointer-events: none;
}

/* ==========================================================================
   Skip link
   ========================================================================== */
.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    z-index: 2000;
    background: var(--tlc-red);
    color: #fff;
    padding: .6rem 1rem;
    border-radius: 0 0 var(--tlc-radius-sm) 0;
}

    .skip-link:focus {
        left: 0;
    }

/* ==========================================================================
   Navigation — dual panel: a slim always-visible icon rail for top-level
   categories, plus a secondary panel that shows that category's links.
   Collapsing the panel keeps just the rail, similar to PowerAdmin's nav.
   Below the lg breakpoint both collapse into a single offcanvas drawer
   with the traditional full accordion tree (#mobileMenu) — a dual-panel
   layout doesn't have room to breathe on a phone.
   ========================================================================== */

@media (min-width: 992px) {
    .main-shell {
        margin-left: calc(var(--tlc-rail-w) + var(--tlc-panel-w));
        transition: margin-left .2s ease;
    }

    body.panel-collapsed .main-shell {
        margin-left: var(--tlc-rail-w);
    }

    body.panel-collapsed .nav-panel {
        transform: translateX(-100%);
        opacity: 0;
        pointer-events: none;
    }
}

/* ---- Icon rail --------------------------------------------------------- */
.icon-rail {
    display: none;
}

@media (min-width: 992px) {
    .icon-rail {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: fixed;
        inset-block: 0;
        left: 0;
        width: var(--tlc-rail-w);
        background: var(--tlc-surface);
        border-right: 1px solid var(--tlc-border);
        z-index: 1031;
        padding: 1.25rem 0;
    }
}

.rail-brand {
    flex-shrink: 0;
    margin-bottom: 1.1rem;
}

.rail-logo-mark {
    width: 30px;
    height: auto;
    display: block;
}

.rail-nav {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    width: 100%;
}

    .rail-nav::-webkit-scrollbar {
        display: none;
    }

.rail-item {
    width: 38px;
    height: 38px;
    border-radius: var(--tlc-radius-sm);
    border: 0;
    background: transparent;
    color: var(--tlc-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    flex-shrink: 0;
}

    .rail-item:hover {
        background: var(--tlc-bg);
        color: var(--tlc-nav-emphasis);
    }

    .rail-item.active {
        background: var(--tlc-red-soft);
        color: var(--tlc-red);
    }

.rail-footer {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    padding-top: 1rem;
}

/* ---- Secondary panel ---------------------------------------------------- */
.nav-panel {
    display: none;
}

@media (min-width: 992px) {
    .nav-panel {
        display: flex;
        flex-direction: column;
        position: fixed;
        inset-block: 0;
        left: var(--tlc-rail-w);
        width: var(--tlc-panel-w);
        background: var(--tlc-surface);
        border-right: 1px solid var(--tlc-border);
        z-index: 1030;
        transition: transform .2s ease, opacity .2s ease;
    }
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem .9rem .7rem;
    flex-shrink: 0;
}

.panel-title {
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    color: var(--tlc-text);
}

.panel-collapse-btn {
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    color: var(--tlc-text-muted);
    border-radius: var(--tlc-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .panel-collapse-btn:hover {
        background: var(--tlc-bg);
        color: var(--tlc-text);
    }

.panel-nav {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 1rem 1rem;
}

    .panel-nav::-webkit-scrollbar {
        width: 6px;
    }

    .panel-nav::-webkit-scrollbar-thumb {
        background: var(--tlc-border-strong);
        border-radius: 3px;
    }

    .panel-nav:empty::after {
        content: "Selecciona una categoría del riel";
        display: block;
        font-size: .8rem;
        color: var(--tlc-text-muted);
        padding: .5rem;
    }

/* A small "open the panel back up" affordance that appears in the rail
   itself once the panel has been collapsed. */
.rail-expand-btn {
    display: none;
}

body.panel-collapsed .rail-expand-btn {
    display: flex;
}

/* ---- Nav links — shared by the panel (desktop) and the mobile drawer --- */
.nav-item {
    margin-bottom: 3px;
}

.nav-link.nav-toggle,
a.nav-link.nav-sublink {
    display: flex;
    align-items: center;
    gap: .65rem;
    width: 100%;
    padding: .5rem .7rem;
    border-radius: var(--tlc-radius-sm);
    border-left: 3px solid transparent;
    color: var(--tlc-nav-text);
    font-size: .85rem;
    font-weight: 500;
    background: transparent;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

    .nav-link.nav-toggle i:first-child,
    a.nav-link.nav-sublink i:first-child {
        width: 18px;
        text-align: center;
        font-size: .92rem;
        color: var(--tlc-nav-icon);
        opacity: .7;
        flex-shrink: 0;
    }

    .nav-link.nav-toggle:hover,
    a.nav-link.nav-sublink:hover {
        background: var(--tlc-bg);
        color: var(--tlc-nav-emphasis);
    }

    /* Active page: a red rail marks it, but the text stays neutral — red text
   AND red icon AND red tint all at once reads as too loud. One red accent
   (the border) plus a colored icon is enough to say "you are here". */
    a.nav-link.nav-sublink.active {
        background: var(--tlc-red-soft);
        border-left-color: var(--tlc-red);
        color: var(--tlc-nav-emphasis);
        font-weight: 600;
    }

        a.nav-link.nav-sublink.active i {
            color: var(--tlc-nav-emphasis);
            opacity: 1;
        }

.nav-text {
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-chev {
    margin-left: auto;
    transition: transform .15s ease;
    flex-shrink: 0;
    font-size: .68rem;
    opacity: .5;
}

.nav-toggle[aria-expanded="true"] .nav-chev {
    transform: rotate(90deg);
}

.nav-sub {
    border: 0;
}

.nav-sub-inner {
    padding-left: 1.5rem;
    padding-top: 3px;
    padding-bottom: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .nav-sub-inner .nav-sublink {
        font-size: .82rem;
        padding-block: .45rem;
    }

/* ---- Mobile offcanvas drawer (full traditional tree) ------------------- */
.mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.25rem 1rem;
}

.mobile-menu-logo {
    height: 30px;
    width: auto;
}

.mobile-menu-nav {
    padding: 0 .75rem 1.25rem;
    /* El menú es largo: solo esta parte se desplaza; el logo y el usuario se quedan fijos */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

#mobileMenu {
    display: flex;
    flex-direction: column;
    max-height: 100dvh;
}

    #mobileMenu .mobile-menu-header,
    #mobileMenu .mobile-menu-search,
    #mobileMenu .mobile-menu-user {
        flex-shrink: 0;
    }

/* Buscador del menú en el celular */
.mobile-menu-search {
    padding: 0 1rem .75rem;
}

    .mobile-menu-search .search-box {
        max-width: none;
    }

    .mobile-menu-search input[type="search"]::-webkit-search-cancel-button {
        cursor: pointer;
    }

#menu-dinamico-mobile [hidden],
#panelNav [hidden] {
    display: none !important;
}

/* Buscador del menú en el panel (web) */
.panel-search {
    padding: 0 1rem .7rem;
    flex-shrink: 0;
}

    .panel-search .search-box {
        max-width: none;
        padding: .45rem .8rem;
    }

        .panel-search .search-box input {
            min-width: 0;
            font-size: .82rem;
        }

        .panel-search .search-box:focus-within kbd {
            display: none;
        }

.mobile-menu-sin-resultados {
    padding: 1.5rem .75rem;
    text-align: center;
    color: var(--tlc-text-muted);
    font-size: .86rem;
}

.nav-coincide {
    background: var(--tlc-warning-soft);
    color: inherit;
    border-radius: 3px;
    padding: 0 1px;
}

.mobile-menu-user {
    border-top: 1px solid var(--tlc-border);
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: .7rem;
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: .7rem;
}

    .sidebar-user .avatar,
    .rail-avatar-btn {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: var(--tlc-red-soft);
        color: var(--tlc-red);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .78rem;
        font-weight: 700;
        position: relative;
        flex-shrink: 0;
        border: 0;
    }

        .sidebar-user .avatar .online,
        .rail-avatar-btn .online {
            position: absolute;
            bottom: -1px;
            right: -1px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: var(--tlc-success);
            border: 2px solid var(--tlc-surface);
        }

.sidebar-user-info {
    min-width: 0;
    flex: 1 1 auto;
}

    .sidebar-user-info .name {
        color: var(--tlc-nav-emphasis);
        font-size: .84rem;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .sidebar-user-info .role {
        color: var(--tlc-text-muted);
        font-size: .72rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.sidebar-user .more-btn {
    background: transparent;
    border: 0;
    color: var(--tlc-text-muted);
    width: 30px;
    height: 30px;
    border-radius: var(--tlc-radius-sm);
    flex-shrink: 0;
}

    .sidebar-user .more-btn:hover {
        background: var(--tlc-bg);
        color: var(--tlc-text);
    }

/* ==========================================================================
   Topbar
   ========================================================================== */
.topbar {
    height: var(--tlc-topbar-h);
    background: var(--tlc-surface);
    border-bottom: 1px solid var(--tlc-border);
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 0 2rem;
    position: sticky;
    top: 0;
    z-index: 1020;
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

.tb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--tlc-radius-sm);
    border: 1px solid transparent;
    background: transparent;
    color: var(--tlc-text-muted);
}

    .tb-btn:hover {
        background: var(--tlc-bg);
        color: var(--tlc-text);
    }

.theme-toggle .theme-icon-dark {
    display: none;
}

[data-bs-theme="dark"] .theme-toggle .theme-icon-light {
    display: none;
}

[data-bs-theme="dark"] .theme-toggle .theme-icon-dark {
    display: inline-block;
}

.breadcrumb-trail {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .84rem;
    color: var(--tlc-text-muted);
}

    .breadcrumb-trail .crumb-current {
        color: var(--tlc-text);
        font-weight: 600;
    }

.search-box {
    flex: 1 1 auto;
    max-width: 440px;
    display: flex;
    align-items: center;
    gap: .6rem;
    background: var(--tlc-bg);
    border: 1px solid transparent;
    border-radius: 999px;
    padding: .55rem 1rem;
    color: var(--tlc-text-muted);
}

    .search-box:focus-within {
        border-color: var(--tlc-border-strong);
        background: var(--tlc-surface);
    }

    .search-box input {
        border: 0;
        background: transparent;
        outline: none;
        font-size: .86rem;
        flex: 1 1 auto;
        color: var(--tlc-text);
    }

    .search-box kbd {
        font-size: .68rem;
        background: var(--tlc-surface);
        border: 1px solid var(--tlc-border);
        border-radius: 5px;
        padding: .15rem .4rem;
        color: var(--tlc-text-muted);
    }

.topbar-right {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
}

.tb-badge {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tlc-red);
    border: 2px solid var(--tlc-surface);
}

.tb-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--tlc-red-soft);
    color: var(--tlc-red);
    font-weight: 700;
    font-size: .8rem;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   Content area / cards
   ========================================================================== */

/* Sticky footer: main-shell is the full-height flex column, main-content is
   the only piece allowed to grow, so footer always lands at the bottom of
   the viewport regardless of how little content a page has. */
.main-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.main-content {
    flex: 1 1 auto;
    padding: 1.5rem 1.75rem;
}

.card {
    border: 1px solid var(--tlc-border);
    border-radius: var(--tlc-radius);
    box-shadow: var(--tlc-shadow-card);
    background: var(--tlc-surface);
}

.card-body {
    padding: 1.1rem;
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--tlc-border);
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    font-size: .9rem;
    padding: .9rem 1.1rem;
}

.card.is-refreshing {
    opacity: .55;
    pointer-events: none;
}

.footer {
    border-top: 1px solid var(--tlc-border);
    background: var(--tlc-surface);
    padding: .8rem 1.75rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .4rem;
    font-size: .78rem;
    color: var(--tlc-text-muted);
}

    .footer a {
        color: var(--tlc-red);
        text-decoration: none;
        font-weight: 600;
    }

/* ==========================================================================
   Floating elements — the stronger shadow scale lives here
   ========================================================================== */
.dropdown-menu, .modal-content, .toast, .offcanvas {
    box-shadow: var(--tlc-shadow-float);
    border: 1px solid var(--tlc-border);
    border-radius: var(--tlc-radius);
}

.dropdown-menu {
    background: var(--tlc-surface);
    padding: .45rem;
}

.dropdown-item {
    border-radius: var(--tlc-radius-sm);
    font-size: .87rem;
    padding: .55rem .7rem;
    color: var(--tlc-text);
}

    .dropdown-item:hover, .dropdown-item:focus {
        background: var(--tlc-bg);
        color: var(--tlc-text);
    }

    .dropdown-item.text-danger:hover {
        background: var(--tlc-danger-soft);
    }

.modal-content {
    background: var(--tlc-surface);
}

.modal-header, .modal-footer {
    border-color: var(--tlc-border);
    padding: 1.25rem 1.5rem;
}

.modal-body {
    padding: 1.5rem;
}

.modal-title {
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    font-size: 1.05rem;
}

.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

.btn {
    border-radius: var(--tlc-radius-sm);
    padding: .45rem .9rem;
    font-weight: 500;
    font-size: .85rem;
}

.btn-sm {
    padding: .35rem .75rem;
    font-size: .8rem;
}

.btn-primary {
    background: var(--tlc-red);
    border-color: var(--tlc-red);
}

    .btn-primary:hover {
        background: var(--tlc-red-hover);
        border-color: var(--tlc-red-hover);
    }

.btn-outline-secondary {
    border-color: var(--tlc-border-strong);
    color: var(--tlc-text-muted);
}

.form-control, .form-select {
    border-color: var(--tlc-border-strong);
    border-radius: var(--tlc-radius-sm);
    padding: .45rem .7rem;
    font-size: .85rem;
}

    .form-control:focus, .form-select:focus {
        border-color: var(--tlc-red);
        box-shadow: 0 0 0 3px var(--tlc-red-soft);
    }

/* Safety net: forces readable text/background on any input, and on any
   heading inside a card, regardless of what a leftover page-level <style>
   (from before this redesign) might still be setting — some views still
   carry an old color:#fff meant for the previous dark header/table look. */
/* Casillas y radios quedan fuera: si se les fuerza el fondo, la palomita (blanca) no se ve al marcarlas */
input:not([type="checkbox"]):not([type="radio"]), textarea, select {
    color: var(--tlc-text) !important;
    background-color: var(--tlc-surface) !important;
}

    .form-check-input:not(:checked) {
        background-color: var(--tlc-surface);
    }

    input::placeholder, textarea::placeholder {
        color: var(--tlc-text-muted) !important;
        opacity: 1 !important;
    }

.card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
.card .card-title {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--tlc-text) !important;
}

/* Bootstrap's own <table> and anything DataTables renders share the same
   compact scale as the rest of the UI, instead of each library's own
   (much larger) defaults. !important because DataTables' inline styling
   and Bootstrap's table-cell-padding variables otherwise win the tie. */
.table, table.dataTable {
    font-size: .82rem !important;
    line-height: 1.35;
    color: var(--tlc-text);
}

    .table thead th, table.dataTable thead th {
        font-size: .68rem !important;
        font-weight: 700;
        letter-spacing: .03em;
        text-transform: uppercase;
        color: var(--tlc-text-muted);
        border-bottom: 1px solid var(--tlc-border) !important;
        padding: .5rem .5rem !important;
    }

    .table tbody td, table.dataTable tbody td {
        padding: .4rem .5rem !important;
        border-bottom: 1px solid var(--tlc-border) !important;
        vertical-align: middle;
    }

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    font-size: .8rem;
    color: var(--tlc-text-muted);
}

    .dataTables_wrapper .dataTables_filter input {
        width: auto;
        display: inline-block;
        margin-left: .4rem;
    }

.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: .32rem .65rem !important;
    font-size: .8rem !important;
    border-radius: var(--tlc-radius-sm) !important;
    border: 1px solid var(--tlc-border-strong) !important;
    background: var(--tlc-surface) !important;
    color: var(--tlc-text) !important;
    margin-left: .25rem !important;
}

    .dataTables_wrapper .dataTables_paginate .paginate_button.current {
        background: rgba(210, 20, 20, .1) !important;
        border-color: transparent !important;
        color: var(--tlc-text) !important;
        font-weight: 700;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
        opacity: .5;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.disabled):not(.current) {
        background: var(--tlc-bg) !important;
    }

/* Export buttons (Excel/PDF) — DataTables' Buttons extension ships with
   its own plain default look, easy to miss against the theme otherwise.
   dom: 'Brtip' renders this div right above the table. */
.dt-buttons {
    /* Los botones nativos de DataTables van ocultos en todo el sitio */
    display: none !important;
    gap: .4rem;
    margin-bottom: .75rem;
}

    .dt-buttons .dt-button,
    .icon-export-btn {
        width: 34px;
        height: 34px;
        border-radius: var(--tlc-radius-sm);
        border: 1px solid var(--tlc-border-strong) !important;
        background: var(--tlc-surface) !important;
        color: var(--tlc-text-muted) !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 !important;
    }

        .dt-buttons .dt-button:hover {
            background: var(--tlc-bg) !important;
            color: var(--tlc-text) !important;
        }

        .dt-buttons .dt-button span, .icon-export-btn .export-icon {
            display: flex;
            align-items: center;
            justify-content: center;
        }

.export-icon.export-excel {
    color: var(--tlc-success);
}

.export-icon.export-pdf {
    color: var(--tlc-danger);
}

.toast-container {
    z-index: 1090;
}

.toast {
    border-left: 3px solid var(--tlc-red);
}

    .toast.toast-success {
        border-left-color: var(--tlc-success);
    }

    .toast.toast-error {
        border-left-color: var(--tlc-danger);
    }

.offcanvas {
    background: var(--tlc-surface);
    color: var(--tlc-text);
}

/* ==========================================================================
   SweetAlert2 — themed directly via CSS so any Swal.fire() call follows
   light/dark automatically, no per-call JS patch (like a didOpen hook)
   needed. The library ships its own popup, unrelated to Bootstrap, so it
   needs its own rules here rather than inheriting .modal's.
   ========================================================================== */
.swal2-popup {
    background: var(--tlc-surface) !important;
    color: var(--tlc-text) !important;
    border-radius: var(--tlc-radius) !important;
    box-shadow: var(--tlc-shadow-float);
}

.swal2-title {
    color: var(--tlc-text) !important;
    font-family: 'Sora', sans-serif;
    font-weight: 600;
}

.swal2-html-container {
    color: var(--tlc-text) !important;
}

    .swal2-html-container label {
        color: var(--tlc-text);
    }

    .swal2-html-container .text-muted {
        color: var(--tlc-text-muted) !important;
    }

.swal2-confirm.swal2-styled {
    background: var(--tlc-red) !important;
}

.swal2-cancel.swal2-styled {
    background: var(--tlc-text-muted) !important;
}

.swal2-validation-message {
    background: var(--tlc-danger-soft) !important;
    color: var(--tlc-danger) !important;
}

.swal2-close {
    color: var(--tlc-text-muted) !important;
}

    .swal2-close:hover {
        color: var(--tlc-text) !important;
    }

/* ==========================================================================
   Loader
   ========================================================================== */
#tlc-loading {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: var(--tlc-surface);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.tlc-loading-logo {
    width: 190px;
    height: auto;
    animation: tlc-pulse 1.4s infinite ease-in-out;
}

.tlc-text {
    margin-top: 1.1rem;
    font-size: .85rem;
    color: var(--tlc-text-muted);
    letter-spacing: .04em;
}

@keyframes tlc-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .55;
        transform: scale(.97);
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-chev, .card, .tlc-loading-logo {
        transition: none !important;
        animation: none !important;
    }
}

/* ==========================================================================
   Dashboard widgets — stat cards, chart cards, segmented control, donut
   ========================================================================== */
.stat-card {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: 1.1rem;
}

.stat-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--tlc-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    flex-shrink: 0;
    background: var(--tlc-tint-navy-bg);
    color: var(--tlc-tint-navy-fg);
}

.stat-icon--red {
    background: var(--tlc-tint-red-bg);
    color: var(--tlc-tint-red-fg);
}

.stat-icon--navy {
    background: var(--tlc-tint-navy-bg);
    color: var(--tlc-tint-navy-fg);
}

.stat-icon--amber {
    background: var(--tlc-tint-amber-bg);
    color: var(--tlc-tint-amber-fg);
}

.stat-icon--teal {
    background: var(--tlc-tint-teal-bg);
    color: var(--tlc-tint-teal-fg);
}

.stat-icon--muted {
    background: var(--tlc-bg);
    color: var(--tlc-text-muted);
}

.stat-icon--success {
    background: var(--tlc-success-soft);
    color: var(--tlc-success);
}

.stat-icon--warning {
    background: var(--tlc-warning-soft);
    color: var(--tlc-warning);
}

.stat-icon--violet {
    background: var(--tlc-tint-violet-bg);
    color: var(--tlc-tint-violet-fg);
}

.stat-info {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.stat-label {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--tlc-text-muted);
}

.stat-value {
    font-family: 'Sora', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--tlc-text);
    line-height: 1.2;
}

.stat-trend {
    font-size: .74rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: .2rem;
}

    .stat-trend.up {
        color: var(--tlc-success);
    }

    .stat-trend.down {
        color: var(--tlc-danger);
    }

/* Segmented pill toggle — reuses the existing generic .btn-group[data-group]
   click handler in main.js (adds/removes .active), just re-skinned. */
.segmented {
    display: inline-flex;
    background: var(--tlc-bg);
    padding: 3px;
    border-radius: 999px;
    gap: 2px;
}

    .segmented .btn {
        border: 0;
        background: transparent;
        color: var(--tlc-text-muted);
        font-size: .8rem;
        font-weight: 500;
        padding: .4rem 1rem;
        border-radius: 999px;
    }

        .segmented .btn.active {
            background: var(--tlc-red);
            color: #fff;
        }

.chart-card .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.chart-card-kpis {
    display: flex;
    gap: 1.75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.chart-card-kpi {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

    .chart-card-kpi .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        display: inline-block;
        margin-right: .4rem;
    }

    .chart-card-kpi .kpi-label {
        font-size: .72rem;
        color: var(--tlc-text-muted);
        display: flex;
        align-items: center;
    }

    .chart-card-kpi .kpi-value {
        font-family: 'Sora', sans-serif;
        font-weight: 700;
        font-size: 1.1rem;
        color: var(--tlc-text);
    }

.donut-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.donut-center {
    position: absolute;
    text-align: center;
    pointer-events: none;
}

    .donut-center .label {
        font-size: .72rem;
        color: var(--tlc-text-muted);
    }

    .donut-center .value {
        font-family: 'Sora', sans-serif;
        font-weight: 700;
        font-size: 1.25rem;
        color: var(--tlc-text);
    }

.legend-list {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    margin-top: 1.25rem;
}

.legend-row {
    display: flex;
    align-items: center;
    font-size: .84rem;
    color: var(--tlc-text);
}

    .legend-row .dot {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        margin-right: .6rem;
        flex-shrink: 0;
    }

    .legend-row .amount {
        margin-left: auto;
        font-weight: 600;
    }

/* ==========================================================================
   Table pattern — toolbar (title/subtitle + actions), controls row
   (length + search), status badges, row action icons, numbered pagination.
   Drop these classes into any card that wraps a crearTabla() table.
   ========================================================================== */
.table-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.1rem 1.1rem .9rem;
    border-bottom: 1px solid var(--tlc-border);
}

.table-toolbar-title {
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    color: var(--tlc-text);
    margin: 0;
}

.table-toolbar-subtitle {
    font-size: .8rem;
    color: var(--tlc-text-muted);
    margin-top: .15rem;
}

.table-toolbar-actions {
    display: flex;
    gap: .5rem;
    flex-shrink: 0;
}

.table-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    padding: .9rem 1.1rem 0;
}

    .table-controls .form-select,
    .table-controls .form-control {
        width: auto;
    }

.table-controls-hint {
    font-size: .8rem;
    color: var(--tlc-text-muted);
}

/* Status pill — pick the variant that matches the row's status. */
.badge-status {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .65rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1;
}

    .badge-status::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
        flex-shrink: 0;
    }

.badge-status--success {
    background: var(--tlc-success-soft);
    color: var(--tlc-success);
}

.badge-status--warning {
    background: var(--tlc-warning-soft);
    color: var(--tlc-warning);
}

.badge-status--info {
    background: var(--tlc-tint-teal-bg);
    color: var(--tlc-tint-teal-fg);
}

.badge-status--danger {
    background: var(--tlc-danger-soft);
    color: var(--tlc-danger);
}

/* Row action buttons (view/edit/delete/etc.) — small square icon buttons. */
.icon-btn {
    width: 30px;
    height: 30px;
    border-radius: var(--tlc-radius-sm);
    border: 1px solid var(--tlc-border-strong);
    background: var(--tlc-surface);
    color: var(--tlc-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
}

    .icon-btn:hover {
        background: var(--tlc-bg);
        color: var(--tlc-text);
    }

    .icon-btn + .icon-btn {
        margin-left: .35rem;
    }

.icon-btn--danger:hover {
    background: var(--tlc-danger-soft);
    color: var(--tlc-danger);
    border-color: var(--tlc-danger-soft);
}

/* Filter dropdown form — a Bootstrap dropdown-menu wide enough to hold a
   small form (date range, a select, apply/reset). Trigger it with a plain
   .btn + data-bs-toggle="dropdown"; Bootstrap handles open/close/outside-
   click for you, no custom JS needed for that part. */
.filter-panel {
    width: 280px;
    padding: 1rem;
}

    .filter-panel .form-label {
        font-size: .78rem;
        font-weight: 600;
        color: var(--tlc-text-muted);
        margin-bottom: .3rem;
    }

    .filter-panel .filter-actions {
        display: flex;
        gap: .5rem;
        margin-top: .25rem;
    }

        .filter-panel .filter-actions .btn {
            flex: 1 1 0;
        }

/* Bootstrap's pagination component ships its own hardcoded blue via
   --bs-pagination-active-bg — overriding --bs-primary doesn't reach it,
   so it needs setting directly. Active page stays visually consistent
   with the prev/next arrow buttons (bordered square) instead of a filled
   block, just marked with red text/weight. */
.pagination {
    gap: .25rem;
}

.page-link {
    border-color: var(--tlc-border-strong);
    color: var(--tlc-text);
    background-color: var(--tlc-surface);
    border-radius: var(--tlc-radius-sm) !important;
    min-width: 30px;
    text-align: center;
}

    .page-link:hover {
        background-color: var(--tlc-bg);
        color: var(--tlc-text);
        border-color: var(--tlc-border-strong);
    }

.page-item.active .page-link {
    background-color: rgba(210, 20, 20, .1);
    border-color: transparent;
    color: var(--tlc-text);
    font-weight: 700;
}

.page-item.disabled .page-link {
    background-color: var(--tlc-surface);
    color: var(--tlc-text-muted);
    opacity: .5;
}



/* ==========================================================================
   Select2 — Integración con Bootstrap 5 y Tema Claro/Oscuro (Variables)
   ========================================================================== */

/* 1. Ajuste de altura para igualar a Bootstrap 5 (.form-control) */
.select2-container .select2-selection--single {
    height: 38px !important;
    border: 1px solid var(--tlc-border-strong) !important;
    background-color: var(--tlc-surface) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 36px !important;
    color: var(--tlc-text) !important; /* Hereda automático claro/oscuro */
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px !important;
}

/* 2. Lista desplegable y opciones */
.select2-dropdown {
    background-color: var(--tlc-surface) !important;
    border: 1px solid var(--tlc-border-strong) !important;
    box-shadow: var(--tlc-shadow-float) !important; /* Tu sombra flotante */
}

.select2-results__option {
    color: var(--tlc-text) !important;
    background-color: transparent !important;
    padding: .55rem .7rem !important;
    font-size: .87rem !important;
}

/* 3. Hover y elemento seleccionado (Usamos tu fondo rojo suave) */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: rgba(210, 20, 20, 0.1) !important; /* Tu rojo corporativo transparente */
    color: var(--tlc-text) !important;
    font-weight: 600 !important;
}

/* 4. Placeholder (Hint) */
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--tlc-text-muted) !important;
}

/* 5. Selección múltiple (filtros con varios valores): en tema oscuro se veía blanca */
.select2-container--default .select2-selection--multiple {
    min-height: 38px !important;
    border: 1px solid var(--tlc-border-strong) !important;
    background-color: var(--tlc-surface) !important;
    color: var(--tlc-text) !important;
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--tlc-red) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--tlc-bg) !important;
    border: 1px solid var(--tlc-border-strong) !important;
    color: var(--tlc-text) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--tlc-text-muted) !important;
    border-right-color: var(--tlc-border-strong) !important;
}

    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
        background-color: transparent !important;
        color: var(--tlc-red) !important;
    }

/* Cuadro donde se escribe (dentro del combo múltiple y en el buscador de la lista) */
.select2-container--default .select2-search--inline .select2-search__field,
.select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: transparent !important;
    color: var(--tlc-text) !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--tlc-surface) !important;
    border: 1px solid var(--tlc-border-strong) !important;
}

.select2-container--default .select2-search--inline .select2-search__field::placeholder,
.select2-container--default .select2-search--dropdown .select2-search__field::placeholder {
    color: var(--tlc-text-muted) !important;
}

.select2-container--default .select2-selection__clear {
    color: var(--tlc-text-muted) !important;
}