/* Fase 9.2 — Existencias (GestionExistencias). Hoja global del módulo, cargada al abrir la pantalla (IRecursosService),
   igual que hoy: los 9 bloques <style> de la página (globales en el proyecto actual) + wwwroot/css/inventario.css, en ese orden.
   Cambios: :root → .inv-scope (contenedor de la página y de sus modales: las variables --c-* ya no se filtran al resto del ERP),
   @@ → @, y capas D-51 (999999/9998/9999 → --z-modal). Todo lo demás verbatim. */
.inv-stock-input {
    width: 52px;
    padding: 3px 5px;
    font-size: 11px;
    text-align: right;
    border: 0.5px solid var(--c-border-2, #d0d0d0);
    border-radius: 5px;
    background: var(--c-bg-1);
    color: var(--c-text-1);
    transition: border-color 0.15s, box-shadow 0.15s;
    -moz-appearance: textfield;
}

    .inv-stock-input::-webkit-outer-spin-button,
    .inv-stock-input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }

    .inv-stock-input:focus {
        outline: none;
        border-color: var(--c-primary, #6366f1);
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-primary, #6366f1) 18%, transparent);
    }

    .inv-stock-input:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

.inv-save-btn {
    width: 28px;
    height: 28px;
    border-radius: 5px;
    border: 0.5px solid var(--c-border-2, #d0d0d0);
    background: transparent;
    color: var(--c-text-2);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
    vertical-align: middle;
}

    .inv-save-btn:hover:not(:disabled) {
        background: color-mix(in srgb, var(--c-primary, #6366f1) 10%, transparent);
        border-color: var(--c-primary, #6366f1);
        color: var(--c-primary, #6366f1);
    }

    .inv-save-btn:active:not(:disabled) {
        transform: scale(0.95);
    }

    .inv-save-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

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

.inv-spin {
    display: inline-block;
    animation: inv-spin 0.7s linear infinite;
}

.inv-action-cell {
    /* display: flex; */
    align-items: center;
    gap: 6px;
}

.inv-action-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 100%;
}
.inv-scope {
    /* ─────────────────────────────────────────────
         BACKGROUNDS
      ───────────────────────────────────────────── */

    --c-bg-1: #FFFFFF;
    --c-bg-2: #F7F8FC;
    --c-bg-3: #F1F3F8;
    --c-bg-4: #ECEFF5;
    /* ─────────────────────────────────────────────
         BORDERS
      ───────────────────────────────────────────── */

    --c-border: #E3E7EF;
    --c-border2: #D4DAE5;
    --c-divider: #EEF1F6;
    /* ─────────────────────────────────────────────
         TEXTOS
      ───────────────────────────────────────────── */

    --c-text-1: #202635;
    --c-text-2: #5F6B84;
    --c-text-3: #8A93A8;
    --c-text-4: #B2B8C5;
    /* ─────────────────────────────────────────────
         BRAND / AZUL PRINCIPAL
      ───────────────────────────────────────────── */

    --c-brand: #2D6CDF;
    --c-brand-h: #1E56BC;
    --c-brand-soft: #EEF4FF;
    --c-brand-bg: #F5F8FF;
    --c-brand-bd: #C9DBFF;
    /* ─────────────────────────────────────────────
         SUCCESS
      ───────────────────────────────────────────── */

    --c-ok: #3C8C4E;
    --c-ok-bg: #EDF8F0;
    --c-ok-border: #BFE3C8;
    /* ─────────────────────────────────────────────
         WARNING
      ───────────────────────────────────────────── */

    --c-warn: #B7791F;
    --c-warn-bg: #FFF8EB;
    --c-warn-border: #F0D9A7;
    /* ─────────────────────────────────────────────
         DANGER
      ───────────────────────────────────────────── */

    --c-danger: #D14B4B;
    --c-danger-bg: #FFF1F1;
    --c-danger-border: #F2B9B9;
    /* ─────────────────────────────────────────────
         INFO / IA
      ───────────────────────────────────────────── */

    --c-ia: #6B5BEB;
    --c-ia-bg: #F3F0FF;
    --c-ia-border: #D8D1FF;
    /* ─────────────────────────────────────────────
         GRISES
      ───────────────────────────────────────────── */

    --c-gray-bg: #F5F7FA;
    --c-gray-soft: #FAFBFD;
    --c-gray-tx: #626B7F;
    /* ─────────────────────────────────────────────
         SOMBRAS SUAVES
      ───────────────────────────────────────────── */

    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 2px 8px rgba(15, 23, 42, 0.06);
    --shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.08);
    /* ─────────────────────────────────────────────
         RADIOS
      ───────────────────────────────────────────── */

    --radius-xs: 5px;
    --radius-sm: 5px;
    --radius-md: 5px;
    --radius-lg: 5px;
    --radius-xl: 5px;
    /* ─────────────────────────────────────────────
         TIPOGRAFÍA
      ───────────────────────────────────────────── */

    --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
    /* ─────────────────────────────────────────────
         TRANSICIONES
      ───────────────────────────────────────────── */

    --tr-fast: .15s ease;
    --tr-normal: .25s ease;
}

/* ── Reset mínimo ───────────────────────────────────────────── */
.inv-app *, .inv-app *::before, .inv-app *::after {
    box-sizing: border-box;
}

.inv-app {
    font-family: var(--font-main);
    font-size: 13px;
    color: var(--c-text-1);
    background: var(--c-bg-2);
    border-radius: var(--radius-lg);
    padding: 12px;
    min-height: 600px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ══════════════════════════════════════════════════════════
       TOP BAR
    ══════════════════════════════════════════════════════════ */
.inv-topbar {
    background: var(--c-bg-1);
    border: 0.5px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.inv-brand {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--c-brand);
    white-space: nowrap;
}

    .inv-brand .ti {
        font-size: 15px;
    }

.inv-topbar-sep {
    width: 1px;
    height: 16px;
    background: var(--c-border);
    flex-shrink: 0;
}

.inv-topbar-title {
    font-size: 12px;
    color: var(--c-text-2);
    flex: 1;
    white-space: nowrap;
}

.inv-topbar-filters {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.inv-topbar-actions {
    display: flex;
    gap: 5px;
    align-items: center;
    flex-wrap: wrap;
}

.inv-sel {
    font-size: 11px;
    padding: 4px 8px;
    border-radius: var(--radius-md);
    border: 0.5px solid var(--c-border2);
    background: var(--c-bg-2);
    color: var(--c-text-1);
    cursor: pointer;
    outline: none;
    transition: border-color .12s;
}

    .inv-sel:focus {
        border-color: var(--c-brand);
    }

/* ══════════════════════════════════════════════════════════
       BOTONES
    ══════════════════════════════════════════════════════════ */
.inv-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    padding: 5px 11px;
    border-radius: var(--radius-md);
    border: 0.5px solid var(--c-border2);
    background: transparent;
    color: var(--c-text-2);
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s, border-color .12s, color .12s;
    font-family: var(--font-main);
    line-height: 1;
}

    .inv-btn:hover {
        background: var(--c-bg-3);
        color: var(--c-text-1);
    }

    .inv-btn:focus-visible {
        outline: 2px solid var(--c-brand);
        outline-offset: 2px;
    }

    .inv-btn:disabled {
        opacity: .45;
        cursor: not-allowed;
    }

.inv-btn-primary {
    background: var(--c-brand);
    color: #fff;
    border-color: var(--c-brand);
}

    .inv-btn-primary:hover {
        background: var(--c-brand-h);
        border-color: var(--c-brand-h);
        color: #fff;
    }

.inv-btn-sm {
    font-size: 10px;
    padding: 3px 8px;
}

/* ══════════════════════════════════════════════════════════
       BANNER DE ALERTAS
    ══════════════════════════════════════════════════════════ */
.inv-alert-banner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    background: var(--c-warn-bg);
    border: 0.5px solid var(--c-warn-border);
    border-radius: var(--radius-md);
    padding: 7px 12px;
    font-size: 11px;
    color: #633806;
    animation: fadeSlideIn .2s ease;
}

    .inv-alert-banner .ti {
        font-size: 14px;
        color: #854F0B;
        flex-shrink: 0;
    }

.inv-alert-link {
    background: none;
    border: none;
    color: #854F0B;
    font-weight: 500;
    cursor: pointer;
    text-decoration: underline;
    font-size: 11px;
    padding: 0;
}

.inv-ml-auto {
    margin-left: auto;
}

/* ══════════════════════════════════════════════════════════
       KPI CARDS
    ══════════════════════════════════════════════════════════ */
.inv-kpi-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 7px;
}

@media (max-width: 900px) {
    .inv-kpi-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 520px) {
    .inv-kpi-row {
        grid-template-columns: 1fr;
    }
}

.inv-kpi {
    background: var(--c-bg-1);
    border: 0.5px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
    position: relative;
    overflow: hidden;
}

    .inv-kpi::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 3px;
        height: 100%;
        background: transparent;
        transition: background .15s;
    }

    .inv-kpi:hover {
        border-color: var(--c-brand);
        box-shadow: var(--shadow-sm);
    }

.inv-kpi--danger::before {
    background: var(--c-danger);
}

.inv-kpi--warn::before {
    background: var(--c-warn);
}

.inv-kpi-lbl {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: var(--c-text-2);
    margin-bottom: 3px;
}

.inv-kpi-val {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--c-text-1);
}

.inv-kpi--danger .inv-kpi-val {
    color: var(--c-danger);
}

.inv-kpi--warn .inv-kpi-val {
    color: var(--c-warn);
}

.inv-blue {
    color: var(--c-brand);
}

.inv-kpi-sub {
    font-size: 10px;
    color: var(--c-text-3);
    margin-top: 2px;
}

/* ══════════════════════════════════════════════════════════
       BODY GRID (árbol + main)
    ══════════════════════════════════════════════════════════ */
.inv-body-grid {
    display: grid;
    grid-template-columns: 164px 1fr;
    gap: 8px;
    flex: 1;
}

@media (max-width: 700px) {
    .inv-body-grid {
        grid-template-columns: 1fr;
    }
}

/* ── ÁRBOL ─────────────────────────────────────────────── */
.inv-tree {
    background: var(--c-bg-1);
    border: 0.5px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: 10px 8px;
    align-self: start;
    position: sticky;
    top: 8px;
    overflow: auto;
    height: 72vh;
}

.inv-tree-title {
    font-size: 10px;
    font-weight: 600;
    color: var(--c-text-2);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 8px;
    padding-left: 4px;
}

.inv-tree-node {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 6px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 11px;
    color: var(--c-text-1);
    transition: background .12s;
    user-select: none;
}

    .inv-tree-node:hover {
        background: var(--c-bg-2);
    }

    .inv-tree-node.active {
        background: var(--c-brand-bg);
        color: var(--c-brand-h);
        font-weight: 500;
    }

    .inv-tree-node .ti {
        font-size: 13px;
        flex-shrink: 0;
    }

.inv-tree-badge {
    margin-left: auto;
    font-size: 9px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 20px;
}

.inv-badge-red {
    background: var(--c-danger-bg);
    color: #791F1F;
}

.inv-badge-amber {
    background: var(--c-warn-bg);
    color: #633806;
}

.inv-badge-blue {
    background: var(--c-brand-bg);
    color: var(--c-brand-h);
}

.inv-tree-child {
    padding-left: 14px;
}

/* ══════════════════════════════════════════════════════════
       PANEL PRINCIPAL
    ══════════════════════════════════════════════════════════ */
.inv-main-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

/* ── TOOLBAR + TABLA ─────────────────────────────────────── */
.inv-table-wrap {
    background: var(--c-bg-1);
    border: 0.5px solid var(--c-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.inv-table-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-bottom: 0.5px solid var(--c-border);
    flex-wrap: wrap;
}

.inv-search {
    flex: 1;
    min-width: 160px;
    font-size: 11px;
    padding: 5px 10px;
    border-radius: var(--radius-md);
    border: 0.5px solid var(--c-border2);
    background: var(--c-bg-2);
    color: var(--c-text-1);
    outline: none;
    font-family: var(--font-main);
    transition: border-color .12s;
}

    .inv-search:focus {
        border-color: var(--c-brand);
    }

.inv-filter-chips {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.inv-chip {
    font-size: 10px;
    padding: 3px 9px;
    border-radius: 5px;
    border: 0.5px solid var(--c-border2);
    background: transparent;
    color: var(--c-text-2);
    cursor: pointer;
    transition: all .12s;
    font-family: var(--font-main);
}

    .inv-chip:hover {
        background: var(--c-bg-3);
    }

    .inv-chip.active {
        background: var(--c-brand);
        color: #fff;
        border-color: var(--c-brand);
    }

.inv-chip-red.active {
    background: var(--c-danger);
    color: #fff;
    border-color: var(--c-danger);
}

.inv-chip-amber.active {
    background: var(--c-warn);
    color: #fff;
    border-color: var(--c-warn);
}

/* ── TABLA ─────────────────────────────────────────────── */
.inv-table-scroll {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 420px;
}

.inv-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

    .inv-table thead {
        position: sticky;
        top: 0;
        z-index: 2;
    }

    .inv-table th {
        font-size: 10px;
        font-weight: 600;
        color: var(--c-text-2);
        background: var(--c-bg-2);
        padding: 6px 8px;
        text-align: left;
        border-bottom: 0.5px solid var(--c-border);
        white-space: nowrap;
        overflow: hidden;
        user-select: none;
    }

        .inv-table th.sortable {
            cursor: pointer;
        }

            .inv-table th.sortable:hover {
                color: var(--c-text-1);
            }

        .inv-table th.num, .inv-table td.num {
            text-align: right;
        }

    .inv-table td {
        font-size: 11px;
        padding: 6px 8px;
        border-bottom: 0.5px solid var(--c-border);
        vertical-align: middle;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

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

    .inv-table tr.selected td {
        background: var(--c-brand-bg);
    }

    .inv-table tr:hover:not(.selected) td {
        background: var(--c-bg-2);
        cursor: pointer;
    }

.inv-cod {
    font-size: 10px;
    color: var(--c-text-2);
}

.inv-desc {
    font-size: 11px;
}

.inv-muted {
    color: var(--c-text-3);
}

.inv-icon-info {
    font-size: 13px;
    color: var(--c-text-3);
}

/* Disponible + barra de cobertura */
.inv-disp-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-end;
}

.inv-cov-bar {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 90px;
}

.inv-bar-bg {
    height: 4px;
    border-radius: 2px;
    background: var(--c-border);
    flex: 1;
}

.inv-bar-f {
    height: 100%;
    border-radius: 2px;
    transition: width .3s ease;
}

.inv-cov-txt {
    font-size: 10px;
    min-width: 26px;
    text-align: right;
}

.inv-neg {
    color: var(--c-danger);
    font-weight: 600;
}

.inv-pos {
    color: var(--c-ok);
}

/* Footer de la tabla */
.inv-table-footer {
    padding: 5px 12px;
    font-size: 10px;
    color: var(--c-text-3);
    border-top: 0.5px solid var(--c-border);
}

/* ── BADGES ─────────────────────────────────────────────── */
.inv-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 20px;
    font-weight: 600;
    white-space: nowrap;
}

    .inv-badge .ti {
        font-size: 9px;
    }

.inv-badge--danger {
    background: var(--c-danger-bg);
    color: #791F1F;
}

.inv-badge--warn {
    background: var(--c-warn-bg);
    color: #633806;
}

.inv-badge--ok {
    background: var(--c-ok-bg);
    color: #27500A;
}

.inv-badge--blue {
    background: var(--c-brand-bg);
    color: var(--c-brand-h);
}

.inv-badge--gray {
    background: var(--c-gray-bg);
    color: var(--c-gray-tx);
}

/* ── FUNC TAG ─────────────────────────────────────────────── */
.inv-func-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 4px;
    background: #EEEDFE;
    color: #3C3489;
    font-family: var(--font-mono);
    cursor: pointer;
    border: 0.5px solid #AFA9EC;
    transition: background .12s;
    white-space: nowrap;
}

    .inv-func-tag:hover {
        background: #CECBF6;
    }

.inv-func-tag--warn {
    background: var(--c-warn-bg);
    color: var(--c-warn);
    border-color: var(--c-warn-border);
}

.inv-fn-ref {
    font-size: 10px;
    color: var(--c-text-3);
    margin-bottom: 8px;
}

/* ══════════════════════════════════════════════════════════
       PANEL DE DETALLE
    ══════════════════════════════════════════════════════════ */
.inv-detail-panel {
    background: var(--c-bg-1);
    border: 0.5px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: 12px;
    animation: fadeSlideIn .15s ease;
}

.inv-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    gap: 8px;
}

.inv-detail-title {
    font-size: 12px;
    font-weight: 600;
}

/* Health Score */
.inv-health-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 0.5px solid var(--c-border);
}

.inv-health-label {
    font-size: 10px;
    color: var(--c-text-2);
    min-width: 70px;
}

.inv-health-bar-wrap {
    flex: 1;
    height: 6px;
    background: var(--c-border);
    border-radius: 3px;
    overflow: hidden;
}

.inv-health-bar {
    height: 100%;
    border-radius: 3px;
    transition: width .4s ease;
}

.inv-health-val {
    font-size: 11px;
    font-weight: 600;
    min-width: 54px;
}

/* Tabs */
.inv-detail-tabs {
    display: flex;
    gap: 2px;
    margin-bottom: 12px;
    border-bottom: 0.5px solid var(--c-border);
}

.inv-dtab {
    font-size: 11px;
    padding: 6px 12px;
    cursor: pointer;
    color: var(--c-text-2);
    border: none;
    background: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -0.5px;
    transition: color .12s, border-color .12s;
    font-family: var(--font-main);
    white-space: nowrap;
}

    .inv-dtab:hover {
        color: var(--c-text-1);
    }

    .inv-dtab.active {
        color: var(--c-brand);
        border-bottom-color: var(--c-brand);
        font-weight: 600;
    }

    .inv-dtab:focus-visible {
        outline: 2px solid var(--c-brand);
        outline-offset: 2px;
    }

/* Sucursales */
.inv-suc-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}

@media (max-width: 600px) {
    .inv-suc-grid {
        grid-template-columns: 1fr;
    }
}

.inv-suc-card {
    border: 0.5px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: 8px 10px;
}

.inv-suc-name {
    font-size: 10px;
    font-weight: 600;
    color: var(--c-text-2);
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.inv-suc-stocks {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3px;
}

.inv-suc-col {
    text-align: center;
}

.inv-suc-col-lbl {
    font-size: 8px;
    color: var(--c-text-3);
}

.inv-suc-col-val {
    font-size: 12px;
    font-weight: 600;
}

.inv-transfer-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    color: var(--c-brand);
    cursor: pointer;
    margin-top: 6px;
    padding-top: 5px;
    border-top: 0.5px solid var(--c-border);
    background: none;
    border-left: none;
    border-right: none;
    border-bottom: none;
    font-family: var(--font-main);
    width: 100%;
    text-align: left;
}

    .inv-transfer-btn:hover {
        color: var(--c-brand-h);
    }

/* Valorización */
.inv-val-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 8px;
}

.inv-val-cell {
    text-align: center;
    padding: 6px;
}

.inv-val-lbl {
    font-size: 9px;
    color: var(--c-text-2);
    margin-bottom: 2px;
}

.inv-val-val {
    font-size: 13px;
    font-weight: 600;
}

/* Sparkline */
.inv-spark-wrap {
    border-top: 0.5px solid var(--c-border);
    padding-top: 8px;
    margin-top: 4px;
}

.inv-spark {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 28px;
    margin-top: 4px;
}

.inv-spark-bar {
    flex: 1;
    border-radius: 1px 1px 0 0;
    min-height: 2px;
    opacity: .85;
}

.inv-spark-labels {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    color: var(--c-text-3);
    margin-top: 2px;
}

/* Diagnóstico */
.inv-diag-ok {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 0;
    color: var(--c-text-2);
    font-size: 11px;
}

    .inv-diag-ok .ti {
        font-size: 20px;
        color: var(--c-ok);
    }

.inv-diag-box {
    border-radius: var(--radius-md);
    padding: 8px 10px;
    margin-bottom: 8px;
}

.inv-diag-box--danger {
    border: 0.5px solid var(--c-danger-border);
    background: var(--c-danger-bg);
}

.inv-diag-box--warn {
    border: 0.5px solid var(--c-warn-border);
    background: var(--c-warn-bg);
}

.inv-diag-title {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 600;
    margin-bottom: 4px;
}

.inv-diag-box--danger .inv-diag-title {
    color: #791F1F;
}

.inv-diag-box--warn .inv-diag-title {
    color: #633806;
}

.inv-diag-body {
    font-size: 10px;
    line-height: 1.5;
}

.inv-diag-box--danger .inv-diag-body {
    color: var(--c-danger);
}

.inv-diag-box--warn .inv-diag-body {
    color: var(--c-warn);
}

.inv-diag-actions {
    display: flex;
    gap: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
}

/* ══════════════════════════════════════════════════════════
       PANEL OC SUGERIDA
    ══════════════════════════════════════════════════════════ */
.inv-oc-panel {
    background: var(--c-bg-1);
    border: 0.5px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: 12px;
    animation: fadeSlideIn .15s ease;
}

.inv-oc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--c-text-1);
}

    .inv-oc-header .ti {
        font-size: 14px;
        color: var(--c-brand);
    }

.inv-oc-group {
    margin-bottom: 12px;
}

.inv-oc-proveedor {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--c-text-1);
}

.inv-table-sm td {
    font-size: 10px;
    padding: 4px 8px;
}

.inv-table-sm th {
    font-size: 9px;
}

/* ══════════════════════════════════════════════════════════
       ASISTENTE IA
    ══════════════════════════════════════════════════════════ */
/*.inv-ia-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.35);
        z-index: 1000;
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
        padding: 16px;
        animation: fadeIn .15s ease;
    }

    .inv-ia-panel {
        background: var(--c-bg-1);
        border: 0.5px solid var(--c-border);
        border-radius: var(--radius-lg);
        width: min(460px, 100%);
        height: min(600px, 90vh);
        display: flex;
        flex-direction: column;
        box-shadow: 0 8px 32px rgba(0,0,0,.18);
        animation: slideUp .2s ease;
        overflow: hidden;
    }*/
/*.inv-ia-overlay {
        position: fixed;
        inset: 0;
        z-index: 1000;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        padding: 0;
        pointer-events: none;
    }

    .inv-ia-panel {
        pointer-events: auto;
        position: fixed;
        right: 16px;
        bottom: 16px;
        background: var(--c-bg-1);
        border: 0.5px solid var(--c-border);
        border-radius: var(--radius-lg);
        width: min(460px, calc(100vw - 24px));
        height: min(600px, calc(100vh - 24px));
        display: flex;
        flex-direction: column;
        box-shadow: 0 12px 40px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.08);
        animation: slideUp .18s ease;
        overflow: hidden;
    }*/
/* ══════════════════════════════════════════════════════════
       OVERLAY IA
    ══════════════════════════════════════════════════════════ */

.inv-ia-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,.42);
    z-index: var(--z-modal); /* D-51 (era 999999) */
    overflow: hidden;
}

/* ══════════════════════════════════════════════════════════
       PANEL IA
    ══════════════════════════════════════════════════════════ */

.inv-ia-panel {
    position: absolute;
    right: 75px;
    bottom: 16px;
    width: 460px;
    height: 600px;
    max-width: 100vw;
    max-height: 100vh;
    background: var(--c-bg-1);
    border-left: 1px solid var(--c-border);
    border-top: 1px solid var(--c-border);
    border-radius: 12px 0 0 0;
    box-shadow: -4px -4px 24px rgba(0,0,0,.10);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideUp .18s ease;
}

.inv-ia-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 0.5px solid var(--c-border);
    background: var(--c-bg-2);
    flex-shrink: 0;
}

.inv-ia-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.inv-ia-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--c-brand);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .inv-ia-avatar .ti {
        font-size: 16px;
    }

.inv-ia-avatar--sm {
    width: 24px;
    height: 24px;
}

    .inv-ia-avatar--sm .ti {
        font-size: 12px;
    }

.inv-ia-titulo {
    font-size: 12px;
    font-weight: 600;
}

.inv-ia-subtitulo {
    font-size: 10px;
    color: var(--c-text-3);
}

.inv-ia-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scroll-behavior: smooth;
}

/* Bienvenida */
.inv-ia-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    padding: 24px 16px;
    flex: 1;
}

.inv-ia-welcome-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--c-brand-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-brand);
}

    .inv-ia-welcome-icon .ti {
        font-size: 26px;
    }

.inv-ia-welcome-title {
    font-size: 14px;
    font-weight: 600;
}

.inv-ia-welcome-sub {
    font-size: 11px;
    color: var(--c-text-2);
    max-width: 300px;
}

.inv-ia-sugerencias {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    max-width: 320px;
}

.inv-ia-sugerencia {
    text-align: left;
    font-size: 11px;
    padding: 7px 12px;
    border-radius: var(--radius-md);
    border: 0.5px solid var(--c-border2);
    background: var(--c-bg-2);
    color: var(--c-text-1);
    cursor: pointer;
    transition: background .12s, border-color .12s;
    font-family: var(--font-main);
}

    .inv-ia-sugerencia:hover {
        background: var(--c-brand-bg);
        border-color: var(--c-brand);
    }

/* Mensajes */
.inv-ia-msg {
    display: flex;
    align-items: flex-end;
    gap: 7px;
}

.inv-ia-msg--user {
    flex-direction: row-reverse;
}

.inv-ia-bubble {
    max-width: 80%;
    font-size: 12px;
    line-height: 1.5;
    padding: 8px 11px;
    border-radius: var(--radius-lg);
}

.inv-ia-bubble--user {
    background: var(--c-brand);
    color: #fff;
    border-bottom-right-radius: 2px;
}

.inv-ia-bubble--ia {
    background: var(--c-bg-2);
    color: var(--c-text-1);
    border: 0.5px solid var(--c-border);
    border-bottom-left-radius: 2px;
}

    .inv-ia-bubble--ia code {
        font-family: var(--font-mono);
        font-size: 10px;
        background: var(--c-border);
        padding: 1px 4px;
        border-radius: 2px;
    }

    .inv-ia-bubble--ia strong {
        font-weight: 600;
    }

    .inv-ia-bubble--ia li {
        margin-left: 14px;
    }

/* Loading dots */
.inv-ia-bubble--loading {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 32px;
}

    .inv-ia-bubble--loading span {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--c-text-3);
        animation: dotPulse 1.2s infinite;
    }

        .inv-ia-bubble--loading span:nth-child(2) {
            animation-delay: .2s;
        }

        .inv-ia-bubble--loading span:nth-child(3) {
            animation-delay: .4s;
        }

/* Chips contextuales */
.inv-ia-chips-row {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    padding: 6px 14px;
    border-top: 0.5px solid var(--c-border);
}

.inv-ia-chip {
    font-size: 10px;
    padding: 3px 10px;
    border-radius: 20px;
    border: 0.5px solid var(--c-border2);
    background: var(--c-bg-2);
    color: var(--c-text-2);
    cursor: pointer;
    transition: all .12s;
    font-family: var(--font-main);
}

    .inv-ia-chip:hover {
        background: var(--c-brand-bg);
        color: var(--c-brand);
        border-color: var(--c-brand);
    }

/* Footer input */
.inv-ia-footer {
    display: flex;
    gap: 6px;
    padding: 10px 14px;
    border-top: 0.5px solid var(--c-border);
    background: var(--c-bg-2);
    flex-shrink: 0;
}

.inv-ia-input {
    flex: 1;
    font-size: 12px;
    padding: 7px 10px;
    border-radius: var(--radius-md);
    border: 0.5px solid var(--c-border2);
    background: var(--c-bg-1);
    color: var(--c-text-1);
    resize: none;
    font-family: var(--font-main);
    outline: none;
    transition: border-color .12s;
    line-height: 1.4;
}

    .inv-ia-input:focus {
        border-color: var(--c-brand);
    }

    .inv-ia-input:disabled {
        opacity: .6;
    }

.inv-ia-send {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    border: 0.5px solid var(--c-border2);
    background: var(--c-brand);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    align-self: flex-end;
    transition: background .12s;
}

    .inv-ia-send:hover {
        background: var(--c-brand-h);
    }

    .inv-ia-send:disabled {
        background: var(--c-border2);
        cursor: not-allowed;
    }

    .inv-ia-send .ti {
        font-size: 15px;
    }

/* ══════════════════════════════════════════════════════════
       SKELETON / LOADING
    ══════════════════════════════════════════════════════════ */
.inv-skeleton {
    background: linear-gradient(90deg, var(--c-bg-3) 25%, var(--c-border) 50%, var(--c-bg-3) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.2s infinite;
    border-radius: var(--radius-md);
    min-height: 60px;
}

.inv-loading-rows {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 4px 0;
}

.inv-skeleton-row {
    height: 36px;
    background: linear-gradient(90deg, var(--c-bg-3) 25%, var(--c-border) 50%, var(--c-bg-3) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.2s infinite;
}

    .inv-skeleton-row:nth-child(even) {
        animation-delay: .1s;
    }

/* ══════════════════════════════════════════════════════════
       ANIMACIONES
    ══════════════════════════════════════════════════════════ */
@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeSlideIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes dotPulse {
    0%, 80%, 100% {
        transform: scale(0.7);
        opacity: .5;
    }

    40% {
        transform: scale(1);
        opacity: 1;
    }
}

.inv-spin {
    animation: spin .8s linear infinite;
}

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

/* ══════════════════════════════════════════════════════════
       RESPONSIVE GENERAL
    ══════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
    .inv-topbar-title {
        display: none;
    }

    .inv-ia-panel {
        width: 100%;
        height: 90vh;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }

    .inv-ia-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .inv-suc-grid {
        grid-template-columns: 1fr;
    }

    .inv-val-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
.inv-tree-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.inv-clear-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 4px;
    color: var(--cc-text-secondary);
}

    .inv-clear-btn:hover {
        color: var(--cc-primary);
    }
/* ── FOOTER + PAGINADOR ── */

.inv-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    border-top: 1px solid var(--c-border, #e2e8f0);
    font-size: 12px;
    color: var(--c-text-3, #6b7280);
    flex-wrap: wrap;
}

.inv-footer-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.inv-sel-sm {
    font-size: 11px;
    padding: 3px 6px;
    border-radius: 5px;
    border: 1px solid var(--c-border, #e2e8f0);
    background: var(--c-surface, #fff);
    color: var(--c-text-2, #374151);
    cursor: pointer;
}

.inv-pager {
    display: flex;
    align-items: center;
    gap: 4px;
}

.inv-pager-btn {
    min-width: 26px;
    height: 26px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--c-border, #e2e8f0);
    background: var(--c-surface, #fff);
    border-radius: 6px;
    color: var(--c-text-2, #374151);
    font-size: 11px;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}

    .inv-pager-btn:hover:not(:disabled) {
        background: #eef2ff;
        border-color: #c7d2fe;
        color: #1565C0;
    }

    .inv-pager-btn:disabled {
        opacity: .4;
        cursor: not-allowed;
    }

    .inv-pager-btn.inv-pager-num.active {
        background: #1565C0;
        border-color: #1565C0;
        color: #fff;
        font-weight: 600;
    }

.inv-pager-ellipsis {
    padding: 0 2px;
    color: var(--c-text-3, #9ca3af);
    font-size: 11px;
    user-select: none;
}

@media (max-width: 640px) {
    .inv-table-footer {
        justify-content: center;
        text-align: center;
    }

    .inv-pager-btn:not(.inv-pager-num) {
        display: none; /* en móvil solo dejamos prev/next + números */
    }

    .inv-pager-btn.inv-pager-num,
    .inv-pager-btn[title="Página anterior"],
    .inv-pager-btn[title="Página siguiente"] {
        display: inline-flex;
    }
}
/* ============================================
       OCMENU2 — Menú de acciones (dropdown compacto)
       ============================================ */

.ocmenu2-cell {
    position: relative;
    overflow: visible;
    text-align: center;
    white-space: nowrap;
}

.ocmenu2-backdrop {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: var(--z-modal); /* D-51 (era 9998): menú de la fila, sobre el shell */
}

.ocmenu2-wrapper {
    position: relative;
    display: inline-block;
}

.ocmenu2-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 10px;
    border: 1px solid #D8DEE8;
    border-radius: 6px;
    background: #FFFFFF;
    color: #1565C0;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

    .ocmenu2-trigger:hover {
        background: #EEF5FD;
        border-color: #1565C0;
    }

.ocmenu2-wrapper--open .ocmenu2-trigger {
    background: #E3F0FC;
    border-color: #1565C0;
    box-shadow: 0 0 0 2px rgba(21, 101, 192, 0.15);
}

.ocmenu2-trigger-icon {
    font-size: 12px;
}

.ocmenu2-trigger-chevron {
    font-size: 10px;
    transition: transform .15s ease;
}

.ocmenu2-wrapper--open .ocmenu2-trigger-chevron {
    transform: rotate(180deg);
}


.ocmenu2-panel {
    /* display: none;*/
    position: fixed; /* antes: absolute */
    width: 236px;
    background: #FFFFFF;
    border: 1px solid #E3E7EE;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .14), 0 2px 6px rgba(15, 23, 42, .06);
    padding: 6px;
    z-index: var(--z-modal); /* D-51 (era 9999); va después del fondo en el DOM */
    max-height: min(70vh, 420px);
    overflow-y: auto;
}

/*.ocmenu2-wrapper--open .ocmenu2-panel {
        display: block;
    }*/

.ocmenu2-group + .ocmenu2-group {
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px solid #EEF1F5;
}

.ocmenu2-group-label {
    display: block;
    padding: 4px 8px 3px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #94A3B8;
}

.ocmenu2-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #334155;
    font-size: 12.5px;
    text-align: left;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color .12s ease;
}

    .ocmenu2-item:hover {
        background: #F1F5F9;
    }

.ocmenu2-item--disabled {
    color: #B6BECB;
    cursor: not-allowed;
}

    .ocmenu2-item--disabled:hover {
        background: transparent;
    }

    .ocmenu2-item--disabled .ocmenu2-item-icon {
        color: #C7CDD8;
    }

.ocmenu2-item--danger {
    color: #DC2626;
}

    .ocmenu2-item--danger:hover {
        background: #FEF2F2;
    }

.ocmenu2-item-icon {
    flex: 0 0 16px;
    font-size: 12.5px;
    text-align: center;
    color: #1565C0;
}

.ocmenu2-item-icon--warning {
    color: #D97706;
}

.ocmenu2-item-icon--danger {
    color: #DC2626;
}

.ocmenu2-item span:not(.ocmenu2-item-badge) {
    flex: 1 1 auto;
}

.ocmenu2-item-badge {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 1px 6px;
    border-radius: 999px;
    background: #E8EDF3;
    color: #5B6B82;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .02em;
}

.ocmenu2-item-badge--full {
    background: #FEF3C7;
    color: #92400E;
}
/*   .inv-repo-cell {
        padding: 4px 6px;
    }

    .inv-repo-group {
        display: flex;
        align-items: center;
        gap: 4px;
    } */

.inv-repo-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

.inv-repo-label {
    font-size: 9px;
    color: var(--c-text-3);
    line-height: 1;
}

/*   .inv-repo-input {
        width: 40px;
        height: 24px;
        text-align: center;
        font-size: 12px;
        border: 1px solid #dfe3e8;
        border-radius: 4px;
        padding: 0 2px;
    }

        .inv-repo-input:focus {
            outline: none;
            border-color: #3B5BDB;
        } */

.inv-repo-save {
    height: 24px;
    width: 24px;
    margin-left: 2px;
    border: none;
    background: transparent;
    color: #3B5BDB;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .inv-repo-save:disabled {
        color: var(--c-text-3);
        cursor: default;
    }
.inv-table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
}

    .inv-table td, .inv-table th {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.inv-cod {
    line-height: 1.2;
}

.inv-cod-main {
    font-weight: 600;
    font-size: clamp(11px, 0.95vw, 13px);
    color: var(--c-text-1);
}

.inv-cod-id {
    font-size: clamp(8px, 0.55vw, 9px);
    color: var(--c-text-3);
    font-weight: 400;
    letter-spacing: 0.2px;
}
.inv-repo-cell {
    padding: 4px 6px;
}

.inv-repo-group {
    display: flex;
    align-items: center;
    gap: 3px;
}

.inv-repo-input {
    width: 40px;
    height: 24px;
    text-align: center;
    font-size: 11px;
    border: 1px solid #dfe3e8;
    border-radius: 4px;
    padding: 0 2px;
}

    .inv-repo-input::placeholder {
        color: var(--c-text-3);
        font-size: 9px;
    }

    .inv-repo-input:focus {
        outline: none;
        border-color: #3B5BDB;
    }
.inv-table-scroll {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid #C7D6F0;
    background: #FFFFFF;
}

.inv-table {
    width: 100%;
    min-width: 920px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13.5px;
}

    .inv-table thead th {
        background: #1D4ED8;
        color: #FFFFFF;
        font-weight: 600;
        font-size: 12px;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        padding: 12px 10px;
        text-align: left;
        position: sticky;
        top: 0;
        z-index: 2;
        border-bottom: 2px solid #0F3494;
    }

        .inv-table thead th.sortable {
            cursor: pointer;
            transition: background 0.15s;
        }

            .inv-table thead th.sortable:hover {
                background: #173FBE;
            }

        .inv-table thead th i {
            margin-left: 4px;
            opacity: 0.75;
            font-size: 11px;
        }

    .inv-table tbody tr {
        border-bottom: 1px solid #E8EEF9;
        cursor: pointer;
        transition: background 0.12s;
    }

        .inv-table tbody tr:nth-child(even) {
            background: #F7FAFF;
        }

        .inv-table tbody tr:hover {
            background: #E8EEF9;
        }

        .inv-table tbody tr.selected {
            background: #DCE7FB;
            box-shadow: inset 3px 0 0 #1D4ED8;
        }

    .inv-table td {
        padding: 10px;
        vertical-align: middle;
        color: #1E2A44;
    }

.inv-icon-info {
    color: #8DA6D6;
    font-size: 13px;
}

.inv-cod-main {
    font-weight: 700;
    color: #0F3494;
    font-size: 11.5px;
}

.inv-cod-id {
    font-size: 10.5px;
    color: #7C8CAE;
    margin-top: 2px;
}

.inv-desc {
    font-weight: 500;
    color: #1E2A44;
}

.inv-muted {
    color: #7C8CAE;
    font-size: 12px;
}

.inv-repo-cell {
    padding: 8px 10px;
}

.inv-repo-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

.inv-repo-input {
    width: 42px;
    border: 1px solid #C7D6F0;
    border-radius: 6px;
    padding: 5px 5px;
    font-size: 11.5px;
    text-align: center;
    color: #1E2A44;
    background: #FFFFFF;
}

    .inv-repo-input:focus {
        outline: none;
        border-color: #1D4ED8;
        box-shadow: 0 0 0 2px #DCE7FB;
    }

    .inv-repo-input:disabled {
        background: #F1F4FA;
        color: #B4C1DA;
    }

.inv-save-btn {
    border: none;
    background: #1D4ED8;
    color: #FFFFFF;
    border-radius: 6px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

    .inv-save-btn:hover:not(:disabled) {
        background: #0F3494;
    }

    .inv-save-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

.inv-table td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: #1E2A44;
}

.inv-disp-cell {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 90px;
}

    .inv-disp-cell > span {
        text-align: right;
        font-weight: 700;
        font-size: 13.5px;
    }

.inv-disp-ok {
    color: #16803C;
}

.inv-disp-warn {
    color: #B45309;
}

.inv-disp-danger {
    color: #DC2626;
}

.inv-cov-bar {
    display: flex;
    align-items: center;
    gap: 6px;
}

.inv-bar-bg {
    flex: 1;
    background: #E8EEF9;
    border-radius: 99px;
    height: 6px;
    overflow: hidden;
}

.inv-bar-f {
    height: 100%;
    border-radius: 99px;
    transition: width 0.3s ease;
}

.inv-cov-txt {
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
}

.inv-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

    .inv-badge i {
        font-size: 12px;
    }

.inv-badge--ok {
    background: #DCFCE7;
    color: #15803D;
}

.inv-badge--warn {
    background: #FEF3C7;
    color: #B45309;
}

.inv-badge--danger {
    background: #FEE2E2;
    color: #DC2626;
}

.inv-badge--neutral {
    background: #E8EEF9;
    color: #375488;
}

.inv-func-tag {
    cursor: pointer;
    color: #1D4ED8;
    font-weight: 700;
    font-size: 11.5px;
    border-bottom: 1.5px dashed #1D4ED8;
    padding-bottom: 1px;
}

    .inv-func-tag:hover {
        color: #0F3494;
    }

.inv-func-tag--warn {
    color: #B45309;
    border-bottom-color: #B45309;
}

    .inv-func-tag--warn:hover {
        color: #92400E;
    }

.inv-loading-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
}

.inv-skeleton-row {
    height: 40px;
    border-radius: 8px;
    background: linear-gradient(90deg, #EEF3FB 25%, #E0E9F8 37%, #EEF3FB 63%);
    background-size: 400% 100%;
    animation: inv-shimmer 1.4s ease infinite;
}

@keyframes inv-shimmer {
    0%

{
    background-position: 100% 50%;
}

100% {
    background-position: 0 50%;
}

}

/* Pantallas medianas / tablets */
@media (max-width: 992px) {
    .inv-table

{
    font-size: 14px;
}

.inv-table thead th {
    font-size: 11.5px;
    padding: 11px 8px;
}

.inv-table td {
    padding: 11px 8px;
}

}

/* Pantallas pequeñas / móviles: en vez de encoger, se agranda para legibilidad */
@media (max-width: 600px) {
    .inv-table

{
    font-size: 15px;
    min-width: 760px;
}

.inv-table thead th {
    font-size: 13px;
    padding: 12px 8px;
}

.inv-table td {
    padding: 12px 8px;
}

.inv-cod-main {
    font-size: 11.5px;
}

.inv-repo-input {
    width: 45px;
    height: 32px;
    font-size: 11.5px;
}

.inv-save-btn {
    width: 32px;
    height: 32px;
}

.inv-badge {
    font-size: 12px;
    padding: 6px 10px;
}

}

/* ════ wwwroot/css/inventario.css (se cargaba con <link> al final de la página, por eso va después) ════ */
/* ================================================================
   inventario.css — Vantastic Factura+
   Centro Inteligente de Inventario
   Fiel al mockup interactivo entregado
================================================================ */

/* ── Variables ─────────────────────────────────────────────── */
/*:root {
  --c-bg-1:   #FFFFFF;
  --c-bg-2:   #F7F5EF;
  --c-bg-3:   #F1EFE8;
  --c-border: #E3E1D8;
  --c-border2:#CCCBC3;
  --c-text-1: #18181B;
  --c-text-2: #6B6A65;
  --c-text-3: #9C9B94;
  --c-brand:  #185FA5;
  --c-brand-h:#0C447C;
  --c-brand-bg:#E6F1FB;
  --c-danger: #A32D2D;
  --c-danger-bg:#FCEBEB;
  --c-danger-border:#D46060;
  --c-warn:   #854F0B;
  --c-warn-bg:#FAEEDA;
  --c-warn-border:#BA7517;
  --c-ok:     #3B6D11;
  --c-ok-bg:  #EAF3DE;
  --c-gray-bg:#F1EFE8;
  --c-gray-tx:#444441;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;

  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.07);
  --shadow-md: 0 2px 8px rgba(0,0,0,.10);
}*/
.inv-scope {
    /* ─────────────────────────────────────────────
     BACKGROUNDS
  ───────────────────────────────────────────── */

    --c-bg-1: #FFFFFF;
    --c-bg-2: #F7F8FC;
    --c-bg-3: #F1F3F8;
    --c-bg-4: #ECEFF5;
    /* ─────────────────────────────────────────────
     BORDERS
  ───────────────────────────────────────────── */

    --c-border: #E3E7EF;
    --c-border2: #D4DAE5;
    --c-divider: #EEF1F6;
    /* ─────────────────────────────────────────────
     TEXTOS
  ───────────────────────────────────────────── */

    --c-text-1: #202635;
    --c-text-2: #5F6B84;
    --c-text-3: #8A93A8;
    --c-text-4: #B2B8C5;
    /* ─────────────────────────────────────────────
     BRAND / AZUL PRINCIPAL
  ───────────────────────────────────────────── */

    --c-brand: #2D6CDF;
    --c-brand-h: #1E56BC;
    --c-brand-soft: #EEF4FF;
    --c-brand-bg: #F5F8FF;
    --c-brand-bd: #C9DBFF;
    /* ─────────────────────────────────────────────
     SUCCESS
  ───────────────────────────────────────────── */

    --c-ok: #3C8C4E;
    --c-ok-bg: #EDF8F0;
    --c-ok-border: #BFE3C8;
    /* ─────────────────────────────────────────────
     WARNING
  ───────────────────────────────────────────── */

    --c-warn: #B7791F;
    --c-warn-bg: #FFF8EB;
    --c-warn-border: #F0D9A7;
    /* ─────────────────────────────────────────────
     DANGER
  ───────────────────────────────────────────── */

    --c-danger: #D14B4B;
    --c-danger-bg: #FFF1F1;
    --c-danger-border: #F2B9B9;
    /* ─────────────────────────────────────────────
     INFO / IA
  ───────────────────────────────────────────── */

    --c-ia: #6B5BEB;
    --c-ia-bg: #F3F0FF;
    --c-ia-border: #D8D1FF;
    /* ─────────────────────────────────────────────
     GRISES
  ───────────────────────────────────────────── */

    --c-gray-bg: #F5F7FA;
    --c-gray-soft: #FAFBFD;
    --c-gray-tx: #626B7F;
    /* ─────────────────────────────────────────────
     SOMBRAS SUAVES
  ───────────────────────────────────────────── */

    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 2px 8px rgba(15, 23, 42, 0.06);
    --shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.08);
    /* ─────────────────────────────────────────────
     RADIOS
  ───────────────────────────────────────────── */

    --radius-xs: 5px;
    --radius-sm: 5px;
    --radius-md: 5px;
    --radius-lg: 5px;
    --radius-xl: 5px;
    /* ─────────────────────────────────────────────
     TIPOGRAFÍA
  ───────────────────────────────────────────── */

    --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
    /* ─────────────────────────────────────────────
     TRANSICIONES
  ───────────────────────────────────────────── */

    --tr-fast: .15s ease;
    --tr-normal: .25s ease;
}

/* ── Reset mínimo ───────────────────────────────────────────── */
.inv-app *, .inv-app *::before, .inv-app *::after {
    box-sizing: border-box;
}

.inv-app {
    font-family: var(--font-main);
    font-size: 13px;
    color: var(--c-text-1);
    background: var(--c-bg-2);
    border-radius: var(--radius-lg);
    padding: 12px;
    min-height: 600px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ══════════════════════════════════════════════════════════
   TOP BAR
══════════════════════════════════════════════════════════ */
.inv-topbar {
    background: var(--c-bg-1);
    border: 0.5px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.inv-brand {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--c-brand);
    white-space: nowrap;
}

    .inv-brand .ti {
        font-size: 15px;
    }

.inv-topbar-sep {
    width: 1px;
    height: 16px;
    background: var(--c-border);
    flex-shrink: 0;
}

.inv-topbar-title {
    font-size: 12px;
    color: var(--c-text-2);
    flex: 1;
    white-space: nowrap;
}

.inv-topbar-filters {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.inv-topbar-actions {
    display: flex;
    gap: 5px;
    align-items: center;
    flex-wrap: wrap;
}

.inv-sel {
    font-size: 11px;
    padding: 4px 8px;
    border-radius: var(--radius-md);
    border: 0.5px solid var(--c-border2);
    background: var(--c-bg-2);
    color: var(--c-text-1);
    cursor: pointer;
    outline: none;
    transition: border-color .12s;
}

    .inv-sel:focus {
        border-color: var(--c-brand);
    }

/* ══════════════════════════════════════════════════════════
   BOTONES
══════════════════════════════════════════════════════════ */
.inv-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    padding: 5px 11px;
    border-radius: var(--radius-md);
    border: 0.5px solid var(--c-border2);
    background: transparent;
    color: var(--c-text-2);
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s, border-color .12s, color .12s;
    font-family: var(--font-main);
    line-height: 1;
}

    .inv-btn:hover {
        background: var(--c-bg-3);
        color: var(--c-text-1);
    }

    .inv-btn:focus-visible {
        outline: 2px solid var(--c-brand);
        outline-offset: 2px;
    }

    .inv-btn:disabled {
        opacity: .45;
        cursor: not-allowed;
    }

.inv-btn-primary {
    background: var(--c-brand);
    color: #fff;
    border-color: var(--c-brand);
}

    .inv-btn-primary:hover {
        background: var(--c-brand-h);
        border-color: var(--c-brand-h);
        color: #fff;
    }

.inv-btn-sm {
    font-size: 10px;
    padding: 3px 8px;
}

/* ══════════════════════════════════════════════════════════
   BANNER DE ALERTAS
══════════════════════════════════════════════════════════ */
.inv-alert-banner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    background: var(--c-warn-bg);
    border: 0.5px solid var(--c-warn-border);
    border-radius: var(--radius-md);
    padding: 7px 12px;
    font-size: 11px;
    color: #633806;
    animation: fadeSlideIn .2s ease;
}

    .inv-alert-banner .ti {
        font-size: 14px;
        color: #854F0B;
        flex-shrink: 0;
    }

.inv-alert-link {
    background: none;
    border: none;
    color: #854F0B;
    font-weight: 500;
    cursor: pointer;
    text-decoration: underline;
    font-size: 11px;
    padding: 0;
}

.inv-ml-auto {
    margin-left: auto;
}

/* ══════════════════════════════════════════════════════════
   KPI CARDS
══════════════════════════════════════════════════════════ */
.inv-kpi-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 7px;
}

@media (max-width: 900px) {
    .inv-kpi-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 520px) {
    .inv-kpi-row {
        grid-template-columns: 1fr;
    }
}

.inv-kpi {
    background: var(--c-bg-1);
    border: 0.5px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
    position: relative;
    overflow: hidden;
}

    .inv-kpi::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 3px;
        height: 100%;
        background: transparent;
        transition: background .15s;
    }

    .inv-kpi:hover {
        border-color: var(--c-brand);
        box-shadow: var(--shadow-sm);
    }

.inv-kpi--danger::before {
    background: var(--c-danger);
}

.inv-kpi--warn::before {
    background: var(--c-warn);
}

.inv-kpi-lbl {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: var(--c-text-2);
    margin-bottom: 3px;
}

.inv-kpi-val {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--c-text-1);
}

.inv-kpi--danger .inv-kpi-val {
    color: var(--c-danger);
}

.inv-kpi--warn .inv-kpi-val {
    color: var(--c-warn);
}

.inv-blue {
    color: var(--c-brand);
}

.inv-kpi-sub {
    font-size: 10px;
    color: var(--c-text-3);
    margin-top: 2px;
}

/* ══════════════════════════════════════════════════════════
   BODY GRID (árbol + main)
══════════════════════════════════════════════════════════ */
.inv-body-grid {
    display: grid;
    grid-template-columns: 164px 1fr;
    gap: 8px;
    flex: 1;
}

@media (max-width: 700px) {
    .inv-body-grid {
        grid-template-columns: 1fr;
    }
}

/* ── ÁRBOL ─────────────────────────────────────────────── */
.inv-tree {
    background: var(--c-bg-1);
    border: 0.5px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: 10px 8px;
    align-self: start;
    position: sticky;
    top: 8px;
    overflow: auto;
    height: 72vh;
}

.inv-tree-title {
    font-size: 10px;
    font-weight: 600;
    color: var(--c-text-2);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 8px;
    padding-left: 4px;
}

.inv-tree-node {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 6px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 11px;
    color: var(--c-text-1);
    transition: background .12s;
    user-select: none;
}

    .inv-tree-node:hover {
        background: var(--c-bg-2);
    }

    .inv-tree-node.active {
        background: var(--c-brand-bg);
        color: var(--c-brand-h);
        font-weight: 500;
    }

    .inv-tree-node .ti {
        font-size: 13px;
        flex-shrink: 0;
    }

.inv-tree-badge {
    margin-left: auto;
    font-size: 9px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 20px;
}

.inv-badge-red {
    background: var(--c-danger-bg);
    color: #791F1F;
}

.inv-badge-amber {
    background: var(--c-warn-bg);
    color: #633806;
}

.inv-badge-blue {
    background: var(--c-brand-bg);
    color: var(--c-brand-h);
}

.inv-tree-child {
    padding-left: 14px;
}

/* ══════════════════════════════════════════════════════════
   PANEL PRINCIPAL
══════════════════════════════════════════════════════════ */
.inv-main-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

/* ── TOOLBAR + TABLA ─────────────────────────────────────── */
.inv-table-wrap {
    background: var(--c-bg-1);
    border: 0.5px solid var(--c-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.inv-table-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-bottom: 0.5px solid var(--c-border);
    flex-wrap: wrap;
}

.inv-search {
    flex: 1;
    min-width: 160px;
    font-size: 11px;
    padding: 5px 10px;
    border-radius: var(--radius-md);
    border: 0.5px solid var(--c-border2);
    background: var(--c-bg-2);
    color: var(--c-text-1);
    outline: none;
    font-family: var(--font-main);
    transition: border-color .12s;
}

    .inv-search:focus {
        border-color: var(--c-brand);
    }

.inv-filter-chips {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.inv-chip {
    font-size: 10px;
    padding: 3px 9px;
    border-radius: 5px;
    border: 0.5px solid var(--c-border2);
    background: transparent;
    color: var(--c-text-2);
    cursor: pointer;
    transition: all .12s;
    font-family: var(--font-main);
}

    .inv-chip:hover {
        background: var(--c-bg-3);
    }

    .inv-chip.active {
        background: var(--c-brand);
        color: #fff;
        border-color: var(--c-brand);
    }

.inv-chip-red.active {
    background: var(--c-danger);
    color: #fff;
    border-color: var(--c-danger);
}

.inv-chip-amber.active {
    background: var(--c-warn);
    color: #fff;
    border-color: var(--c-warn);
}

/* ── TABLA ─────────────────────────────────────────────── */
.inv-table-scroll {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 420px;
}

.inv-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

    .inv-table thead {
        position: sticky;
        top: 0;
        z-index: 2;
    }

    .inv-table th {
        font-size: 10px;
        font-weight: 600;
        color: var(--c-text-2);
        background: var(--c-bg-2);
        padding: 6px 8px;
        text-align: left;
        border-bottom: 0.5px solid var(--c-border);
        white-space: nowrap;
        overflow: hidden;
        user-select: none;
    }

        .inv-table th.sortable {
            cursor: pointer;
        }

            .inv-table th.sortable:hover {
                color: var(--c-text-1);
            }

        .inv-table th.num, .inv-table td.num {
            text-align: right;
        }

    .inv-table td {
        font-size: 11px;
        padding: 6px 8px;
        border-bottom: 0.5px solid var(--c-border);
        vertical-align: middle;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

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

    .inv-table tr.selected td {
        background: var(--c-brand-bg);
    }

    .inv-table tr:hover:not(.selected) td {
        background: var(--c-bg-2);
        cursor: pointer;
    }

.inv-cod {
    font-size: 10px;
    color: var(--c-text-2);
}

.inv-desc {
    font-size: 11px;
}

.inv-muted {
    color: var(--c-text-3);
}

.inv-icon-info {
    font-size: 13px;
    color: var(--c-text-3);
}

/* Disponible + barra de cobertura */
.inv-disp-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-end;
}

.inv-cov-bar {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 90px;
}

.inv-bar-bg {
    height: 4px;
    border-radius: 2px;
    background: var(--c-border);
    flex: 1;
}

.inv-bar-f {
    height: 100%;
    border-radius: 2px;
    transition: width .3s ease;
}

.inv-cov-txt {
    font-size: 10px;
    min-width: 26px;
    text-align: right;
}

.inv-neg {
    color: var(--c-danger);
    font-weight: 600;
}

.inv-pos {
    color: var(--c-ok);
}

/* Footer de la tabla */
.inv-table-footer {
    padding: 5px 12px;
    font-size: 10px;
    color: var(--c-text-3);
    border-top: 0.5px solid var(--c-border);
}

/* ── BADGES ─────────────────────────────────────────────── */
.inv-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 20px;
    font-weight: 600;
    white-space: nowrap;
}

    .inv-badge .ti {
        font-size: 9px;
    }

.inv-badge--danger {
    background: var(--c-danger-bg);
    color: #791F1F;
}

.inv-badge--warn {
    background: var(--c-warn-bg);
    color: #633806;
}

.inv-badge--ok {
    background: var(--c-ok-bg);
    color: #27500A;
}

.inv-badge--blue {
    background: var(--c-brand-bg);
    color: var(--c-brand-h);
}

.inv-badge--gray {
    background: var(--c-gray-bg);
    color: var(--c-gray-tx);
}

/* ── FUNC TAG ─────────────────────────────────────────────── */
.inv-func-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 4px;
    background: #EEEDFE;
    color: #3C3489;
    font-family: var(--font-mono);
    cursor: pointer;
    border: 0.5px solid #AFA9EC;
    transition: background .12s;
    white-space: nowrap;
}

    .inv-func-tag:hover {
        background: #CECBF6;
    }

.inv-func-tag--warn {
    background: var(--c-warn-bg);
    color: var(--c-warn);
    border-color: var(--c-warn-border);
}

.inv-fn-ref {
    font-size: 10px;
    color: var(--c-text-3);
    margin-bottom: 8px;
}

/* ══════════════════════════════════════════════════════════
   PANEL DE DETALLE
══════════════════════════════════════════════════════════ */
.inv-detail-panel {
    background: var(--c-bg-1);
    border: 0.5px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: 12px;
    animation: fadeSlideIn .15s ease;
}

.inv-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    gap: 8px;
}

.inv-detail-title {
    font-size: 12px;
    font-weight: 600;
}

/* Health Score */
.inv-health-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 0.5px solid var(--c-border);
}

.inv-health-label {
    font-size: 10px;
    color: var(--c-text-2);
    min-width: 70px;
}

.inv-health-bar-wrap {
    flex: 1;
    height: 6px;
    background: var(--c-border);
    border-radius: 3px;
    overflow: hidden;
}

.inv-health-bar {
    height: 100%;
    border-radius: 3px;
    transition: width .4s ease;
}

.inv-health-val {
    font-size: 11px;
    font-weight: 600;
    min-width: 54px;
}

/* Tabs */
.inv-detail-tabs {
    display: flex;
    gap: 2px;
    margin-bottom: 12px;
    border-bottom: 0.5px solid var(--c-border);
}

.inv-dtab {
    font-size: 11px;
    padding: 6px 12px;
    cursor: pointer;
    color: var(--c-text-2);
    border: none;
    background: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -0.5px;
    transition: color .12s, border-color .12s;
    font-family: var(--font-main);
    white-space: nowrap;
}

    .inv-dtab:hover {
        color: var(--c-text-1);
    }

    .inv-dtab.active {
        color: var(--c-brand);
        border-bottom-color: var(--c-brand);
        font-weight: 600;
    }

    .inv-dtab:focus-visible {
        outline: 2px solid var(--c-brand);
        outline-offset: 2px;
    }

/* Sucursales */
.inv-suc-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}

@media (max-width: 600px) {
    .inv-suc-grid {
        grid-template-columns: 1fr;
    }
}

.inv-suc-card {
    border: 0.5px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: 8px 10px;
}

.inv-suc-name {
    font-size: 10px;
    font-weight: 600;
    color: var(--c-text-2);
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.inv-suc-stocks {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3px;
}

.inv-suc-col {
    text-align: center;
}

.inv-suc-col-lbl {
    font-size: 8px;
    color: var(--c-text-3);
}

.inv-suc-col-val {
    font-size: 12px;
    font-weight: 600;
}

.inv-transfer-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    color: var(--c-brand);
    cursor: pointer;
    margin-top: 6px;
    padding-top: 5px;
    border-top: 0.5px solid var(--c-border);
    background: none;
    border-left: none;
    border-right: none;
    border-bottom: none;
    font-family: var(--font-main);
    width: 100%;
    text-align: left;
}

    .inv-transfer-btn:hover {
        color: var(--c-brand-h);
    }

/* Valorización */
.inv-val-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 8px;
}

.inv-val-cell {
    text-align: center;
    padding: 6px;
}

.inv-val-lbl {
    font-size: 9px;
    color: var(--c-text-2);
    margin-bottom: 2px;
}

.inv-val-val {
    font-size: 13px;
    font-weight: 600;
}

/* Sparkline */
.inv-spark-wrap {
    border-top: 0.5px solid var(--c-border);
    padding-top: 8px;
    margin-top: 4px;
}

.inv-spark {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 28px;
    margin-top: 4px;
}

.inv-spark-bar {
    flex: 1;
    border-radius: 1px 1px 0 0;
    min-height: 2px;
    opacity: .85;
}

.inv-spark-labels {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    color: var(--c-text-3);
    margin-top: 2px;
}

/* Diagnóstico */
.inv-diag-ok {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 0;
    color: var(--c-text-2);
    font-size: 11px;
}

    .inv-diag-ok .ti {
        font-size: 20px;
        color: var(--c-ok);
    }

.inv-diag-box {
    border-radius: var(--radius-md);
    padding: 8px 10px;
    margin-bottom: 8px;
}

.inv-diag-box--danger {
    border: 0.5px solid var(--c-danger-border);
    background: var(--c-danger-bg);
}

.inv-diag-box--warn {
    border: 0.5px solid var(--c-warn-border);
    background: var(--c-warn-bg);
}

.inv-diag-title {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 600;
    margin-bottom: 4px;
}

.inv-diag-box--danger .inv-diag-title {
    color: #791F1F;
}

.inv-diag-box--warn .inv-diag-title {
    color: #633806;
}

.inv-diag-body {
    font-size: 10px;
    line-height: 1.5;
}

.inv-diag-box--danger .inv-diag-body {
    color: var(--c-danger);
}

.inv-diag-box--warn .inv-diag-body {
    color: var(--c-warn);
}

.inv-diag-actions {
    display: flex;
    gap: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
}

/* ══════════════════════════════════════════════════════════
   PANEL OC SUGERIDA
══════════════════════════════════════════════════════════ */
.inv-oc-panel {
    background: var(--c-bg-1);
    border: 0.5px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: 12px;
    animation: fadeSlideIn .15s ease;
}

.inv-oc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--c-text-1);
}

    .inv-oc-header .ti {
        font-size: 14px;
        color: var(--c-brand);
    }

.inv-oc-group {
    margin-bottom: 12px;
}

.inv-oc-proveedor {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--c-text-1);
}

.inv-table-sm td {
    font-size: 10px;
    padding: 4px 8px;
}

.inv-table-sm th {
    font-size: 9px;
}

/* ══════════════════════════════════════════════════════════
   ASISTENTE IA
══════════════════════════════════════════════════════════ */
/*.inv-ia-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 1000;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 16px;
    animation: fadeIn .15s ease;
}

.inv-ia-panel {
    background: var(--c-bg-1);
    border: 0.5px solid var(--c-border);
    border-radius: var(--radius-lg);
    width: min(460px, 100%);
    height: min(600px, 90vh);
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
    animation: slideUp .2s ease;
    overflow: hidden;
}*/
/*.inv-ia-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    padding: 0;
    pointer-events: none;
}

.inv-ia-panel {
    pointer-events: auto;
    position: fixed;
    right: 16px;
    bottom: 16px;
    background: var(--c-bg-1);
    border: 0.5px solid var(--c-border);
    border-radius: var(--radius-lg);
    width: min(460px, calc(100vw - 24px));
    height: min(600px, calc(100vh - 24px));
    display: flex;
    flex-direction: column;
    box-shadow: 0 12px 40px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.08);
    animation: slideUp .18s ease;
    overflow: hidden;
}*/
/* ══════════════════════════════════════════════════════════
   OVERLAY IA
══════════════════════════════════════════════════════════ */

.inv-ia-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,.42);
    z-index: var(--z-modal); /* D-51 (era 999999) */
    overflow: hidden;
}

/* ══════════════════════════════════════════════════════════
   PANEL IA
══════════════════════════════════════════════════════════ */

.inv-ia-panel {
    position: absolute;
    right: 75px;
    bottom: 16px;
    width: 460px;
    height: 600px;
    max-width: 100vw;
    max-height: 100vh;
    background: var(--c-bg-1);
    border-left: 1px solid var(--c-border);
    border-top: 1px solid var(--c-border);
    border-radius: 12px 0 0 0;
    box-shadow: -4px -4px 24px rgba(0,0,0,.10);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideUp .18s ease;
}

.inv-ia-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 0.5px solid var(--c-border);
    background: var(--c-bg-2);
    flex-shrink: 0;
}

.inv-ia-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.inv-ia-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--c-brand);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .inv-ia-avatar .ti {
        font-size: 16px;
    }

.inv-ia-avatar--sm {
    width: 24px;
    height: 24px;
}

    .inv-ia-avatar--sm .ti {
        font-size: 12px;
    }

.inv-ia-titulo {
    font-size: 12px;
    font-weight: 600;
}

.inv-ia-subtitulo {
    font-size: 10px;
    color: var(--c-text-3);
}

.inv-ia-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scroll-behavior: smooth;
}

/* Bienvenida */
.inv-ia-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    padding: 24px 16px;
    flex: 1;
}

.inv-ia-welcome-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--c-brand-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-brand);
}

    .inv-ia-welcome-icon .ti {
        font-size: 26px;
    }

.inv-ia-welcome-title {
    font-size: 14px;
    font-weight: 600;
}

.inv-ia-welcome-sub {
    font-size: 11px;
    color: var(--c-text-2);
    max-width: 300px;
}

.inv-ia-sugerencias {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    max-width: 320px;
}

.inv-ia-sugerencia {
    text-align: left;
    font-size: 11px;
    padding: 7px 12px;
    border-radius: var(--radius-md);
    border: 0.5px solid var(--c-border2);
    background: var(--c-bg-2);
    color: var(--c-text-1);
    cursor: pointer;
    transition: background .12s, border-color .12s;
    font-family: var(--font-main);
}

    .inv-ia-sugerencia:hover {
        background: var(--c-brand-bg);
        border-color: var(--c-brand);
    }

/* Mensajes */
.inv-ia-msg {
    display: flex;
    align-items: flex-end;
    gap: 7px;
}

.inv-ia-msg--user {
    flex-direction: row-reverse;
}

.inv-ia-bubble {
    max-width: 80%;
    font-size: 12px;
    line-height: 1.5;
    padding: 8px 11px;
    border-radius: var(--radius-lg);
}

.inv-ia-bubble--user {
    background: var(--c-brand);
    color: #fff;
    border-bottom-right-radius: 2px;
}

.inv-ia-bubble--ia {
    background: var(--c-bg-2);
    color: var(--c-text-1);
    border: 0.5px solid var(--c-border);
    border-bottom-left-radius: 2px;
}

    .inv-ia-bubble--ia code {
        font-family: var(--font-mono);
        font-size: 10px;
        background: var(--c-border);
        padding: 1px 4px;
        border-radius: 2px;
    }

    .inv-ia-bubble--ia strong {
        font-weight: 600;
    }

    .inv-ia-bubble--ia li {
        margin-left: 14px;
    }

/* Loading dots */
.inv-ia-bubble--loading {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 32px;
}

    .inv-ia-bubble--loading span {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--c-text-3);
        animation: dotPulse 1.2s infinite;
    }

        .inv-ia-bubble--loading span:nth-child(2) {
            animation-delay: .2s;
        }

        .inv-ia-bubble--loading span:nth-child(3) {
            animation-delay: .4s;
        }

/* Chips contextuales */
.inv-ia-chips-row {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    padding: 6px 14px;
    border-top: 0.5px solid var(--c-border);
}

.inv-ia-chip {
    font-size: 10px;
    padding: 3px 10px;
    border-radius: 20px;
    border: 0.5px solid var(--c-border2);
    background: var(--c-bg-2);
    color: var(--c-text-2);
    cursor: pointer;
    transition: all .12s;
    font-family: var(--font-main);
}

    .inv-ia-chip:hover {
        background: var(--c-brand-bg);
        color: var(--c-brand);
        border-color: var(--c-brand);
    }

/* Footer input */
.inv-ia-footer {
    display: flex;
    gap: 6px;
    padding: 10px 14px;
    border-top: 0.5px solid var(--c-border);
    background: var(--c-bg-2);
    flex-shrink: 0;
}

.inv-ia-input {
    flex: 1;
    font-size: 12px;
    padding: 7px 10px;
    border-radius: var(--radius-md);
    border: 0.5px solid var(--c-border2);
    background: var(--c-bg-1);
    color: var(--c-text-1);
    resize: none;
    font-family: var(--font-main);
    outline: none;
    transition: border-color .12s;
    line-height: 1.4;
}

    .inv-ia-input:focus {
        border-color: var(--c-brand);
    }

    .inv-ia-input:disabled {
        opacity: .6;
    }

.inv-ia-send {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    border: 0.5px solid var(--c-border2);
    background: var(--c-brand);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    align-self: flex-end;
    transition: background .12s;
}

    .inv-ia-send:hover {
        background: var(--c-brand-h);
    }

    .inv-ia-send:disabled {
        background: var(--c-border2);
        cursor: not-allowed;
    }

    .inv-ia-send .ti {
        font-size: 15px;
    }

/* ══════════════════════════════════════════════════════════
   SKELETON / LOADING
══════════════════════════════════════════════════════════ */
.inv-skeleton {
    background: linear-gradient(90deg, var(--c-bg-3) 25%, var(--c-border) 50%, var(--c-bg-3) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.2s infinite;
    border-radius: var(--radius-md);
    min-height: 60px;
}

.inv-loading-rows {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 4px 0;
}

.inv-skeleton-row {
    height: 36px;
    background: linear-gradient(90deg, var(--c-bg-3) 25%, var(--c-border) 50%, var(--c-bg-3) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.2s infinite;
}

    .inv-skeleton-row:nth-child(even) {
        animation-delay: .1s;
    }

/* ══════════════════════════════════════════════════════════
   ANIMACIONES
══════════════════════════════════════════════════════════ */
@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeSlideIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes dotPulse {
    0%, 80%, 100% {
        transform: scale(0.7);
        opacity: .5;
    }

    40% {
        transform: scale(1);
        opacity: 1;
    }
}

.inv-spin {
    animation: spin .8s linear infinite;
}

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

/* ══════════════════════════════════════════════════════════
   RESPONSIVE GENERAL
══════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
    .inv-topbar-title {
        display: none;
    }

    .inv-ia-panel {
        width: 100%;
        height: 90vh;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }

    .inv-ia-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .inv-suc-grid {
        grid-template-columns: 1fr;
    }

    .inv-val-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}