:root {
  --brand:      #e30613;
  --brand-dark: #c50011;
  --brand-light:#fef2f2;
  --sidebar-w:  220px;
  --nav-h:      52px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font-family: 'Segoe UI', system-ui, sans-serif; background: #f0f2f5; color: #222; }

/* ── Brand ── */
.brand-wordmark {
  font-family: 'EB Garamond', Garamond, Georgia, serif;
  font-weight: 700; font-size: 2.4rem; color: var(--brand);
  letter-spacing: .12em; line-height: 1; margin-bottom: .15rem;
}
.brand-wordmark-sub { font-size: .75rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #555; }
.brand-wordmark-nav {
  font-family: 'EB Garamond', Garamond, Georgia, serif;
  font-weight: 700; font-size: 1.1rem; color: #fff;
  letter-spacing: .1em; line-height: 1; vertical-align: middle;
}
.nav-brand-divider { color: rgba(255,255,255,.35); margin: 0 .5rem; font-weight: 300; }

/* ── Login ── */
.login-overlay {
  position: fixed; inset: 0;
  background: linear-gradient(135deg, #e30613 0%, #8b0000 100%);
  display: flex; align-items: center; justify-content: center; z-index: 9999;
}
.login-card {
  background: #fff; border-radius: 14px;
  padding: 2.5rem 2rem; width: 100%; max-width: 380px;
  box-shadow: 0 24px 64px rgba(0,0,0,.4); text-align: center;
}
.login-brand { margin-bottom: .25rem; }
.login-sub   { font-size: .83rem; color: #888; margin-bottom: 1.5rem; }
.btn-brand   { background: var(--brand); color: #fff; border: none; }
.btn-brand:hover { background: var(--brand-dark); color: #fff; }
.text-brand  { color: var(--brand) !important; }

/* ── App Shell ── */
#appShell { display: flex; flex-direction: column; height: 100vh; }

/* ── Navbar ── */
.app-nav {
  height: var(--nav-h); background: var(--brand);
  display: flex; align-items: center; padding: 0 1.25rem;
  gap: .75rem; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,.2); z-index: 100;
}
.nav-brand { color: #fff; font-weight: 800; font-size: 1rem; letter-spacing: .03em; }

/* Em 375px a barra tem 6 itens flex e nenhum encolhe: o botão de sair saía 13px
   para fora e a PÁGINA passava a rolar na horizontal. Marca e nome do usuário
   ganham reticências; o contador de refresh é auxiliar e sai — a data da última
   leitura já aparece no cabeçalho de cada painel. Botões nunca encolhem. */
@media (max-width: 576px) {
  .app-nav { padding: 0 .6rem; gap: .4rem; }
  .app-nav .refresh-indicator { display: none; }
  .app-nav .nav-brand { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .app-nav .nav-brand-divider, .app-nav .brand-wordmark-nav { display: none; }
  .app-nav .nav-user { min-width: 0; max-width: 8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-left: auto; }
  .app-nav #logoutBtn, .app-nav #sidebarToggle { flex-shrink: 0; }
}
.nav-user  { color: rgba(255,255,255,.85); font-size: .8rem; }
.btn-nav-icon { color: #fff; border: none; background: transparent; font-size: 1.2rem; padding: .2rem .4rem; }

/* Refresh indicator */
.refresh-indicator {
  font-size: .72rem; color: rgba(255,255,255,.7);
  display: flex; align-items: center; gap: .3rem; white-space: nowrap;
}

/* ── Body ── */
.app-body { display: flex; flex: 1; overflow: hidden; }

/* ── Sidebar ── */
.sidebar {
  width: var(--sidebar-w); background: #fff; border-right: 1px solid #e5e7eb;
  overflow-y: auto; flex-shrink: 0; padding: .75rem 0; transition: margin-left .2s;
}
.sidebar.collapsed { margin-left: calc(-1 * var(--sidebar-w)); }
.sidebar-section {
  padding: .3rem .75rem; font-size: .63rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em; color: #aaa; margin-top: .75rem;
}
.nav-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .48rem 1rem; font-size: .84rem; color: #555; cursor: pointer;
  border-left: 3px solid transparent; transition: all .12s; user-select: none;
}
.nav-item:hover { background: var(--brand-light); color: var(--brand); }
.nav-item.active { background: var(--brand-light); color: var(--brand); font-weight: 600; border-left-color: var(--brand); }
.nav-item i { font-size: .95rem; width: 20px; text-align: center; }

/* ── Page Content ── */
.page-content { flex: 1; overflow-y: auto; padding: 1.5rem; }
.page-title   { font-size: 1.1rem; font-weight: 700; margin-bottom: .75rem; color: #1a1a1a; display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.page-loading { display: flex; justify-content: center; padding: 3rem; }

/* ── KPI Cards ── */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: .45rem; margin-bottom: .75rem; }
.kpi-card {
  background: #fff; border: 1px solid #DEE2E6; border-radius: 8px;
  padding: .5rem .75rem .4rem; box-shadow: 0 1px 3px rgba(0,0,0,.06);
  border-top: 3px solid var(--kpi-color, var(--brand));
}
.kpi-label { font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #868E96; margin: 0 0 2px; }
.kpi-value { font-size: clamp(.78rem, 1.2vw, 1rem); font-weight: 700; color: var(--kpi-color, var(--brand)); line-height: 1.2; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-sub   { font-size: .65rem; color: #868E96; margin: 2px 0 0; }

/* ── Section cards ── */
.section-card {
  background: #fff; border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,.07);
  padding: 1.1rem 1.25rem; margin-bottom: 1.25rem;
}
.section-card-title { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #6c757d; margin-bottom: .75rem; }

/* ── Tables ── */
.table-wrap { background: #fff; border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,.07); overflow: hidden; margin-bottom: 1.25rem; }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.table-wrap thead th {
  background: #f8f9fa; padding: .6rem .875rem; text-align: left;
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: #6c757d; border-bottom: 2px solid #e9ecef; white-space: nowrap;
  position: sticky; top: 0; z-index: 2;
}
.table-wrap tbody tr { border-bottom: 1px solid #f0f0f0; transition: background .1s; }
.table-wrap tbody tr:hover { background: #fafafa; }
.table-wrap tbody td { padding: .52rem .875rem; vertical-align: middle; }
.table-wrap tbody tr:last-child { border-bottom: none; }
.table-empty { text-align: center; color: #aaa; padding: 2rem; font-size: .85rem; }
.table-toolbar { border-bottom: 1px solid #f0f0f0; background: #fafafa; }

/* ── Mini table ── */
.mini-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.mini-table thead tr { background: #f8f9fa; }
.mini-table thead th { padding: .4rem .7rem; text-align: left; font-size: .68rem; text-transform: uppercase; color: #6c757d; font-weight: 700; border-bottom: 1px solid #e9ecef; }
.mini-table tbody tr { border-bottom: 1px solid #f0f0f0; transition: background .1s; }
.mini-table tbody tr:hover { background: #fafafa; }
.mini-table tbody td { padding: .42rem .7rem; vertical-align: middle; }
.mini-table tbody tr:last-child { border-bottom: none; }

/* ── Badges ── */
.badge-verde    { background: #d1fae5; color: #065f46; }
.badge-amarelo  { background: #fef9c3; color: #854d0e; }
.badge-vermelho { background: #fee2e2; color: #991b1b; }

/* ── Domain header badges ── */
.domain-badge { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .75rem; border-radius: 20px; font-size: .75rem; font-weight: 600; }
.domain-expedicao  { background: #dbeafe; color: #1d4ed8; }
.domain-financeiro { background: #fef3c7; color: #92400e; }
.domain-produtos   { background: #dcfce7; color: #166534; }

/* ── Segment pills ── */
.seg-pills { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-bottom: .875rem; }
.seg-pills-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #6c757d; margin-right: .15rem; }
.seg-pill {
  padding: .28rem .85rem; border-radius: 20px; font-size: .78rem; font-weight: 600;
  border: 1.5px solid #dee2e6; background: #fff; color: #555;
  cursor: pointer; transition: all .14s; line-height: 1.4;
}
.seg-pill:hover  { border-color: var(--brand); color: var(--brand); background: var(--brand-light); }
.seg-pill.active { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ── Chart ── */
.chart-wrap-sm { position: relative; height: 200px; }

/* ─────────────────────────
   EXPEDIÇÃO — Status badges
───────────────────────────*/
.status-badge {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .2rem .6rem; border-radius: 20px; font-size: .72rem; font-weight: 700;
}
.status-aguardando      { background: #ede9fe; color: #5b21b6; }
.status-em-conferencia  { background: #fef9c3; color: #78350f; }
.status-concluido       { background: #d1fae5; color: #065f46; }
.status-pendencia       { background: #fee2e2; color: #991b1b; }

/* Row highlight por status */
.status-em-conferencia-row td { background: #fffbeb !important; }
.status-pendencia-row td      { background: #fff1f2 !important; }
.status-concluido-row td      { opacity: .65; }

/* Alerta de espera longa (> 60 min) */
.alerta-espera td { border-left: 3px solid #ef4444; }

/* ─────────────────────────
   PRODUTOS — Problem badges
───────────────────────────*/
.prob-badge {
  display: inline-flex; align-items: center; gap: .2rem;
  padding: .18rem .55rem; border-radius: 20px; font-size: .7rem; font-weight: 700;
  white-space: nowrap;
}
.badge-tipo-colecao   { background: #ede9fe; color: #5b21b6; }
.badge-tipo-preco     { background: #fef3c7; color: #92400e; }
.badge-tipo-sem-preco { background: #fee2e2; color: #991b1b; }
.badge-tipo-campo     { background: #f1f5f9; color: #475569; }

.row-inconsistencia:hover { background: #fffbeb !important; cursor: pointer; }

/* ─────────────────────────
   FINANCEIRO — Aging labels
───────────────────────────*/
.aging-label { display: inline-block; padding: .15rem .5rem; border-radius: 4px; font-size: .75rem; font-weight: 600; }
.aging-1-30d    { background: #fef9c3; color: #713f12; }
.aging-31-60d   { background: #fed7aa; color: #7c2d12; }
.aging-61-90d   { background: #fecaca; color: #7f1d1d; }
.aging-90d-mais { background: #7f1d1d; color: #fff; }

/* ── Toast ── */
@keyframes slideIn { from { transform: translateX(40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.toast-container { position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 9998; display: flex; flex-direction: column; gap: .4rem; }
.toast-item { background: #333; color: #fff; padding: .65rem 1rem; border-radius: 8px; font-size: .83rem; max-width: 320px; box-shadow: 0 4px 12px rgba(0,0,0,.2); animation: slideIn .2s ease; }

/* ── Responsive ── */
/* Em ≤767px a sidebar é uma gaveta que COBRE a página. Quem manda no estado
   padrão é o CSS, não o JS: a versão anterior dependia de um listener de resize
   para recolher, e qualquer reflow transitório que reportasse largura de desktop
   reabria o menu por cima da tela — sem o usuário ter tocado em nada.
   Aqui fechado é o padrão e `aberta` é a exceção explícita do botão. No desktop
   `aberta` não faz nada, e quem esconde continua sendo `collapsed`. */
@media (max-width: 767px) {
  .sidebar { position: absolute; top: var(--nav-h); left: 0; height: calc(100% - var(--nav-h)); z-index: 50; }
  .sidebar { display: none; }
  .sidebar.aberta { display: block; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }

/* ── Suporte: barras horizontais + tabela ordenável ── */
.bar-track { background: #eef0f3; border-radius: 6px; height: 14px; overflow: hidden; }
.bar-fill  { background: linear-gradient(90deg, var(--brand), var(--brand-dark)); height: 100%; border-radius: 6px; }
.th-sort:hover { color: var(--brand); background: #f1f3f5; }
.th-sort .sort-ind { color: var(--brand); }
.table-sticky { max-height: 70vh; overflow-y: auto; }

/* ══════════ Monitor de Jobs (escopo .mon-*) ══════════ */
.job-row-off td { opacity: .5; }
.job-row-off:hover td { opacity: .75; }

/* números de dados alinhados (look de dashboard técnico) */
.mon-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* Hero de saúde do ambiente */
.mon-hero {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: linear-gradient(100deg, #0f172a 0%, #1e293b 60%, #334155 100%);
  color: #fff; border-radius: 14px; padding: 1rem 1.25rem; margin-bottom: 1rem;
  box-shadow: 0 6px 20px rgba(15,23,42,.18);
}
.mon-hero-title { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: #94a3b8; margin: 0 0 .15rem; }
.mon-hero-server { font-size: 1.15rem; font-weight: 700; margin: 0; letter-spacing: .02em; }
.mon-hero-server small { color: #cbd5e1; font-weight: 400; }
.mon-health {
  margin-left: auto; display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .9rem; border-radius: 999px; font-weight: 700; font-size: .9rem;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
}
.mon-health .mon-dot { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 4px rgba(255,255,255,.06); }
.mon-health.ok    { color: #86efac; } .mon-health.ok .mon-dot    { background: #22c55e; animation: monPulse 2.4s infinite; }
.mon-health.warn  { color: #fdba74; } .mon-health.warn .mon-dot  { background: #f59e0b; }
.mon-health.crit  { color: #fca5a5; } .mon-health.crit .mon-dot  { background: #ef4444; animation: monPulse 1.2s infinite; }
@keyframes monPulse { 0%,100%{ box-shadow:0 0 0 0 rgba(239,68,68,.5);} 50%{ box-shadow:0 0 0 6px rgba(239,68,68,0);} }
@media (prefers-reduced-motion: reduce){ .mon-health .mon-dot { animation: none !important; } }

/* Strip de restauração ERPAPST01 */
.mon-restore { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.mon-restore-info { min-width: 190px; }
.mon-restore-info .lbl { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #868E96; margin: 0; }
.mon-restore-info .val { font-size: 1.05rem; font-weight: 700; margin: .1rem 0 0; }
.mon-wins { display: flex; gap: .5rem; flex-wrap: wrap; }
.mon-win {
  display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .75rem;
  border-radius: 10px; font-weight: 600; font-size: .82rem; border: 1px solid transparent;
}
.mon-win i { font-size: .95rem; }
.mon-win.ok      { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.mon-win.pend    { background: #f1f5f9; color: #64748b; border-color: #e2e8f0; border-style: dashed; }
.mon-win.miss    { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.mon-timeline { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; }
.mon-tl-item { font-size: .68rem; color: #64748b; background: #f8fafc; border: 1px solid #eef2f7; border-radius: 6px; padding: .15rem .4rem; }
.mon-tl-item.full { border-left: 3px solid #2563eb; }
.mon-tl-item.incr { border-left: 3px solid #94a3b8; }

/* Linhas com acento de status à esquerda */
.mon-tbl tbody tr { border-left: 3px solid transparent; }
.mon-tbl tbody tr td:first-child { transition: box-shadow .2s; }
.mon-r-run  { border-left-color: #2563eb !important; }
.mon-r-fail { border-left-color: #dc2626 !important; background: #fff7f7; }
.mon-r-late { border-left-color: #d97706 !important; }
.mon-r-ok   { border-left-color: #16a34a !important; }
.mon-tbl tbody tr:hover { background: #f4f7fb; }
.mon-tbl tbody tr.mon-r-fail:hover { background: #fdeeee; }

/* ── Suporte: detalhe do agente ── */
.ag-row:hover { background: #f1f5ff !important; }
.ag-det > td { background: #f8fafc; border-bottom: 2px solid #e2e8f0; }
.ag-detalhe { padding: 1rem 1.25rem; }
.ag-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
.ag-chip { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: .4rem .6rem; }
.ag-chip-lbl { display: block; font-size: .65rem; text-transform: uppercase; letter-spacing: .04em; color: #94a3b8; font-weight: 700; }
.ag-chip-val { display: block; font-size: 1.05rem; font-weight: 700; color: #1e293b; }
.tempo-bar { display: flex; height: 20px; border-radius: 6px; overflow: hidden; background: #eef0f3; margin: .4rem 0; }
.tempo-seg { height: 100%; }
.tempo-legend { display: flex; flex-wrap: wrap; gap: .75rem; }
.mes-bars { display: flex; align-items: flex-end; gap: 4px; height: 100px; padding-top: .5rem; }
.mes-bar-wrap { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 0; }
.mes-bar { width: 100%; max-width: 22px; background: linear-gradient(180deg, var(--brand), var(--brand-dark)); border-radius: 3px 3px 0 0; }
.mes-bar-lbl { font-size: .58rem; color: #94a3b8; margin-top: 3px; white-space: nowrap; }

/* ── Suporte: badge de filtro ativo ── */
.bg-brand-soft { background: var(--brand-light); color: var(--brand); border: 1px solid var(--brand); font-weight: 600; }

/* ══════════════════════════════════════════════════════════
   SUPORTE — Refresh 2026 (Data-Dense Dashboard, escopo .sup-page)
   Grande ideia: ler o estado do suporte num relance.
   Toda regra fica scoped p/ não afetar os outros painéis.
═══════════════════════════════════════════════════════════ */
.sup-page { --sup-ink:#0f172a; --sup-mut:#64748b; --sup-line:#e6e9ee; }
.sup-page .mon-num,
.sup-page .kpi-value,
.sup-page td.text-end,
.sup-page .seg-pill-n { font-variant-numeric: tabular-nums; font-feature-settings:"tnum"; }

/* ── Header ── */
.sup-head { display:flex; align-items:center; flex-wrap:wrap; gap:.6rem; margin-bottom:.9rem; }
.sup-head .page-title { margin:0; font-size:1.18rem; }
.sup-head-meta { margin-left:auto; display:flex; align-items:center; gap:.6rem; }
.sup-updated { font-size:.72rem; color:var(--sup-mut); display:inline-flex; align-items:center; gap:.3rem; white-space:nowrap; }
.sup-filter-active {
  display:inline-flex; align-items:center; gap:.35rem; padding:.22rem .6rem;
  border-radius:999px; font-size:.74rem; font-weight:600;
  background:var(--brand-light); color:var(--brand); border:1px solid #f5c2c7;
}
.sup-filter-active .bi-x-circle-fill { cursor:pointer; opacity:.7; }
.sup-filter-active .bi-x-circle-fill:hover { opacity:1; }

/* ── Toolbar card (período + filtros) ── */
.sup-toolbar {
  background:#fff; border:1px solid var(--sup-line); border-radius:12px;
  box-shadow:0 1px 3px rgba(16,24,40,.05); padding:.85rem 1rem; margin-bottom:1rem;
}
.sup-toolbar-top { display:flex; align-items:center; flex-wrap:wrap; gap:.75rem; }
.sup-btn-refresh {
  display:inline-flex; align-items:center; gap:.35rem; border:1px solid var(--sup-line);
  background:#fff; color:#475569; border-radius:8px; padding:.34rem .7rem; font-size:.78rem;
  font-weight:600; cursor:pointer; transition:background .16s,border-color .16s,color .16s;
}
.sup-btn-refresh:hover { background:var(--brand-light); border-color:var(--brand); color:var(--brand); }

/* Período — segmented control */
.sup-seg { display:inline-flex; background:#f1f3f5; border-radius:10px; padding:3px; gap:2px; }
.sup-seg button {
  border:none; background:transparent; color:#64748b; font-size:.79rem; font-weight:600;
  padding:.32rem .8rem; border-radius:8px; cursor:pointer; transition:all .16s; line-height:1.3;
}
.sup-seg button:hover { color:var(--sup-ink); }
.sup-seg button.active { background:#fff; color:var(--brand); box-shadow:0 1px 3px rgba(16,24,40,.12); }

/* ── Filtros colapsáveis (Área / Sistema) ── */
.sup-filters { margin-top:.85rem; border-top:1px dashed var(--sup-line); padding-top:.75rem; display:flex; flex-direction:column; gap:.55rem; }
.sup-filter-row { display:grid; grid-template-columns:auto 1fr auto; align-items:start; gap:.6rem; }
.sup-filter-lbl {
  display:inline-flex; align-items:center; gap:.35rem; font-size:.66rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.06em; color:#94a3b8; padding-top:.35rem; white-space:nowrap;
}
.sup-filter-lbl .bi { color:#cbd5e1; }
.sup-chips {
  display:flex; flex-wrap:wrap; gap:.35rem; max-height:4.4rem; overflow:hidden;
  position:relative; transition:max-height .2s ease;
}
.sup-chips.expanded { max-height:40rem; }
.sup-chips .seg-pill { padding:.24rem .6rem; font-size:.76rem; border-width:1px; }
.sup-chips .seg-pill.active { box-shadow:0 1px 4px rgba(227,6,19,.3); }
.seg-pill-n {
  display:inline-block; margin-left:.4rem; padding:0 .4rem; border-radius:999px;
  background:#eef1f4; color:#64748b; font-size:.68rem; font-weight:700; min-width:1.4em; text-align:center;
}
.seg-pill.active .seg-pill-n { background:rgba(255,255,255,.28); color:#fff; }
.sup-chips-toggle {
  align-self:start; border:1px solid var(--sup-line); background:#fff; color:#64748b;
  font-size:.72rem; font-weight:600; border-radius:999px; padding:.24rem .6rem; cursor:pointer;
  white-space:nowrap; transition:all .16s;
}
.sup-chips-toggle:hover { border-color:var(--brand); color:var(--brand); }

/* ── Tabs → segmented moderno ── */
.sup-page .nav-tabs {
  border:none; background:#f1f3f5; border-radius:12px; padding:4px; gap:2px;
  display:inline-flex; flex-wrap:wrap; margin-bottom:1.1rem;
}
.sup-page .nav-tabs .nav-item { margin:0; }
.sup-page .nav-tabs .nav-link {
  border:none; border-radius:9px; color:#64748b; font-size:.82rem; font-weight:600;
  padding:.42rem .95rem; transition:all .16s; display:inline-flex; align-items:center;
}
.sup-page .nav-tabs .nav-link:hover { color:var(--sup-ink); background:rgba(255,255,255,.5); }
.sup-page .nav-tabs .nav-link.active {
  background:#fff; color:var(--brand); box-shadow:0 1px 4px rgba(16,24,40,.14);
}

/* ── KPI cards refinados ── */
.sup-page .kpi-grid { gap:.6rem; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); }
.sup-page .kpi-card {
  border:1px solid var(--sup-line); border-top:none; border-radius:12px; padding:.7rem .85rem .6rem;
  position:relative; overflow:hidden; box-shadow:0 1px 3px rgba(16,24,40,.05);
  transition:transform .16s, box-shadow .16s;
}
.sup-page .kpi-card::before {
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--kpi-color,var(--brand)), color-mix(in srgb, var(--kpi-color,var(--brand)) 55%, #fff));
}
.sup-page .kpi-card:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(16,24,40,.1); }
.sup-page .kpi-label { font-size:.6rem; color:#94a3b8; display:flex; align-items:center; }
.sup-page .kpi-value { font-size:clamp(1.05rem,1.5vw,1.4rem); line-height:1.15; }
.sup-page .kpi-sub { font-size:.66rem; }

/* ── Section cards ── */
.sup-page .section-card { border:1px solid var(--sup-line); border-radius:12px; box-shadow:0 1px 3px rgba(16,24,40,.05); }
.sup-page .section-card-title { color:#334155; font-size:.74rem; }
.sup-page .section-card-title .bi { color:var(--brand); }

/* ── Bar list ── */
.sup-page .bar-track { height:16px; background:#eef1f4; }
.sup-page .bar-fill { transition:width .5s cubic-bezier(.4,0,.2,1); }
.sup-page .bar-rank { width:1.5rem; font-size:.7rem; color:#cbd5e1; font-weight:800; text-align:right; }

/* ── Tables ── */
.sup-page .table-wrap { border:1px solid var(--sup-line); box-shadow:0 1px 3px rgba(16,24,40,.05); }
.sup-page .table-wrap thead th { background:#f8fafc; color:#475569; }
.sup-page .table-wrap tbody tr:hover { background:#f5f8ff; }

@media (prefers-reduced-motion: reduce) {
  .sup-page .kpi-card, .sup-page .bar-fill, .sup-chips { transition:none; }
  .sup-page .kpi-card:hover { transform:none; }
}
@media (max-width:600px) {
  .sup-filter-row { grid-template-columns:1fr; }
  .sup-filter-lbl { padding-top:0; }
}

/* ═══ Seção TI — monitoramento ═══════════════════════════════════════════════ */
.ti-page {
  --ti-line: #e2e8f0;
  --ti-ok:   #16a34a;
  --ti-warn: #b45309;
  --ti-bad:  #dc2626;
  --ti-off:  #94a3b8;
  font-size: .82rem;
}
.ti-page .ti-head { display:flex; align-items:baseline; gap:.75rem; flex-wrap:wrap; margin-bottom:.9rem; }
.ti-page .ti-title { font-size:1.05rem; font-weight:700; color:#0f172a; margin:0; }
.ti-frescor { font-size:.7rem; color:#64748b; }
.ti-frescor.stale { color:var(--ti-warn); font-weight:600; }
.ti-recarregando { opacity:.55; transition:opacity .18s; }

/* ── Abas ── */
.ti-tabs { display:flex; gap:.25rem; border-bottom:1px solid var(--ti-line); margin-bottom:1rem; overflow-x:auto; }
.ti-tab {
  border:0; background:none; padding:.45rem .8rem; font-size:.76rem; font-weight:600;
  color:#64748b; border-bottom:2px solid transparent; white-space:nowrap; cursor:pointer;
}
.ti-tab:hover { color:#0f172a; }
.ti-tab.active { color:var(--brand); border-bottom-color:var(--brand); }
.ti-tab .ti-badge { margin-left:.35rem; }

/* ── KPI ── */
.ti-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:.6rem; margin-bottom:1rem; }
.ti-kpi {
  background:#fff; border:1px solid var(--ti-line); border-radius:10px; padding:.65rem .8rem;
  position:relative; overflow:hidden;
}
.ti-kpi::before { content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--ti-off); }
.ti-kpi.good::before   { background:var(--ti-ok); }
.ti-kpi.warn::before   { background:var(--ti-warn); }
.ti-kpi.danger::before { background:var(--ti-bad); }
.ti-kpi-label { font-size:.62rem; text-transform:uppercase; letter-spacing:.05em; color:#94a3b8; font-weight:700; }
.ti-kpi-value { font-size:1.4rem; font-weight:700; line-height:1.2; color:#0f172a; }
.ti-kpi.good .ti-kpi-value   { color:var(--ti-ok); }
.ti-kpi.warn .ti-kpi-value   { color:var(--ti-warn); }
.ti-kpi.danger .ti-kpi-value { color:var(--ti-bad); }
.ti-kpi-note { font-size:.66rem; color:#64748b; line-height:1.3; }

/* ── Cartão de alvo ── */
.ti-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:.6rem; }
.ti-card { background:#fff; border:1px solid var(--ti-line); border-left:3px solid var(--ti-off); border-radius:10px; padding:.6rem .75rem; }
.ti-card.ok     { border-left-color:var(--ti-ok); }
.ti-card.lento  { border-left-color:var(--ti-warn); }
.ti-card.falha  { border-left-color:var(--ti-bad); background:#fef4f4; }
.ti-card.pausado, .ti-card.desconhecido { border-left-color:var(--ti-off); background:#f8fafc; }
.ti-card-top { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.ti-card-nome { font-weight:700; color:#0f172a; font-size:.8rem; }
.ti-card-dest { font-size:.68rem; color:#94a3b8; font-family:ui-monospace,Consolas,monospace; word-break:break-all; }
.ti-card-msg  { font-size:.7rem; color:#475569; margin-top:.3rem; line-height:1.35; }
.ti-card-pe   { display:flex; justify-content:space-between; gap:.5rem; margin-top:.4rem;
                font-size:.66rem; color:#64748b; border-top:1px dashed var(--ti-line); padding-top:.35rem; }
.ti-card.clicavel { cursor:pointer; }
.ti-card.clicavel:hover { box-shadow:0 3px 10px rgba(16,24,40,.09); }

/* ── Selo de estado ── */
.ti-badge {
  display:inline-flex; align-items:center; gap:.25rem; padding:.1rem .4rem; border-radius:999px;
  font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  background:#f1f5f9; color:#475569;
}
.ti-badge.ok     { background:#dcfce7; color:#166534; }
.ti-badge.lento  { background:#fef3c7; color:#92400e; }
.ti-badge.falha  { background:#fee2e2; color:#991b1b; }
.ti-badge.pausado, .ti-badge.desconhecido { background:#f1f5f9; color:#64748b; }
.ti-badge.crit1 { background:#fee2e2; color:#991b1b; }

/* ── Faixa 24h ── */
.ti-faixa { display:flex; gap:1px; height:20px; margin-top:.4rem; border-radius:3px; overflow:hidden; }
.ti-faixa i { flex:1 1 auto; background:#e2e8f0; }
.ti-faixa i.ok { background:var(--ti-ok); }
.ti-faixa i.lento { background:#f59e0b; }
.ti-faixa i.falha { background:var(--ti-bad); }

/* ── Tabela ── */
.ti-tabela { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--ti-line); border-radius:10px; overflow:hidden; }
.ti-tabela th { background:#f8fafc; color:#475569; font-size:.66rem; text-transform:uppercase; letter-spacing:.04em;
                text-align:left; padding:.45rem .6rem; font-weight:700; border-bottom:1px solid var(--ti-line); }
.ti-tabela td { padding:.45rem .6rem; border-bottom:1px solid #f1f5f9; font-size:.75rem; vertical-align:top; }
.ti-tabela tbody tr:hover { background:#f8fafc; }
.ti-num { text-align:right; font-variant-numeric:tabular-nums; }

/* ── Vazio / erro ── */
.ti-vazio { background:#fff; border:1px dashed var(--ti-line); border-radius:10px; padding:1.4rem; text-align:center; color:#64748b; }
.ti-vazio.bom { border-color:#bbf7d0; background:#f0fdf4; color:#166534; }
.ti-vazio-titulo { font-weight:700; font-size:.82rem; margin-bottom:.2rem; }
.ti-vazio-sub { font-size:.72rem; }
.ti-erro { background:#fef2f2; border:1px solid #fecaca; color:#991b1b; border-radius:10px; padding:.8rem 1rem; font-size:.76rem; }

/* ── Procedência (regra do recorte, em português) ── */
.ti-regra { font-size:.68rem; color:#64748b; border-top:1px dashed var(--ti-line); margin-top:.8rem; padding-top:.45rem; line-height:1.4; }

/* ── Título de seção ── */
.ti-page .ti-sec { font-size:.78rem; font-weight:700; color:#334155; margin-bottom:.5rem; }
.ti-page .ti-sec .bi { color:var(--brand); }

/* ── Fontes ── */
.ti-fonte { display:flex; align-items:center; justify-content:space-between; gap:.6rem;
            background:#fff; border:1px solid var(--ti-line); border-radius:10px; padding:.55rem .75rem; }
.ti-fonte.off { background:#f8fafc; }
.ti-fonte-nome { font-weight:700; font-size:.78rem; color:#0f172a; }
.ti-fonte-sub  { font-size:.68rem; color:#64748b; }

/* ── Equipamento vindo do inventário ──
   Alvo que nasceu do cadastro do GLPI carrega três coisas a mais que um alvo
   digitado: onde ele fica, de onde veio o endereço e o que a leitura mediu. */
.ti-card-local { font-size:.68rem; color:#64748b; font-weight:600; }
.ti-origem {
  display:inline-flex; align-items:center; gap:.25rem; font-size:.62rem; font-weight:600;
  color:#7c5e10; background:#fef9e7; border:1px solid #f6e3a1; border-radius:999px;
  padding:.05rem .38rem; white-space:nowrap;
}
.ti-origem.agente { color:#0c4a6e; background:#f0f9ff; border-color:#bae6fd; }

.ti-medidas { display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.4rem; }
.ti-medida {
  border:1px solid var(--ti-line); border-radius:7px; background:#f8fafc;
  padding:.25rem .45rem; min-width:96px; flex:1 1 96px;
}
.ti-medida-rot { font-size:.6rem; color:#94a3b8; text-transform:uppercase; letter-spacing:.02em; }
.ti-medida-val { font-size:.82rem; font-weight:700; color:#0f172a;
                 font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }
.ti-medida-sub { font-size:.6rem; color:#64748b; }
.ti-medida.baixo { background:#fff7ed; border-color:#fed7aa; }
.ti-medida.baixo .ti-medida-val { color:#b45309; }

.ti-page .ti-tabela td.ti-num, .ti-page .ti-tabela th.ti-num {
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; text-align:right;
}
/* Endereço não quebra no meio: "177.22.35." numa linha e "118" na outra vira outro
   endereço aos olhos de quem lê. A tabela já rola dentro do próprio container. */
.ti-page .ti-tabela .ti-endereco { white-space:nowrap; font-family:ui-monospace,Consolas,monospace;
                                   font-size:.68rem; color:#64748b; }
/* Na tabela de cadastro a procedência é apoio: duas linhas bastam, o texto inteiro
   está no cartão da área e no histórico do alvo. */
.ti-page .ti-tabela .ti-obs {
  font-size:.68rem; color:#94a3b8; line-height:1.35; max-width:34ch;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

@media (max-width:600px) {
  .ti-grid { grid-template-columns:1fr; }
  .ti-medida { min-width:0; flex:1 1 44%; }
}

/* Alvo de toque em celular: com mouse 31px de altura é confortável, com o dedo
   não. Vale só em tela pequena — aumentar no desktop só rouba densidade. */
@media (max-width:575px) {
  .ti-page .btn, .ti-page .ti-tab {
    min-height:40px; display:inline-flex; align-items:center; justify-content:center;
  }
  .ti-page .btn-link { min-width:40px; }
  .ti-page .ti-head .btn, .ti-page .ti-sec + div .btn { flex:1 1 auto; }
  .ti-tabs { gap:.35rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   INVENTÁRIO DE ATIVOS  (prefixo inv-)  — fonte: GLPI
═══════════════════════════════════════════════════════════════════ */
.inv-page { --inv-ink:#0f172a; --inv-mut:#64748b; --inv-line:#e6e9ee; }
/* `auto-fill` com mínimo de 145px cria 7 colunas num container de 1100px e espreme
   os 4 cards em 145px cada, com rótulo quebrando em duas linhas. `auto-fit` colapsa
   as colunas vazias e deixa os 4 ocuparem a largura toda. */
.inv-page .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.inv-page .mon-num, .inv-page .kpi-value, .inv-page td.text-end,
.inv-page th.text-end { font-variant-numeric: tabular-nums; font-feature-settings:"tnum"; }

.inv-head { display:flex; align-items:center; flex-wrap:wrap; gap:.6rem; margin-bottom:.9rem; }
.inv-head .page-title { margin:0; font-size:1.18rem; }
.inv-head-meta { margin-left:auto; display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.inv-btn-refresh {
  border:1px solid var(--inv-line); background:#fff; color:var(--inv-mut);
  border-radius:7px; padding:.28rem .6rem; font-size:.74rem; font-weight:600;
  display:inline-flex; align-items:center; gap:.3rem; white-space:nowrap;
}
.inv-btn-refresh:hover { border-color:var(--brand); color:var(--brand); background:var(--brand-light); }

/* frescor da fonte — aviso de fonte, nunca pendência */
.inv-fonte {
  display:flex; align-items:flex-start; gap:.5rem; padding:.5rem .7rem;
  border:1px solid var(--inv-line); border-left:3px solid #0ea5e9;
  border-radius:8px; background:#f8fafc; font-size:.76rem;
  color:var(--inv-mut); margin-bottom:.75rem; line-height:1.45;
}
.inv-fonte.warn { border-left-color:#f59e0b; background:#fffbeb; }
.inv-fonte i { flex:0 0 auto; margin-top:.1rem; }
.inv-fonte b { color:var(--inv-ink); font-weight:600; }

/* pendência que exige ação — cada card termina em verbo */
.inv-acoes { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:.5rem; margin-bottom:.9rem; }
.inv-acao {
  border:1px solid var(--inv-line); border-radius:9px; background:#fff;
  padding:.6rem .7rem; display:flex; flex-direction:column; gap:.15rem;
  border-left:3px solid var(--inv-tone,#94a3b8); text-align:left; width:100%;
}
.inv-acao.click { cursor:pointer; }
.inv-acao.click:hover { border-color:var(--inv-tone,#94a3b8); background:#fcfcfd; }
.inv-acao-n { font-size:1.32rem; font-weight:700; color:var(--inv-tone,var(--inv-ink)); line-height:1.1; }
.inv-acao-lbl { font-size:.78rem; font-weight:600; color:var(--inv-ink); }
.inv-acao-sub { font-size:.7rem; color:var(--inv-mut); line-height:1.4; }
.inv-acao-cta { font-size:.72rem; font-weight:600; color:var(--brand); margin-top:.2rem; }
.inv-acao.good  { --inv-tone:#10b981; }
.inv-acao.warn  { --inv-tone:#f59e0b; }
.inv-acao.danger{ --inv-tone:#ef4444; }
.inv-acao.calmo { --inv-tone:#94a3b8; }

/* filtro de período da confirmação */
.inv-toolbar {
  display:flex; align-items:center; flex-wrap:wrap; gap:.5rem;
  border:1px solid var(--inv-line); border-radius:9px; background:#fff;
  padding:.5rem .7rem; margin-bottom:.75rem;
}
.inv-toolbar-lbl {
  font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--inv-mut); display:inline-flex; align-items:center; gap:.3rem;
}
.inv-toolbar-nota { font-size:.7rem; color:var(--inv-mut); margin-left:auto; }

/* filtro ativo com botão limpar */
.inv-filtro-ativo {
  display:inline-flex; align-items:center; gap:.35rem; font-size:.74rem; font-weight:600;
  background:var(--brand-light); color:var(--brand); border:1px solid #f5c2c7;
  border-radius:999px; padding:.2rem .6rem;
}
.inv-filtro-ativo i.bi-x-circle-fill { cursor:pointer; opacity:.75; }
.inv-filtro-ativo i.bi-x-circle-fill:hover { opacity:1; }

/* tabela */
.inv-tbl-wrap { overflow-x:auto; }
.inv-tbl { width:100%; font-size:.78rem; border-collapse:collapse; }
.inv-tbl th {
  font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--inv-mut);
  font-weight:700; border-bottom:1px solid var(--inv-line); padding:.4rem .5rem; white-space:nowrap;
}
.inv-tbl td { padding:.38rem .5rem; border-bottom:1px solid #f1f3f5; vertical-align:middle; }
.inv-tbl tbody tr:hover { background:#fafbfc; }
.inv-tbl .inv-nome { font-weight:600; color:var(--inv-ink); }
/* texto auxiliar: vale na tabela E fora dela (descrição de seção, legenda de célula) */
.inv-page .inv-sub { font-size:.72rem; color:var(--inv-mut); line-height:1.5; }
.inv-tbl .inv-sub  { font-size:.7rem; }
.inv-tbl-total td { font-weight:700; background:#f8fafc; border-top:2px solid var(--inv-line); }
/* Cabeçalho numérico com nowrap rouba a largura e esmaga a 1ª coluna de texto.
   Largura mínima na coluna de identificação + piso na tabela: ela rola dentro do
   .inv-tbl-wrap em vez de espremer o nome do local em quatro linhas. */
.inv-tbl th:first-child, .inv-tbl td:first-child { min-width:172px; }
.inv-tbl-larga { min-width:1080px; }
/* Tabela de máquina tem 8 colunas, não as 11 da matriz de localização. Com 1080 ela
   estourava por 22px em 1366 e a coluna fixa passava POR CIMA do selo de silêncio. */
.inv-tbl-maq { min-width:900px; }
.inv-tbl-maq th:first-child, .inv-tbl-maq td:first-child { min-width:92px; }

/* patrimônio é a chave que o time usa fisicamente (135 de 141 preenchidos, contra
   70 de série): fica na primeira coluna e em fonte tabular para alinhar os dígitos */
.inv-patrim { font-variant-numeric:tabular-nums; font-weight:600; color:var(--inv-ink);
              letter-spacing:.02em; white-space:nowrap; }
.inv-patrim-vazio { font-size:.7rem; color:var(--inv-mut); white-space:nowrap; }

/* A tabela rola dentro do container (certo), mas o olho é a AÇÃO: fora da vista
   ele só existe pra quem descobre que dá pra rolar. Cola na direita. */
.inv-tbl-acao { position:sticky; right:0; background:#fff; z-index:2;
                box-shadow:-6px 0 6px -6px rgba(15,23,42,.18); width:52px; }
.inv-tbl tbody tr:hover .inv-tbl-acao { background:#fafbfc; }
.inv-tbl thead .inv-tbl-acao { background:#fff; }

/* abrir o equipamento na origem */
.inv-olho {
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:7px; border:1px solid var(--inv-line);
  color:var(--inv-mut); background:#fff; text-decoration:none; font-size:.9rem;
}
.inv-olho:hover { border-color:var(--brand); color:var(--brand); background:var(--brand-light); }
.inv-tbl-larga th:first-child, .inv-tbl-larga td:first-child { min-width:230px; }

/* selo de estado — cor nunca sozinha, sempre com texto */
.inv-selo {
  display:inline-flex; align-items:center; gap:.25rem; font-size:.68rem; font-weight:600;
  border-radius:999px; padding:.1rem .45rem; white-space:nowrap; border:1px solid transparent;
}
.inv-selo.good  { background:#ecfdf5; color:#047857; border-color:#a7f3d0; }
.inv-selo.warn  { background:#fffbeb; color:#b45309; border-color:#fde68a; }
.inv-selo.danger{ background:#fef2f2; color:#b91c1c; border-color:#fecaca; }
.inv-selo.calmo { background:#f1f5f9; color:#475569; border-color:#e2e8f0; }

/* barra de cobertura dentro da célula */
.inv-cob { display:flex; align-items:center; gap:.4rem; justify-content:flex-end; }
.inv-cob-track { width:56px; height:6px; border-radius:4px; background:#eef0f3; overflow:hidden; flex:0 0 auto; }
.inv-cob-fill  { height:100%; border-radius:4px; background:#10b981; }
.inv-cob-fill.warn  { background:#f59e0b; }
.inv-cob-fill.danger{ background:#ef4444; }

/* faixas de silêncio */
.inv-faixas { display:flex; flex-wrap:wrap; gap:.4rem; }
.inv-faixa {
  border:1px solid var(--inv-line); border-radius:8px; padding:.4rem .6rem;
  min-width:104px; border-top:3px solid var(--inv-tone,#94a3b8);
}
.inv-faixa-n { font-size:1.05rem; font-weight:700; color:var(--inv-tone,var(--inv-ink)); line-height:1.15; }
.inv-faixa-l { font-size:.68rem; color:var(--inv-mut); }

/* vazio: resultado, não ausência */
.inv-vazio { padding:1.4rem 1rem; text-align:center; color:var(--inv-mut); font-size:.8rem; line-height:1.55; }
.inv-vazio i { font-size:1.5rem; display:block; margin-bottom:.35rem; color:#cbd5e1; }
.inv-vazio.good i { color:#10b981; }
.inv-vazio b { color:var(--inv-ink); }

/* procedência: o que entra, o que fica de fora */
.inv-metodo {
  margin-top:.7rem; padding-top:.55rem; border-top:1px dashed var(--inv-line);
  font-size:.7rem; color:var(--inv-mut); line-height:1.55;
}
.inv-metodo b { color:#475569; font-weight:600; }

/* troca de filtro esmaece, não pisca branco */
.inv-recarregando { opacity:.55; transition:opacity .12s ease; pointer-events:none; }

@media (max-width: 820px) {
  .inv-head-meta { margin-left:0; width:100%; }
  .inv-acoes { grid-template-columns:1fr 1fr; }
  .inv-cob-track { width:34px; }
}
@media (max-width: 480px) {
  .inv-acoes { grid-template-columns:1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   SISTEMA VISUAL DSF — compartilhado (prefixo dsf-)
   Usado pelo Diagnóstico de Chamados e pelo Inventário de Ativos: as duas telas
   precisam parecer o mesmo sistema. Componentes: faixa de diagnóstico, Δ, ranking
   horizontal, bloco de ação.
   Paleta DSF: neutro #6B7280 · normal #2563EB · meta #16A34A
               atenção #D97706 · crítico #DC2626
   App é light-only (sem data-theme nem prefers-color-scheme): um só tema,
   de propósito — gráfico escuro sobre card branco já quebrou aqui antes.
═══════════════════════════════════════════════════════════════════ */
.dsf { --dsf-neutro:#6B7280; --dsf-normal:#2563EB; --dsf-meta:#16A34A;
            --dsf-atencao:#D97706; --dsf-critico:#DC2626; }

/* período: presets + intervalo escolhido a dedo */
/* .row do Bootstrap tem margem negativa de 8px (metade do gutter) e conta com um
   container que tenha padding. `.sup-page` não tinha: a página vazava 8px em toda
   resolução. Zerar a margem e deixar o espaçamento no padding das colunas. */
.dsf .row { margin-left:0; margin-right:0; }

/* 6 presets + "Personalizado" não cabem em uma linha no celular. */
.sup-seg { flex-wrap:wrap; }

.sup-per-custom { display:none; align-items:center; gap:.4rem; flex-wrap:wrap; }
.sup-per-custom.aberto { display:inline-flex; }
.sup-per-custom input[type=date] {
  border:1px solid var(--sup-line); border-radius:7px; padding:.22rem .45rem;
  font-size:.76rem; color:var(--sup-ink); background:#fff;
}
.sup-per-custom .sup-per-ate { color:var(--sup-mut); font-size:.74rem; }
.sup-per-aplicar {
  border:none; border-radius:7px; padding:.26rem .7rem; font-size:.74rem;
  font-weight:600; background:var(--brand); color:#fff;
}
.sup-per-aplicar:disabled { background:#cbd5e1; }
.sup-per-resolvido { font-size:.72rem; color:var(--sup-mut); white-space:nowrap; }

/* faixa de diagnóstico: a frase que a tela existe para dizer */
.dsf-diag {
  border:1px solid var(--sup-line); border-left:4px solid var(--dsf-critico);
  border-radius:10px; background:#fff; padding:.85rem 1rem; margin-bottom:.9rem;
}
.dsf-diag.ok { border-left-color:var(--dsf-meta); }
.dsf-diag-frase {
  font-size:1.02rem; font-weight:600; color:var(--sup-ink);
  line-height:1.45; margin:0 0 .55rem;
}
.dsf-diag-provas { display:flex; flex-wrap:wrap; gap:.4rem; }
.dsf-diag-prova {
  display:inline-flex; align-items:center; gap:.35rem; font-size:.74rem;
  border:1px solid var(--sup-line); border-radius:999px; padding:.2rem .6rem;
  color:var(--sup-mut); background:#f8fafc;
}
.dsf-diag-prova b { color:var(--sup-ink); font-weight:700; font-variant-numeric:tabular-nums; }
.dsf-diag-prova.critico { border-color:#fecaca; background:#fef2f2; color:#b91c1c; }
.dsf-diag-prova.critico b { color:#b91c1c; }
.dsf-diag-prova.atencao { border-color:#fde68a; background:#fffbeb; color:#b45309; }
.dsf-diag-prova.atencao b { color:#b45309; }
.dsf-diag-prova.meta { border-color:#a7f3d0; background:#ecfdf5; color:#047857; }
.dsf-diag-prova.meta b { color:#047857; }

/* Δ: nunca só cor — seta + sinal + texto do que melhorou/piorou */
.dsf-delta {
  display:inline-flex; align-items:center; gap:.2rem; font-size:.7rem; font-weight:600;
  font-variant-numeric:tabular-nums;
}
.dsf-delta.melhor { color:var(--dsf-meta); }
.dsf-delta.pior   { color:var(--dsf-critico); }
.dsf-delta.igual  { color:var(--dsf-neutro); }
.dsf-kpi-nota { display:block; font-size:.66rem; color:var(--sup-mut); line-height:1.35; }

/* ranking horizontal: um destaque, resto neutro (pré-atentivo) */
.dsf-rank-row { display:flex; align-items:center; gap:.5rem; margin-bottom:.4rem; }
.dsf-rank-pos {
  flex:0 0 1.15rem; height:1.15rem; border-radius:5px; background:#eef0f3;
  color:var(--sup-mut); font-size:.62rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.dsf-rank-lbl { flex:0 0 40%; font-size:.76rem; color:var(--sup-ink); min-width:0;
                overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* display:block é obrigatório: `width` não aplica a <span> inline — a barra
   simplesmente não aparecia, e a trilha cinza vazia parecia "sem dado". */
.dsf-rank-track { flex:1 1 auto; display:block; height:13px; border-radius:5px;
                  background:#eef0f3; overflow:hidden; min-width:40px; }
.dsf-rank-fill  { display:block; height:100%; border-radius:5px; background:var(--dsf-neutro); }
.dsf-rank-fill.foco { background:var(--dsf-normal); }
.dsf-rank-fill.critico { background:var(--dsf-critico); }
.dsf-rank-n { flex:0 0 5.6rem; text-align:right; font-size:.76rem; font-weight:600;
              color:var(--sup-ink); font-variant-numeric:tabular-nums; }
.dsf-rank-n small { color:var(--sup-mut); font-weight:400; }

/* o que fazer com o que a tela mostrou */
.dsf-acoes { display:grid; gap:.5rem; }
.dsf-acao {
  border:1px solid var(--sup-line); border-left:3px solid var(--dsf-atencao);
  border-radius:9px; padding:.6rem .75rem; background:#fff;
}
.dsf-acao.critico { border-left-color:var(--dsf-critico); }
.dsf-acao.meta    { border-left-color:var(--dsf-meta); }
.dsf-acao-t { font-size:.82rem; font-weight:700; color:var(--sup-ink); margin-bottom:.15rem; }
.dsf-acao-q { font-size:.74rem; color:var(--sup-mut); line-height:1.5; }
.dsf-acao-q b { color:var(--sup-ink); font-variant-numeric:tabular-nums; }
.dsf-acao-fazer { font-size:.74rem; color:var(--sup-ink); margin-top:.3rem; }
.dsf-acao-fazer b { color:var(--brand); }

.dsf-graf { height:250px; }
.dsf-nota { font-size:.7rem; color:var(--sup-mut); margin:.4rem 0 0; }

@media (max-width: 820px) {
  .dsf-rank-lbl { flex-basis:52%; }
  .dsf-rank-n { flex-basis:4.6rem; font-size:.7rem; }
  .dsf-graf { height:210px; }
}

/* export das tabelas de detalhamento (componente DSF, vale nas duas telas) */
.dsf-card-head { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.dsf-card-head .section-card-title { margin-bottom:0; }
/* aba sem card (Performance Agentes, Backlog): o botão ganha barra própria */
.dsf-card-head-solta { justify-content:flex-end; margin-bottom:.4rem; }
.dsf-export {
  margin-left:auto; border:1px solid #e6e9ee; background:#fff; color:#64748b;
  border-radius:7px; padding:.24rem .58rem; font-size:.72rem; font-weight:600;
  display:inline-flex; align-items:center; gap:.3rem; white-space:nowrap;
}
.dsf-export:hover { border-color:var(--brand); color:var(--brand); background:var(--brand-light); }

/* ═══════════════════════════════════════════════════════════════════════════
   CONFERÊNCIA DE LOCAL + OCORRÊNCIAS  (prefixo inc-)

   A tela é usada em pé, no corredor, segurando o celular com uma mão — e
   também sentado no notebook depois. Por isso ela é MOBILE-FIRST de verdade:
   o padrão é a coluna única com alvo de toque grande, e as regras de tela
   larga vêm depois, em min-width. O contrário (desktop primeiro + remendo de
   max-width) é o que produz botão de 24px no celular.

   Três invariantes:
     · alvo de toque nunca abaixo de 44px de altura no celular;
     · input com font-size 16px, senão o iOS dá zoom ao focar e a tela pula;
     · a ação principal (Achei / Fechar) fica sempre alcançável — barra fixa.
═══════════════════════════════════════════════════════════════════════════ */
.inc { --inc-ink:#0f172a; --inc-mut:#64748b; --inc-line:#e6e9ee; --inc-bg:#f7f8fa;
       --inc-ok:#15803d; --inc-warn:#b45309; --inc-bad:#b91c1c; --inc-info:#1d4ed8; }

/* ── Lista de conferências ───────────────────────────────────────────────── */
.inc-abrir {
  display:flex; flex-wrap:wrap; gap:.55rem; align-items:flex-end;
  background:#fff; border:1px solid var(--inc-line); border-radius:11px;
  padding:.75rem .8rem; margin-bottom:.9rem;
}
.inc-abrir-campo { display:flex; flex-direction:column; gap:.25rem; flex:1 1 220px; min-width:0; }
.inc-lbl { font-size:.68rem; font-weight:700; text-transform:uppercase;
           letter-spacing:.07em; color:var(--inc-mut); }
.inc-abrir select, .inc-abrir input[type=text] {
  font-size:16px; padding:.5rem .6rem; border:1px solid var(--inc-line);
  border-radius:8px; color:var(--inc-ink); background:#fff; min-height:44px; width:100%;
}
.inc-abrir-sub { display:flex; align-items:center; gap:.45rem; font-size:.8rem;
                 color:var(--inc-ink); min-height:44px; flex:0 0 auto; }
.inc-abrir-sub input { width:20px; height:20px; }

.inc-btn {
  border:1px solid var(--inc-line); background:#fff; color:var(--inc-ink);
  border-radius:9px; padding:.55rem .8rem; font-size:.82rem; font-weight:600;
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  min-height:44px; cursor:pointer; white-space:nowrap;
}
.inc-btn:disabled { opacity:.45; cursor:not-allowed; }
.inc-btn:hover:not(:disabled) { border-color:var(--brand); color:var(--brand); background:var(--brand-light); }
.inc-btn-p { background:var(--brand); border-color:var(--brand); color:#fff; }
.inc-btn-p:hover:not(:disabled) { background:#a50d26; border-color:#a50d26; color:#fff; }
.inc-btn-ok { background:var(--inc-ok); border-color:var(--inc-ok); color:#fff; }
.inc-btn-ok:hover:not(:disabled) { background:#116a31; border-color:#116a31; color:#fff; }
.inc-btn-sm { min-height:36px; padding:.3rem .55rem; font-size:.74rem; border-radius:7px; }

.inc-cards { display:grid; grid-template-columns:1fr; gap:.55rem; }
.inc-conf {
  background:#fff; border:1px solid var(--inc-line); border-left:4px solid var(--inc-mut);
  border-radius:11px; padding:.7rem .8rem; display:flex; flex-direction:column; gap:.45rem;
}
.inc-conf.aberta    { border-left-color:var(--inc-info); }
.inc-conf.fechada   { border-left-color:var(--inc-ok); }
.inc-conf.cancelada { border-left-color:var(--inc-mut); }
.inc-conf-topo { display:flex; align-items:flex-start; gap:.5rem; flex-wrap:wrap; }
.inc-conf-local { font-size:.95rem; font-weight:700; color:var(--inc-ink); line-height:1.25; }
.inc-conf-meta  { font-size:.72rem; color:var(--inc-mut); line-height:1.5; }
.inc-conf-acoes { display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.1rem; }

/* Selo de estado: cor NUNCA sozinha — sempre com ícone e palavra. */
.inc-selo {
  display:inline-flex; align-items:center; gap:.25rem; font-size:.68rem; font-weight:700;
  padding:.16rem .45rem; border-radius:999px; border:1px solid; white-space:nowrap;
}
.inc-selo.ok    { color:var(--inc-ok);   border-color:#bbf7d0; background:#f0fdf4; }
.inc-selo.warn  { color:var(--inc-warn); border-color:#fde68a; background:#fffbeb; }
.inc-selo.bad   { color:var(--inc-bad);  border-color:#fecaca; background:#fef2f2; }
.inc-selo.info  { color:var(--inc-info); border-color:#c7d7fe; background:#eff6ff; }
.inc-selo.mudo  { color:var(--inc-mut);  border-color:var(--inc-line); background:#f8fafc; }

/* ── Barra de progresso da conferência ───────────────────────────────────── */
.inc { padding-bottom:5.25rem; }
.inc-topo {
  background:var(--inc-bg);
  padding:.35rem 0 .5rem; margin:0 0 .6rem;
  border-bottom:1px solid var(--inc-line);
}
.inc-topo-head { display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap; margin-bottom:.4rem; }
.inc-topo-local { font-size:1rem; font-weight:700; color:var(--inc-ink); }
.inc-topo-n { font-size:.78rem; color:var(--inc-mut); margin-left:auto; font-variant-numeric:tabular-nums; }
.inc-barra { height:8px; border-radius:999px; background:#e9edf2; overflow:hidden; display:flex; }
.inc-barra span { display:block; height:100%; }
.inc-barra .ok  { background:var(--inc-ok); }
.inc-barra .bad { background:var(--inc-bad); }
.inc-barra .warn{ background:var(--inc-warn); }
.inc-legenda { display:flex; flex-wrap:wrap; gap:.15rem .7rem; margin-top:.35rem; font-size:.7rem; color:var(--inc-mut); }
.inc-legenda b { color:var(--inc-ink); font-variant-numeric:tabular-nums; }
.inc-legenda i.pt { width:8px; height:8px; border-radius:2px; display:inline-block; margin-right:.25rem; }

/* ── Filtros: contagem NA opção, o usuário sabe o que sobra antes de clicar ── */
.inc-filtros { display:flex; flex-direction:column; gap:.45rem; margin-bottom:.6rem; }
.inc-busca { position:relative; }
.inc-busca input {
  width:100%; font-size:16px; padding:.6rem .6rem .6rem 2.1rem; min-height:46px;
  border:1px solid var(--inc-line); border-radius:9px; background:#fff; color:var(--inc-ink);
}
.inc-busca i { position:absolute; left:.7rem; top:50%; transform:translateY(-50%); color:var(--inc-mut); }
.inc-busca .inc-limpa {
  left:auto; right:.55rem; cursor:pointer; padding:.35rem; transform:translateY(-50%);
}
.inc-chips { display:flex; gap:.35rem; overflow-x:auto; padding-bottom:.15rem; -webkit-overflow-scrolling:touch; }
.inc-chip {
  border:1px solid var(--inc-line); background:#fff; color:var(--inc-ink); cursor:pointer;
  border-radius:999px; padding:.42rem .68rem; font-size:.76rem; font-weight:600;
  white-space:nowrap; min-height:38px; display:inline-flex; align-items:center; gap:.3rem;
}
.inc-chip .n { font-size:.7rem; color:var(--inc-mut); font-variant-numeric:tabular-nums; }
.inc-chip.active { background:var(--brand); border-color:var(--brand); color:#fff; }
.inc-chip.active .n { color:rgba(255,255,255,.85); }

/* ── Cartão de equipamento ───────────────────────────────────────────────── */
.inc-itens { display:grid; grid-template-columns:1fr; gap:.5rem; }
.inc-item {
  background:#fff; border:1px solid var(--inc-line); border-left:4px solid #cbd5e1;
  border-radius:11px; padding:.6rem .7rem; display:flex; flex-direction:column; gap:.45rem;
}
.inc-item.encontrado     { border-left-color:var(--inc-ok);   background:#fbfefc; }
.inc-item.nao_encontrado { border-left-color:var(--inc-bad);  background:#fffbfb; }
.inc-item.danificado     { border-left-color:var(--inc-warn); background:#fffdf7; }
.inc-item.outro_local    { border-left-color:var(--inc-info); background:#fbfdff; }
.inc-item.campo          { border-left-style:dashed; }
.inc-item-topo { display:flex; align-items:flex-start; gap:.5rem; }
.inc-item-id { min-width:0; flex:1 1 auto; }
.inc-patrim {
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:1rem; font-weight:700; color:var(--inc-ink); letter-spacing:.02em;
}
.inc-patrim.vazio { font-family:inherit; font-size:.8rem; font-weight:600; color:var(--inc-warn); }
.inc-item-nome { font-size:.86rem; font-weight:600; color:var(--inc-ink);
                 overflow-wrap:anywhere; line-height:1.3; }
.inc-item-sub  { font-size:.72rem; color:var(--inc-mut); line-height:1.5; overflow-wrap:anywhere; }
.inc-agente {
  display:flex; align-items:flex-start; gap:.38rem; font-size:.7rem; line-height:1.35;
  border:1px solid var(--inc-line); border-radius:8px; padding:.34rem .46rem;
  background:#f8fafc; color:var(--inc-mut);
}
.inc-agente i { flex:0 0 auto; margin-top:.05rem; }
.inc-agente b { display:block; color:var(--inc-ink); font-size:.72rem; }
.inc-agente.ok { background:#f0fdf4; border-color:#bbf7d0; color:#166534; }
.inc-agente.warn { background:#fffbeb; border-color:#fde68a; color:#92400e; }
.inc-agente.off { background:#fff7ed; border-color:#fed7aa; color:#9a3412; }
.inc-agente.ok b, .inc-agente.warn b, .inc-agente.off b { color:inherit; }
.inc-item-selos { display:flex; flex-wrap:wrap; gap:.3rem; }
.inc-item-acoes { display:grid; grid-template-columns:1fr 1fr auto; gap:.35rem; }
.inc-item-acoes .inc-btn { padding:.5rem .4rem; font-size:.78rem; }
.inc-item-acoes .inc-btn.on { background:var(--inc-ok); border-color:var(--inc-ok); color:#fff; }
.inc-item-acoes .inc-btn.on.nao { background:var(--inc-bad); border-color:var(--inc-bad); }
.inc-mais { flex:0 0 auto; width:44px; }
.inc-item-ajuste {
  font-size:.72rem; color:var(--inc-ink); background:#f8fafc; border:1px dashed var(--inc-line);
  border-radius:8px; padding:.35rem .5rem; display:flex; align-items:center; gap:.35rem;
  flex-wrap:wrap; line-height:1.45;
}
.inc-item-ajuste .erro { color:var(--inc-bad); }
/* A caixa de seleção continua com 22px de desenho, mas o alvo de toque é o
   label de 44px. Checkbox nativo de 22px no celular erra o dedo uma vez em
   cada três — e aqui errar marca o equipamento errado. */
.inc-check-wrap {
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  width:44px; height:44px; flex:0 0 auto; margin:-.35rem -.3rem -.35rem -.4rem;
}
.inc-check { width:22px; height:22px; flex:0 0 auto; }

/* ── Barra fixa de ação ──────────────────────────────────────────────────── */
.inc-rodape {
  position:sticky; bottom:.45rem; z-index:7; margin:.7rem -.15rem 0;
  background:#fff; border:1px solid var(--inc-line); border-radius:12px;
  box-shadow:0 -3px 14px rgba(15,23,42,.09);
  padding:.55rem .65rem; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
}
.inc-rodape-txt { font-size:.74rem; color:var(--inc-mut); line-height:1.45; flex:1 1 140px; min-width:0; }
.inc-rodape-txt b { color:var(--inc-ink); }
.inc-rodape .inc-btn { flex:0 0 auto; }

/* ── Vazio e procedência ─────────────────────────────────────────────────── */
.inc-vazio {
  background:#fff; border:1px dashed var(--inc-line); border-radius:11px;
  padding:1.5rem 1rem; text-align:center; color:var(--inc-mut); font-size:.82rem; line-height:1.6;
}
.inc-vazio b { display:block; color:var(--inc-ink); font-size:.9rem; margin-bottom:.2rem; }
.inc-vazio i.bi { font-size:1.5rem; display:block; margin-bottom:.4rem; opacity:.55; }
.inc-metodo { font-size:.71rem; color:var(--inc-mut); line-height:1.6; margin-top:.6rem; }
.inc-metodo summary { cursor:pointer; font-weight:600; color:var(--inc-ink); }
.inc-aviso {
  display:flex; gap:.5rem; align-items:flex-start; font-size:.75rem; line-height:1.55;
  background:#fffbeb; border:1px solid #fde68a; border-left:3px solid #f59e0b;
  border-radius:9px; padding:.5rem .65rem; margin-bottom:.6rem; color:#78350f;
}
.inc-aviso.info { background:#eff6ff; border-color:#c7d7fe; border-left-color:#3b82f6; color:#1e3a8a; }
.inc-aviso b { font-weight:700; }

/* ── Ocorrências ─────────────────────────────────────────────────────────── */
.inc-oc { background:#fff; border:1px solid var(--inc-line); border-left:4px solid var(--inc-mut);
          border-radius:11px; padding:.65rem .75rem; display:flex; flex-direction:column; gap:.4rem; }
.inc-oc.alta  { border-left-color:var(--inc-bad); }
.inc-oc.media { border-left-color:var(--inc-warn); }
.inc-oc.baixa { border-left-color:var(--inc-mut); }
.inc-oc.resolvida { opacity:.72; border-left-color:var(--inc-ok); }
.inc-oc-tit { font-size:.88rem; font-weight:700; color:var(--inc-ink); line-height:1.35;
              overflow-wrap:anywhere; }
.inc-oc-meta { font-size:.72rem; color:var(--inc-mut); line-height:1.55; overflow-wrap:anywhere; }
.inc-oc-acoes { display:flex; gap:.4rem; flex-wrap:wrap; }

/* ── Formulário em modal (ajuste, ocorrência, fechamento) ────────────────── */
.inc-form { display:flex; flex-direction:column; gap:.6rem; }
.inc-form label { display:flex; flex-direction:column; gap:.25rem; }
.inc-form select, .inc-form input[type=text], .inc-form textarea {
  font-size:16px; padding:.55rem .6rem; border:1px solid var(--inc-line);
  border-radius:8px; color:var(--inc-ink); background:#fff; min-height:44px; width:100%;
}
.inc-form textarea { min-height:78px; resize:vertical; line-height:1.5; }
/* O X do Bootstrap tem 32px. Num modal que fecha ajuste de patrimônio, no
   celular, isso é pequeno demais — e aqui errar o toque fecha o formulário. */
.inc .btn-close { width:44px; height:44px; background-size:.85rem; margin:-.4rem -.4rem -.4rem 0; }
.inc-form-erro { font-size:.78rem; color:var(--inc-bad); line-height:1.5; }
.inc-form-nota { font-size:.72rem; color:var(--inc-mut); line-height:1.5; }
.inc-opcoes { display:grid; grid-template-columns:1fr; gap:.4rem; }
.inc-opcao {
  border:1px solid var(--inc-line); border-radius:9px; padding:.6rem .7rem; cursor:pointer;
  display:flex; gap:.55rem; align-items:flex-start; min-height:48px; background:#fff;
}
.inc-opcao:hover { border-color:var(--brand); background:var(--brand-light); }
.inc-opcao.sel { border-color:var(--brand); background:var(--brand-light); box-shadow:inset 0 0 0 1px var(--brand); }
.inc-opcao-t { font-size:.82rem; font-weight:600; color:var(--inc-ink); }
.inc-opcao-d { font-size:.72rem; color:var(--inc-mut); line-height:1.45; }

/* ── Telas maiores ───────────────────────────────────────────────────────── */
@media (min-width: 576px) {
  .inc-itens { grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); }
  .inc-cards { grid-template-columns:repeat(auto-fill, minmax(330px, 1fr)); }
  .inc-filtros { flex-direction:row; align-items:center; flex-wrap:wrap; }
  .inc-busca { flex:1 1 240px; }
  .inc-chips { flex:1 1 100%; }
  .inc-opcoes { grid-template-columns:1fr 1fr; }
}
@media (min-width: 992px) {
  .inc-item-acoes .inc-btn { font-size:.75rem; }
  .inc-chips { flex-wrap:wrap; overflow:visible; }
  .inc-rodape { margin-left:0; margin-right:0; }
}
@media (min-width: 1400px) {
  .inc-itens { grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); }
}
/* Espremer a lista de ativos numa impressão do navegador não é relatório —
   o PDF do servidor é o documento. Aqui só evitamos papel desperdiçado. */
@media print {
  .inc-topo, .inc-rodape, .inc-filtros, .inc-item-acoes, .inc-abrir { display:none !important; }
}

/* ── Chegar na aba, no celular ────────────────────────────────────────────
   Em 375px o .nav-tabs do Bootstrap empilha as 4 abas em 4 linhas, e o painel
   ainda tem faixa de diagnóstico + 4 KPIs + régua + frescor acima. O técnico
   rolava três telas só para achar "Conferência de local". As abas viram uma
   régua que rola na horizontal (dentro de si, a página nunca) e os KPIs vão a
   duas colunas — o bloco inteiro cabe em uma tela a menos. */
@media (max-width: 575.98px) {
  .inv-page .kpi-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .inv-page .kpi-value { font-size:.92rem; }
  .inv-page .nav-tabs {
    flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .inv-page .nav-tabs::-webkit-scrollbar { display:none; }
  .inv-page .nav-tabs .nav-item { flex:0 0 auto; }
  .inv-page .nav-tabs .nav-link { white-space:nowrap; font-size:.8rem; padding:.5rem .7rem; }
  .inv-toolbar-nota { margin-left:0; flex-basis:100%; }
}

/* Visual novo = classe nova. Só a LARGURA dos segmentos da barra fica inline —
   ela sai do dado a cada repaint e não existe classe possível para ela. */
.inc-legenda i.pt.ok   { background:var(--inc-ok); }
.inc-legenda i.pt.warn { background:var(--inc-warn); }
.inc-legenda i.pt.bad  { background:var(--inc-bad); }
.inc-legenda i.pt.vago { background:#e9edf2; }
.inc-cresce { min-width:0; flex:1 1 auto; }
.inc-aplicado { color:var(--inc-ok); font-weight:600; }
.inc-opcao > i.bi { font-size:1.1rem; color:var(--inc-mut); line-height:1.3; }

/* ── Causa do silêncio ────────────────────────────────────────────────────
   Cartão por origem de rede. O que a tela precisa deixar claro em um olhar:
   quantos calaram, quantos da MESMA origem continuam falando (é a prova de que
   o recorte é a rede e não a máquina) e se pararam juntos. Grid de 2 colunas
   que vira 1 no celular; nada aqui é largura inline. */
.inv-causa { display:grid; gap:.7rem; grid-template-columns:repeat(auto-fit, minmax(310px, 1fr)); }
.inv-causa-card {
  border:1px solid var(--sup-line); border-left:4px solid var(--inv-causa-tom, var(--dsf-neutro));
  border-radius:8px; padding:.75rem .85rem; background:#fff; min-width:0;
}
.inv-causa-card.bloco { background:#fffdf7; }
.inv-causa-topo { display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap; margin-bottom:.4rem; }
.inv-causa-tit { font-size:.82rem; font-weight:700; color:var(--sup-ink); }
.inv-causa-n {
  font-size:1.15rem; font-weight:700; color:var(--inv-causa-tom, var(--sup-ink));
  font-variant-numeric:tabular-nums; line-height:1;
}
.inv-causa-base { font-size:.72rem; color:var(--sup-mut); font-variant-numeric:tabular-nums; }

/* Barra calado × reportando. Percentual nunca sozinho: o par absoluto fica na
   legenda logo abaixo. */
.inv-causa-barra { display:flex; height:7px; border-radius:4px; overflow:hidden; background:#eef2f7; margin:.15rem 0 .3rem; }
.inv-causa-barra i { display:block; height:100%; }
.inv-causa-barra i.mudo { background:var(--inv-causa-tom, var(--dsf-critico)); }
.inv-causa-barra i.vivo { background:#c7d2da; }
.inv-causa-leg { font-size:.71rem; color:var(--sup-mut); line-height:1.5; }
.inv-causa-leg b { color:var(--sup-ink); font-variant-numeric:tabular-nums; }

/* Selo do bloco: cor sozinha não informa, então vem sempre com ícone e texto. */
.inv-causa-selo {
  display:inline-flex; align-items:center; gap:.3rem; font-size:.7rem; font-weight:600;
  padding:.12rem .45rem; border-radius:999px; border:1px solid transparent; white-space:nowrap;
}
.inv-causa-selo.bloco { background:#fef2f2; color:#b91c1c; border-color:#fecaca; }
.inv-causa-selo.disperso { background:#f1f5f9; color:#475569; border-color:#e2e8f0; }

.inv-causa-evid { margin:.45rem 0 0; padding:.45rem .55rem; background:#f8fafc; border-radius:6px; }
.inv-causa-linha { display:flex; gap:.5rem; font-size:.71rem; line-height:1.55; color:var(--sup-mut); }
.inv-causa-linha + .inv-causa-linha { margin-top:.2rem; }
.inv-causa-linha > span:first-child { flex:0 0 5.6rem; color:#94a3b8; }
.inv-causa-linha > span:last-child { min-width:0; color:var(--sup-ink); }
.inv-causa-chip {
  display:inline-block; font-size:.68rem; padding:.05rem .35rem; margin:0 .25rem .2rem 0;
  border-radius:4px; background:#eef2f7; color:#475569; font-variant-numeric:tabular-nums;
}
.inv-causa-fazer { margin-top:.5rem; font-size:.73rem; color:var(--sup-ink); line-height:1.55; }
.inv-causa-fazer b { font-weight:600; }

@media (max-width: 575.98px) {
  .inv-causa { grid-template-columns:1fr; }
  .inv-causa-linha { flex-direction:column; gap:0; }
  .inv-causa-linha > span:first-child { flex:none; }
}

/* Alvo de toque no celular. Medido no harness em 375×812: a régua de dias
   (28px), o botão de atualizar (29px), o de exportar (27px) e o olho que abre o
   equipamento (26px) ficavam abaixo do mínimo de 36px — com mouse não incomoda,
   com o dedo erra. Escopado em .inv-page para não mexer no painel de Chamados,
   que tem harness próprio. */
@media (max-width: 575.98px) {
  .inv-page .seg-pill,
  .inv-page .inv-btn-refresh,
  .inv-page .dsf-export { min-height:38px; padding-top:.45rem; padding-bottom:.45rem; }
  .inv-page .inv-olho {
    min-width:38px; min-height:38px;
    display:inline-flex; align-items:center; justify-content:center;
  }
}