/* ═══════════════════════════════════════════════════════════════
     NAMESPACE: .invd-*
     Todas las variables y clases están prefijadas con "invd-"
     para no interferir con el CSS del sistema huésped.
     El scope se limita al wrapper #invd-app.
  ═══════════════════════════════════════════════════════════════ */

  /* ── Variables scoped al wrapper ─────────────────────────────── */
  #invd-app {
    /* Superficie */
    --invd-bg:        #F4F6FB;
    --invd-surface:   #FFFFFF;
    --invd-surface2:  #EEF1F8;
    --invd-border:    #DDE2EF;
    --invd-border2:   #C8CEDD;

    /* Tipografía */
    --invd-text:      #1A1D2E;
    --invd-text2:     #4A4F6A;
    --invd-muted:     #8B91AD;

    /* Acento principal: azul índigo */
    --invd-blue:      #3B6FE8;
    --invd-blue-lt:   #EBF0FD;
    --invd-blue-md:   #C2D0F8;

    /* Acento secundario: verde esmeralda */
    --invd-green:     #0EA472;
    --invd-green-lt:  #E6F7F2;

    /* Acento terciario: naranja ámbar */
    --invd-amber:     #D97706;
    --invd-amber-lt:  #FEF3C7;

    /* Peligro */
    --invd-red:       #DC3545;
    --invd-red-lt:    #FDECEA;

    /* Violeta */
    --invd-violet:    #7C3AED;
    --invd-violet-lt: #EDE9FE;

    /* Celeste */
    --invd-cyan:      #0891B2;
    --invd-cyan-lt:   #E0F2FE;

    /* Radio */
    --invd-r:         10px;
    --invd-r-sm:      6px;
    --invd-r-lg:      14px;

    /* Sombras */
    --invd-shadow-sm: 0 1px 3px rgba(30,40,90,.07), 0 1px 2px rgba(30,40,90,.05);
    --invd-shadow:    0 4px 16px rgba(30,40,90,.09), 0 1px 4px rgba(30,40,90,.06);
    --invd-shadow-lg: 0 12px 40px rgba(30,40,90,.14), 0 4px 12px rgba(30,40,90,.08);

    /* Fuentes */
    --invd-font:      'Sora', sans-serif;
    --invd-mono:      'JetBrains Mono', monospace;
  }

  /* ── Reset scoped ─────────────────────────────────────────────── */
  #invd-app,
  #invd-app *,
  #invd-app *::before,
  #invd-app *::after {
    box-sizing: border-box;
  }

  /* ── Wrapper raíz ─────────────────────────────────────────────── */
  #invd-app {
    display: flex;
    min-height: 100vh;
    background: var(--invd-bg);
    font-family: var(--invd-font);
    color: var(--invd-text);
    font-size: 14px;
    line-height: 1.5;
  }

  /* ══════════════════════════════════════════
     SIDEBAR
  ══════════════════════════════════════════ */
  .invd-sidebar {
    width: 224px;
    min-height: 100vh;
    background: var(--invd-surface);
    border-right: 1px solid var(--invd-border);
    position: fixed;
    top: 0; left: 0;
    display: flex;
    flex-direction: column;
    z-index: 100;
    box-shadow: var(--invd-shadow-sm);
  }

  .invd-sidebar__brand {
    padding: 24px 20px 18px;
    border-bottom: 1px solid var(--invd-border);
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .invd-sidebar__logo {
    width: 36px; height: 36px;
    background: var(--invd-blue);
    border-radius: var(--invd-r-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(59,111,232,.35);
  }
  .invd-sidebar__name {
    font-family: var(--invd-mono);
    font-size: 13px;
    font-weight: 500;
    color: var(--invd-text);
    letter-spacing: -.3px;
  }
  .invd-sidebar__name span {
    display: block;
    font-size: 10px;
    color: var(--invd-muted);
    font-family: var(--invd-font);
    font-weight: 400;
    letter-spacing: .3px;
    margin-top: 1px;
  }

  .invd-sidebar__nav {
    padding: 14px 10px;
    flex: 1;
  }
  .invd-sidebar__section {
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--invd-muted);
    padding: 10px 10px 4px;
    font-weight: 600;
  }
  .invd-sidebar__link {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    border-radius: var(--invd-r-sm);
    color: var(--invd-text2);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 2px;
    transition: background .15s, color .15s;
  }
  .invd-sidebar__link:hover {
    background: var(--invd-surface2);
    color: var(--invd-text);
    text-decoration: none;
  }
  .invd-sidebar__link.invd-active {
    background: var(--invd-blue-lt);
    color: var(--invd-blue);
  }
  .invd-sidebar__link i {
    width: 16px;
    text-align: center;
    font-size: 12px;
    opacity: .8;
  }

  .invd-sidebar__footer {
    padding: 14px 20px;
    border-top: 1px solid var(--invd-border);
    font-size: 10px;
    color: var(--invd-muted);
    line-height: 1.6;
  }
  .invd-sidebar__footer strong {
    font-family: var(--invd-mono);
    font-size: 10px;
    color: var(--invd-text2);
  }

  /* ══════════════════════════════════════════
     MAIN
  ══════════════════════════════════════════ */
  .invd-main {
    /*margin-left: 224px;*/
    flex: 1;
    padding: 0 28px 48px;
    min-width: 0;
  }

  /* ══════════════════════════════════════════
     TOPBAR
  ══════════════════════════════════════════ */
  .invd-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28px 0 24px;
    border-bottom: 1px solid var(--invd-border);
    margin-bottom: 24px;
    position: sticky;
    top: 0;
    background: var(--invd-bg);
    z-index: 50;
  }
  .invd-topbar__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--invd-text);
    margin: 0;
    letter-spacing: -.4px;
  }
  .invd-topbar__title span {
    color: var(--invd-blue);
  }
  .invd-topbar__right {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .invd-badge-live {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--invd-green-lt);
    color: var(--invd-green);
    border: 1px solid #A7EFDA;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
  }
  .invd-dot-live {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--invd-green);
    animation: invd-pulse 1.6s ease-in-out infinite;
  }
  @keyframes invd-pulse {
    0%,100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .4; transform: scale(.8); }
  }
  .invd-reload-spinner {
    width: 16px; height: 16px;
    border: 2px solid var(--invd-border2);
    border-top-color: var(--invd-blue);
    border-radius: 50%;
    animation: invd-spin .7s linear infinite;
    display: none;
  }
  @keyframes invd-spin { to { transform: rotate(360deg); } }

  /* ══════════════════════════════════════════
     FILTER BAR
  ══════════════════════════════════════════ */
  .invd-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    background: var(--invd-surface);
    border: 1px solid var(--invd-border);
    border-radius: var(--invd-r);
    padding: 10px 16px;
    margin-bottom: 22px;
    box-shadow: var(--invd-shadow-sm);
  }

  

  .invd-filter-bar__icon {
    color: var(--invd-muted);
    font-size: 13px;
    margin-right: 2px;
  }
  .invd-filter-bar__label {
    font-size: 10px;
    color: var(--invd-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    white-space: nowrap;
    margin: 0;
  }
  .invd-filter-bar__sep {
    width: 1px;
    height: 24px;
    background: var(--invd-border);
    margin: 0 4px;
  }
  .invd-filter-bar__select {
    background: var(--invd-surface2);
    border: 1px solid var(--invd-border);
    color: var(--invd-text);
    border-radius: var(--invd-r-sm);
    padding: 5px 10px;
    font-size: 12px;
    font-family: var(--invd-font);
    cursor: pointer;
    outline: none;
    transition: border-color .15s;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238B91AD'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 26px;
  }
  .invd-filter-bar__select:focus {
    border-color: var(--invd-blue);
    box-shadow: 0 0 0 3px rgba(59,111,232,.12);
  }

  .invd-btn-prov {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--invd-surface2);
    border: 1px solid var(--invd-border);
    color: var(--invd-text2);
    border-radius: var(--invd-r-sm);
    padding: 5px 12px;
    font-size: 12px;
    font-family: var(--invd-font);
    font-weight: 500;
    cursor: pointer;
    transition: border-color .15s, background .15s;
  }
  .invd-btn-prov:hover { border-color: var(--invd-blue); background: var(--invd-blue-lt); color: var(--invd-blue); }
  .invd-btn-prov.invd-active { border-color: var(--invd-blue); background: var(--invd-blue-lt); color: var(--invd-blue); }

  .invd-btn-reset {
    margin-left: auto;
    background: transparent;
    border: 1px solid var(--invd-border);
    color: var(--invd-muted);
    border-radius: var(--invd-r-sm);
    padding: 5px 12px;
    font-size: 11px;
    font-family: var(--invd-font);
    cursor: pointer;
    transition: all .15s;
  }
  .invd-btn-reset:hover { border-color: var(--invd-red); color: var(--invd-red); background: var(--invd-red-lt); }

  .invd-filter-status {
    font-size: 11px;
    color: var(--invd-blue);
    font-family: var(--invd-mono);
    white-space: nowrap;
  }

  /* ══════════════════════════════════════════
     MODAL PROVEEDOR
  ══════════════════════════════════════════ */
  .invd-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(26,29,46,.45);
    backdrop-filter: blur(3px);
    z-index: 600;
    align-items: center;
    justify-content: center;
  }
  .invd-modal-overlay.invd-open { display: flex; }
  .invd-modal-box {
    background: var(--invd-surface);
    border: 1px solid var(--invd-border);
    border-radius: var(--invd-r-lg);
    padding: 24px;
    width: 420px;
    max-width: 95vw;
    max-height: 82vh;
    overflow-y: auto;
    box-shadow: var(--invd-shadow-lg);
    animation: invd-modal-in .18s ease;
  }
  @keyframes invd-modal-in {
    from { opacity: 0; transform: scale(.97) translateY(8px); }
    to   { opacity: 1; transform: scale(1)  translateY(0); }
  }
  .invd-modal-box h5 {
    font-size: 14px;
    font-weight: 700;
    color: var(--invd-text);
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .invd-modal-box h5 i { color: var(--invd-blue); }

  .invd-prov-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: var(--invd-r-sm);
    border: 1px solid var(--invd-border);
    background: var(--invd-surface2);
    cursor: pointer;
    margin-bottom: 8px;
    transition: border-color .15s, background .15s;
  }
  .invd-prov-option:hover { border-color: var(--invd-blue-md); background: var(--invd-blue-lt); }
  .invd-prov-option.invd-selected {
    border-color: var(--invd-blue);
    background: var(--invd-blue-lt);
    box-shadow: inset 0 0 0 1px rgba(59,111,232,.2);
  }
  .invd-prov-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
  .invd-prov-opt-name   { font-size: 13px; font-weight: 600; color: var(--invd-text); }
  .invd-prov-opt-detail { font-size: 11px; color: var(--invd-muted); margin-top: 2px; }

  .invd-modal-footer {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--invd-border);
  }
  .invd-btn-cancel-m {
    background: transparent;
    border: 1px solid var(--invd-border);
    color: var(--invd-text2);
    border-radius: var(--invd-r-sm);
    padding: 8px 18px;
    font-size: 13px;
    font-family: var(--invd-font);
    cursor: pointer;
    transition: background .15s;
  }
  .invd-btn-cancel-m:hover { background: var(--invd-surface2); }
  .invd-btn-apply-m {
    background: var(--invd-blue);
    border: none;
    color: #fff;
    border-radius: var(--invd-r-sm);
    padding: 8px 20px;
    font-size: 13px;
    font-family: var(--invd-font);
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(59,111,232,.35);
    transition: background .15s, box-shadow .15s;
  }
  .invd-btn-apply-m:hover { background: #2E5FD4; box-shadow: 0 4px 14px rgba(59,111,232,.45); }

  /* ══════════════════════════════════════════
     KPI CARDS
  ══════════════════════════════════════════ */
  .invd-kpi-card {
    background: var(--invd-surface);
    border: 1px solid var(--invd-border);
    border-radius: var(--invd-r);
    padding: 20px 22px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--invd-shadow-sm);
    transition: transform .18s, box-shadow .18s;
  }
  .invd-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--invd-shadow);
  }
  .invd-kpi-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    border-radius: var(--invd-r) var(--invd-r) 0 0;
  }
  .invd-kpi-card--blue::after   { background: linear-gradient(90deg, var(--invd-blue), #7BA4F5); }
  .invd-kpi-card--green::after  { background: linear-gradient(90deg, var(--invd-green), #5DD6AF); }
  .invd-kpi-card--amber::after  { background: linear-gradient(90deg, var(--invd-amber), #F59E0B); }
  .invd-kpi-card--violet::after { background: linear-gradient(90deg, var(--invd-violet), #A78BFA); }

  .invd-kpi__icon {
    font-size: 20px;
    margin-bottom: 10px;
    display: inline-block;
  }
  .invd-kpi__val {
    font-family: var(--invd-mono);
    font-size: 26px;
    font-weight: 500;
    line-height: 1;
    color: var(--invd-text);
    letter-spacing: -.5px;
  }
  .invd-kpi__label {
    font-size: 10px;
    color: var(--invd-muted);
    margin-top: 6px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 600;
  }

  /* ══════════════════════════════════════════
     CHART CARDS
  ══════════════════════════════════════════ */
  .invd-chart-card {
    background: var(--invd-surface);
    border: 1px solid var(--invd-border);
    border-radius: var(--invd-r);
    padding: 20px 22px;
    margin-bottom: 22px;
    box-shadow: var(--invd-shadow-sm);
  }
  .invd-chart-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 18px;
  }
  .invd-chart-card__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--invd-text);
    letter-spacing: -.2px;
  }
  .invd-chart-card__sub {
    font-size: 11px;
    color: var(--invd-muted);
    margin-top: 2px;
  }
  .invd-chart-card__icon {
    width: 32px; height: 32px;
    border-radius: var(--invd-r-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
  }
  .invd-chart-card__icon--blue   { background: var(--invd-blue-lt);   color: var(--invd-blue); }
  .invd-chart-card__icon--green  { background: var(--invd-green-lt);  color: var(--invd-green); }
  .invd-chart-card__icon--amber  { background: var(--invd-amber-lt);  color: var(--invd-amber); }
  .invd-chart-card__icon--violet { background: var(--invd-violet-lt); color: var(--invd-violet); }
  .invd-chart-card__icon--cyan   { background: var(--invd-cyan-lt);   color: var(--invd-cyan); }

  /* ══════════════════════════════════════════
     TABLE
  ══════════════════════════════════════════ */
  .invd-table-wrap { overflow-x: auto; }
  .invd-data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12.5px;
  }
  .invd-data-table thead th {
    padding: 9px 14px;
    text-transform: uppercase;
    font-size: 9.5px;
    letter-spacing: 1.5px;
    color: var(--invd-muted);
    border-bottom: 1px solid var(--invd-border);
    font-weight: 700;
    white-space: nowrap;
    background: var(--invd-surface);
    position: sticky;
    top: 0;
  }
  .invd-data-table tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--invd-border);
    vertical-align: middle;
    color: var(--invd-text2);
  }
  .invd-data-table tbody tr:last-child td { border-bottom: none; }
  .invd-data-table tbody tr:hover td { background: var(--invd-blue-lt); }

  /* Badges de categoría */
  .invd-badge-cat {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4px;
  }
  .invd-bc-Electrónicos   { background: var(--invd-blue-lt);   color: var(--invd-blue);   border: 1px solid var(--invd-blue-md); }
  .invd-bc-Accesorios     { background: var(--invd-violet-lt); color: var(--invd-violet); border: 1px solid #C4B5FD; }
  .invd-bc-Redes          { background: var(--invd-green-lt);  color: var(--invd-green);  border: 1px solid #A7EFDA; }
  .invd-bc-Almacenamiento { background: var(--invd-amber-lt);  color: var(--invd-amber);  border: 1px solid #FDE68A; }
  .invd-bc-Impresión      { background: var(--invd-red-lt);    color: var(--invd-red);    border: 1px solid #FBCDD0; }

  .invd-price-cell { font-family: var(--invd-mono); font-size: 11.5px; color: var(--invd-green); font-weight: 500; }
  .invd-code-cell  { font-family: var(--invd-mono); font-size: 10.5px; color: var(--invd-muted); }

  /* Search input */
  .invd-search {
    background: var(--invd-surface2);
    border: 1px solid var(--invd-border);
    color: var(--invd-text);
    border-radius: var(--invd-r-sm);
    padding: 6px 12px;
    font-size: 12px;
    font-family: var(--invd-font);
    outline: none;
    width: 210px;
    transition: border-color .15s, box-shadow .15s;
  }
  .invd-search:focus {
    border-color: var(--invd-blue);
    box-shadow: 0 0 0 3px rgba(59,111,232,.12);
    background: var(--invd-surface);
  }

  /* ══════════════════════════════════════════
     LOADER
  ══════════════════════════════════════════ */
  #invd-loader {
    position: fixed; inset: 0;
    background: var(--invd-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 999;
    gap: 14px;
  }
  .invd-spinner-ring {
    width: 44px; height: 44px;
    border: 3px solid var(--invd-border2);
    border-top-color: var(--invd-blue);
    border-radius: 50%;
    animation: invd-spin .8s linear infinite;
  }
  #invd-loader p { color: var(--invd-muted); font-size: 13px; font-family: var(--invd-font); }

  /* ══════════════════════════════════════════
     RESPONSIVE
  ══════════════════════════════════════════ */
  @media (max-width: 768px) {
    .invd-sidebar { display: none !important; }
    .invd-main { margin-left: 0 !important; padding: 0 14px 40px !important; }
  }