.my-center-text {
    text-align: left;
}

th.dt-center, td.dt-center {
    text-align: center;
}

th.dt-type-numeric, td.dt-type-numeric {
    text-align: left !important;
}

.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
    background-color: #2ece7c;
    opacity: 1.0;
}

.bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

@media (min-width: 768px) {
    .bd-placeholder-img-lg {
        font-size: 3.5rem;
    }
}

.dataframe {
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 0.9em;
    font-family: sans-serif;
    width: 100%;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    background-color: #c6adf8;
    color: black;
    text-align: center;
}


    .dataframe tbody tr:nth-of-type(even) {
        background-color: #f3f3f3;
    }

.b-example-divider {
    width: 100%;
    height: 3rem;
    background-color: rgba(0, 0, 0, .1);
    border: solid rgba(0, 0, 0, .15);
    border-width: 1px 0;
    box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}

.b-example-vr {
    flex-shrink: 0;
    width: 1.5rem;
    height: 100vh;
}

.bi {
    vertical-align: -.125em;
    fill: currentColor;
}

.nav-scroller {
    position: relative;
    z-index: 2;
    height: 2.75rem;
    overflow-y: hidden;
}

    .nav-scroller .nav {
        display: flex;
        flex-wrap: nowrap;
        padding-bottom: 1rem;
        margin-top: -1px;
        overflow-x: auto;
        text-align: center;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

.btn-bd-primary {
    --bd-violet-bg: #712cf9;
    --bd-violet-rgb: 112.520718, 44.062154, 249.437846;
    --bs-btn-font-weight: 600;
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bd-violet-bg);
    --bs-btn-border-color: var(--bd-violet-bg);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: #6528e0;
    --bs-btn-hover-border-color: #6528e0;
    --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
    --bs-btn-active-color: var(--bs-btn-hover-color);
    --bs-btn-active-bg: #5a23c8;
    --bs-btn-active-border-color: #5a23c8;
}

.bd-mode-toggle {
    z-index: 1500;
    margin-right: 0.75rem !important;
}

    .bd-mode-toggle .dropdown-menu .active .bi {
        display: block !important;
    }

@media (max-width: 767px) {
    .bd-mode-toggle {
        margin-right: 0.5rem !important;
    }

        /* Shrink the button slightly for narrow mobile headers */
        .bd-mode-toggle .btn {
            padding: 0.35rem 0.6rem !important;
            font-size: 0.85rem !important;
        }
}

.btn-secondary {
    background-color: lightseagreen; /* Light gray background */ /*blue*/
    border-color: lightseagreen;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    margin-right: 0.5rem !important;
}

/* 1. Reset your main core elements so they never try to block mobile touch trackers */
html, body {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important; /* Restores native vertical scroll flow */
}

/* 2. Completely isolate the wide tables horizontally so they don't break vertical views */
.table-responsive {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important; /* Keeps the side-swipe feature working perfectly */
    overflow-y: visible !important; /* Prevents hidden scroll containers from trapping touch momentum */
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {
    /* Hard block to prevent DataTables from generating phantom elements on phones */
    .dt-fh-floating, .fixedHeader-floating, .fixedHeader-locked {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }

    /* Uses native browser engine to handle sticky headers on mobile cleanly */
    .table-responsive table thead th {
        position: sticky !important;
        top: 0 !important;
        z-index: 1020 !important;
        background-color: var(--bs-body-bg) !important;
    }
}

/* Prevent the theme switcher from shifting or cutting off on mobile */
.bd-mode-toggle {
    display: inline-flex !important;
    flex-shrink: 0 !important; /* Forces the browser to render the button at full width */
    position: relative !important;
    z-index: 1500 !important;
}

@media (max-width: 767px) {
    /* Create a safety buffer on the right side of the action container */
    .d-flex.align-items-center.gap-2 {
        padding-right: 8px !important; /* Pulls the button cluster slightly inward from the screen wall */
    }

    /* Target the button itself to make sure the circle arrow icon stays centered */
    .bd-mode-toggle .btn {
        width: 38px !important; /* Sets a clean, square touch target for mobile phones */
        height: 38px !important;
        padding: 0 !important; /* Clears internal padding that might distort the button circle */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

        /* Ensure the inner icon fills the square correctly */
        .bd-mode-toggle .btn svg {
            margin: 0 !important;
            font-size: 1.1rem !important;
        }
}

/* NEW ADDITION: Mobile Safety Spacing for the Floating Theme Switcher Button */
@media (max-width: 767px) {
    html body .bd-mode-toggle {
        position: fixed !important;
        bottom: 20px !important; /* Relocates to bottom corner away from navigation header */
        right: 20px !important; /* Provides clear padding buffer away from physical side screen bezel */
        top: auto !important; /* Disables top anchoring defaults completely */
        left: auto !important;
        margin: 0 !important;
        z-index: 2000 !important; /* Layers icon visibly above scrolling table numerical backgrounds */
    }

        /* Convert standard rectangle style templates into clean round circle targets */
        html body .bd-mode-toggle .btn {
            width: 44px !important;
            height: 44px !important;
            min-width: 44px !important;
            padding: 0 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            border-radius: 50% !important;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important; /* Visual drop shadow separation */
        }

            /* Keep theme visual icons centered inside circular boundaries */
            html body .bd-mode-toggle .btn svg {
                margin: 0 !important;
                font-size: 1.3rem !important;
            }
}
/* ==========================================================================
        1. LIGHT MODE (Default Style)
        ========================================================================== */
.table th.highlight-gold,
.table td.highlight-gold {
    background-color: #fff2cc !important; /* Soft pastel yellow */
    color: #212529 !important; /* Clean dark text for contrast */
    font-weight: 500;
}

/* Hover state for light mode */
.table-hover tbody tr:hover td.highlight-gold {
    background-color: #ffe699 !important; /* Slightly deeper yellow on hover */
}


/* ==========================================================================
        2. NIGHT MODE (Triggers automatically via your JS toggle)
        ========================================================================== */
[data-bs-theme="dark"] .table th.highlight-gold,
[data-bs-theme="dark"] .table td.highlight-gold {
    background-color: #7d5a00 !important; /* Deep "night" gold background */
    color: #ffffff !important; /* Crisp white font for sharp contrast */
    font-weight: 600; /* Slightly bolder to stand out on dark themes */
}

/* Hover state for dark mode */
[data-bs-theme="dark"] .table-hover tbody tr:hover td.highlight-gold {
    background-color: #996e00 !important; /* Brighter gold tint on hover */
}
/* 1. Force the Scroller container to behave without a vertical cutoff */
.dt-scroll-body {
    max-height: none !important;
    height: auto !important;
    overflow-y: visible !important; /* Completely drops the vertical track */
    overflow-x: auto !important; /* Safely protects horizontal side scrolling */
}

/* 2. Stabilize row element heights for Fixed Columns layout engines */
.DTFC_LeftWrapper, .DTFC_RightWrapper {
    height: auto !important;
}

/* 3. Maintain background row hover colors on frozen cells */
.table-hover tbody tr:hover td.dtfc-fixed-left {
    background-color: #2ece7c !important;
    color: white !important;
}

/* 4. Keep your highlight-gold class prioritized on frozen columns */
.table td.dtfc-fixed-left.highlight-gold {
    background-color: #fff2cc !important;
    color: #212529 !important;
}
/* Nuke the internal DataTables vertical scroll viewport */
.dt-scroll-body,
.dataTables_scrollBody {
    overflow-y: hidden !important; /* Forces the vertical scrollbar away permanently */
    overflow-x: auto !important; /* Keeps the left-to-right swiping working flawlessly */
    height: auto !important;
    max-height: none !important;
}

/* ==========================================================================
   1. BOOTSTRAP DARK MODE THEME SYSTEM
   ========================================================================== */
[data-bs-theme="dark"] {
    /* Deep Obsidian Base Layer */
    --bs-body-bg: #090a0f !important;
    /* Glossy Finish for Cards, Dropdowns, and Table Headers */
    .dropdown-menu, .card, .btn-secondary, thead th

{
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 50%, rgba(0, 0, 0, 0.4) 100%) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
}

/* Make the Dropdown Active State pop cleanly against gloss */
.dropdown-item.active {
    background: linear-gradient(135deg, #20b2aa 0%, #178a83 100%) !important;
    color: white !important;
    font-weight: 600;
}

/* Clean up the hover states to match the reflection */
.dropdown-item:hover:not(.active) {
    background-color: rgba(255, 255, 255, 0.07) !important;
}

} /* <--- ✅ THIS BRACKET SEPARATES DARK MODE FROM THE GLOBAL BUTTON BUILD BELOW */

/* ==========================================================================
   2. UNIFIED GLOBAL CYAN GREEN GLOSSY BUTTON (Applies to ALL Modes)
   ========================================================================== */
.btn-cyan-green {
    /* 1. Global Signature Base Color Styles */
    background-color: #00b7c3 !important; /* Vivid Cyan color base */
    border-color: #00b7c3 !important;
    color: white !important;
    font-weight: 600;
    /* 2. ✅ FIXED: Using background-image so it overlays ON TOP of the cyan base color */
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.25) 100%) !important;
    /* 3. Deep 3D Structural Highlights */
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.3) !important;
    transition: filter 0.2s ease, background-color 0.2s ease;
}

    /* Unified Hover Interactions (Turns Sea Green) */
    .btn-cyan-green:hover,
    .btn-cyan-green:focus,
    .btn-cyan-green:active {
        /* 4. ✅ FIXED: Switches color base to clear Sea Green, keeps glossy overlay image */
        background-color: lightseagreen !important;
        border-color: lightseagreen !important;
        background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.2) 100%) !important;
        filter: brightness(1.02);
        color: white !important;
    }
/* Native browser-driven sticky headers that don't reset horizontal scroll */
.dt-scroll-head {
    position: sticky !important;
    top: 0 !important;
    z-index: 1020 !important;
    background-color: var(--bs-body-bg) !important;
}

/* Ensure the frozen corner column intersection stays correctly layered above rows */
.dtfc-fixed-left {
    z-index: 1030 !important;
}

@media (min-width: 768px) {
    /* 1. ✅ FIXED: Explicitly target the deepest cell layers of the table footer */
    #myTable,
    #myTableCalls,
    .dt-scroll-head,
    .dt-scroll-head table,
    .dt-scroll-body table,
    .dt-scroll-foot,
    .dt-scroll-foot table,
    #myTable tfoot,
    #myTableCalls tfoot th, /* Tarjeta directly the footer cells */
    #myTableCalls tfoot td,
    #myTable tfoot th,
    #myTable tfoot td {
        font-size: 0.93em !important;
    }

    /* Keep the rest of your parent reset and sticky rules exactly the same below... */
    html, body, main, .container, .container-fluid, .content-wrapper {
        overflow: visible !important;
    }

    .dt-scroll-head,
    .dataTables_scrollHead {
        position: sticky !important;
        top: 0 !important;
        z-index: 1020 !important;
        background-color: var(--bs-body-bg) !important;
    }

    #myTable thead,
    #myTable thead th {
        position: sticky !important;
        top: 0 !important;
        z-index: 1020 !important;
        background-color: var(--bs-body-bg) !important;
    }

    .dt-scroll-body,
    .dataTables_scrollBody {
        overflow-y: hidden !important;
        overflow-x: auto !important;
        height: auto !important;
        max-height: none !important;
    }

    .dtfc-fixed-left,
    .dt-scroll-head .dtfc-fixed-left {
        z-index: 1030 !important;
        background-color: var(--bs-body-bg) !important;
    }
}
/* ==========================================================================
   ISOLATED RESOURCES & REFERENCES PAGE STYLES
   ========================================================================== */
.resources-page-wrapper {
    /* Set comfortable layout dimensions */
    max-width: 800px;
    margin: 0 auto;
}

    /* Clear section header typography spacing */
    .resources-page-wrapper h6 {
        font-weight: 600;
        letter-spacing: 0.5px;
        color: var(--bs-body-color);
        border-bottom: 2px solid rgba(0, 183, 195, 0.2);
        padding-bottom: 8px;
    }

    /* Translucent glass-list items optimized for both Light & Dark modes */
    .resources-page-wrapper .list-group-item {
        padding: 12px 20px;
        margin-bottom: 6px;
        font-size: 0.93em; /* Match your custom layout table text metrics */
        background-color: rgba(255, 255, 255, 0.02) !important;
        border: 1px solid rgba(0, 183, 195, 0.15) !important;
        border-radius: 6px !important;
        color: var(--bs-body-color) !important;
        transition: all 0.2s ease-in-out !important;
    }

/* Light mode specific background backup fill adjustment */
[data-bs-theme="light"] .resources-page-wrapper .list-group-item {
    background-color: rgba(0, 0, 0, 0.02) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Interactive Sea Green reflection sheen on item hover */
.resources-page-wrapper .list-group-item:hover {
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%) !important;
    background-color: lightseagreen !important;
    border-color: lightseagreen !important;
    color: white !important;
    transform: translateX(4px); /* Sleek micro-nudge slide presentation effect */
    box-shadow: 0 4px 12px rgba(32, 178, 170, 0.2) !important;
}