/* ============================================================
   TOOLBOX v2 - KAESER Compresores Design System
   Premium Enterprise Dashboard CSS
   ============================================================ */

/* -----------------------------------------------
   1. CSS CUSTOM PROPERTIES (Design Tokens)
   ----------------------------------------------- */
:root {
    /* KAESER Brand Colors (Manual de Imagen Corporativa 2025) */
    --tb-yellow: #FFCE00;
    --tb-yellow-hover: #E6B900;
    --tb-yellow-light: #FFF3B0;
    --tb-yellow-subtle: #FFFBE6;
    --tb-petroleo: #328095;
    --tb-petroleo-hover: #2A6D7F;
    --tb-petroleo-light: #4A9AAD;
    --tb-anthracite: #363C42;
    --tb-anthracite-hover: #454C53;
    --tb-anthracite-lighter: #535A62;
    --tb-dark: #363C42;
    --tb-dark-hover: #454C53;
    --tb-dark-lighter: #535A62;
    --tb-light-bg: #F5F6F7;
    --tb-white: #FFFFFF;
    --tb-border: #E5E7EB;
    --tb-text: #363C42;
    --tb-text-muted: #6B7280;

    /* Semantic Colors */
    --tb-success: #22C55E;
    --tb-success-bg: #F0FDF4;
    --tb-danger: #EF4444;
    --tb-danger-bg: #FEF2F2;
    --tb-warning: #F59E0B;
    --tb-warning-bg: #FFFBEB;
    --tb-info: #3B82F6;
    --tb-info-bg: #EFF6FF;

    /* Typography */
    --tb-font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --tb-font-mono: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace;
    --tb-font-size-xs: 0.6875rem;
    --tb-font-size-sm: 0.8125rem;
    --tb-font-size-base: 0.875rem;
    --tb-font-size-md: 1rem;
    --tb-font-size-lg: 1.125rem;
    --tb-font-size-xl: 1.25rem;
    --tb-font-size-2xl: 1.5rem;
    --tb-font-size-3xl: 1.875rem;

    /* Spacing */
    --tb-sidebar-width: 260px;
    --tb-sidebar-collapsed-width: 72px;
    --tb-header-height: 60px;
    --tb-border-radius: 0.5rem;
    --tb-border-radius-sm: 0.375rem;
    --tb-border-radius-lg: 0.75rem;

    /* Shadows */
    --tb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --tb-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --tb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --tb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --tb-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

    /* Transitions */
    --tb-transition-fast: 150ms ease;
    --tb-transition: 250ms ease;
    --tb-transition-slow: 350ms ease;

    /* Z-indexes */
    --tb-z-sidebar: 1040;
    --tb-z-header: 1030;
    --tb-z-overlay: 1035;
    --tb-z-toast: 1080;
    --tb-z-modal: 1060;

    /* Theme: default = Kaeser blue */
    --tb-sidebar-gradient: linear-gradient(180deg, #1a5c6b 0%, #1e6575 50%, #22707f 100%);
    --tb-sidebar-text: #c8dde3;
    /* Modal header — sigue el color del tema seleccionado (sidebar) */
    --tb-modal-header-bg: linear-gradient(90deg, #1a5c6b 0%, #1e6575 50%, #22707f 100%);
    --tb-modal-header-title: #FFCC19;
}

/* Theme: Anthracite gray */
html[data-theme="anthracite"] {
    --tb-sidebar-gradient: linear-gradient(180deg, #2b3137 0%, #363C42 50%, #414851 100%);
    --tb-sidebar-text: #d1d5db;
    --tb-modal-header-bg: linear-gradient(90deg, #2b3137 0%, #363C42 50%, #414851 100%);
    --tb-modal-header-title: #FFCC19;
}

/* -----------------------------------------------
   2. BASE RESET & TYPOGRAPHY
   ----------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--tb-font-family);
    font-size: var(--tb-font-size-base);
    line-height: 1.6;
    color: var(--tb-dark);
    background-color: var(--tb-light-bg);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.3;
    color: var(--tb-dark);
    margin-top: 0;
}

a {
    color: var(--tb-petroleo);
    text-decoration: none;
    transition: color var(--tb-transition-fast);
}

a:hover {
    color: var(--tb-petroleo-hover);
}

::selection {
    background-color: var(--tb-yellow);
    color: var(--tb-dark);
}

/* -----------------------------------------------
   3. CUSTOM SCROLLBAR
   ----------------------------------------------- */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #C1C1C3;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #A1A1A3;
}

/* El menú tiene DOS contenedores con scroll: `.tb-sidebar` y, dentro, la lista
   `.tb-sidebar-nav` (que es la que realmente desborda, porque el sidebar es de
   alto fijo y el nav es el `flex: 1`). Sólo el primero tenía el pulgar tematizado:
   el del nav caía a la regla global (#C1C1C3, gris claro) y se veía como una línea
   blanca sobre el teal. */
.tb-sidebar::-webkit-scrollbar-thumb,
.tb-sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.2);
}

.tb-sidebar::-webkit-scrollbar-thumb:hover,
.tb-sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,.3);
}

/* Propiedades ESTÁNDAR, sin @supports: los pseudo-elementos `::-webkit-scrollbar`
   de arriba no los implementa Firefox, y cuando no aplican el navegador pinta la
   barra nativa del sistema (track claro de ~18px) — la línea blanca reportada.
   Precio conocido: los motores Chromium, al ver `scrollbar-width`, descartan el
   `::-webkit-scrollbar`, así que en el menú la barra pasa de 6px a "thin" (~11px).
   Se acepta: vale más que salga del color correcto en todos los motores.
   Las reglas -webkit- se conservan como fallback para los que no soportan
   `scrollbar-color` (Chromium < 121, Safari viejo).
   Track transparente a propósito: deja ver el degradado del menú por debajo. */
.tb-sidebar,
.tb-sidebar-nav {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.28) transparent;
}

/* -----------------------------------------------
   4. APP LAYOUT STRUCTURE
   ----------------------------------------------- */
.tb-app {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

/* Ayudas de IA: cuando el país del usuario tiene IA deshabilitada (claim Pais
   + appsettings:AiHelpers:Pais), ocultamos todo elemento marcado con .tb-ai-only
   o con [data-ai-helper]. El gate server-side ya rechaza los endpoints, esto
   solo limpia la UI. */
html[data-ai-enabled="false"] .tb-ai-only,
html[data-ai-enabled="false"] [data-ai-helper] {
    display: none !important;
}

.tb-main-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    margin-left: var(--tb-sidebar-width);
    transition: margin-left var(--tb-transition-slow);
}

.tb-main-wrapper.tb-sidebar-hidden {
    margin-left: 0;
}

/* -----------------------------------------------
   5. SIDEBAR
   ----------------------------------------------- */
.tb-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--tb-sidebar-width);
    background: var(--tb-sidebar-gradient);
    color: var(--tb-sidebar-text);
    z-index: var(--tb-z-sidebar);
    overflow-y: auto;
    overflow-x: hidden;
    transition: transform var(--tb-transition-slow), width var(--tb-transition-slow);
    display: flex;
    flex-direction: column;
}

.tb-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    height: var(--tb-header-height);
    border-bottom: 1px solid rgba(255,255,255,.12);
    flex-shrink: 0;
}

.tb-sidebar-brand-logo {
    width: 36px;
    height: 36px;
    background: var(--tb-yellow);
    border-radius: var(--tb-border-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1rem;
    color: #1a5c6b;
    flex-shrink: 0;
}

.tb-sidebar-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    overflow: hidden;
}

.tb-sidebar-brand-name {
    font-size: var(--tb-font-size-md);
    font-weight: 700;
    color: var(--tb-white);
    white-space: nowrap;
}

.tb-sidebar-brand-sub {
    font-size: var(--tb-font-size-xs);
    color: #8bb8c4;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tb-sidebar-nav {
    flex: 1;
    padding: 0.75rem 0;
    overflow-y: auto;
}

.tb-sidebar-section {
    margin-bottom: 0.25rem;
}

.tb-sidebar-section-title {
    padding: 0.75rem 1.25rem 0.375rem;
    font-size: var(--tb-font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #7aafbc;
    white-space: nowrap;
    overflow: hidden;
}

.tb-sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1.25rem;
    color: #c8dde3;
    font-size: var(--tb-font-size-sm);
    font-weight: 400;
    text-decoration: none;
    transition: all var(--tb-transition-fast);
    position: relative;
    border-left: 3px solid transparent;
    white-space: nowrap;
    overflow: hidden;
}

.tb-sidebar-link:hover {
    color: #fff;
    background: rgba(255,255,255,.1);
}

.tb-sidebar-link.active {
    color: var(--tb-yellow);
    background: rgba(255,206,0,.12);
    border-left-color: var(--tb-yellow);
    font-weight: 500;
}

.tb-sidebar-link .bi,
.tb-sidebar-link i {
    font-size: 1.125rem;
    width: 1.25rem;
    text-align: center;
    flex-shrink: 0;
    opacity: 0.7;
    transition: opacity var(--tb-transition-fast);
}

.tb-sidebar-link:hover .bi,
.tb-sidebar-link:hover i,
.tb-sidebar-link.active .bi,
.tb-sidebar-link.active i {
    opacity: 1;
}

.tb-sidebar-link.active .bi,
.tb-sidebar-link.active i {
    color: var(--tb-yellow);
}

/* Sidebar pending (not yet migrated) */
.tb-sidebar-pending {
    opacity: 0.45;
}

/* Sidebar group (collapsible) */
.tb-sidebar-group-toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5625rem 1.25rem;
    color: #c8dde3;
    font-size: var(--tb-font-size-sm);
    font-weight: 500;
    text-decoration: none;
    transition: all var(--tb-transition-fast);
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    border-left: 3px solid transparent;
    white-space: nowrap;
    overflow: hidden;
}

.tb-sidebar-group-toggle:hover {
    color: var(--tb-white);
    background-color: rgba(255,255,255,.1);
}

.tb-sidebar-group-toggle .bi,
.tb-sidebar-group-toggle i {
    font-size: 1.125rem;
    width: 1.25rem;
    text-align: center;
    flex-shrink: 0;
    opacity: 0.7;
}

.tb-sidebar-group-toggle:hover .bi,
.tb-sidebar-group-toggle:hover i {
    opacity: 1;
}

.tb-sidebar-group-toggle-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tb-sidebar-group-chevron {
    font-size: 0.75rem;
    transition: transform var(--tb-transition);
    flex-shrink: 0;
}

.tb-sidebar-group-toggle[aria-expanded="true"] .tb-sidebar-group-chevron {
    transform: rotate(90deg);
}

.tb-sidebar-group-toggle.active-group {
    color: var(--tb-white);
    border-left-color: var(--tb-yellow);
}

.tb-sidebar-group-toggle.active-group .bi,
.tb-sidebar-group-toggle.active-group i {
    color: var(--tb-yellow);
    opacity: 1;
}

.tb-sidebar-submenu {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Submenús del sidebar — diseño minimalista sin marcador per-item.
   El estado activo se identifica SOLO por la barra lateral izquierda + bg
   ligeramente más oscuro. No usamos chevron/dot por ítem porque rompía la
   alineación con títulos multilínea ("Dashboard de Cumplimiento") y con
   justify-content-between que separaba el marker del texto. */
.tb-sidebar-submenu .tb-sidebar-link {
    padding: 0.5rem 1rem 0.5rem 2.75rem;
    font-size: var(--tb-font-size-sm);
    /* Indicador del activo: barra de 3px en el borde izquierdo, brand yellow.
       Transparente por default para mantener el ancho consistente — el
       layout no se mueve al activar un ítem. */
    border-left: 3px solid transparent;
    white-space: normal;
    line-height: 1.35;
    transition: background var(--tb-transition-fast), border-left-color var(--tb-transition-fast), color var(--tb-transition-fast);
}

.tb-sidebar-submenu .tb-sidebar-link:hover {
    background: rgba(255,255,255,.05);
    color: #fff;
}

.tb-sidebar-submenu .tb-sidebar-link.active {
    background: rgba(255,204,25,.08);
    border-left-color: var(--tb-yellow);
    color: #fff;
    font-weight: 600;
}

/* Sidebar site-wide search (sticky bottom, separated from nav scroll) */
.tb-sidebar-search {
    padding: 0.75rem 1rem;
    border-top: 1px solid rgba(255,255,255,.12);
    flex-shrink: 0;
    position: relative;
}

.tb-sidebar-search .form-control {
    padding-left: 2.25rem;
    border-radius: 1.5rem;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.06);
    color: #fff;
    font-size: var(--tb-font-size-sm);
    height: 36px;
    transition: all var(--tb-transition-fast);
}

.tb-sidebar-search .form-control::placeholder {
    color: rgba(255,255,255,.55);
}

.tb-sidebar-search .form-control:focus {
    background: rgba(255,255,255,.12);
    border-color: var(--tb-yellow);
    box-shadow: 0 0 0 3px rgba(255, 207, 0, 0.2);
    color: #fff;
    outline: none;
}

.tb-sidebar-search > .bi {
    position: absolute;
    left: 1.625rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,.55);
    font-size: 0.875rem;
    pointer-events: none;
}

/* Dropdown abre HACIA ARRIBA porque el search está al fondo del sidebar.
   Posicionamiento: bottom + un pequeño gap, y un max-height razonable para
   menús extensos. Pop-out hacia la derecha del sidebar para no quedar oculto
   por el límite del aside. */
.tb-sidebar-search .tb-nav-search-results {
    position: absolute;
    bottom: calc(100% - 0.25rem);
    left: 0.5rem;
    right: 0.5rem;
    top: auto;
    background: #fff;
    color: #1C1C1E;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    box-shadow: 0 -10px 28px rgba(0,0,0,.18);
    max-height: 50vh;
    overflow-y: auto;
    z-index: 1080;
    padding: 4px;
}

/* Sidebar footer */
.tb-sidebar-footer {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid rgba(255,255,255,.12);
    flex-shrink: 0;
}

.tb-sidebar-footer-text {
    font-size: var(--tb-font-size-xs);
    color: rgba(255, 255, 255, .4);
    text-align: center;
}

/* -----------------------------------------------
   5b. SIDEBAR — Collapse button + Collapsed state
   ----------------------------------------------- */

/* Toggle button in brand area — only visible on desktop */
.tb-sidebar-collapse-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: rgba(255,255,255,.08);
    color: #c8dde3;
    border-radius: 50%;
    cursor: pointer;
    transition: background var(--tb-transition-fast), color var(--tb-transition-fast), transform var(--tb-transition);
    margin-left: auto;
    flex-shrink: 0;
    padding: 0;
    font-size: 0.75rem;
}

.tb-sidebar-collapse-btn:hover {
    background: rgba(255, 207, 0, 0.2);
    color: var(--tb-yellow);
}

.tb-sidebar-collapse-btn .bi {
    transition: transform var(--tb-transition);
}

@media (min-width: 992px) {
    .tb-sidebar-collapse-btn { display: inline-flex; }
}

/* ============= COLLAPSED STATE (desktop only) ============= */
@media (min-width: 992px) {

    html.tb-sidebar-collapsed .tb-sidebar {
        width: var(--tb-sidebar-collapsed-width);
        overflow: visible; /* permite flyouts fuera del aside */
    }

    html.tb-sidebar-collapsed .tb-main-wrapper {
        margin-left: var(--tb-sidebar-collapsed-width);
    }

    /* Brand: ocultar el texto y centrar el logo */
    html.tb-sidebar-collapsed .tb-sidebar-brand {
        padding-left: 0;
        padding-right: 0;
        justify-content: center;
        gap: 0;
    }

    html.tb-sidebar-collapsed .tb-sidebar-brand-text {
        display: none;
    }

    /* Botón de colapsado: queda flotando sobre el borde derecho del sidebar
       para ser visible y permitir expandirlo */
    html.tb-sidebar-collapsed .tb-sidebar-collapse-btn {
        position: absolute;
        top: calc(var(--tb-header-height) / 2 - 14px);
        right: -14px;
        background: var(--tb-yellow);
        color: #1a5c6b;
        border: 2px solid #fff;
        box-shadow: 0 2px 8px rgba(0,0,0,.18);
        z-index: 2;
        margin-left: 0;
    }

    html.tb-sidebar-collapsed .tb-sidebar-collapse-btn:hover {
        background: #ffd84a;
        color: #1a5c6b;
    }

    html.tb-sidebar-collapsed .tb-sidebar-collapse-btn .bi {
        transform: rotate(180deg);
    }

    /* Nav: ocultar labels, centrar iconos, oculta sub-elementos por defecto */
    html.tb-sidebar-collapsed .tb-sidebar-link,
    html.tb-sidebar-collapsed .tb-sidebar-group-toggle {
        justify-content: center;
        padding: 0.6rem 0;
        position: relative;
    }

    /* Solo ocultar los spans de los links/toggles DIRECTOS del sidebar (no los del flyout) */
    html.tb-sidebar-collapsed .tb-sidebar-section > .tb-sidebar-link > span,
    html.tb-sidebar-collapsed .tb-sidebar-group-toggle-label,
    html.tb-sidebar-collapsed .tb-sidebar-group-chevron,
    html.tb-sidebar-collapsed .tb-sidebar-section-title {
        display: none;
    }

    html.tb-sidebar-collapsed .tb-sidebar-link .bi,
    html.tb-sidebar-collapsed .tb-sidebar-link i,
    html.tb-sidebar-collapsed .tb-sidebar-group-toggle .bi,
    html.tb-sidebar-collapsed .tb-sidebar-group-toggle i {
        font-size: 1.35rem;
        width: auto;
        margin: 0;
    }

    /* Módulos que abren en otra pestaña (Guía de Beneficios, Comunicación…): el
       markup lleva el icono del módulo MÁS una flecha `bi-box-arrow-up-right` que
       en modo expandido se va al final del renglón con `ms-auto`. Al colapsar
       desaparece el label y las dos quedaban a 1.35rem peleando por 72px, una al
       centro y otra pegada a la derecha — el "se ve raro" reportado.
       Aquí la flecha deja de ser un icono más y pasa a marcador chico en la esquina
       del icono, que es la convención de "abre fuera". `pointer-events: none` para
       que no le robe el hover al link. */
    html.tb-sidebar-collapsed .tb-sidebar-section > .tb-sidebar-link > .bi-box-arrow-up-right {
        position: absolute;
        top: 5px;
        right: 19px;
        font-size: .62rem;
        width: auto;
        margin: 0;
        opacity: .8;
        pointer-events: none;
    }

    /* Active marker: barra izquierda completa */
    html.tb-sidebar-collapsed .tb-sidebar-link.active {
        background: rgba(255, 207, 0, 0.15);
    }

    /* Ocultar submenus colapsados de Bootstrap en este modo (el flyout los reemplaza) */
    html.tb-sidebar-collapsed .tb-sidebar-section > .collapse,
    html.tb-sidebar-collapsed .tb-sidebar-section > .collapsing {
        display: none !important;
    }

    /* === FLYOUT: submenu que aparece al pasar el cursor sobre el grupo ===
       Usamos position:fixed para escapar del clipping del nav scrollable
       (que tiene overflow-y:auto y por compute corta también el eje x). */
    html.tb-sidebar-collapsed .tb-sidebar-section {
        position: relative;
    }

    /* Tooltip (label) para links sin submenu — top calculado por JS via --tb-tip-top.
       Lo dejamos con un pequeño gap (sin interacción de hover, solo visual). */
    html.tb-sidebar-collapsed .tb-sidebar-link[data-tip]:hover::after,
    html.tb-sidebar-collapsed .tb-sidebar-group-toggle[data-tip]:hover::after {
        content: attr(data-tip);
        position: fixed;
        left: calc(var(--tb-sidebar-collapsed-width) + 6px);
        top: var(--tb-tip-top, 0);
        transform: translateY(-50%);
        background: #1C1C1E;
        color: #fff;
        font-size: var(--tb-font-size-sm);
        font-weight: 500;
        padding: 0.375rem 0.625rem;
        border-radius: 6px;
        white-space: nowrap;
        z-index: 1100;
        pointer-events: none;
        box-shadow: 0 4px 16px rgba(0,0,0,.28);
    }

    /* Flyout: PEGADO al sidebar (sin gap) para que el cursor pueda transitar sin perder el hover */
    html.tb-sidebar-collapsed .tb-sidebar-section:hover > .collapse,
    html.tb-sidebar-collapsed .tb-sidebar-section:focus-within > .collapse {
        display: block !important;
        position: fixed;
        left: var(--tb-sidebar-collapsed-width);
        top: var(--tb-fly-top, 0);
        min-width: 240px;
        max-height: calc(100vh - 16px);
        overflow-y: auto;
        background: var(--tb-sidebar-gradient);
        border-radius: 0 8px 8px 0;
        box-shadow: 6px 6px 24px rgba(0,0,0,.28);
        padding: 0.25rem 0 0.5rem;
        z-index: 1100;
        border-left: 1px solid rgba(255,255,255,.08);
    }

    /* --- Por qué el flyout se cerraba antes de poder hacer clic ---------------
       1) `.tb-sidebar-nav` sigue siendo scrolleable en modo colapsado, y su barra
          ocupa los últimos px del ancho. Esa franja NO forma parte de
          `.tb-sidebar-section`, pero el flyout arranca justo en los 72px: al mover
          el cursor del icono hacia el panel se cruzaba una zona muerta y el :hover
          se perdía. En colapsado (sólo iconos) la barra no aporta nada, así que se
          oculta y la sección llega hasta el borde. La rueda sigue scrolleando. */
    html.tb-sidebar-collapsed .tb-sidebar-nav {
        scrollbar-width: none;
    }
    html.tb-sidebar-collapsed .tb-sidebar-nav::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

    /*   2) La sección mide apenas el alto del icono (~44px) y el flyout se extiende
          hacia abajo desde ahí, así que un movimiento diagonal salía por el borde
          inferior de la sección antes de llegar al panel. Este puente invisible
          mantiene el puntero dentro de la sección (es su descendiente) durante todo
          el trayecto. Va en `position: fixed` porque el nav recorta a sus hijos, y
          ocupa sólo los 14px pegados al borde derecho —donde no hay iconos, que van
          centrados— así que no bloquea ningún clic. El alto replica el `estHeight`
          que usa `positionFlyout()` en _Layout.cshtml.
          `.tb-has-flyout` la pone el JS del layout sobre las secciones que sí abren
          panel: sin ese filtro el puente aparecería también en las secciones sin
          submenu, donde `--tb-fly-top` nunca se calcula (top: 0) y taparía el botón
          de colapsar. */
    html.tb-sidebar-collapsed .tb-sidebar-section.tb-has-flyout:hover::before,
    html.tb-sidebar-collapsed .tb-sidebar-section.tb-has-flyout:focus-within::before {
        content: '';
        position: fixed;
        left: calc(var(--tb-sidebar-collapsed-width) - 14px);
        top: var(--tb-fly-top, 0);
        width: 14px;
        height: 320px;
        z-index: 1099;
    }

    /* Si el grupo tiene flyout, evitar mostrar tooltip duplicado */
    html.tb-sidebar-collapsed .tb-sidebar-section:hover > .tb-sidebar-group-toggle[data-tip]::after {
        content: none;
    }

    /* Encabezado del flyout: muestra el nombre del módulo */
    html.tb-sidebar-collapsed .tb-sidebar-section:hover > .collapse::before {
        content: attr(data-flyout-label);
        display: block;
        padding: 0.5rem 1rem 0.4rem;
        font-size: var(--tb-font-size-xs);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--tb-yellow);
        border-bottom: 1px solid rgba(255,255,255,.12);
        margin-bottom: 0.25rem;
    }

    /* Links dentro del flyout: padding normal, alineados a la izquierda, texto visible */
    html.tb-sidebar-collapsed .tb-sidebar-section > .collapse .tb-sidebar-submenu .tb-sidebar-link {
        padding: 0.5rem 1rem;
        white-space: normal;
        justify-content: flex-start;
        overflow: visible;
        color: #c8dde3;
    }
    html.tb-sidebar-collapsed .tb-sidebar-section > .collapse .tb-sidebar-submenu .tb-sidebar-link > span {
        display: inline;
    }
    /* Flyout del sidebar colapsado — sin marker, mismo estilo minimalista
       que el modo expandido. El activo se distingue por bg + border-left. */
    html.tb-sidebar-collapsed .tb-sidebar-section > .collapse .tb-sidebar-submenu .tb-sidebar-link::before {
        content: none;
    }

    /* === Search bar colapsado: solo icono === */
    html.tb-sidebar-collapsed .tb-sidebar-search {
        padding: 0.5rem;
        display: flex;
        justify-content: center;
    }

    html.tb-sidebar-collapsed .tb-sidebar-search .form-control {
        display: none;
    }

    html.tb-sidebar-collapsed .tb-sidebar-search > .bi {
        position: static;
        transform: none;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255,255,255,.08);
        border-radius: 50%;
        color: rgba(255,255,255,.8);
        font-size: 1rem;
        cursor: pointer;
        pointer-events: auto;
        transition: background var(--tb-transition-fast), color var(--tb-transition-fast);
        left: auto;
        top: auto;
    }

    html.tb-sidebar-collapsed .tb-sidebar-search > .bi:hover {
        background: rgba(255, 207, 0, 0.25);
        color: var(--tb-yellow);
    }

    html.tb-sidebar-collapsed .tb-sidebar-search .tb-nav-search-results {
        display: none !important;
    }

    /* Footer: ocultar texto en colapsado */
    html.tb-sidebar-collapsed .tb-sidebar-footer-text {
        display: none;
    }
    html.tb-sidebar-collapsed .tb-sidebar-footer {
        padding: 0.5rem 0;
    }
}

/* Sidebar overlay for mobile */
.tb-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: calc(var(--tb-z-sidebar) - 1);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    transition: opacity var(--tb-transition);
}

.tb-sidebar-overlay.show {
    display: block;
    animation: tb-fade-in 0.25s ease forwards;
}

/* -----------------------------------------------
   6. HEADER
   ----------------------------------------------- */
.tb-header {
    position: sticky;
    top: 0;
    height: var(--tb-header-height);
    background: var(--tb-white);
    border-bottom: 1px solid #E5E5EA;
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    gap: 1rem;
    z-index: var(--tb-z-header);
    box-shadow: var(--tb-shadow-sm);
}

.tb-header-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: var(--tb-border-radius-sm);
    color: var(--tb-dark);
    font-size: 1.25rem;
    cursor: pointer;
    transition: background var(--tb-transition-fast);
    flex-shrink: 0;
}

.tb-header-toggle:hover {
    background: var(--tb-light-bg);
}

.tb-header-search {
    flex: 1;
    max-width: 400px;
    position: relative;
}

.tb-header-search .form-control {
    padding-left: 2.5rem;
    border-radius: 2rem;
    border: 1px solid #E5E5EA;
    background: var(--tb-light-bg);
    font-size: var(--tb-font-size-sm);
    height: 38px;
    transition: all var(--tb-transition-fast);
}

.tb-header-search .form-control:focus {
    background: var(--tb-white);
    border-color: var(--tb-yellow);
    box-shadow: 0 0 0 3px rgba(255, 207, 0, 0.15);
}

.tb-header-search > .bi {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: #8E8E93;
    font-size: 0.9375rem;
    pointer-events: none;
}

/* ===== Nav Search Dropdown ===== */
.tb-nav-search-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0,0,0,.12);
    max-height: 420px;
    overflow-y: auto;
    z-index: 1080;
    padding: 4px;
}
.tb-nav-search-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    color: #1C1C1E;
    text-decoration: none;
    font-size: .85rem;
    transition: background .1s;
}
.tb-nav-search-item:hover,
.tb-nav-search-item.active {
    background: #FFF9DB;
    color: #1C1C1E;
}
.tb-nav-search-item .bi {
    color: #328095;
    font-size: 1rem;
    width: 18px;
    text-align: center;
}
.tb-nav-search-label { flex: 1; }
.tb-nav-search-sub {
    font-size: .72rem;
    color: #8E8E93;
    background: #f4f6f8;
    padding: 2px 8px;
    border-radius: 10px;
}
.tb-nav-search-empty {
    padding: 14px;
    color: #8E8E93;
    text-align: center;
    font-size: .85rem;
}

.tb-header-spacer {
    flex: 1;
}

.tb-header-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.tb-header-action-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: none;
    background: transparent;
    border-radius: var(--tb-border-radius-sm);
    color: #636366;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all var(--tb-transition-fast);
}

.tb-header-action-btn:hover {
    background: var(--tb-light-bg);
    color: var(--tb-dark);
}

.tb-header-action-btn .tb-notification-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    background: var(--tb-danger);
    border-radius: 50%;
    border: 2px solid var(--tb-white);
}

.tb-header-action-btn .tb-notification-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    background: var(--tb-danger);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    border-radius: 10px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--tb-white);
    line-height: 1;
}

.tb-notif-dropdown {
    width: 380px;
    border: 1px solid #e9ecef;
    box-shadow: 0 8px 30px rgba(0,0,0,.12);
    border-radius: 10px;
}

.tb-notif-item {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background .15s;
    text-decoration: none;
    color: inherit;
}

.tb-notif-item:hover {
    background: #f8f9fa;
    color: inherit;
}

.tb-notif-item.unread {
    background: #fffbeb;
    border-left: 3px solid #FFCC19;
}

.tb-notif-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #6c757d;
}

.tb-notif-item.unread .tb-notif-icon {
    background: #FFCC19;
    color: #1C1C1E;
}

.tb-notif-content {
    flex: 1;
    min-width: 0;
}

.tb-notif-title {
    font-size: .82rem;
    font-weight: 600;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tb-notif-msg {
    font-size: .75rem;
    color: #6c757d;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tb-notif-time {
    font-size: .7rem;
    color: #adb5bd;
    margin-top: 2px;
}

@media (max-width: 576px) {
    .tb-notif-dropdown { width: 300px; }
}

.tb-header-divider {
    width: 1px;
    height: 28px;
    background: #E5E5EA;
    margin: 0 0.5rem;
}

/* Language selector */
.tb-lang-btn {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.5rem !important;
    width: auto !important;
    font-size: var(--tb-font-size-sm);
    font-weight: 500;
    color: var(--tb-dark);
    border-radius: var(--tb-border-radius-sm);
}
.tb-lang-btn:hover {
    background: var(--tb-light-bg);
}
.tb-lang-flag {
    font-size: 1.1rem;
    line-height: 1;
}
.tb-lang-code {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #636366;
}
.tb-lang-dropdown {
    min-width: 10rem;
}
.tb-lang-item {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
}
.tb-lang-item.active {
    background: var(--tb-light-bg);
    color: var(--tb-dark);
    font-weight: 600;
}

.tb-header-user {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.375rem 0.5rem;
    border-radius: var(--tb-border-radius-sm);
    cursor: pointer;
    transition: background var(--tb-transition-fast);
    text-decoration: none;
    color: var(--tb-dark);
}

.tb-header-user:hover {
    background: var(--tb-light-bg);
    color: var(--tb-dark);
}

.tb-header-user-info {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.tb-header-user-name {
    font-size: var(--tb-font-size-sm);
    font-weight: 600;
    color: var(--tb-dark);
}

.tb-header-user-role {
    font-size: var(--tb-font-size-xs);
    color: #8E8E93;
}

/* -----------------------------------------------
   7. AVATAR
   ----------------------------------------------- */
.tb-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 600;
    text-transform: uppercase;
    overflow: hidden;
    flex-shrink: 0;
    user-select: none;
}

.tb-avatar-sm {
    width: 28px;
    height: 28px;
    font-size: var(--tb-font-size-xs);
}

.tb-avatar-md {
    width: 36px;
    height: 36px;
    font-size: var(--tb-font-size-sm);
}

.tb-avatar-lg {
    width: 48px;
    height: 48px;
    font-size: var(--tb-font-size-lg);
}

.tb-avatar-xl {
    width: 64px;
    height: 64px;
    font-size: var(--tb-font-size-2xl);
}

.tb-avatar-yellow {
    background: var(--tb-yellow);
    color: var(--tb-dark);
}

.tb-avatar-petroleo {
    background: var(--tb-petroleo);
    color: var(--tb-white);
}

.tb-avatar-dark {
    background: var(--tb-dark-lighter);
    color: var(--tb-white);
}

.tb-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* -----------------------------------------------
   8. MAIN CONTENT AREA
   ----------------------------------------------- */
.tb-content {
    flex: 1;
    padding: 1.5rem;
    max-width: 100%;
}

.tb-content-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.tb-content-header-left {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.tb-content-header-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* -----------------------------------------------
   9. TITLES
   ----------------------------------------------- */
.tb-title {
    font-size: var(--tb-font-size-2xl);
    font-weight: 700;
    color: var(--tb-dark);
    margin: 0;
    line-height: 1.3;
}

.tb-subtitle {
    font-size: var(--tb-font-size-sm);
    color: #8E8E93;
    margin: 0;
}

.tb-section-title {
    font-size: var(--tb-font-size-lg);
    font-weight: 600;
    color: var(--tb-dark);
    margin: 0 0 1rem 0;
}

/* -----------------------------------------------
   10. BREADCRUMB
   ----------------------------------------------- */
.tb-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    list-style: none;
    padding: 0;
    margin: 0 0 0.25rem 0;
    font-size: var(--tb-font-size-sm);
}

.tb-breadcrumb-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: #8E8E93;
}

.tb-breadcrumb-item a {
    color: #8E8E93;
    text-decoration: none;
    transition: color var(--tb-transition-fast);
}

.tb-breadcrumb-item a:hover {
    color: var(--tb-petroleo);
}

.tb-breadcrumb-item.active {
    color: var(--tb-dark);
    font-weight: 500;
}

.tb-breadcrumb-separator {
    color: #C7C7CC;
    font-size: 0.75rem;
}

/* -----------------------------------------------
   11. CARDS
   ----------------------------------------------- */
.tb-card {
    background: var(--tb-white);
    border-radius: var(--tb-border-radius-lg);
    box-shadow: var(--tb-shadow);
    border: 1px solid #F0F0F0;
    overflow: hidden;
    transition: box-shadow var(--tb-transition);
}

.tb-card:hover {
    box-shadow: var(--tb-shadow-md);
}

.tb-card-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #F0F0F0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    background: var(--tb-white);
}

.tb-card-header-title {
    font-size: var(--tb-font-size-md);
    font-weight: 600;
    color: var(--tb-dark);
    margin: 0;
}

.tb-card-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tb-card-body {
    padding: 1.25rem;
}

.tb-card-footer {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid #F0F0F0;
    background: #FAFAFA;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

/* -----------------------------------------------
   12. STATS CARDS
   ----------------------------------------------- */
.tb-stats-card {
    background: var(--tb-white);
    border-radius: var(--tb-border-radius-lg);
    box-shadow: var(--tb-shadow);
    border: 1px solid #F0F0F0;
    padding: 1.25rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    transition: all var(--tb-transition);
    text-decoration: none;
    color: inherit;
}

.tb-stats-card:hover {
    box-shadow: var(--tb-shadow-lg);
    transform: translateY(-2px);
    color: inherit;
    text-decoration: none;
}

.tb-stats-card-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--tb-border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.tb-stats-card-icon.yellow {
    background: var(--tb-yellow-subtle);
    color: var(--tb-yellow-hover);
}

.tb-stats-card-icon.petroleo {
    background: rgba(50, 128, 149, 0.1);
    color: var(--tb-petroleo);
}

.tb-stats-card-icon.success {
    background: var(--tb-success-bg);
    color: var(--tb-success);
}

.tb-stats-card-icon.danger {
    background: var(--tb-danger-bg);
    color: var(--tb-danger);
}

.tb-stats-card-icon.info {
    background: var(--tb-info-bg);
    color: var(--tb-info);
}

.tb-stats-card-icon.warning {
    background: var(--tb-warning-bg);
    color: var(--tb-warning);
}

.tb-stats-card-body {
    flex: 1;
    min-width: 0;
}

.tb-stats-card-value {
    font-size: var(--tb-font-size-2xl);
    font-weight: 700;
    color: var(--tb-dark);
    line-height: 1.2;
}

.tb-stats-card-label {
    font-size: var(--tb-font-size-sm);
    color: #8E8E93;
    margin-top: 0.125rem;
}

.tb-stats-card-trend {
    font-size: var(--tb-font-size-xs);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.375rem;
}

.tb-stats-card-trend.up {
    color: var(--tb-success);
}

.tb-stats-card-trend.down {
    color: var(--tb-danger);
}

/* -----------------------------------------------
   13. BUTTONS
   ----------------------------------------------- */
.tb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: var(--tb-font-size-sm);
    font-weight: 500;
    line-height: 1.5;
    border-radius: var(--tb-border-radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--tb-transition-fast);
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
    font-family: inherit;
}

.tb-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 207, 0, 0.3);
}

.tb-btn:disabled,
.tb-btn.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.tb-btn-sm {
    padding: 0.3125rem 0.75rem;
    font-size: var(--tb-font-size-xs);
}

.tb-btn-lg {
    padding: 0.625rem 1.5rem;
    font-size: var(--tb-font-size-md);
}

/* Primary (KAESER Yellow) */
.tb-btn-primary {
    background: var(--tb-yellow);
    color: var(--tb-dark);
    border-color: var(--tb-yellow);
}

.tb-btn-primary:hover {
    background: var(--tb-yellow-hover);
    border-color: var(--tb-yellow-hover);
    color: var(--tb-dark);
}

.tb-btn-primary:active {
    background: #D4A900;
    border-color: #D4A900;
}

/* Secondary (Petroleo) */
.tb-btn-secondary {
    background: var(--tb-petroleo);
    color: var(--tb-white);
    border-color: var(--tb-petroleo);
}

.tb-btn-secondary:hover {
    background: var(--tb-petroleo-hover);
    border-color: var(--tb-petroleo-hover);
    color: var(--tb-white);
}

/* Dark */
.tb-btn-dark {
    background: var(--tb-dark);
    color: var(--tb-white);
    border-color: var(--tb-dark);
}

.tb-btn-dark:hover {
    background: var(--tb-dark-hover);
    border-color: var(--tb-dark-hover);
    color: var(--tb-white);
}

/* Danger */
.tb-btn-danger {
    background: var(--tb-danger);
    color: var(--tb-white);
    border-color: var(--tb-danger);
}

.tb-btn-danger:hover {
    background: #DC2626;
    border-color: #DC2626;
    color: var(--tb-white);
}

/* Success */
.tb-btn-success {
    background: var(--tb-success);
    color: var(--tb-white);
    border-color: var(--tb-success);
}

.tb-btn-success:hover {
    background: #16A34A;
    border-color: #16A34A;
    color: var(--tb-white);
}

/* Outline variants */
.tb-btn-outline {
    background: transparent;
    color: var(--tb-dark);
    border-color: #D1D1D6;
}

.tb-btn-outline:hover {
    background: var(--tb-light-bg);
    border-color: #C7C7CC;
    color: var(--tb-dark);
}

.tb-btn-outline-primary {
    background: transparent;
    color: var(--tb-yellow-hover);
    border-color: var(--tb-yellow);
}

.tb-btn-outline-primary:hover {
    background: var(--tb-yellow);
    color: var(--tb-dark);
}

.tb-btn-outline-secondary {
    background: transparent;
    color: var(--tb-petroleo);
    border-color: var(--tb-petroleo);
}

.tb-btn-outline-secondary:hover {
    background: var(--tb-petroleo);
    color: var(--tb-white);
}

.tb-btn-outline-danger {
    background: transparent;
    color: var(--tb-danger);
    border-color: var(--tb-danger);
}

.tb-btn-outline-danger:hover {
    background: var(--tb-danger);
    color: var(--tb-white);
}

.tb-btn-outline-success {
    background: var(--tb-white);
    color: var(--tb-success);
    border-color: var(--tb-success);
}

.tb-btn-outline-success:hover {
    background: var(--tb-success);
    color: var(--tb-white);
}

/* Ghost / Icon button */
.tb-btn-ghost {
    background: transparent;
    color: #636366;
    border-color: transparent;
    padding: 0.375rem;
}

.tb-btn-ghost:hover {
    background: var(--tb-light-bg);
    color: var(--tb-dark);
}

/* ─────────────────────────────────────────────────────────────────────────
   ACTION ICON BUTTONS (.tb-btn-icon)
   ─────────────────────────────────────────────────────────────────────────
   Componente compacto para columnas de "Acciones" en grids: cliente,
   cotización, crédito, etc. Reemplaza las mezclas de `btn-outline-*`
   con label, `btn-link p-0` sin frame y `btn-sm` heterogéneos.

   Reglas de uso:
     • Solo ícono (Bootstrap Icons). El label viaja en `title=` y se
       muestra como tooltip nativo del browser.
     • Variantes de color via .tb-btn-icon-{info|success|warning|danger|primary}.
       Sin variante = neutral (gris hover teal — el default safe).
     • Agrupar dentro de un .tb-action-group para que el spacing sea
       consistente.
   ────────────────────────────────────────────────────────────────────────── */
.tb-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid #d6e3e6;
    background: #ffffff;
    border-radius: 8px;
    color: #6c757d;
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease, transform .05s ease, box-shadow .15s ease;
    vertical-align: middle;
}
.tb-btn-icon i { line-height: 1; }
.tb-btn-icon:hover {
    color: #1a5c6b;
    border-color: #22707f;
    background: #eaf4f6;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(26, 92, 107, .14);
}
.tb-btn-icon:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(26, 92, 107, .15) inset;
}
.tb-btn-icon:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(34, 112, 127, .25);
}
.tb-btn-icon:disabled,
.tb-btn-icon.disabled {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
}
/* Variantes — solo cambia el color del hover/focus para mantener la
   superficie neutral en reposo y dar identidad al action solo al
   interactuar. Más sutil que un botón pintado al 100%. */
.tb-btn-icon-info:hover {
    color: #22707f;
    border-color: #22707f;
    background: #e6f1f3;
    box-shadow: 0 2px 6px rgba(34, 112, 127, .2);
}
.tb-btn-icon-success:hover {
    color: #198754;
    border-color: #198754;
    background: #e6f5ed;
    box-shadow: 0 2px 6px rgba(25, 135, 84, .2);
}
.tb-btn-icon-warning:hover {
    color: #cc6600;
    border-color: #cc6600;
    background: #fff2e6;
    box-shadow: 0 2px 6px rgba(204, 102, 0, .2);
}
.tb-btn-icon-danger:hover {
    color: #B40404;
    border-color: #B40404;
    background: #fdecea;
    box-shadow: 0 2px 6px rgba(180, 4, 4, .2);
}
/* Variante primary destacada (yellow KAESER) — para acciones que el
   negocio quiere resaltar (ej. "Solicitar crédito" sobre clientes
   con SAP+RFC). Activa en reposo, no solo en hover. */
.tb-btn-icon-primary {
    color: #1C1C1E;
    background: #FFCC19;
    border-color: #FFCC19;
}
.tb-btn-icon-primary:hover {
    color: #1C1C1E;
    background: #e5b600;
    border-color: #e5b600;
    box-shadow: 0 2px 6px rgba(255, 204, 25, .4);
}

/* ──────────────────────────────────────────────────────────────────────────
   Modificador `--solid`: pinta el chip en color SÓLIDO desde reposo, no
   solo en hover. Se combina con la variante de color (--success, --danger,
   --warning, --info) para no perder semántica. Diseñado para acciones que
   el negocio quiere resaltar en la fila (Autorizar/Rechazar en créditos).

   Mantiene el MISMO tamaño que un chip normal (32×32) para no desalinear
   la fila — el realce viene de la superficie pintada + sombra, no del
   tamaño. Antes subía a 36px y se veía disparejo (ver issue del usuario).

   Uso:
     <button class="tb-btn-icon tb-btn-icon-success tb-btn-icon--solid">…</button>
     <button class="tb-btn-icon tb-btn-icon-danger  tb-btn-icon--solid">…</button>
   ────────────────────────────────────────────────────────────────────────── */
.tb-btn-icon--solid {
    color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.tb-btn-icon-success.tb-btn-icon--solid {
    background: #198754;
    border-color: #157346;
}
.tb-btn-icon-success.tb-btn-icon--solid:hover {
    background: #146c43;
    border-color: #0f5732;
    color: #ffffff;
    box-shadow: 0 3px 10px rgba(25, 135, 84, .35);
}
.tb-btn-icon-danger.tb-btn-icon--solid {
    background: #B40404;
    border-color: #8c0303;
}
.tb-btn-icon-danger.tb-btn-icon--solid:hover {
    background: #8c0303;
    border-color: #6a0202;
    color: #ffffff;
    box-shadow: 0 3px 10px rgba(180, 4, 4, .35);
}
.tb-btn-icon-warning.tb-btn-icon--solid {
    background: #cc6600;
    border-color: #a35200;
}
.tb-btn-icon-warning.tb-btn-icon--solid:hover {
    background: #a35200;
    border-color: #804000;
    color: #ffffff;
    box-shadow: 0 3px 10px rgba(204, 102, 0, .35);
}
.tb-btn-icon-info.tb-btn-icon--solid {
    background: #22707f;
    border-color: #1a5c6b;
}
.tb-btn-icon-info.tb-btn-icon--solid:hover {
    background: #1a5c6b;
    border-color: #144551;
    color: #ffffff;
    box-shadow: 0 3px 10px rgba(34, 112, 127, .35);
}
/* Container para agrupar acciones en una celda: spacing consistente,
   alineación derecha por default (celda de acciones suele ser .text-end). */
.tb-action-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

/* Export button (auto-injected by JS) */
.tb-btn-export {
    white-space: nowrap;
    color: #1a7f37;
    border-color: #1a7f37;
    flex-shrink: 0;
}

.tb-btn-export:hover {
    /* Tinte claro (mantiene la forma outline de la 4ª imagen); antes se llenaba de verde sólido. */
    background: #eafaf0;
    color: #1a7f37;
    border-color: #1a7f37;
}

.tb-btn-export i {
    margin-right: 0.25rem;
}

/* -----------------------------------------------
   14. BADGES
   ----------------------------------------------- */
.tb-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1875rem 0.5rem;
    font-size: var(--tb-font-size-xs);
    font-weight: 600;
    border-radius: 2rem;
    white-space: nowrap;
    line-height: 1.4;
}

.tb-badge-sm {
    padding: 0.125rem 0.375rem;
    font-size: 0.625rem;
}

.tb-badge-warning,
.tb-badge-pendiente {
    background: var(--tb-warning-bg);
    color: #B45309;
}

.tb-badge-success,
.tb-badge-autorizado,
.tb-badge-activo {
    background: var(--tb-success-bg);
    color: #15803D;
}

.tb-badge-danger,
.tb-badge-rechazado,
.tb-badge-cancelado {
    background: var(--tb-danger-bg);
    color: #B91C1C;
}

.tb-badge-info,
.tb-badge-proceso {
    background: var(--tb-info-bg);
    color: #1D4ED8;
}

.tb-badge-secondary,
.tb-badge-borrador {
    background: #F2F2F7;
    color: #636366;
}

.tb-badge-primary {
    background: var(--tb-yellow-subtle);
    color: var(--tb-yellow-hover);
}

.tb-badge-petroleo {
    background: rgba(50, 128, 149, 0.1);
    color: var(--tb-petroleo);
}

.tb-badge-dark {
    background: var(--tb-dark);
    color: var(--tb-white);
}

/* Badge with dot indicator */
.tb-badge-dot::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* -----------------------------------------------
   15. TABLES
   ----------------------------------------------- */
.tb-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ============================================================
   tb-grid-sticky: para grids ANCHOS (muchas columnas, p. ej.
   Usuarios). La tabla scrollea horizontal y verticalmente DENTRO
   del viewport con el encabezado pegado arriba, de modo que la
   barra de scroll horizontal SIEMPRE quede visible (no al fondo de
   una tabla larga) y se puedan alcanzar todas las columnas y sus
   filtros. Al usar vh se adapta al zoom / tamaño de pantalla.
   ============================================================ */
.tb-grid-sticky {
    max-height: 70vh;
    overflow: auto;
}
.tb-grid-sticky thead th {
    position: sticky;
    top: 0;
    z-index: 3;
}

/* Totales SIEMPRE a la vista. El encabezado ya se queda pegado arriba; el pie
   hacía falta abajo: con 50 renglones por página había que recorrer todo el
   grid para leer la suma del período, que es justo el dato que más se consulta.

   Va sobre las CELDAS y no sobre el <tfoot>: position: sticky no funciona en
   los elementos de agrupación de tabla (thead/tbody/tfoot) en varios
   navegadores, pero sí en th/td — por eso el encabezado de arriba está resuelto
   igual.

   El fondo opaco es obligatorio: al flotar sobre las filas, un pie transparente
   las deja translucir y el total se vuelve ilegible.

   z-index por debajo del encabezado (3) para que, si el contenedor queda muy
   bajo y ambos se tocan, gane el encabezado y no se encimen a medias.

   Es OPT-IN y no automatico en .tb-grid-sticky: EquiposNuevos e Interconexion
   pintan su pie con color propio (en-tot, table-secondary) y el fondo opaco que
   el sticky exige se los pisaria. */
.tb-grid-foot-sticky tfoot td,
.tb-grid-foot-sticky tfoot th {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: #FAFAFA;
    border-top: 2px solid #E5E5EA;
}

.tb-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--tb-font-size-sm);
}

.tb-table thead th {
    padding: 0.75rem 1rem;
    font-weight: 600;
    font-size: var(--tb-font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #636366;
    background: #FAFAFA;
    border-bottom: 2px solid #E5E5EA;
    white-space: nowrap;
    text-align: left;
}

/* ============================================================
   Datos sensibles sin permiso (funcion 6). El valor que llega ya viene
   ENMASCARADO desde el servidor (Security/DatoSensible.cs); el blur es solo la
   senal visual de que ahi hay un dato reservado. `user-select: none` evita que se
   copie la mascara y se confunda con el dato real.
   ============================================================ */
.dato-sensible-oculto {
    filter: blur(4px);
    user-select: none;
    cursor: not-allowed;
    letter-spacing: .08em;
}

/* ============================================================
   tb-grid: reusable column-header sort + funnel-filter pattern.
   Server-side mode: the table must be wrapped in <form method="get">
   and each filterable <th> declares data-filter-name="<param>".
   ============================================================ */
.tb-grid thead th[data-key] {
    position: relative;
    user-select: none;
    white-space: nowrap;
}
/* Encabezado fijo + columna ordenable: la regla de arriba
   (`.tb-grid thead th[data-key] { position: relative }`) le gana en especificidad
   al `position: sticky` de `.tb-grid-sticky thead th`, así que solo se quedaban
   fijas las columnas SIN data-key (check, categoría, acciones) y las ordenables se
   perdían al hacer scroll. Se repite el sticky con la MISMA especificidad del
   selector que lo pisaba y más abajo en el archivo, para ganar el desempate.
   `sticky` también establece contexto de posicionamiento, así que el popover de
   filtro y el punto de `th.filtered::after` siguen anclando igual. */
.tb-grid-sticky thead th[data-key] {
    position: sticky;
    top: 0;
    z-index: 3;
}
.tb-grid thead th .th-label {
    cursor: pointer;
    padding-right: 2px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.tb-grid thead th .th-label:hover { color: #0d6efd; }
.tb-grid thead th .sort-ind { font-size: .65rem; opacity: .35; margin-left: 2px; }
.tb-grid thead th.sorted .sort-ind { opacity: 1; color: #0d6efd; }
.tb-grid thead th .filter-btn {
    background: transparent; border: 0; padding: 0 2px; font-size: .8rem;
    color: #adb5bd; cursor: pointer; line-height: 1; vertical-align: middle;
}
.tb-grid thead th .filter-btn:hover { color: #0d6efd; }
.tb-grid thead th.filtered .filter-btn { color: #0d6efd; }
.tb-grid thead th.filtered::after {
    content: ''; position: absolute; right: 6px; top: 6px;
    width: 6px; height: 6px; background: #0d6efd; border-radius: 50%;
}
.tb-grid-filter-pop {
    position: absolute; top: 100%; left: 0; z-index: 1050;
    background: #fff; border: 1px solid #dee2e6; border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,.12); padding: .5rem; min-width: 220px;
    text-transform: none; letter-spacing: normal; font-weight: 400;
}
.tb-grid-filter-pop .form-control,
.tb-grid-filter-pop .form-select { font-size: .8rem; }
.tb-grid-filter-pop .actions { display: flex; gap: .25rem; margin-top: .35rem; }
.tb-grid-filter-pop .actions button { font-size: .72rem; padding: .15rem .5rem; }

/* Themed modal header — sigue el tema seleccionado (kaeser/anthracite).
   Override de la regla global h5 (var(--tb-dark)) para que el título sea visible. */
.modal-header.tb-modal-header-dark {
    background: var(--tb-modal-header-bg);
    border-bottom: 4px solid #FFCC19;
}
.modal-header.tb-modal-header-dark .modal-title,
.modal-header.tb-modal-header-dark .modal-title *,
.modal-header.tb-modal-header-dark .modal-title i {
    color: var(--tb-modal-header-title);
}
.modal-header.tb-modal-header-dark .btn-close {
    filter: brightness(0) invert(1);
    opacity: .85;
}
.modal-header.tb-modal-header-dark .btn-close:hover {
    opacity: 1;
}
/* Variante destructiva (rojo) — mismo patrón para "Eliminar X". El título
   queda en blanco para máximo contraste sobre fondo rojo institucional. */
.modal-header.tb-modal-header-danger {
    background: linear-gradient(135deg, #B40404 0%, #8a0303 100%);
    border-bottom: 4px solid #FFCC19;
}
.modal-header.tb-modal-header-danger .modal-title,
.modal-header.tb-modal-header-danger .modal-title *,
.modal-header.tb-modal-header-danger .modal-title i {
    color: #ffffff;
}
.modal-header.tb-modal-header-danger .btn-close {
    filter: brightness(0) invert(1);
    opacity: .85;
}
.modal-header.tb-modal-header-danger .btn-close:hover {
    opacity: 1;
}
/* Variante success (verde) — para modales de confirmación positiva, marcado
   de cierre exitoso, etc. Título en blanco para contraste. */
.modal-header.tb-modal-header-success {
    background: linear-gradient(135deg, #198754 0%, #157347 100%);
    border-bottom: 4px solid #FFCC19;
}
.modal-header.tb-modal-header-success .modal-title,
.modal-header.tb-modal-header-success .modal-title *,
.modal-header.tb-modal-header-success .modal-title i {
    color: #ffffff;
}
.modal-header.tb-modal-header-success .btn-close {
    filter: brightness(0) invert(1);
    opacity: .85;
}
.modal-header.tb-modal-header-success .btn-close:hover {
    opacity: 1;
}

.tb-table tbody td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #F0F0F0;
    color: var(--tb-dark);
    vertical-align: middle;
}

.tb-table tbody tr {
    transition: background var(--tb-transition-fast);
}

.tb-table tbody tr:hover {
    background: rgba(255, 207, 0, 0.04);
}

.tb-table tbody tr:last-child td {
    border-bottom: none;
}

.tb-table-clickable tbody tr {
    cursor: pointer;
}

.tb-table-clickable tbody tr:hover {
    background: rgba(255, 207, 0, 0.08);
}

/* Contenedor canónico de la columna "Acciones". Va en un <div> DENTRO del <td>
   (no en el <td>: un `display:flex` sobre una celda la saca del layout de tabla).
   `flex-wrap: nowrap` explícito porque el sintoma tipico es justamente que los
   chips se parten en dos renglones cuando la columna queda angosta. */
.tb-table-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    justify-content: flex-end;
    flex-wrap: nowrap;
}

/* Celda que contiene las acciones. `width: 1%` hace que la columna se encoja a lo
   mínimo necesario en vez de ceder ancho a las demás, y `white-space: nowrap`
   remata: juntas garantizan que los botones nunca se acomoden en dos renglones. */
.tb-actions-cell {
    width: 1%;
    white-space: nowrap;
}

.tb-table-actions .tb-btn-ghost {
    width: 30px;
    height: 30px;
    font-size: 1rem;
}

/* Striped variant */
.tb-table-striped tbody tr:nth-child(even) {
    background: #FAFAFA;
}

.tb-table-striped tbody tr:nth-child(even):hover {
    background: rgba(255, 207, 0, 0.06);
}

/* -----------------------------------------------
   16. FILTER PANEL
   ----------------------------------------------- */
.tb-filter-panel {
    background: var(--tb-white);
    border-radius: var(--tb-border-radius-lg);
    box-shadow: var(--tb-shadow);
    border: 1px solid #F0F0F0;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.tb-filter-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.tb-filter-panel-title {
    font-size: var(--tb-font-size-sm);
    font-weight: 600;
    color: var(--tb-dark);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tb-filter-panel-title .bi {
    color: #8E8E93;
}

/* Collapsible filter chevron */
.tb-filter-chevron {
    transition: transform 0.25s ease;
    margin-left: 0.5rem;
    font-size: 0.85em;
}

.tb-filter-chevron.collapsed {
    transform: rotate(-90deg);
}

.tb-card-header[data-bs-toggle="collapse"] {
    user-select: none;
}

.tb-card-header[data-bs-toggle="collapse"]:hover {
    opacity: 0.85;
}

.tb-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
}

.tb-filter-group {
    flex: 1;
    min-width: 160px;
}

.tb-filter-group label {
    display: block;
    font-size: var(--tb-font-size-xs);
    font-weight: 500;
    color: #636366;
    margin-bottom: 0.25rem;
}

.tb-filter-actions {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
}

/* -----------------------------------------------
   17. EDIT PANEL
   ----------------------------------------------- */
.tb-edit-panel {
    background: var(--tb-white);
    border-radius: var(--tb-border-radius-lg);
    box-shadow: var(--tb-shadow-lg);
    border: 1px solid #F0F0F0;
    border-left: 4px solid var(--tb-yellow);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    animation: tb-slide-down 0.3s ease;
}

.tb-edit-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #F0F0F0;
}

.tb-edit-panel-title {
    font-size: var(--tb-font-size-md);
    font-weight: 600;
    color: var(--tb-dark);
}

.tb-edit-panel-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.25rem;
    padding-top: 0.75rem;
    border-top: 1px solid #F0F0F0;
}

/* -----------------------------------------------
   18. FORMS STYLING
   ----------------------------------------------- */
.tb-form-group {
    margin-bottom: 1rem;
}

.tb-form-label {
    display: block;
    font-size: var(--tb-font-size-sm);
    font-weight: 500;
    color: var(--tb-dark);
    margin-bottom: 0.375rem;
}

.tb-form-label .text-danger {
    color: var(--tb-danger);
}

.tb-form-control {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: var(--tb-font-size-sm);
    font-family: inherit;
    line-height: 1.5;
    color: var(--tb-dark);
    background: var(--tb-white);
    border: 1px solid #D1D1D6;
    border-radius: var(--tb-border-radius-sm);
    transition: border-color var(--tb-transition-fast), box-shadow var(--tb-transition-fast);
    appearance: none;
}

.tb-form-control:focus {
    border-color: var(--tb-yellow);
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 207, 0, 0.15);
}

.tb-form-control::placeholder {
    color: #C7C7CC;
}

.tb-form-control.is-invalid,
.tb-form-control:invalid:not(:placeholder-shown) {
    border-color: var(--tb-danger);
}

.tb-form-control.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.tb-form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23636366' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 12px;
    padding-right: 2.25rem;
}

.tb-form-text {
    font-size: var(--tb-font-size-xs);
    color: #8E8E93;
    margin-top: 0.25rem;
}

.tb-form-error {
    font-size: var(--tb-font-size-xs);
    color: var(--tb-danger);
    margin-top: 0.25rem;
}

/* Override Bootstrap form focus */
.form-control:focus,
.form-select:focus {
    border-color: var(--tb-yellow);
    box-shadow: 0 0 0 3px rgba(255, 207, 0, 0.15);
}

/* -----------------------------------------------
   19. TOAST NOTIFICATIONS
   ----------------------------------------------- */
.tb-toast-container {
    position: fixed;
    top: calc(var(--tb-header-height) + 1rem);
    right: 1.5rem;
    z-index: var(--tb-z-toast);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 380px;
    width: 100%;
    pointer-events: none;
}

.tb-toast {
    background: var(--tb-white);
    border-radius: var(--tb-border-radius);
    box-shadow: var(--tb-shadow-xl);
    border: 1px solid #E5E5EA;
    padding: 0.875rem 1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    pointer-events: auto;
    animation: tb-slide-in-right 0.35s ease;
    transition: all var(--tb-transition);
    overflow: hidden;
    position: relative;
}

.tb-toast.hiding {
    animation: tb-slide-out-right 0.3s ease forwards;
}

.tb-toast-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.tb-toast-body {
    flex: 1;
    min-width: 0;
}

.tb-toast-title {
    font-size: var(--tb-font-size-sm);
    font-weight: 600;
    color: var(--tb-dark);
    margin-bottom: 0.125rem;
}

.tb-toast-message {
    font-size: var(--tb-font-size-sm);
    color: #636366;
}

.tb-toast-close {
    background: none;
    border: none;
    padding: 0.25rem;
    font-size: 0.875rem;
    color: #8E8E93;
    cursor: pointer;
    flex-shrink: 0;
    border-radius: var(--tb-border-radius-sm);
    transition: all var(--tb-transition-fast);
}

.tb-toast-close:hover {
    background: var(--tb-light-bg);
    color: var(--tb-dark);
}

.tb-toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    border-radius: 0 0 var(--tb-border-radius) var(--tb-border-radius);
    animation: tb-toast-progress 5s linear forwards;
}

.tb-toast-success {
    border-left: 4px solid var(--tb-success);
}

.tb-toast-success .tb-toast-icon {
    color: var(--tb-success);
}

.tb-toast-success .tb-toast-progress {
    background: var(--tb-success);
}

.tb-toast-danger,
.tb-toast-error {
    border-left: 4px solid var(--tb-danger);
}

.tb-toast-danger .tb-toast-icon,
.tb-toast-error .tb-toast-icon {
    color: var(--tb-danger);
}

.tb-toast-danger .tb-toast-progress,
.tb-toast-error .tb-toast-progress {
    background: var(--tb-danger);
}

.tb-toast-warning {
    border-left: 4px solid var(--tb-warning);
}

.tb-toast-warning .tb-toast-icon {
    color: var(--tb-warning);
}

.tb-toast-warning .tb-toast-progress {
    background: var(--tb-warning);
}

.tb-toast-info {
    border-left: 4px solid var(--tb-info);
}

.tb-toast-info .tb-toast-icon {
    color: var(--tb-info);
}

.tb-toast-info .tb-toast-progress {
    background: var(--tb-info);
}

/* -----------------------------------------------
   20. PAGINATION
   ----------------------------------------------- */
.tb-pagination {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.tb-pagination-item {
    display: inline-flex;
}

.tb-pagination-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 0.5rem;
    font-size: var(--tb-font-size-sm);
    font-weight: 500;
    color: var(--tb-dark);
    background: var(--tb-white);
    border: 1px solid #E5E5EA;
    border-radius: var(--tb-border-radius-sm);
    text-decoration: none;
    transition: all var(--tb-transition-fast);
    cursor: pointer;
}

.tb-pagination-link:hover {
    background: var(--tb-light-bg);
    border-color: #D1D1D6;
    color: var(--tb-dark);
    text-decoration: none;
}

.tb-pagination-link.active {
    background: var(--tb-yellow);
    border-color: var(--tb-yellow);
    color: var(--tb-dark);
    font-weight: 600;
}

.tb-pagination-link.disabled {
    opacity: 0.4;
    pointer-events: none;
}

.tb-pagination-info {
    font-size: var(--tb-font-size-sm);
    color: #8E8E93;
    margin-left: 0.75rem;
}

/* -----------------------------------------------
   21. EMPTY STATE
   ----------------------------------------------- */
.tb-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    text-align: center;
}

.tb-empty-state-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--tb-light-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #C7C7CC;
    margin-bottom: 1.25rem;
}

.tb-empty-state-title {
    font-size: var(--tb-font-size-lg);
    font-weight: 600;
    color: var(--tb-dark);
    margin-bottom: 0.5rem;
}

.tb-empty-state-text {
    font-size: var(--tb-font-size-sm);
    color: #8E8E93;
    max-width: 360px;
    margin-bottom: 1.25rem;
}

/* -----------------------------------------------
   22. MODULE / QUICK ACCESS CARDS
   ----------------------------------------------- */
.tb-module-card {
    background: var(--tb-white);
    border-radius: var(--tb-border-radius-lg);
    box-shadow: var(--tb-shadow);
    border: 1px solid #F0F0F0;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: all var(--tb-transition);
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
}

.tb-module-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--tb-yellow);
    transform: scaleX(0);
    transition: transform var(--tb-transition);
    transform-origin: left;
}

.tb-module-card:hover {
    box-shadow: var(--tb-shadow-lg);
    transform: translateY(-3px);
    text-decoration: none;
    color: inherit;
}

.tb-module-card:hover::before {
    transform: scaleX(1);
}

.tb-module-card-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--tb-border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.tb-module-card-title {
    font-size: var(--tb-font-size-md);
    font-weight: 600;
    color: var(--tb-dark);
}

.tb-module-card-desc {
    font-size: var(--tb-font-size-sm);
    color: #8E8E93;
    line-height: 1.5;
}

.tb-module-card-count {
    font-size: var(--tb-font-size-xs);
    color: #8E8E93;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: auto;
}

/* -----------------------------------------------
   23. LOGIN PAGE (Split-panel design)
   ----------------------------------------------- */
.kd-login-body {
    margin: 0;
    min-height: 100vh;
    background: var(--tb-dark);
}

.kd-login-scene {
    display: flex;
    min-height: 100vh;
    overflow: hidden;
}

/* --- Hero panel (left) --- */
.kd-login-hero {
    flex: 1;
    background: var(--tb-dark);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem;
    position: relative;
    overflow: visible;
}

.kd-login-hero::before {
    content: '';
    position: absolute;
    top: 50%;
    right: -63%;
    transform: translateY(-50%) rotate(90deg);
    width: 125%;
    height: 55%;
    background: url('/img/Perfil_SIGMA.webp') no-repeat center / contain;
    opacity: .75;
    pointer-events: none;
    z-index: 1;
}

.kd-login-hero-content {
    max-width: 440px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.kd-login-hero-title {
    font-family: 'Inter', sans-serif;
    font-size: 4.5rem;
    font-weight: 900;
    letter-spacing: 4px;
    color: var(--tb-white);
    margin: 0 0 0.25rem;
    line-height: 1;
}

.kd-login-hero-tagline {
    font-size: 1rem;
    font-weight: 400;
    color: var(--tb-yellow);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0;
}

.kd-login-hero-divider {
    width: 48px;
    height: 3px;
    background: var(--tb-yellow);
    border-radius: 2px;
    margin: 1.75rem 0;
}

.kd-login-hero-desc {
    color: rgba(255,255,255,.55);
    font-size: 0.9375rem;
    line-height: 1.7;
    margin: 0 0 2rem;
}

.kd-login-hero-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.kd-login-hero-feature {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: rgba(255,255,255,.45);
    font-size: 0.8rem;
    font-weight: 500;
}

.kd-login-hero-feature i {
    font-size: 1rem;
    color: var(--tb-yellow);
    opacity: .7;
}

.kd-login-hero-footer {
    position: absolute;
    bottom: 2rem;
    left: 3rem;
    font-size: 0.7rem;
    color: rgba(255,255,255,.25);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.kd-login-hero-footer strong {
    color: rgba(255,255,255,.35);
    font-weight: 600;
}

/* --- Form panel (right) --- */
.kd-login-form-panel {
    width: 480px;
    min-width: 480px;
    background: var(--tb-white);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    position: relative;
    z-index: 2;
}

.kd-login-form-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, var(--tb-yellow) 0%, var(--tb-petroleo) 50%, var(--tb-dark) 100%);
}

.kd-login-form-wrapper {
    width: 100%;
    max-width: 340px;
}

/* Mobile-only brand */
.kd-login-mobile-brand {
    display: none;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.kd-login-mobile-title {
    font-size: 1.75rem;
    font-weight: 900;
    letter-spacing: 4px;
    color: var(--tb-dark);
}

/* Form header */
.kd-login-form-header {
    margin-bottom: 2rem;
}

.kd-login-form-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--tb-dark);
    margin: 0 0 0.35rem;
}

.kd-login-form-header p {
    color: var(--tb-text-muted);
    font-size: 0.875rem;
    margin: 0;
}

/* Fields */
.kd-field {
    margin-bottom: 1.25rem;
}

.kd-field-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--tb-text);
    margin-bottom: 0.4rem;
    letter-spacing: 0.2px;
}

.kd-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.kd-input-wrapper > i:first-child {
    position: absolute;
    left: 0.875rem;
    color: var(--tb-text-muted);
    font-size: 1rem;
    pointer-events: none;
    transition: color var(--tb-transition-fast);
}

.kd-input {
    width: 100%;
    padding: 0.7rem 0.875rem 0.7rem 2.75rem;
    border: 1.5px solid var(--tb-border);
    border-radius: var(--tb-border-radius);
    font-family: inherit;
    font-size: 0.875rem;
    color: var(--tb-text);
    background: var(--tb-white);
    transition: all var(--tb-transition-fast);
    outline: none;
}

.kd-input::placeholder {
    color: #B0B5BF;
}

.kd-input:focus {
    border-color: var(--tb-petroleo);
    box-shadow: 0 0 0 3px rgba(50,128,149,.1);
}

.kd-input:focus ~ i:first-child,
.kd-input-wrapper:focus-within > i:first-child {
    color: var(--tb-petroleo);
}

.kd-input-toggle {
    position: absolute;
    right: 0.5rem;
    background: none;
    border: none;
    color: var(--tb-text-muted);
    cursor: pointer;
    padding: 0.25rem 0.4rem;
    border-radius: 4px;
    font-size: 1rem;
    transition: color var(--tb-transition-fast);
}

.kd-input-toggle:hover {
    color: var(--tb-petroleo);
}

/* Submit */
.kd-login-submit {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.75rem 1.5rem;
    margin-top: 0.5rem;
    background: var(--tb-yellow);
    color: var(--tb-dark);
    border: none;
    border-radius: var(--tb-border-radius);
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all var(--tb-transition-fast);
}

.kd-login-submit:hover {
    background: var(--tb-yellow-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255,207,0,.35);
}

.kd-login-submit:active {
    transform: translateY(0);
    box-shadow: none;
}

.kd-login-submit i {
    transition: transform var(--tb-transition-fast);
}

.kd-login-submit:hover i {
    transform: translateX(3px);
}

/* Forgot password */
.kd-login-forgot {
    text-align: center;
    margin-top: 1.25rem;
}

.kd-login-forgot a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--tb-text-muted);
    text-decoration: none;
    transition: color var(--tb-transition-fast);
}

.kd-login-forgot a:hover {
    color: var(--tb-petroleo);
}

/* Recover success state */
.kd-recover-success {
    text-align: center;
    padding: 1rem 0;
}

.kd-recover-success-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.25rem;
    background: rgba(34,197,94,.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kd-recover-success-icon i {
    font-size: 1.75rem;
    color: var(--tb-success);
}

.kd-recover-success h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--tb-dark);
    margin: 0 0 0.5rem;
}

.kd-recover-success p {
    color: var(--tb-text-muted);
    font-size: 0.875rem;
    margin: 0 0 1.75rem;
    line-height: 1.6;
}

/* Footer */
.kd-login-form-footer {
    text-align: center;
    margin-top: 2.5rem;
    font-size: 0.7rem;
    color: var(--tb-text-muted);
}

/* --- Responsive --- */
@media (max-width: 991.98px) {
    .kd-login-hero {
        display: none;
    }
    .kd-login-form-panel {
        width: 100%;
        min-width: 0;
        min-height: 100vh;
    }
    .kd-login-form-panel::before {
        width: 100%;
        height: 3px;
        top: 0;
        left: 0;
        background: linear-gradient(90deg, var(--tb-yellow) 0%, var(--tb-petroleo) 100%);
    }
    .kd-login-mobile-brand {
        display: flex;
    }
}

@media (max-width: 575.98px) {
    .kd-login-form-panel {
        padding: 2rem 1.5rem;
    }
}

/* -----------------------------------------------
   24. ALERTS
   ----------------------------------------------- */
.tb-alert {
    padding: 0.75rem 1rem;
    border-radius: var(--tb-border-radius-sm);
    font-size: var(--tb-font-size-sm);
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    animation: tb-slide-down 0.3s ease;
}

.tb-alert-success {
    background: var(--tb-success-bg);
    border-color: rgba(34, 197, 94, 0.2);
    color: #15803D;
}

.tb-alert-danger {
    background: var(--tb-danger-bg);
    border-color: rgba(239, 68, 68, 0.2);
    color: #B91C1C;
}

.tb-alert-warning {
    background: var(--tb-warning-bg);
    border-color: rgba(245, 158, 11, 0.2);
    color: #B45309;
}

.tb-alert-info {
    background: var(--tb-info-bg);
    border-color: rgba(59, 130, 246, 0.2);
    color: #1D4ED8;
}

.tb-alert-dismissible {
    padding-right: 2.5rem;
    position: relative;
}

.tb-alert-close {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 1rem;
    color: currentColor;
    opacity: 0.5;
    cursor: pointer;
    padding: 0.25rem;
    transition: opacity var(--tb-transition-fast);
}

.tb-alert-close:hover {
    opacity: 1;
}

/* -----------------------------------------------
   25. DROPDOWN ENHANCEMENTS
   ----------------------------------------------- */
.tb-dropdown-menu {
    border: 1px solid #E5E5EA;
    border-radius: var(--tb-border-radius);
    box-shadow: var(--tb-shadow-lg);
    padding: 0.375rem;
    min-width: 180px;
    animation: tb-fade-down 0.15s ease;
}

.tb-dropdown-item {
    padding: 0.5rem 0.75rem;
    font-size: var(--tb-font-size-sm);
    color: var(--tb-dark);
    border-radius: var(--tb-border-radius-sm);
    display: flex;
    align-items: center;
    gap: 0.625rem;
    transition: background var(--tb-transition-fast);
}

.tb-dropdown-item:hover {
    background: var(--tb-light-bg);
    color: var(--tb-dark);
}

.tb-dropdown-item .bi {
    font-size: 1rem;
    color: #8E8E93;
    width: 1.125rem;
    text-align: center;
}

.tb-dropdown-divider {
    height: 1px;
    background: #F0F0F0;
    margin: 0.375rem 0;
}

.tb-dropdown-item-danger {
    color: var(--tb-danger);
}

.tb-dropdown-item-danger:hover {
    background: var(--tb-danger-bg);
    color: var(--tb-danger);
}

.tb-dropdown-item-danger .bi {
    color: var(--tb-danger);
}

/* -----------------------------------------------
   26. CONFIRM DIALOG / MODAL
   ----------------------------------------------- */
.tb-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: var(--tb-z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: tb-fade-in 0.2s ease;
}

.tb-confirm-dialog {
    background: var(--tb-white);
    border-radius: var(--tb-border-radius-lg);
    box-shadow: var(--tb-shadow-xl);
    max-width: 400px;
    width: 100%;
    padding: 1.5rem;
    animation: tb-fade-up 0.25s ease;
}

.tb-confirm-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin: 0 auto 1rem;
}

.tb-confirm-icon.danger {
    background: var(--tb-danger-bg);
    color: var(--tb-danger);
}

.tb-confirm-icon.warning {
    background: var(--tb-warning-bg);
    color: var(--tb-warning);
}

.tb-confirm-title {
    font-size: var(--tb-font-size-lg);
    font-weight: 600;
    text-align: center;
    color: var(--tb-dark);
    margin-bottom: 0.5rem;
}

.tb-confirm-message {
    font-size: var(--tb-font-size-sm);
    color: #636366;
    text-align: center;
    margin-bottom: 1.5rem;
}

.tb-confirm-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

/* -----------------------------------------------
   27. LOADING / SPINNER
   ----------------------------------------------- */
.tb-spinner {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: tb-spin 0.75s linear infinite;
}

.tb-spinner-sm {
    width: 1rem;
    height: 1rem;
    border-width: 1.5px;
}

.tb-spinner-lg {
    width: 2rem;
    height: 2rem;
    border-width: 3px;
}

.tb-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    z-index: 5;
}

/* -----------------------------------------------
   28. ANIMATIONS
   ----------------------------------------------- */
@keyframes tb-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes tb-fade-up {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes tb-fade-down {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes tb-slide-down {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes tb-slide-in-right {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes tb-slide-out-right {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

@keyframes tb-spin {
    to { transform: rotate(360deg); }
}

@keyframes tb-toast-progress {
    from { width: 100%; }
    to { width: 0; }
}

@keyframes tb-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

@keyframes tb-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* -----------------------------------------------
   29. UTILITY CLASSES
   ----------------------------------------------- */
.tb-text-yellow { color: var(--tb-yellow) !important; }
.tb-text-petroleo { color: var(--tb-petroleo) !important; }
.tb-text-dark { color: var(--tb-dark) !important; }
.tb-text-muted { color: #8E8E93 !important; }
.tb-text-success { color: var(--tb-success) !important; }
.tb-text-danger { color: var(--tb-danger) !important; }
.tb-text-warning { color: var(--tb-warning) !important; }
.tb-text-info { color: var(--tb-info) !important; }

.tb-bg-yellow { background-color: var(--tb-yellow) !important; }
.tb-bg-petroleo { background-color: var(--tb-petroleo) !important; }
.tb-bg-dark { background-color: var(--tb-dark) !important; }
.tb-bg-light { background-color: var(--tb-light-bg) !important; }
.tb-bg-white { background-color: var(--tb-white) !important; }

.tb-border-yellow { border-color: var(--tb-yellow) !important; }
.tb-border-petroleo { border-color: var(--tb-petroleo) !important; }

.tb-rounded { border-radius: var(--tb-border-radius) !important; }
.tb-rounded-sm { border-radius: var(--tb-border-radius-sm) !important; }
.tb-rounded-lg { border-radius: var(--tb-border-radius-lg) !important; }

.tb-shadow { box-shadow: var(--tb-shadow) !important; }
.tb-shadow-md { box-shadow: var(--tb-shadow-md) !important; }
.tb-shadow-lg { box-shadow: var(--tb-shadow-lg) !important; }
.tb-shadow-none { box-shadow: none !important; }

.tb-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tb-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* -----------------------------------------------
   30. RESPONSIVE BREAKPOINTS
   ----------------------------------------------- */

/* Tablet and below (< 992px) */
@media (max-width: 991.98px) {
    .tb-sidebar {
        transform: translateX(-100%);
    }

    .tb-sidebar.show {
        transform: translateX(0);
    }

    .tb-main-wrapper {
        margin-left: 0 !important;
    }

    .tb-header-toggle {
        display: flex;
    }

    .tb-header-user-info {
        display: none;
    }

    .tb-content {
        padding: 1rem;
    }

    .tb-content-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Mobile (< 768px) */
@media (max-width: 767.98px) {
    :root {
        --tb-header-height: 56px;
    }

    .tb-header {
        padding: 0 1rem;
    }

    .tb-content {
        padding: 0.75rem;
    }

    .tb-title {
        font-size: var(--tb-font-size-xl);
    }

    .tb-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .tb-card-header:has(.tb-btn-export) {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .tb-card-body {
        padding: 1rem;
    }

    .tb-filter-row {
        flex-direction: column;
    }

    .tb-filter-group {
        min-width: auto;
    }

    .tb-edit-panel {
        padding: 1rem;
    }

    .tb-stats-card {
        padding: 1rem;
    }

    .tb-stats-card-value {
        font-size: var(--tb-font-size-xl);
    }

    .tb-toast-container {
        right: 0.75rem;
        left: 0.75rem;
        max-width: none;
    }

    .tb-confirm-dialog {
        margin: 0 1rem;
    }

    .tb-table thead th,
    .tb-table tbody td {
        padding: 0.625rem 0.75rem;
    }
}

/* Small mobile (< 576px) */
@media (max-width: 575.98px) {
    .tb-pagination {
        flex-wrap: wrap;
        justify-content: center;
    }

    .tb-content-header-right {
        width: 100%;
    }

    .tb-content-header-right .tb-btn {
        flex: 1;
    }

    .tb-card-footer {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* Large desktop (>= 1400px) */
@media (min-width: 1400px) {
    .tb-content {
        padding: 2rem;
    }
}

/* -----------------------------------------------
   31. PRINT STYLES
   ----------------------------------------------- */
@media print {
    .tb-sidebar,
    .tb-sidebar-overlay,
    .tb-header,
    .tb-toast-container,
    .tb-filter-panel,
    .tb-pagination,
    .tb-btn,
    .tb-table-actions,
    .tb-header-toggle {
        display: none !important;
    }

    .tb-main-wrapper {
        margin-left: 0 !important;
    }

    .tb-content {
        padding: 0 !important;
    }

    .tb-card {
        box-shadow: none !important;
        border: 1px solid #DDD !important;
        break-inside: avoid;
    }

    .tb-title {
        color: #000 !important;
    }

    .tb-table {
        font-size: 10pt;
    }

    .tb-table thead th {
        background: #EEE !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .tb-badge {
        border: 1px solid currentColor;
    }

    body {
        background: #FFF !important;
        color: #000 !important;
        font-size: 10pt;
    }

    a[href]::after {
        content: none;
    }
}

/* -----------------------------------------------
   32. SKELETON LOADING
   ----------------------------------------------- */
.tb-skeleton {
    background: linear-gradient(90deg, #F0F0F0 25%, #E5E5EA 50%, #F0F0F0 75%);
    background-size: 200% 100%;
    animation: tb-pulse 1.5s ease-in-out infinite;
    border-radius: var(--tb-border-radius-sm);
}

.tb-skeleton-text {
    height: 0.875rem;
    margin-bottom: 0.5rem;
}

.tb-skeleton-text:last-child {
    width: 60%;
}

.tb-skeleton-title {
    height: 1.25rem;
    width: 40%;
    margin-bottom: 0.75rem;
}

.tb-skeleton-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

.tb-skeleton-card {
    height: 120px;
}

/* -----------------------------------------------
   33. TABS
   ----------------------------------------------- */
.tb-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #F0F0F0;
    margin-bottom: 1.25rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tb-tab {
    padding: 0.625rem 1rem;
    font-size: var(--tb-font-size-sm);
    font-weight: 500;
    color: #8E8E93;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
    transition: all var(--tb-transition-fast);
    cursor: pointer;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
}

.tb-tab:hover {
    color: var(--tb-dark);
}

.tb-tab.active {
    color: var(--tb-dark);
    border-bottom-color: var(--tb-yellow);
    font-weight: 600;
}

/* -----------------------------------------------
   34. TAG / CHIP
   ----------------------------------------------- */
.tb-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    font-size: var(--tb-font-size-xs);
    font-weight: 500;
    border-radius: 2rem;
    background: var(--tb-light-bg);
    color: #636366;
    border: 1px solid #E5E5EA;
}

.tb-tag-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: none;
    border: none;
    color: #8E8E93;
    cursor: pointer;
    font-size: 0.75rem;
    padding: 0;
    transition: all var(--tb-transition-fast);
}

.tb-tag-remove:hover {
    background: rgba(0, 0, 0, 0.1);
    color: var(--tb-dark);
}

/* -----------------------------------------------
   35. TOOLTIP CUSTOM
   ----------------------------------------------- */
[data-tb-tooltip] {
    position: relative;
}

[data-tb-tooltip]::after {
    content: attr(data-tb-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    padding: 0.375rem 0.625rem;
    font-size: var(--tb-font-size-xs);
    font-weight: 500;
    color: var(--tb-white);
    background: var(--tb-dark);
    border-radius: var(--tb-border-radius-sm);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all var(--tb-transition-fast);
    z-index: 1070;
}

[data-tb-tooltip]:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* -----------------------------------------------
   36. PROGRESS BAR
   ----------------------------------------------- */
.tb-progress {
    height: 6px;
    background: #F0F0F0;
    border-radius: 3px;
    overflow: hidden;
}

.tb-progress-bar {
    height: 100%;
    border-radius: 3px;
    transition: width var(--tb-transition-slow);
}

.tb-progress-bar-yellow { background: var(--tb-yellow); }
.tb-progress-bar-petroleo { background: var(--tb-petroleo); }
.tb-progress-bar-success { background: var(--tb-success); }
.tb-progress-bar-danger { background: var(--tb-danger); }
.tb-progress-bar-info { background: var(--tb-info); }

/* -----------------------------------------------
   37. DIVIDER
   ----------------------------------------------- */
.tb-divider {
    height: 1px;
    background: #F0F0F0;
    margin: 1.25rem 0;
    border: none;
}

.tb-divider-text {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: var(--tb-font-size-xs);
    color: #8E8E93;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tb-divider-text::before,
.tb-divider-text::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #F0F0F0;
}

/* -----------------------------------------------
   38. DASHBOARD WELCOME
   ----------------------------------------------- */
.tb-welcome {
    background: linear-gradient(135deg, var(--tb-dark) 0%, var(--tb-petroleo) 100%);
    border-radius: var(--tb-border-radius-lg);
    padding: 2rem;
    color: var(--tb-white);
    position: relative;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.tb-welcome::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -10%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255, 207, 0, 0.12) 0%, transparent 70%);
    pointer-events: none;
}

.tb-welcome-title {
    font-size: var(--tb-font-size-2xl);
    font-weight: 700;
    margin-bottom: 0.375rem;
    position: relative;
}

.tb-welcome-subtitle {
    font-size: var(--tb-font-size-sm);
    color: rgba(255, 255, 255, 0.7);
    position: relative;
}

.tb-welcome-accent {
    color: var(--tb-yellow);
}

/* -----------------------------------------------
   39. FOOTER (OPTIONAL)
   ----------------------------------------------- */
.tb-footer {
    padding: 0.75rem 1.5rem;
    font-size: var(--tb-font-size-xs);
    color: #8E8E93;
    text-align: center;
    border-top: 1px solid #F0F0F0;
    background: var(--tb-white);
}

/* -----------------------------------------------
   40. KAESER ACCENT STRIPE
   ----------------------------------------------- */
.tb-accent-stripe {
    height: 3px;
    background: linear-gradient(90deg, var(--tb-yellow) 0%, var(--tb-yellow) 40%, var(--tb-petroleo) 100%);
}

/* -----------------------------------------------
   41. KSHOP IMAGE ZOOM
   ----------------------------------------------- */

/* Catalog card hover zoom */
.kshop-img-wrap {
    height: 220px;
    overflow: hidden;
    background: #f8f9fa;
    position: relative;
}
.kshop-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.kshop-img-wrap:hover .kshop-img {
    transform: scale(1.12);
}

/* Detail page magnifier */
.kshop-zoom-container {
    position: relative;
    overflow: visible;
}
.kshop-zoom-lens {
    display: none;
    position: absolute;
    width: 120px;
    height: 120px;
    border: 2px solid var(--tb-yellow, #FFCF00);
    border-radius: 50%;
    background: rgba(255, 207, 0, 0.08);
    pointer-events: none;
    z-index: 5;
    box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.12);
}
.kshop-zoom-result {
    display: none;
    position: absolute;
    top: 0;
    left: calc(100% + 16px);
    width: 350px;
    height: 350px;
    border: 1px solid #e0e0e0;
    border-radius: 0.75rem;
    background-repeat: no-repeat;
    background-color: #fff;
    box-shadow: 0 8px 32px rgba(0,0,0,.15);
    z-index: 10;
    pointer-events: none;
}
@media (max-width: 991.98px) {
    .kshop-zoom-lens,
    .kshop-zoom-result { display: none !important; }
}

/* Lightbox overlay */
.kshop-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,.85);
    backdrop-filter: blur(8px);
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    animation: kshopLbIn 0.25s ease;
}
.kshop-lightbox.active {
    display: flex;
}
.kshop-lightbox img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 0.5rem;
    box-shadow: 0 16px 64px rgba(0,0,0,.4);
}
.kshop-lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    background: none;
    border: none;
    color: #fff;
    font-size: 2.5rem;
    cursor: pointer;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.2s;
}
.kshop-lightbox-close:hover {
    opacity: 1;
}
@keyframes kshopLbIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ---- Sortable table columns ---- */
.tb-sortable {
    position: relative;
    user-select: none;
    white-space: nowrap;
}
.tb-sortable:hover {
    background: rgba(0,0,0,0.04);
}
.tb-sort-icon {
    font-size: 0.7em;
    margin-left: 0.35rem;
    opacity: 0.3;
    transition: opacity 0.2s;
    vertical-align: middle;
}
.tb-sortable:hover .tb-sort-icon {
    opacity: 0.6;
}
.tb-sort-icon.tb-sort-active {
    opacity: 1;
    color: var(--tb-yellow, #FFCC19);
}
.tb-sorted-asc, .tb-sorted-desc {
    background: rgba(255,204,25,0.06);
}

/* ────────────────────────────────────────────────────────────────────────
   SweetAlert2 — Tema KAESER
   Aplicado vía customClass={ popup:'swal2-kaeser', ... } desde site.js.
   Brand: teal gradient header + acento amarillo + tipografía Inter +
   botón primario amarillo / cancel gris. Coherente con .tb-modal-header,
   .tb-btn-primary y .tb-btn-outline del design system.
   ──────────────────────────────────────────────────────────────────────── */
.swal2-container.swal2-kaeser-bg .swal2-backdrop-show {
    background: rgba(28, 28, 30, 0.55) !important;
}
.swal2-popup.swal2-kaeser {
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    border-radius: 12px;
    padding: 0 0 1.25rem 0;
    border: 1px solid #d6e3e6;
    box-shadow: 0 18px 50px rgba(28, 28, 30, 0.22), 0 4px 12px rgba(28, 28, 30, 0.08);
    overflow: hidden;
    color: #1C1C1E;
}
/* Header: tira teal con acento amarillo abajo, similar a .tb-modal-header */
.swal2-popup.swal2-kaeser .swal2-icon {
    margin: 1.25rem auto 0.5rem;
}
.swal2-popup.swal2-kaeser .swal2-icon.swal2-warning {
    border-color: #FFCC19;
    color: #cc6600;
}
.swal2-popup.swal2-kaeser .swal2-icon.swal2-info {
    border-color: #22707f;
    color: #1a5c6b;
}
.swal2-popup.swal2-kaeser .swal2-icon.swal2-question {
    border-color: #22707f;
    color: #1a5c6b;
}
.swal2-popup.swal2-kaeser .swal2-icon.swal2-success [class^='swal2-success-line'] {
    background-color: #198754;
}
.swal2-popup.swal2-kaeser .swal2-icon.swal2-success .swal2-success-ring {
    border-color: rgba(25, 135, 84, 0.3);
}
.swal2-popup.swal2-kaeser .swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
    background-color: #B40404;
}
.swal2-popup.swal2-kaeser .swal2-title {
    color: #1a5c6b;
    font-weight: 700;
    font-size: 1.125rem;
    padding: 0.25rem 1.5rem 0.5rem;
    letter-spacing: 0.2px;
    position: relative;
}
.swal2-popup.swal2-kaeser .swal2-title::after {
    content: '';
    display: block;
    width: 42px;
    height: 3px;
    background: #FFCC19;
    border-radius: 2px;
    margin: 0.6rem auto 0;
}
.swal2-popup.swal2-kaeser .swal2-html-container,
.swal2-popup.swal2-kaeser .swal2-content {
    color: #1C1C1E;
    font-size: 0.92rem;
    line-height: 1.5;
    padding: 0.4rem 1.75rem 0;
    margin: 0;
}
.swal2-popup.swal2-kaeser .swal2-actions {
    gap: 0.65rem;
    margin-top: 1.1rem;
    padding: 0 1.5rem;
}
/* Botones — primario amarillo (anthracite text), cancel teal outline.
   Targeteamos sin .swal2-styled porque con buttonsStyling:false SweetAlert
   no añade esa clase. También exponemos clases globales .tb-btn-swal-confirm
   y .tb-btn-swal-cancel para que los tematicemos por su cuenta. */
.swal2-popup.swal2-kaeser .swal2-confirm,
.tb-btn-swal-confirm {
    background: #FFCC19 !important;
    color: #1C1C1E !important;
    border: 1px solid #FFCC19 !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    padding: 0.6rem 1.5rem !important;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 6px rgba(255,204,25,0.35);
    transition: background .15s ease, transform .05s ease, box-shadow .15s ease;
    text-transform: none;
    cursor: pointer;
    outline: none;
}
.swal2-popup.swal2-kaeser .swal2-confirm:hover,
.tb-btn-swal-confirm:hover {
    background: #e5b600 !important;
    border-color: #e5b600 !important;
    box-shadow: 0 4px 10px rgba(255,204,25,0.5);
}
.swal2-popup.swal2-kaeser .swal2-confirm:focus,
.tb-btn-swal-confirm:focus {
    box-shadow: 0 0 0 3px rgba(255,204,25,0.35) !important;
}
.swal2-popup.swal2-kaeser .swal2-cancel,
.tb-btn-swal-cancel {
    background: #fff !important;
    color: #1a5c6b !important;
    border: 1.5px solid #22707f !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    padding: 0.6rem 1.5rem !important;
    letter-spacing: 0.3px;
    transition: background .15s ease, color .15s ease;
    text-transform: none;
    cursor: pointer;
    outline: none;
}
.swal2-popup.swal2-kaeser .swal2-cancel:hover,
.tb-btn-swal-cancel:hover {
    background: #eaf2f4 !important;
    color: #1a5c6b !important;
}
.swal2-popup.swal2-kaeser .swal2-cancel:focus,
.tb-btn-swal-cancel:focus {
    box-shadow: 0 0 0 3px rgba(34,112,127,0.25) !important;
}
/* Variante "danger": botón primario rojo para destructivos (eliminar, cancelar
   crédito), manteniendo la tipografía/borde Kaeser. Activar pasando
   customClass.popup = 'swal2-kaeser swal2-kaeser-danger'. */
.swal2-popup.swal2-kaeser-danger .swal2-confirm {
    background: #B40404 !important;
    color: #fff !important;
    border-color: #B40404 !important;
    box-shadow: 0 2px 6px rgba(180,4,4,0.35);
}
.swal2-popup.swal2-kaeser-danger .swal2-confirm:hover {
    background: #8a0303 !important;
    border-color: #8a0303 !important;
    box-shadow: 0 4px 10px rgba(180,4,4,0.5);
}
.swal2-popup.swal2-kaeser-danger .swal2-confirm:focus {
    box-shadow: 0 0 0 3px rgba(180,4,4,0.3) !important;
}
.swal2-popup.swal2-kaeser-danger .swal2-title::after {
    background: #B40404;
}
/* Timer progress bar (toasts y autocierres): acento amarillo */
.swal2-popup.swal2-kaeser .swal2-timer-progress-bar {
    background: rgba(255, 204, 25, 0.8);
}
/* Soporte tema oscuro de la app */
html[data-theme="anthracite"] .swal2-popup.swal2-kaeser {
    background: #2b3137;
    color: #f1f3f5;
    border-color: #1C1C1E;
}
html[data-theme="anthracite"] .swal2-popup.swal2-kaeser .swal2-title {
    color: #FFCC19;
}
html[data-theme="anthracite"] .swal2-popup.swal2-kaeser .swal2-html-container,
html[data-theme="anthracite"] .swal2-popup.swal2-kaeser .swal2-content {
    color: #e9ecef;
}
html[data-theme="anthracite"] .swal2-popup.swal2-kaeser .swal2-cancel {
    background: transparent !important;
    color: #FFCC19 !important;
    border-color: #FFCC19 !important;
}
html[data-theme="anthracite"] .swal2-popup.swal2-kaeser .swal2-cancel:hover {
    background: rgba(255, 204, 25, 0.08) !important;
    color: #FFCC19 !important;
}

/* Variante TOAST: notificación delgada en esquina superior derecha — sin header
   grande, solo icono + texto. Usa la misma paleta Kaeser pero compacta. */
.swal2-popup.swal2-kaeser-toast {
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif !important;
    border-radius: 10px !important;
    border: 1px solid #d6e3e6 !important;
    border-left: 4px solid #FFCC19 !important;
    box-shadow: 0 10px 28px rgba(28, 28, 30, 0.18) !important;
    padding: 0.6rem 0.9rem !important;
    color: #1C1C1E !important;
    background: #fff !important;
}
.swal2-popup.swal2-kaeser-toast .swal2-title {
    color: #1a5c6b !important;
    font-weight: 700 !important;
    font-size: 0.92rem !important;
    margin: 0 !important;
    padding: 0 !important;
}
.swal2-popup.swal2-kaeser-toast .swal2-title::after {
    display: none;  /* Sin la barra amarilla del header del popup grande */
}
.swal2-popup.swal2-kaeser-toast .swal2-html-container {
    font-size: 0.85rem !important;
    color: #495057 !important;
    margin: 0.15rem 0 0 !important;
    padding: 0 !important;
}
/* Iconos por estado: borde + color del icono coherentes con la paleta brand */
.swal2-popup.swal2-kaeser-toast .swal2-icon.swal2-success { border-color: #198754 !important; }
.swal2-popup.swal2-kaeser-toast .swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: #198754 !important; }
.swal2-popup.swal2-kaeser-toast .swal2-icon.swal2-error { border-color: #B40404 !important; }
.swal2-popup.swal2-kaeser-toast .swal2-icon.swal2-error [class^='swal2-x-mark-line'] { background-color: #B40404 !important; }
.swal2-popup.swal2-kaeser-toast .swal2-icon.swal2-warning { border-color: #FFCC19 !important; color: #cc6600 !important; }
.swal2-popup.swal2-kaeser-toast .swal2-icon.swal2-info { border-color: #22707f !important; color: #1a5c6b !important; }
.swal2-popup.swal2-kaeser-toast .swal2-timer-progress-bar {
    background: rgba(255, 204, 25, 0.85) !important;
}
/* Borde lateral según severidad — pinta el indicador izquierdo */
.swal2-popup.swal2-kaeser-toast:has(.swal2-icon.swal2-success) { border-left-color: #198754 !important; }
.swal2-popup.swal2-kaeser-toast:has(.swal2-icon.swal2-error) { border-left-color: #B40404 !important; }
.swal2-popup.swal2-kaeser-toast:has(.swal2-icon.swal2-info) { border-left-color: #22707f !important; }
/* Toast en tema oscuro */
html[data-theme="anthracite"] .swal2-popup.swal2-kaeser-toast {
    background: #2b3137 !important;
    color: #e9ecef !important;
    border-color: #1C1C1E !important;
}
html[data-theme="anthracite"] .swal2-popup.swal2-kaeser-toast .swal2-title { color: #FFCC19 !important; }
html[data-theme="anthracite"] .swal2-popup.swal2-kaeser-toast .swal2-html-container { color: #c8dde3 !important; }

/* ── Utilidad: permitir que un flex item se encoja ─────────────────────────
   Los ítems flex nacen con `min-width:auto`, así que NO bajan del ancho de su
   contenido: un nombre largo desborda la tarjeta y `text-truncate` no surte
   efecto. Bootstrap 5 no trae esta utilidad; Directorio y Tienda ya la usaban
   asumiendo que existía. */
.min-width-0 { min-width: 0; }

/* ── Barra colapsable "llamativa" para secciones de gráficas/resumen ──
   Cabecera clickable con degradado KAESER, texto blanco y chevron que gira.
   Uso: <div class="tb-card-header tb-collapse-bar" role="button"
             data-bs-toggle="collapse" data-bs-target="#id" aria-expanded="false">
          ... <i class="bi bi-chevron-down tb-collapse-chevron"></i> */
/* Se usa .tb-card-header.tb-collapse-bar + !important para ganarle a
   `.tb-card-header{background:var(--tb-white)}` y a la regla de hover de
   `.tb-card-header[data-bs-toggle="collapse"]`. */
.tb-card-header.tb-collapse-bar,
.tb-collapse-bar {
    cursor: pointer;
    background: linear-gradient(90deg, #124b57 0%, #1a5c6b 45%, #328095 100%) !important;
    color: #fff !important;
    border-bottom: 4px solid #FFCE00 !important;
    box-shadow: 0 2px 10px rgba(26, 92, 107, .25);
    transition: filter .15s ease, box-shadow .15s ease;
    user-select: none;
}
.tb-card-header.tb-collapse-bar:hover,
.tb-collapse-bar:hover { filter: brightness(1.10); opacity: 1 !important; box-shadow: 0 4px 16px rgba(26, 92, 107, .35); }
.tb-collapse-bar h5, .tb-collapse-bar h6, .tb-collapse-bar i, .tb-collapse-bar span { color: #fff !important; margin-bottom: 0; }
.tb-collapse-bar .tb-collapse-hint {
    opacity: .95; font-size: 12px; font-weight: 700; letter-spacing: .3px;
    background: rgba(255, 255, 255, .15); padding: 3px 10px; border-radius: 999px;
}
.tb-collapse-bar .tb-collapse-chevron {
    transition: transform .25s ease; font-size: 1.25rem;
    background: #FFCE00; color: #1a5c6b !important; border-radius: 50%;
    width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
}
.tb-collapse-bar[aria-expanded="true"] .tb-collapse-chevron { transform: rotate(180deg); }