/* theme.css — S5 DS (2026-08-12). A ÚNICA fonte de cor da plataforma.
   Doutrina: cor só via token (nenhum hex novo fora deste arquivo; literais
   existentes migram on-touch) e componentes-default (PageHeader · KpiStrip ·
   DataTable · rail · chips · botões vivem AQUI; páginas só carregam o que é
   específico delas). Dark/lime é o TEMA DEFAULT, não uma constante — trocar
   a identidade visual (white-label, doutrina 2026-08-10) é trocar tokens.
   Carregar ANTES de nav-sidebar.css e do <style> da página. */

:root{
  /* ── tokens DS ── */
  --bg:#0a0b0a;
  --surface:#131513; --surface-2:#1a1d1a; --surface-3:#222522; --surface-4:#2a2e2a;
  --border:rgba(255,255,255,.04); --border-2:rgba(255,255,255,.09); --border-strong:rgba(255,255,255,.16);
  /* --text-dim era #686a64 (~3.4:1 sobre --bg, reprova AA); #7d7f77 ≈ 4.8:1
     mantém o caráter e passa AA — decisão de DS do gate de contraste (A6). */
  --text:#d8d6ce; --text-dim:#7d7f77; --text-dim-2:#3a3c38;
  --accent:#b8f040; --accent-2:#96cc28; --accent-a:rgba(184,240,64,.08); --accent-b:rgba(184,240,64,.18);
  --ok:#b8f040;    --ok-a:rgba(184,240,64,.08);  --ok-b:rgba(184,240,64,.18);
  --warn:#e8b840;  --warn-a:rgba(232,184,64,.08); --warn-b:rgba(232,184,64,.20);
  --danger:#f06060;--danger-a:rgba(240,96,96,.08);--danger-b:rgba(240,96,96,.20);
  --info:#60b8f0;  --info-2:#3890c8; --info-a:rgba(96,184,240,.08); --info-b:rgba(96,184,240,.20);
  --mono:'IBM Plex Mono',monospace; --sans:'IBM Plex Sans',sans-serif;
  --radius-s:6px; --radius-m:9px; --radius-l:12px; --radius-pill:20px;

  /* ── aliases legados (todas as páginas resolvem AQUI; migrar on-touch) ── */
  --s1:var(--surface); --s2:var(--surface-2); --s3:var(--surface-3); --s4:var(--surface-4);
  --w1:var(--border); --w2:var(--border-2); --w3:var(--border-strong);
  --chalk:var(--text); --fog:var(--text-dim); --fog2:var(--text-dim-2);
  --lime:var(--accent); --lime2:var(--accent-2); --la:var(--accent-a); --lb:var(--accent-b);
  --gold:var(--warn); --ga:var(--warn-a); --gb:var(--warn-b);
  --rose:var(--danger); --ra:var(--danger-a); --rb:var(--danger-b);
  --ice:var(--info); --ice2:var(--info-2); --ia:var(--info-a); --ib:var(--info-b);
}

/* ── A5: scrollbar fino nas cores do tema, hover-only (WebKit); divisória
   sutil no sidebar. Firefox: thin + cores do tema (hover-only não existe). ── */
*{scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}
*::-webkit-scrollbar{width:6px;height:6px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:transparent;border-radius:3px}
*:hover::-webkit-scrollbar-thumb{background:var(--border-strong)}
.ryz-sidebar{border-right:1px solid var(--border)}
.ryz-nav-scroll{scrollbar-color:var(--border-strong) transparent}

/* ── PageHeader: eyebrow+dot · título · linha de regra-de-dados ── */
.ph{margin-bottom:18px}
.ph-label{font-family:var(--mono);font-size:9px;color:var(--text-dim);letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px}
.ph-label::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:7px;vertical-align:1px}
.ph h1{font-size:20px;font-weight:600;letter-spacing:-.01em;color:#fff;margin-bottom:4px}
.ph p{font-size:12px;color:var(--text-dim);line-height:1.6;max-width:720px}

/* ── KpiStrip (doutrina S5b): BORDA semântica SEMPRE (nenhum card sem cor;
   default = accent) + UM pictograma Lucide no canto superior direito, na cor
   da borda, mapeado ao conteúdo. Nunca fundo. Card sem dado = proibido. ── */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:22px}
.kpi{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px 14px;border-left:3px solid var(--accent)}
.kpi .n{font-family:var(--mono);font-size:22px;font-weight:600;color:#fff}
.kpi .l{font-size:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em;margin-top:2px;padding-right:20px}
/* o processador Lucide do nav-v2 substitui <i data-lucide class="kpi-ico">
   por um <svg> SEM preservar a classe — cobrimos os dois formatos */
.kpi .kpi-ico,.kpi>svg.lucide{position:absolute;top:10px;right:12px;width:15px;height:15px;color:var(--accent);opacity:.9}
.kpi .kpi-ico svg{width:15px;height:15px}
.kpi.ok>svg.lucide{color:var(--ok)}
.kpi.warn>svg.lucide{color:var(--warn)}
.kpi.bad>svg.lucide{color:var(--danger)}
.kpi.info>svg.lucide{color:var(--info)}
.kpi.ok{border-color:var(--ok-b);border-left-color:var(--ok)}
.kpi.ok .kpi-ico{color:var(--ok)}
.kpi.warn{border-color:var(--warn-b);border-left-color:var(--warn)}
.kpi.warn .n{color:var(--warn)}
.kpi.warn .kpi-ico{color:var(--warn)}
.kpi.bad{border-color:var(--danger-b);border-left-color:var(--danger)}
.kpi.bad .n{color:var(--danger)}
.kpi.bad .kpi-ico{color:var(--danger)}
.kpi.info{border-color:var(--info-b);border-left-color:var(--info)}
.kpi.info .n{color:var(--info)}
.kpi.info .kpi-ico{color:var(--info)}

/* ── seção: título + contador no card (padrão régua) ── */
.sec-hdr{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:20px 0 10px}
.sec-title{font-size:14px;font-weight:500}
.sec-count{font-family:var(--mono);font-size:10px;color:var(--text-dim)}

/* ── DataTable: header caps · mono para ID/valor/data · hover ── */
table{width:100%;border-collapse:collapse}
th{font-family:var(--mono);font-size:9px;color:var(--text-dim);letter-spacing:.1em;text-transform:uppercase;text-align:left;padding:8px 10px;border-bottom:1px solid var(--border-2);font-weight:500}
td{padding:9px 10px;border-bottom:1px solid var(--border);font-size:12px;vertical-align:middle}
tr:hover td{background:var(--border)}
td.num,th.num{text-align:right;font-family:var(--mono)}

/* ── chips semânticos ── */
.chip{display:inline-block;font-family:var(--mono);font-size:9px;letter-spacing:.05em;padding:3px 8px;border-radius:var(--radius-pill);border:1px solid;margin:1px 2px 1px 0;white-space:nowrap}
.c-lime{color:var(--ok);border-color:var(--ok-b);background:var(--ok-a)}
.c-gold{color:var(--warn);border-color:var(--warn-b);background:var(--warn-a)}
.c-rose{color:var(--danger);border-color:var(--danger-b);background:var(--danger-a)}
.c-ice{color:var(--info);border-color:var(--info-b);background:var(--info-a)}
.c-fog{color:var(--text-dim);border-color:var(--border-2);background:var(--surface-2)}

/* ── botões ── */
.btn{background:var(--accent-a);border:1px solid var(--accent-b);border-radius:7px;color:var(--accent);font-family:var(--mono);font-size:11px;padding:6px 12px;cursor:pointer;letter-spacing:.04em}
.btn:hover{background:rgba(184,240,64,.14)}
.btn.b2{background:var(--surface-2);border-color:var(--border-2);color:var(--text)}
.btn.b2:hover{border-color:var(--border-strong)}
.btn.bw{background:var(--warn-a);border-color:var(--warn-b);color:var(--warn)}
.btn.br{background:var(--danger-a);border-color:var(--danger-b);color:var(--danger)}
.btn:disabled{opacity:.5;cursor:default}

/* ── estado vazio NOMEADO ── */
.empty{background:var(--surface);border:1px dashed var(--border-2);border-radius:10px;padding:18px;font-size:12px;color:var(--text-dim);line-height:1.6}

.mini{font-family:var(--mono);font-size:10px;color:var(--text-dim)}

/* ── rail transversal (idioma único lime — doutrina Leva 2b) ── */
.rail{display:flex;gap:2px;padding:6px 16px;background:var(--surface);border-bottom:1px solid var(--border-2);position:sticky;top:55px;z-index:95;flex-wrap:wrap;align-items:center}
.rtab{font-family:var(--mono);font-size:10px;letter-spacing:.06em;padding:6px 14px;border-radius:var(--radius-s);border:1px solid transparent;background:none;color:var(--text-dim);cursor:pointer;transition:all .13s;text-transform:uppercase}
.rtab:hover{color:var(--text);background:var(--surface-2)}
.rtab.on{color:var(--accent);background:var(--accent-a);border-color:var(--accent-b)}
@media(max-width:640px){.rail{flex-wrap:nowrap;overflow-x:auto;padding:6px 10px}.rtab{flex-shrink:0}}
.ds-badge{display:inline-block;min-width:14px;padding:1px 6px;border-radius:10px;background:var(--accent);color:var(--bg);font-weight:600;font-size:9px;margin-left:5px;vertical-align:1px}

/* ── controles/filtros ── */
.controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px}
.ctrl-group{display:flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-m);padding:7px 10px}
.ctrl-label{font-family:var(--mono);font-size:9px;color:var(--text-dim);letter-spacing:.08em;text-transform:uppercase}
select,input[type="text"],input[type="date"],input[type="number"],textarea{background:var(--surface-2);border:1px solid var(--border-2);border-radius:var(--radius-s);color:var(--text);font-family:var(--sans);font-size:12px;padding:6px 8px;outline:none}
select:focus,input:focus,textarea:focus{border-color:var(--accent-b)}

/* ── chips de filtro (FONTE ÚNICA — S21b) ────────────────────────────────
   Doutrina de reuso: o controle nasceu no Pipeline; em vez de cada página
   autorar a sua variante, a definição vive AQUI e as páginas consomem.
   Cor carrega significado: um acento só para o estado ATIVO, neutro para
   o resto. Quem ainda define .flt localmente (admin, oil) sobrescreve por
   cascata — convergir essas duas é item do backlog, não desta sessão. */
.flt{background:var(--surface-2);border:1px solid var(--border-2);border-radius:20px;color:var(--text-dim);font-size:11px;padding:5px 12px;cursor:pointer;font-family:var(--sans)}
.flt:hover{border-color:var(--accent-b);color:var(--text)}
.flt.on{background:var(--accent-a);border-color:var(--accent-b);color:var(--accent)}
/* chip subordinado: mesma forma, peso menor — para eixos secundários
   (ex.: tags da Ajuda) que não devem competir com o filtro primário */
.flt-sub{font-size:10px;padding:3px 9px;opacity:.75}
.flt-sub.on{opacity:1}
.toolbar{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.srch{background:var(--surface-2);border:1px solid var(--border-2);border-radius:7px;color:var(--text);font-size:12px;padding:7px 10px;min-width:200px;outline:none}

/* ── ações de linha (FONTE ÚNICA — S21b addendum) ────────────────────────
   Mesmo movimento do .flt: o botão de ação de linha nasceu no Pipeline
   (editar · converter · WA) e agora vive aqui. Peso carrega prioridade:
   .ab é o secundário QUIETO (padrão) e .ab-primary é a ação principal da
   linha — uma só por linha, nunca duas de peso igual. Nada de caixa branca
   preenchida: fundo de superfície, contorno, texto legível. */
.ab{background:var(--surface-2);border:1px solid var(--border-2);border-radius:6px;color:var(--text);font-family:var(--sans);font-size:11px;padding:4px 10px;cursor:pointer}
.ab:hover{border-color:var(--accent-b)}
.ab.ed{color:var(--info)}
.ab-primary{background:var(--accent-a);border-color:var(--accent-b);color:var(--accent)}
/* linha de botões do topo — presente em 17 páginas, ausente onde o
   controle foi usado sem classe definida (era o caso do suporte.html) */
.nav-right{display:flex;align-items:center;gap:8px}