/* ══════════════════════════════════════════════════════════════════════════════
   GS-TEMA · Padrão de tema do Soma+Gestão · v9.9.887
   Ivan (12/08/2026): "desenvolver um padrão perfeito claro para todas as páginas,
   revendo tudo" — e escolheu fazer as 3 fases.

   POR QUE ESTE ARQUIVO EXISTE
   Até aqui cada tela resolvia tema por conta: 3 "peles" duplicadas (Liberação,
   pcpSkin, instSkin), 2 chaves de preferência e 31 páginas sem tema nenhum. Cada
   tela nova revelava um buraco (v857, 859, 874, 881, 882, 885, 886 foram todas
   isso). Aqui a paleta passa a ser UMA só, escrita uma vez.

   COMO ESTÁ ORGANIZADO
   FASE 1 · TOKENS  — a paleta oficial em variáveis. É o que as telas novas devem
                      consumir (var(--gs-bg1), var(--gs-txt)…), nunca cor fixa.
   FASE 2 · PELE    — tradução das cores fixas que já existem espalhadas. Cobre as
                      ~40 tonalidades que respondem por ~90% do sistema.
   FASE 3 · MIGRAÇÃO — cada tela que for mexida troca cor fixa por token; a pele
                      encolhe sozinha conforme isso avança.

   ⚠ REGRA DE SEGURANÇA: NADA aqui pinta nada enquanto a classe `gs-claro` não
   estiver no <html>. Sem ativar o claro, a aparência de hoje fica intacta.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── FASE 1 · TOKENS ─────────────────────────────────────────────────────────
   ESCURO é o padrão da casa (referência: o terminal do chão, aprovado pelo Ivan).
   Cada token do claro é o PAR do escuro — mesma função, contraste invertido.     */
:root{
  /* superfícies, do fundo da página ao card em relevo */
  --gs-bg0:#0e1013; --gs-bg1:#16181d; --gs-bg2:#1a1c22; --gs-bg3:#121418;
  /* texto: principal, apoio, discreto */
  --gs-txt:#e8eaed; --gs-txt2:#9aa3ad; --gs-txt3:#6b7480;
  /* linhas e réguas */
  --gs-line:#ffffff12; --gs-line2:#ffffff26;
  /* marca */
  --gs-lima:#c6e040; --gs-lima2:#9bcf3b; --gs-lima-tx:#1a1c22;
  /* semântica — cor só quando é STATUS (princípio da casa) */
  --gs-ok:#34d399; --gs-erro:#f87171; --gs-alerta:#fbbf24;
  --gs-info:#7dd3fc; --gs-roxo:#a78bfa;
  /* fundos suaves de status */
  --gs-ok-bg:#0f231a; --gs-erro-bg:#2a1518; --gs-alerta-bg:#251d0d; --gs-info-bg:#152238;
}
html.gs-claro{
  --gs-bg0:#f6f7f9; --gs-bg1:#ffffff; --gs-bg2:#ffffff; --gs-bg3:#f8fafc;
  --gs-txt:#1a1c22; --gs-txt2:#5b6572; --gs-txt3:#94a3b8;
  --gs-line:#e4eaf0; --gs-line2:#cbd5e1;
  --gs-lima:#4d5e0c; --gs-lima2:#4d5e0c; --gs-lima-tx:#1a1c22;
  --gs-ok:#15803d; --gs-erro:#b91c1c; --gs-alerta:#a16207;
  --gs-info:#0369a1; --gs-roxo:#6d28d9;
  --gs-ok-bg:#f0fdf4; --gs-erro-bg:#fef2f2; --gs-alerta-bg:#fffbeb; --gs-info-bg:#e0f2fe;
}

/* base da página — só no claro, pra não mexer no que já funciona no escuro */
html.gs-claro, html.gs-claro body{ background:var(--gs-bg0); color:var(--gs-txt); }

/* ⚠ v890 · a pele compartilhada NÃO pode agir em tela que tem tema PRÓPRIO — duas peles na
   mesma tela foi o que quebrou a Agenda no escuro (v887). A guarda principal é o gs-tema.js,
   que nem põe a classe nesses casos; esta linha é a segunda tranca, para o caso de a classe
   chegar por outro caminho (ex.: alguém setar no console). */
html.gs-claro.tema-claro{ --gs-pele:off }

/* ── FASE 2 · PELE COMPARTILHADA ──────────────────────────────────────────────
   Traduz as cores fixas que já estão escritas nas telas. Casa por [style*=], que
   é como as 3 peles antigas funcionavam — mas agora em UM lugar e valendo pra
   TODAS as páginas, inclusive as 31 que nunca tiveram tema.

   ⚠ LIÇÕES QUE ESTE BLOCO CARREGA (cada uma custou uma versão):
   · o seletor é SENSÍVEL A MAIÚSCULA — #9BCF3B e #9bcf3b são regras diferentes (v882)
   · cor montada em rgba() não casa com regra escrita em hex (v885)
   · cor dentro de ternário existe igual — auditar por TODA cor hex do render (v886)
   · texto escuro sobre fundo LIMA continua escuro: a exceção mora no seletor (v791) */

/* ⚠ DAQUI PRA BAIXO as cores são LITERAIS de propósito: var() não resolve em
   motor antigo nem em alguns ambientes de teste, e pele que falha em silêncio é
   exatamente o problema que este arquivo veio resolver. Os TOKENS acima seguem
   valendo — são eles que as telas migradas na fase 3 consomem. */
/* superfícies escuras → claras */
html.gs-claro [style*="background:#0e1013"],html.gs-claro [style*="background:#0f1113"],
html.gs-claro [style*="background:#0d0f11"],html.gs-claro [style*="background:#0f1115"],
html.gs-claro [style*="background:#0c0e12"],html.gs-claro [style*="background:#0a0a0a"],
html.gs-claro [style*="background:#020617"],html.gs-claro [style*="background:#0f172a"],
html.gs-claro [style*="background:#111827"],html.gs-claro [style*="background:#0a0f1e"]{background:#f6f7f9!important}
html.gs-claro [style*="background:#16181d"],html.gs-claro [style*="background:#14161a"],
html.gs-claro [style*="background:#1a1c1f"],html.gs-claro [style*="background:#1a1c22"],
html.gs-claro [style*="background:#1e293b"],html.gs-claro [style*="background:#12151c"]{background:#ffffff!important}
html.gs-claro [style*="background:#121418"],html.gs-claro [style*="background:#1b1e24"],
html.gs-claro [style*="background:#060809"],html.gs-claro [style*="background:#040506"]{background:#f8fafc!important}
/* translúcidos sobre escuro (viram cinza claro, não somem) */
html.gs-claro [style*="background:#ffffff04"],html.gs-claro [style*="background:#ffffff05"],
html.gs-claro [style*="background:#ffffff06"],html.gs-claro [style*="background:#ffffff08"],
html.gs-claro [style*="background:#ffffff0d"],html.gs-claro [style*="background:#ffffff10"],
html.gs-claro [style*="background:#ffffff12"],html.gs-claro [style*="background:rgba(255,255,255"]{background:#f8fafc!important}

/* fundos de status */
html.gs-claro [style*="background:#0f231a"],html.gs-claro [style*="background:#123324"],
html.gs-claro [style*="background:#052e16"],html.gs-claro [style*="background:#0d2818"]{background:#f0fdf4!important}
html.gs-claro [style*="background:#2a1518"],html.gs-claro [style*="background:#1e1416"],
html.gs-claro [style*="background:#241315"],html.gs-claro [style*="background:#1a0a0a"],
html.gs-claro [style*="background:#e2504f14"]{background:#fef2f2!important}
html.gs-claro [style*="background:#251d0d"],html.gs-claro [style*="background:#221b0c"],
html.gs-claro [style*="background:#2c2410"],html.gs-claro [style*="background:#0f0e00"]{background:#fffbeb!important}
html.gs-claro [style*="background:#152238"],html.gs-claro [style*="background:#0a1628"],
html.gs-claro [style*="background:#0e2530"]{background:#e0f2fe!important}
html.gs-claro [style*="background:#1a1732"],html.gs-claro [style*="background:#191a2e"]{background:#f5f3ff!important}

/* textos claros → escuros */
html.gs-claro [style*="color:#e8eaed"],html.gs-claro [style*="color:#f0f2f4"],
html.gs-claro [style*="color:#e5e7eb"],html.gs-claro [style*="color:#e2e8f0"],
html.gs-claro [style*="color:#c7ccd4"],html.gs-claro [style*="color:#c9d1d9"]{color:#1a1c22!important}
html.gs-claro [style*="color:#9aa3ad"],html.gs-claro [style*="color:#8a93a0"],
html.gs-claro [style*="color:#8b93a1"],html.gs-claro [style*="color:#94a3b8"],
html.gs-claro [style*="color:#9ca3af"]{color:#5b6572!important}
html.gs-claro [style*="color:#6b7480"],html.gs-claro [style*="color:#7d8590"],
html.gs-claro [style*="color:#3f4650"]{color:#94a3b8!important}

/* status em texto */
html.gs-claro [style*="color:#34d399"],html.gs-claro [style*="color:#6ee7b7"],
html.gs-claro [style*="color:#4ade80"],html.gs-claro [style*="color:#22c55e"],
html.gs-claro [style*="color:#25b083"]{color:#15803d!important}
html.gs-claro [style*="color:#f87171"],html.gs-claro [style*="color:#fca5a5"],
html.gs-claro [style*="color:#ff9a99"],html.gs-claro [style*="color:#ef4444"]{color:#b91c1c!important}
html.gs-claro [style*="color:#fbbf24"],html.gs-claro [style*="color:#f5cd6b"],
html.gs-claro [style*="color:#fcd34d"],html.gs-claro [style*="color:#fde68a"],
html.gs-claro [style*="color:#eab308"],html.gs-claro [style*="color:#e0a53d"]{color:#a16207!important}
html.gs-claro [style*="color:#7dd3fc"],html.gs-claro [style*="color:#93c5fd"],
html.gs-claro [style*="color:#38bdf8"],html.gs-claro [style*="color:#3b82f6"],
html.gs-claro [style*="color:#22d3ee"],html.gs-claro [style*="color:#06b6d4"]{color:#0369a1!important}
html.gs-claro [style*="color:#a78bfa"],html.gs-claro [style*="color:#8b5cf6"]{color:#6d28d9!important}

/* LIMA — o caso mais delicado: ilegível sobre branco, mas é a marca.
   Vira lima escuro no texto; sobre fundo lima o texto continua escuro. */
html.gs-claro [style*="color:#c6e040"],html.gs-claro [style*="color:#9bcf3b"],
html.gs-claro [style*="color:#9BCF3B"],html.gs-claro [style*="color:#d3ef00"]{color:#4d5e0c!important}
html.gs-claro [style*="background:#c6e040"],html.gs-claro [style*="background:#9bcf3b"],
html.gs-claro [style*="background:#9BCF3B"],html.gs-claro [style*="background:rgba(198,224,64"]{color:#1a1c22!important}
html.gs-claro [style*="background:rgba(198,224,64"]{background:#f7fbe8!important;border-color:#c6e04099!important}
html.gs-claro [style*="background:rgba(198,224,64"] span{color:#4d5e0c!important}
html.gs-claro [style*="background:#c6e04010"]{background:#fbfde8!important}

/* linhas e bordas translúcidas */
html.gs-claro [style*="#ffffff08"],html.gs-claro [style*="#ffffff0a"],html.gs-claro [style*="#ffffff0d"],
html.gs-claro [style*="#ffffff10"],html.gs-claro [style*="#ffffff12"],html.gs-claro [style*="#ffffff14"],
html.gs-claro [style*="#ffffff15"],html.gs-claro [style*="#ffffff18"],html.gs-claro [style*="#ffffff1a"],
html.gs-claro [style*="#ffffff20"],html.gs-claro [style*="#ffffff22"],html.gs-claro [style*="#ffffff26"],
html.gs-claro [style*="#ffffff30"],html.gs-claro [style*="#334155"],html.gs-claro [style*="#1e293b"]{border-color:#e4eaf0!important}
html.gs-claro [style*="#34d39936"],html.gs-claro [style*="#166534"]{border-color:#86efac!important}
html.gs-claro [style*="#f8717136"],html.gs-claro [style*="#f8717150"],html.gs-claro [style*="#7f1d1d"],
html.gs-claro [style*="#e2504f55"],html.gs-claro [style*="#ef444425"],html.gs-claro [style*="#ef444430"]{border-color:#fecaca!important}
html.gs-claro [style*="#fbbf2436"],html.gs-claro [style*="#713f12"]{border-color:#fde68a!important}

/* a FAIXA DA MARCA (cabeçalho preto com GRUPOSOMA+) NUNCA inverte — decisão do
   Ivan na v851/857: "o cabeçalho fica igual nas duas versões" */
html.gs-claro .bar,html.gs-claro .gs-bar{background:#1a1c22!important;color:#e8eaed!important}
html.gs-claro .bar [style*="color:"],html.gs-claro .gs-bar [style*="color:"]{color:inherit!important}
/* v891 · dentro da faixa da marca NADA clareia: fundo de botão translúcido, borda e o texto
   das abas continuam como no escuro. Sem isto, o "Fechar" (branco sobre translúcido) some. */
html.gs-claro .bar [style*="background:"],html.gs-claro .gs-bar [style*="background:"]{background:rgba(255,255,255,.10)!important;color:#e8eaed!important}
html.gs-claro .bar img,html.gs-claro .gs-bar img,
html.gs-claro .bar svg,html.gs-claro .gs-bar svg{filter:none!important}
html.gs-claro .gs-bar [style*="background:#c6e040"],html.gs-claro .bar [style*="background:#c6e040"]{background:#c6e040!important;color:#1a1c22!important}

/* botão padrão do tema (injetado pelo gs-tema.js nas páginas que não têm um) */
.gs-tema-bt{position:fixed;right:14px;bottom:14px;z-index:99999;width:42px;height:42px;border-radius:50%;
  border:1px solid #cbd5e1;background:#ffffff;color:#1a1c22;font-size:18px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.28)}
.gs-tema-bt:hover{filter:brightness(1.12)}
@media print{ .gs-tema-bt{display:none!important} }
/* ══ v9.9.1185 · o interruptor do tema vira UM só, no mesmo canto de todas as telas.
   Os botões que viviam na barra de cada página saem: dois controles pra mesma coisa, em lugares
   diferentes conforme a tela, é o tipo de inconsistência que faz a pessoa procurar. As funções
   continuam no arquivo (regra da casa) — só perdem a porta duplicada. ══ */
#btnTema, #btnTemaLista, #themeToggleBtn, #pcpTemaBt{ display:none !important }

/* ══════════════════════════════════════════════════════════════════════════════
   FASE 0 · PADRÃO INDUSTRIAL · v9.9.1772
   Ivan (30/09): "vamos padrão industrial em todo o sistema; objetivo é ir fazendo página a
   página, começando pelo PCP". Base: ISA-101 (tela de operação de planta) + IBM Carbon.

   AS REGRAS (aprovadas no canvas "padrão industrial"):
   · normal é CINZA — cor nenhuma quando está tudo bem
   · 🟢 v9.9.1785 · Ivan (01/10): "pode usar verde no sistema todo — dá a nossa identidade visual, sem perder o padrão
     industrial". O VERDE DA CASA assume o papel que era do azul: AÇÃO e SELEÇÃO (botão principal, item escolhido,
     foco, link). Continua valendo: cinza = normal · amarelo = atenção · vermelho = problema. Verde NUNCA é estado.
     Três intensidades da mesma família, por contraste: --i-pri (lima cheio, botão principal, texto ESCURO por cima) ·
     --i-az (borda/filete/foco: oliva no claro, lima no escuro) · --i-az-tx (texto/link: oliva escuro no claro —
     lima puro em fundo branco não se lê — e lima no escuro).
   · AMARELO = atenção · VERMELHO = problema/atraso · AZUL = só o que é clicável/selecionado
   · IBM Plex Sans no texto, IBM Plex Mono nos números · cantos de 4 px · grade de 8 px
   · marca lima/grafite SÓ no logotipo e nos impressos — nunca como cor de tela
   · claro e escuro: TV no escuro, escritório no claro

   COMO USAR: a tela migrada põe `class="ind"` no seu palco e usa SÓ as classes daqui
   (ind-card, ind-kpi, ind-btn, ind-dot…). Cor sai dos tokens --i-*, NUNCA de hex no style=.
   🧠 Por quê: as peles antigas traduzem casando o HEX EXATO do style= inline (gs-claro,
   #pcpBody.pcplt). Tela migrada não escreve cor inline — então as peles não a alcançam, e o
   claro/escuro vem dos tokens, num lugar só. Fim da classe de defeito "cor nova que a pele
   não conhece" (v1109, v1251, v1381).

   ⚠ SEGURANÇA: nada aqui pinta fora de `.ind`. Tela não migrada fica exatamente como está.
   ══════════════════════════════════════════════════════════════════════════════ */

/* tokens — ESCURO (padrão da casa; é o da TV do chão) */
.ind{
  --i-bg:#161616; --i-l1:#262626; --i-l2:#333333; --i-bd:#393939; --i-bdr:#333333; --i-bd2:#6f6f6f;
  --i-tx:#f4f4f4; --i-tx2:#c6c6c6; --i-tx3:#a8a8a8; --i-tx4:#8d8d8d;
  --i-neu:#a8a8a8; --i-neu2:#525252;
  --i-az:#c6e040; --i-az-tx:#d4ec5c; --i-az-bg:#2a3010; --i-pri:#c6e040; --i-pri-tx:#0e1013;
  --i-am:#f1c21b; --i-am-tx:#f1c21b; --i-am-bg:#302400; --i-am-bd:#8e6a00;
  --i-vm:#fa4d56; --i-vm-tx:#ff8389; --i-vm-bg:#2d0709; --i-vm-bd:#750e13;
  --i-sans:'IBM Plex Sans','Segoe UI',system-ui,-apple-system,sans-serif;
  --i-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-family:var(--i-sans); color:var(--i-tx); font-size:14px; line-height:1.4;
  -webkit-font-smoothing:antialiased;
}
/* tokens — CLARO (escritório). Vale pelo tema da casa (gs-claro), pela pele do PCP (pcplt)
   ou pedido direto (ind-claro). O escuro explícito do PCP (pcpdk) vence o gs-claro. */
/* v1780 · o Início tem tema PRÓPRIO (body.dark-mode = escuro, sem ela = claro) e a Liberação também (html.tema-claro):
   os tokens seguem o interruptor de cada página, e o menu (que mora no body) segue junto com a página. */
html.tema-claro .ind, body.gs-idx:not(.dark-mode) .ind, html.gs-claro .ind, #pcpBody.pcplt .ind, .ind.ind-claro, html body.gs-idx .ind.ind-claro{
  --i-bg:#f4f4f4; --i-l1:#ffffff; --i-l2:#f4f4f4; --i-bd:#e0e0e0; --i-bdr:#ebebeb; --i-bd2:#c6c6c6;
  --i-tx:#161616; --i-tx2:#393939; --i-tx3:#6f6f6f; --i-tx4:#8d8d8d;
  --i-neu:#525252; --i-neu2:#c6c6c6;
  --i-az:#6e9000; --i-az-tx:#4d6b00; --i-az-bg:#f2f8dc; --i-pri:#c6e040; --i-pri-tx:#161616;
  --i-am:#f1c21b; --i-am-tx:#8e6a00; --i-am-bg:#fcf4d6; --i-am-bd:#f1c21b;
  --i-vm:#da1e28; --i-vm-tx:#a2191f; --i-vm-bg:#fff1f1; --i-vm-bd:#ffb3b8;
}
/* v1773 · `ind-escuro` é o escuro pedido pela própria tela (o menu do PCP mora fora do #pcpBody). Tem que vencer
   o `html.gs-claro .ind` — mesmo peso (0,2,1), e vem DEPOIS. */
/* 🔴 v1780 · o tema PEDIDO pela própria peça (ind-claro / ind-escuro — o menu do PCP segue o tema DO PCP) tem que vencer
   o tema da página (body.gs-idx…, 3 classes). Medido pelo teste do menu do PCP: Início claro + PCP escuro → menu do PCP
   saía claro. `html body.gs-idx .ind.ind-escuro` pesa (0,3,2) e vence as duas regras da página. */
html .ind.ind-escuro, html body.gs-idx .ind.ind-escuro, body.gs-idx.dark-mode .ind, #pcpBody.pcpdk .ind{
  --i-bg:#161616; --i-l1:#262626; --i-l2:#333333; --i-bd:#393939; --i-bdr:#333333; --i-bd2:#6f6f6f;
  --i-tx:#f4f4f4; --i-tx2:#c6c6c6; --i-tx3:#a8a8a8; --i-tx4:#8d8d8d;
  --i-neu:#a8a8a8; --i-neu2:#525252;
  --i-az:#c6e040; --i-az-tx:#d4ec5c; --i-az-bg:#2a3010; --i-pri:#c6e040; --i-pri-tx:#0e1013;
  --i-am:#f1c21b; --i-am-tx:#f1c21b; --i-am-bg:#302400; --i-am-bd:#8e6a00;
  --i-vm:#fa4d56; --i-vm-tx:#ff8389; --i-vm-bg:#2d0709; --i-vm-bd:#750e13;
}
.ind *, .ind *::before, .ind *::after{ box-sizing:border-box }

/* palco, pilha e títulos de seção */
.ind-palco{ background:var(--i-bg); color:var(--i-tx) }
.ind-pilha{ display:flex; flex-direction:column; gap:16px }
.ind-sec{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:8px }
.ind-sec-t{ font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--i-tx2) }
.ind-sec-t small{ font-size:12.5px; font-weight:600; letter-spacing:.04em; color:var(--i-tx4); margin-left:8px; text-transform:none }
.ind-rot{ font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--i-tx4) }

/* superfícies */
.ind-card{ background:var(--i-l1); border:1px solid var(--i-bd); border-radius:4px; padding:16px }
.ind-caixa{ border:1px solid var(--i-bd); border-radius:4px; padding:8px 12px }

/* números e textos */
.ind-num{ font-family:var(--i-mono); font-variant-numeric:tabular-nums; font-weight:600; letter-spacing:-.01em }
/* ⚠ cor de texto com peso (0,2,0): tem que vencer a cor-base de qualquer peça (.ind-kpi-v, .ind-os-cli…).
   🔬 MEDIDO na 1ª renderização: "Paradas 1" saía preto — .ind-vm perdia para .ind-kpi-v, declarada depois. */
.ind .ind-tx2{ color:var(--i-tx2) } .ind .ind-tx3{ color:var(--i-tx3) } .ind .ind-tx4{ color:var(--i-tx4) }
.ind .ind-am{ color:var(--i-am-tx) } .ind .ind-vm{ color:var(--i-vm-tx) }
.ind-corta{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0 }

/* ponto de estado (ISA-101: forma + cor, a cor só quando é estado anormal) */
.ind-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--i-neu); flex-shrink:0 }
.ind-dot.n2{ background:var(--i-neu2) } .ind-dot.am{ background:var(--i-am) } .ind-dot.vm{ background:var(--i-vm) }

/* botões — altura na grade de 8 (40 e 32) */
.ind-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:40px; padding:0 16px;
  border-radius:4px; border:1px solid var(--i-bd2); background:var(--i-l1); color:var(--i-tx);
  font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; white-space:nowrap; text-decoration:none }
.ind-btn.sm{ height:32px; padding:0 12px; font-size:13px }
.ind-btn:hover{ border-color:var(--i-az); color:var(--i-az-tx) }
.ind-btn.on{ background:var(--i-az-bg); border-color:var(--i-az); color:var(--i-az-tx) }
.ind-btn.pri{ background:var(--i-pri); border-color:var(--i-pri); color:var(--i-pri-tx) }
.ind-btn:focus-visible, .ind-clic:focus-visible, .ind-kpi:focus-visible{ outline:2px solid var(--i-az); outline-offset:1px }
.ind-link{ color:var(--i-az-tx); font-weight:600; text-decoration:none; cursor:pointer; background:none; border:0; padding:0; font:inherit }
.ind-link:hover{ text-decoration:underline }
.ind-clic{ cursor:pointer }

/* campo */
.ind-in{ height:40px; border-radius:4px; border:1px solid var(--i-bd2); background:var(--i-l1); color:var(--i-tx);
  padding:0 12px; font:inherit; font-size:14px; outline:0 }
.ind-in.sm{ height:32px; font-size:13.5px }
.ind-in:focus{ border-color:var(--i-az); box-shadow:inset 0 0 0 1px var(--i-az) }

/* etiquetas de estado */
.ind-tag{ display:inline-flex; align-items:center; gap:4px; height:22px; padding:0 8px; border-radius:4px;
  font-size:12px; font-weight:600; white-space:nowrap; background:var(--i-l2); color:var(--i-tx2); border:1px solid transparent }
.ind-tag.am{ background:var(--i-am-bg); color:var(--i-am-tx); border-color:var(--i-am-bd) }
.ind-tag.vm{ background:var(--i-vm-bg); color:var(--i-vm-tx); border-color:var(--i-vm-bd) }
.ind-tag.cont{ background:transparent; border-color:var(--i-bd) }
.ind-tag.forte{ background:var(--i-vm); color:#fff }

/* KPI */
.ind-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:12px }
.ind-kpi{ background:var(--i-l1); border:1px solid var(--i-bd); border-radius:4px; padding:16px; display:flex;
  flex-direction:column; gap:4px; text-align:left; font:inherit; color:inherit; min-width:0 }
button.ind-kpi{ cursor:pointer }
button.ind-kpi:hover{ border-color:var(--i-az) }
.ind-kpi.on{ border-color:var(--i-az); box-shadow:inset 0 0 0 1px var(--i-az) }
.ind-kpi-lb{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:13.5px; font-weight:600; color:var(--i-tx2) }
.ind-kpi-v{ font-family:var(--i-mono); font-variant-numeric:tabular-nums; font-size:32px; font-weight:600; line-height:1.15; color:var(--i-tx) }
.ind-kpi-sub{ font-size:13px; color:var(--i-tx3); min-height:18px }

/* lista de alertas (andon) */
.ind-lista{ background:var(--i-l1); border:1px solid var(--i-bd); border-radius:4px; padding:0 16px }
.ind-lin{ display:grid; grid-template-columns:8px minmax(0,1fr) auto; gap:16px; align-items:center; padding:12px 0; border-bottom:1px solid var(--i-bdr) }
.ind-lin:last-child{ border-bottom:0 }
.ind-lin-t{ font-size:15px; font-weight:600; color:var(--i-tx) }
.ind-lin-d{ font-size:13.5px; color:var(--i-tx3) }

/* tabela de linhas (setores) */
.ind-tab{ background:var(--i-l1); border:1px solid var(--i-bd); border-radius:4px; padding:0 16px }
.ind-tab-h, .ind-tab-l{ display:grid; grid-template-columns:200px minmax(0,1fr) 168px 120px; gap:16px }
.ind-tab-h{ padding:10px 0; border-bottom:1px solid var(--i-bdr) }
.ind-tab-l{ align-items:start; padding:12px 0; border-bottom:1px solid var(--i-bdr) }
.ind-tab-l:last-child{ border-bottom:0 }
.ind-tab-dir{ text-align:right }
@media (max-width:900px){
  .ind-tab-h{ display:none }
  .ind-tab-l{ grid-template-columns:minmax(0,1fr) auto; }
  .ind-tab-l > :nth-child(2){ grid-column:1 / -1 }
}

/* grade de cartões */
.ind-grade{ display:grid; grid-template-columns:repeat(auto-fill,minmax(288px,1fr)); gap:8px }
.ind-grade.larga{ grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px }

/* barra de proporção (fila × limite) */
.ind-barra{ height:8px; border-radius:4px; background:var(--i-l2); display:flex; overflow:hidden }
.ind-barra > i{ display:block; height:100%; background:var(--i-neu) }
.ind-barra > i.am{ background:var(--i-am) } .ind-barra > i.vm{ background:var(--i-vm) }

/* histograma */
.ind-histo{ display:flex; align-items:flex-end; gap:8px; height:80px }
.ind-histo > div{ flex:1 1 0; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:4px; height:100% }
.ind-histo b{ font-family:var(--i-mono); font-size:13px; font-weight:600; color:var(--i-tx2) }
.ind-histo i{ display:block; width:100%; border-radius:2px 2px 0 0; background:var(--i-neu2) }
.ind-histo i.n{ background:var(--i-neu) } .ind-histo i.am{ background:var(--i-am) } .ind-histo i.vm{ background:var(--i-vm) }
.ind-histo-x{ display:flex; gap:8px; margin-top:4px; border-top:1px solid var(--i-bd); padding-top:4px }
.ind-histo-x > span{ flex:1 1 0; text-align:center; font-size:12px; color:var(--i-tx3) }

/* anel (gargalo) */
.ind-anel{ width:140px; height:140px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:conic-gradient(var(--c,var(--i-neu)) 0 var(--p,0%), var(--i-l2) var(--p,0%) 100%) }
.ind-anel > div{ width:112px; height:112px; border-radius:50%; background:var(--i-l1); display:flex; flex-direction:column;
  align-items:center; justify-content:center }
.ind-anel.am{ --c:var(--i-am) } .ind-anel.vm{ --c:var(--i-vm) }

/* bloco recolhível (details) */
.ind-det{ background:var(--i-l1); border:1px solid var(--i-bd); border-radius:4px; padding:12px 16px }
.ind-det > summary{ cursor:pointer; list-style-position:inside }

/* v9.9.1773 · grades de página — SEMPRE por classe, nunca no style=.
   🔬 MEDIDO na v1773: a régua de celular do PCP (≤430px, v1721) força `grid-template-columns:1fr 1fr` em TODO
   elemento com grade escrita no style= — e três grades do Ao vivo da v1772 estavam lá. */
.ind-duo{ display:grid; grid-template-columns:300px minmax(0,1fr); gap:12px; align-items:stretch }
.ind-duo.estreito{ grid-template-columns:240px minmax(0,1fr) }
.ind-af-g{ display:grid; grid-template-columns:minmax(220px,300px) minmax(0,1fr); gap:24px }
.ind-minis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:8px }
.ind-pareto{ display:grid; grid-template-columns:200px minmax(0,1fr) 64px; gap:12px; align-items:center }
@media (max-width:1000px){ .ind-duo, .ind-duo.estreito, .ind-af-g{ grid-template-columns:minmax(0,1fr) } }
@media (max-width:600px){ .ind-pareto{ grid-template-columns:minmax(0,1fr) 56px } .ind-pareto > .ind-barra{ grid-column:1 / -1; order:3 } }

/* ── menu lateral (padrão Carbon "side nav"): grupos, destino atual em azul, pendência como número;
   recolhido vira coluna de ícones e a pendência vira ponto ── */
.ind-nav{ width:232px; height:100%; display:flex; flex-direction:column; background:var(--i-l1); border-right:1px solid var(--i-bd);
  color:var(--i-tx); overflow-y:auto; overflow-x:hidden }
.ind-nav-cab{ display:flex; align-items:flex-start; gap:8px; padding:16px 12px 12px 16px; border-bottom:1px solid var(--i-bdr) }
.ind-nav-tit{ font-size:18px; font-weight:600; line-height:1.2; flex:1; min-width:0 }
/* v9.9.1774 · o selo "tempo real · último carimbo há 2 h" cortava no menu (print do Ivan): quebra em 2 linhas */
.ind-nav-selo{ display:flex; align-items:flex-start; gap:6px; font-size:12.5px; line-height:1.35; color:var(--i-tx3); margin-top:4px }
.ind-nav-selo .ind-dot{ margin-top:4px }
.ind-nav-selo.am{ color:var(--i-am-tx) }
.ind-nav-selo .ind-dot{ width:8px; height:8px }
.ind-nav-corpo{ display:flex; flex-direction:column; gap:12px; padding:12px 8px; flex:1 }
.ind-nav-g{ display:flex; flex-direction:column; gap:2px }
.ind-nav-gt{ font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--i-tx4); padding:0 8px 4px }
.ind-nav-it{ position:relative; height:36px; flex-shrink:0; display:flex; align-items:center; gap:6px; padding:0 6px 0 8px; border:0; border-left:3px solid transparent;
  border-radius:4px; background:transparent; color:var(--i-tx2); font:inherit; font-size:14px; font-weight:500; cursor:pointer; text-align:left; width:100% }
.ind-nav-it:hover{ background:var(--i-l2); color:var(--i-tx) }
.ind-nav-it.on{ background:var(--i-az-bg); color:var(--i-az-tx); border-left-color:var(--i-az); font-weight:600 }
.ind-nav-it.am{ color:var(--i-am-tx); font-weight:600 }
.ind-nav-it:focus-visible, .ind-nav-bt:focus-visible{ outline:2px solid var(--i-az); outline-offset:-2px }
.ind-nav-ic{ width:20px; height:20px; margin-right:4px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0 }
.ind-nav-ic svg{ width:20px; height:20px }
.ind-nav-tx{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.ind-nav-n{ min-width:20px; height:20px; padding:0 5px; border-radius:4px; background:var(--i-l2); color:var(--i-tx2); font-size:12px; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0 }
.ind-nav-n.am{ background:var(--i-am); color:#161616 } .ind-nav-n.vm{ background:var(--i-vm); color:#fff }
.ind-nav-fora{ font-size:12px; color:var(--i-tx4); white-space:nowrap }
/* 🔬 MEDIDO a 900px de altura: o "Fechar o painel" ficava abaixo da dobra. O pé gruda no fundo do menu. */
.ind-nav-pe{ padding:12px 12px 16px; border-top:1px solid var(--i-bdr); position:sticky; bottom:0; background:var(--i-l1) }
.ind-nav-bt{ width:40px; height:40px; flex-shrink:0; border-radius:4px; border:1px solid var(--i-bd2); background:var(--i-l1); color:var(--i-tx);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; font:inherit; font-size:15px; font-weight:600 }
.ind-nav-bt:hover{ border-color:var(--i-az); color:var(--i-az-tx) }
.ind-nav-pe .ind-btn{ width:100% }
/* recolhido: só ícones; o número de pendência vira ponto; o nome aparece no title */
.ind-nav.rec{ width:56px }
.ind-nav.rec .ind-nav-cab{ flex-direction:column; align-items:center; padding:12px 0 8px }
.ind-nav.rec .ind-nav-tit, .ind-nav.rec .ind-nav-selo span:not(.ind-dot), .ind-nav.rec .ind-nav-tx, .ind-nav.rec .ind-nav-fora{ display:none }
.ind-nav.rec .ind-nav-selo{ margin:4px 0 0; justify-content:center }
.ind-nav.rec .ind-nav-corpo{ padding:8px 6px; gap:6px }
.ind-nav.rec .ind-nav-gt{ font-size:0; padding:0; height:1px; background:var(--i-bd); margin:6px 8px }
.ind-nav.rec .ind-nav-g:first-child .ind-nav-gt{ display:none }
.ind-nav.rec .ind-nav-it{ justify-content:center; padding:0; height:44px }
.ind-nav.rec .ind-nav-n{ position:absolute; top:6px; right:6px; min-width:0; width:9px; height:9px; padding:0; border-radius:50%; font-size:0; border:2px solid var(--i-l1) }
.ind-nav.rec .ind-nav-n:not(.am):not(.vm){ display:none }
.ind-nav.rec .ind-nav-pe{ padding:12px 8px 16px; display:flex; justify-content:center }
.ind-nav.rec .ind-nav-pe .ind-btn{ width:40px; padding:0; font-size:0 }
.ind-nav.rec .ind-nav-pe .ind-btn svg{ width:18px; height:18px }

/* cartão de O.S. (Ao vivo e o que vier) — o filete da esquerda diz o estado */
.ind-os{ display:flex; flex-direction:column; gap:4px; padding:12px; border-radius:4px; background:var(--i-l1);
  border:1px solid var(--i-bd); border-left:3px solid var(--i-bd); color:var(--i-tx); min-width:0; text-align:left }
.ind-os.rod{ border-left-color:var(--i-neu) } .ind-os.am{ border-left-color:var(--i-am) }
.ind-os.vm{ border-left-color:var(--i-vm); background:var(--i-vm-bg) }
.ind-os.ind-clic:hover{ border-color:var(--i-az); border-left-color:var(--i-az) }
.ind-os-cab{ display:flex; align-items:center; gap:8px; min-width:0 }
.ind-os-n{ font-family:var(--i-mono); font-variant-numeric:tabular-nums; font-size:16px; font-weight:600 }
.ind-os-pz{ margin-left:auto; font-size:12.5px; font-weight:600; color:var(--i-tx3); white-space:nowrap }
.ind-os-pz.am{ color:var(--i-am-tx) } .ind-os-pz.vm{ color:var(--i-vm-tx) }
.ind-os-cli{ font-size:12.5px; font-weight:600; color:var(--i-tx3) }
.ind-os-st{ font-size:13px; color:var(--i-tx2) } .ind-os-st.vm{ color:var(--i-vm-tx); font-weight:600 }
.ind-os-pe{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; padding-top:8px; margin-top:4px; border-top:1px solid var(--i-bdr) }
.ind-rod{ flex-shrink:0 } .ind-rod .t{ stroke:var(--i-bd) } .ind-rod .p{ stroke:var(--i-neu) } .ind-rod .p.am{ stroke:var(--i-am) }
/* v9.9.1775 · texto só para leitor de tela (contexto que a coluna já dá a quem enxerga) */
.ind-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }

/* v9.9.1775 · RASTREIO — linha da O.S. (largura fixa por coluna; a caixa rola para o lado, nunca encavala) */
.ind-rast{ background:var(--i-l1); border:1px solid var(--i-bd); border-radius:4px; padding:0 16px; overflow-x:auto }
.ind-rast-h, .ind-rast-l{ display:grid; grid-template-columns:20px 84px minmax(220px,1fr) 380px 150px 200px 104px; gap:16px; min-width:1240px }
.ind-rast-h{ padding:10px 0; border-bottom:1px solid var(--i-bdr) }
.ind-rast-l{ align-items:center; padding:12px 0; cursor:pointer }
.ind-rast-os{ border-bottom:1px solid var(--i-bdr); min-width:1240px }
.ind-rast-os:last-child{ border-bottom:0 }
.ind-rast-l:hover .ind-rast-n{ color:var(--i-az-tx) }

/* v9.9.1775 · TRILHO DE BIPES — só as posições que receberam batida, na ordem do cadastro.
   ● passou · ◉ (anel) tem peça ali agora. Largura fixa: com muitas posições os pontos se aproximam e o nome encurta. */
.ind-trilho{ display:grid; grid-template-columns:repeat(var(--n,1), minmax(0,92px)); align-items:start }
.ind-trilho > div{ position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0; padding:0 2px }
.ind-trilho > div + div::before{ content:''; position:absolute; top:6px; left:calc(-50% + 8px); right:calc(50% + 8px); height:2px; background:var(--i-neu) }
.ind-trilho i{ display:block; width:12px; height:12px; border-radius:50%; box-sizing:border-box; background:var(--i-neu); border:2px solid var(--i-neu); flex-shrink:0 }
.ind-trilho i.aqui{ background:var(--i-tx); border-color:var(--i-tx); box-shadow:0 0 0 2px var(--i-l1), 0 0 0 4px var(--i-tx) }
.ind-trilho b{ max-width:100%; font-size:11.5px; font-weight:600; line-height:1.2; color:var(--i-tx); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.ind-trilho small{ font-size:11.5px; line-height:1.1; color:var(--i-tx3); white-space:nowrap }
.ind-trilho small.aqui{ color:var(--i-tx); font-weight:600 }

/* v9.9.1775 · MATRIZ PEÇA × POSIÇÃO (a "ficha de rota" da O.S. aberta). --cols = posições bipadas nesta O.S. */
.ind-mtz-cx{ padding:0 0 16px 36px; overflow-x:auto }
/* v1781 · Ivan: "precisa aparecer a imagem — na verdade é padrão: todo item sempre precisa trazer a imagem" → coluna de imagem */
.ind-mtz{ display:grid; grid-template-columns:56px 72px minmax(220px,300px) repeat(var(--cols,1), 168px); min-width:max-content; font-size:13px }
.ind-mtz > *{ padding:8px; border-bottom:1px solid var(--i-bdr); min-width:0 }
.ind-mtz > .h{ padding:6px 8px; font-size:12px; font-weight:700; color:var(--i-tx2); border-bottom-color:var(--i-bd) }
.ind-mtz > .h.r{ letter-spacing:.06em; color:var(--i-tx4) }
.ind-mtz > .c{ border-left:1px solid var(--i-bdr); display:flex; flex-direction:column; gap:1px }
.ind-mtz > .c.aqui{ background:var(--i-l2); box-shadow:inset 3px 0 0 var(--i-tx) }
.ind-mtz > .c b{ font-weight:600; color:var(--i-tx) }
.ind-mtz > .c span{ font-size:12px; color:var(--i-tx3) }
.ind-mtz > .c.nada{ color:var(--i-tx4) }
.ind-mtz > .c.sb{ background:var(--i-am-bg); box-shadow:inset 3px 0 0 var(--i-am) }   /* v1777 · item sem nenhum bipe, no lugar dele */
.ind-mtz > .num{ font-weight:600; padding-left:0 }
.ind-mtz > .img{ padding:6px 8px }
.ind-img{ display:block; width:56px; height:56px; border-radius:4px; border:1px solid var(--i-bd); background:#fff; object-fit:contain; cursor:zoom-in }
.ind-img:hover{ border-color:var(--i-az) }
.ind-img.nada{ display:flex; align-items:center; justify-content:center; text-align:center; background:var(--i-l2); color:var(--i-tx4); font-size:10.5px; line-height:1.1; cursor:default; border-style:dashed }
.ind-mtz > .desc{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.ind-mtz > .larga{ grid-column:1 / -1; padding:4px 0 10px }
.ind-mtz > .grupo{ grid-column:1 / -1; padding:12px 0 4px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--i-tx2) }
.ind-mtz > .grupo.am{ color:var(--i-am-tx) }
.ind-mtz > .seguiu{ color:var(--i-tx3) }

/* v9.9.1775 · cartão de posição (filtro do Rastreio) */
.ind-pos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px }
.ind-pos > button{ text-align:left; background:var(--i-l1); border:1px solid var(--i-bd); border-radius:4px; padding:12px; cursor:pointer; font:inherit; color:var(--i-tx); display:flex; flex-direction:column; gap:2px; min-width:0 }
.ind-pos > button:hover{ border-color:var(--i-az) }
.ind-pos > button.on{ background:var(--i-az-bg); border-color:var(--i-az); box-shadow:inset 0 0 0 1px var(--i-az) }
.ind-pos > button.on .ind-pos-t{ color:var(--i-az-tx) }
.ind-pos-t{ display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--i-tx2); min-width:0 }
.ind-pos-t span:last-child{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.ind-pos-n{ font-size:26px; font-weight:600; line-height:1.15 }
.ind-pos-s{ font-size:12.5px; color:var(--i-tx3) }

/* vazio de linha */
.ind-vazio{ border:1px dashed var(--i-bd2); border-radius:4px; padding:12px; font-size:14px; color:var(--i-tx3) }
.ind-vazio b{ color:var(--i-tx2); font-weight:600 }

@media (prefers-reduced-motion:reduce){ .ind *{ transition:none!important; animation:none!important } }
@media print{ .ind{ --i-bg:#fff; --i-l1:#fff; --i-l2:#f4f4f4; --i-bd:#c6c6c6; --i-tx:#000; --i-tx2:#222; --i-tx3:#444 } }

/* ══ v9.9.1789 · A JANELA DO PADRÃO (Ivan, 01/10: "temos que rever que janelas do PCP ainda não estão com padrão
   industrial" → bloco "todo dia": menu de ações, confirmações, Fluxo e Prazo). Fecha SÓ no ✕ ou nos botões (regra da
   casa: clicar fora não fecha). Cantos 4 px · sem sombra colorida · cor só em estado e ação. ══ */
.ind-jan-ov{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(0,0,0,.55); font-family:var(--i-sans); }
.ind-jan{ background:var(--i-l1); color:var(--i-tx); border:1px solid var(--i-bd); border-radius:4px; box-shadow:0 16px 48px rgba(0,0,0,.45); width:100%; max-width:460px; max-height:calc(100vh - 40px); display:flex; flex-direction:column; overflow:hidden }
.ind-jan.larga{ max-width:640px }
.ind-jan-cab{ display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--i-bdr) }
.ind-jan-cab .t{ flex:1; font-size:16px; font-weight:600; line-height:1.3 }
.ind-jan-cab .sub{ display:block; font-size:12.5px; font-weight:400; color:var(--i-tx3) }
.ind-jan-x{ width:32px; height:32px; border-radius:4px; border:1px solid transparent; background:transparent; color:var(--i-tx3); font-size:18px; line-height:1; cursor:pointer; font-family:inherit }
.ind-jan-x:hover{ border-color:var(--i-bd2); color:var(--i-tx) }
.ind-jan-corpo{ padding:16px; overflow:auto; font-size:14px; line-height:1.5; color:var(--i-tx2); white-space:pre-wrap }
.ind-jan-pe{ display:flex; gap:8px; justify-content:flex-end; padding:12px 16px; border-top:1px solid var(--i-bdr) }
.ind-jan-pe .ind-btn{ height:40px; padding:0 18px }
.ind-btn.perigo{ background:var(--i-vm); border-color:var(--i-vm); color:#fff }
.ind-btn.perigo:hover{ filter:brightness(1.08) }
/* lista de ações (menu da O.S.) */
.ind-jan-lista{ display:flex; flex-direction:column; padding:4px 0 }
.ind-jan-it{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:12px 16px; border:0; border-left:3px solid transparent; background:transparent; color:var(--i-tx); font:inherit; font-size:14.5px; font-weight:600; cursor:pointer }
.ind-jan-it:hover{ background:var(--i-l2); border-left-color:var(--i-az) }
.ind-jan-it:focus-visible{ outline:2px solid var(--i-az); outline-offset:-2px }
.ind-jan-it .ic{ width:20px; display:inline-flex; justify-content:center; flex:0 0 auto; color:var(--i-tx3) }
.ind-jan-it .ic svg *{ stroke:currentColor }
.ind-jan-it .tx{ flex:1 } .ind-jan-it .tx small{ display:block; font-size:12.5px; font-weight:400; color:var(--i-tx3); margin-top:1px }
.ind-jan-it.perigo{ color:var(--i-vm-tx) } .ind-jan-it.perigo .ic{ color:var(--i-vm-tx) } .ind-jan-it.perigo:hover{ border-left-color:var(--i-vm) }
.ind-jan-sep{ height:1px; background:var(--i-bdr); margin:4px 0 }