/* ============================================================
   Sentinela · Design System — COMPONENTES
   Sem hex literais: tudo via tokens.css. Compartilhado app+gestor.
   ============================================================ */

/* ---- RiskBadge: cor + ÍCONE/forma + rótulo (P10, WCAG: nunca só cor) ---- */
.risk-badge{display:inline-flex;align-items:center;gap:6px;font:600 12px var(--font-sans);
  padding:5px 10px;border-radius:var(--r-pill);border:1px solid transparent;white-space:nowrap}
.risk-badge .ico{width:13px;height:13px;flex:none}
.risk-badge--low{color:var(--risk-low-text);background:var(--risk-low-bg);border-color:var(--risk-low-bd)}
.risk-badge--medium{color:var(--risk-medium-text);background:var(--risk-medium-bg);border-color:var(--risk-medium-bd)}
.risk-badge--high{color:var(--risk-high-text);background:var(--risk-high-bg);border-color:var(--risk-high-bd)}
.risk-badge--critical{color:var(--risk-critical-text);background:var(--risk-critical);border-color:var(--risk-critical)}

/* ---- Button: 4 variantes / 3 tamanhos ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:600 14px var(--font-sans);border-radius:var(--r-md);border:1.5px solid transparent;
  cursor:pointer;min-height:var(--tap);padding:10px 18px;transition:filter var(--motion) var(--ease),background var(--motion)}
.btn:focus-visible{outline:2px solid var(--blue-500);outline-offset:2px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn--primary{background:var(--blue-800);color:#fff}
.btn--primary:hover{filter:brightness(1.08)}
.btn--secondary{background:var(--surface);color:var(--blue-800);border-color:var(--blue-100)}
.btn--ghost{background:transparent;color:var(--muted);border-color:var(--line)}
.btn--lg{min-height:var(--tap-field);font-size:16px;padding:14px 22px;border-radius:var(--r-lg)}
/* compacto na tipografia, mas mantém o alvo de toque acessível (44px) — usado em
   ações de campo/HITL (Reprovar/Falso-positivo). */
.btn--sm{min-height:var(--tap);font-size:13px;padding:7px 12px}
.btn--block{display:flex;width:100%}

/* ---- Tag / Chip ---- */
.tag{font:600 11px var(--font-mono);padding:3px 8px;border-radius:6px;background:var(--surface-2);
  border:1px solid var(--line);color:var(--muted)}
.tag--nr{color:var(--blue-800);background:var(--blue-50);border-color:var(--blue-100)}
.chip{display:inline-flex;align-items:center;gap:6px;font:600 12px var(--font-sans);
  padding:6px 11px;border-radius:var(--r-pill);background:var(--surface-2);border:1px solid var(--line);
  color:var(--ink);cursor:pointer;min-height:32px}
.chip[aria-pressed="true"]{background:var(--blue-800);color:#fff;border-color:var(--blue-800)}

/* ---- SyncStatusBadge (global) ---- */
.sync-badge{display:inline-flex;align-items:center;gap:7px;font:600 12px var(--font-sans);
  padding:6px 12px;border-radius:var(--r-pill);border:1px solid transparent}
.sync-badge .ico{width:14px;height:14px}
.sync-badge--offline{background:var(--offline-bg);color:var(--offline-text);border-color:var(--offline-bd)}
.sync-badge--pending{background:var(--pending-bg);color:var(--pending);border-color:var(--pending-bd)}
.sync-badge--synced{background:var(--synced-bg);color:var(--synced);border-color:var(--risk-low-bd)}

/* ---- TriLabel: tri-estado de conferência de EPI (Time 2) ----
   3 estados acessíveis (cor + ÍCONE/forma + rótulo textual, nunca só cor).
   Conferido=verde soft · Atenção=âmbar soft · Não conclusivo=cinza-azulado neutro
   (distinto do âmbar e do offline). Markup esperado:
   <span class="tri-label tri-label--inconclusive">
     <svg class="ico"><use href="/assets/ds/icons.svg#i-inconclusive"/></svg>Não conclusivo</span> */
.tri-label{display:inline-flex;align-items:center;gap:6px;font:600 12px var(--font-sans);
  padding:6px 11px;border-radius:var(--r-pill);border:1px solid transparent;white-space:nowrap;min-height:32px}
.tri-label .ico{width:14px;height:14px;flex:none}
.tri-label--ok{color:var(--risk-low-text);background:var(--risk-low-bg);border-color:var(--risk-low-bd)}
.tri-label--attention{color:var(--attention);background:var(--attention-bg);border-color:var(--attention-bd)}
.tri-label--inconclusive{color:var(--inconclusive-text);background:var(--inconclusive-bg);border-color:var(--inconclusive-bd)}

/* ---- CaBadge: aviso de vencimento de CA do EPI (e2e-mobile achado #2) ----
   Classe PRÓPRIA e distinta de .tri-label: o badge de "CA vence em Nd"/"CA
   vencido" (a3-epi.js) fica dentro da linha de texto `.ca`, ao lado da data
   de validade — não é o rótulo de estado do tri-estado (Conferido/Atenção/
   Não conclusivo), que é maior e alinhado ao grupo de botões. Antes os dois
   reaproveitavam `.tri-label`, então qualquer seletor `.tri-label` sem escopo
   (CSS, teste, automação) pegava os dois — e o min-height:32px do pill do
   tri-estado, aplicado inline no meio do texto da linha `.ca`, colidia com a
   altura da linha. Mesma paleta de âmbar do token --attention, tamanho menor
   e sem min-height, pensado para inline. Markup esperado:
   <span class="ca-badge">CA vence em 18d</span> */
.ca-badge{display:inline-flex;align-items:center;gap:4px;font:600 11px var(--font-sans);
  padding:2px 8px;border-radius:var(--r-pill);border:1px solid var(--attention-bd);
  white-space:nowrap;color:var(--attention);background:var(--attention-bg)}
.ca-badge .ico{width:12px;height:12px;flex:none}

/* ---- WorkflowBadge: pílula de estado do fluxo editorial (rascunho→publicado) ----
   Migrado do <style> local do portal (.state, E0.3): cor + ÍCONE + rótulo, nunca só
   cor. 5 estados: rascunho (neutro) · validado (ok) · em edição (atenção) ·
   rejeitado (crítico) · publicado (destaque azul, estado final). Markup esperado:
   <span class="wf-badge wf-badge--val"><svg class="ico"><use href="/assets/ds/icons.svg#i-check"/></svg>Validado</span> */
.wf-badge{display:inline-flex;align-items:center;gap:6px;font:600 11px var(--font-mono);letter-spacing:.04em;
  text-transform:uppercase;padding:4px 9px;border-radius:var(--r-pill);border:1px solid transparent;white-space:nowrap}
.wf-badge .ico{width:13px;height:13px;flex:none}
.wf-badge--draft{color:var(--muted);background:var(--surface-2);border-color:var(--line)}
.wf-badge--val{color:var(--risk-low-text);background:var(--risk-low-bg);border-color:var(--risk-low-bd)}
.wf-badge--edit{color:var(--attention);background:var(--attention-bg);border-color:var(--attention-bd)}
.wf-badge--rej{color:var(--risk-critical-text);background:var(--risk-critical);border-color:var(--risk-critical)}
.wf-badge--pub{color:#fff;background:var(--blue-800);border-color:var(--blue-800)}

/* ---- Estados: Empty / Error / Skeleton ---- */
.state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;
  padding:32px 20px;color:var(--muted)}
.state .ico{width:44px;height:44px;opacity:.7}
.state h4{font:600 15px var(--font-sans);color:var(--ink);margin:0}
.state p{font:400 13px var(--font-sans);margin:0;max-width:280px}
.skeleton{background:linear-gradient(90deg,var(--surface-2) 25%,var(--line-2) 37%,var(--surface-2) 63%);
  background-size:400% 100%;animation:sk 1.2s var(--ease) infinite;border-radius:var(--r-sm)}
@keyframes sk{0%{background-position:100% 0}100%{background-position:0 0}}
@media (prefers-reduced-motion: reduce){.skeleton{animation:none}}

/* ---- FilterBar ---- */
.filterbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px 0}

/* ---- card--demo: tratamento ÚNICO por região p/ dado ilustrativo (E0.6) ----
   Uso: cards com dado de demonstração/mock, agrupados sob um <details> "análises
   ilustrativas" — substitui o selo .demo-seal repetido card a card. Borda tracejada
   é o único sinal visual necessário; o rótulo textual mora no <summary> do grupo. */
.card--demo{border-style:dashed}

/* ---- disclosure: <details>/<summary> nativo (foco/teclado grátis) ----
   Uso: agrupar conteúdo secundário/ilustrativo fora da primeira dobra. */
.disclosure{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  padding:0;margin-bottom:18px;overflow:hidden}
.disclosure > summary{list-style:none;cursor:pointer;padding:16px 20px;font:600 13px var(--font-sans);
  color:var(--blue-800);display:flex;align-items:center;gap:8px;min-height:var(--tap);user-select:none}
.disclosure > summary::-webkit-details-marker{display:none}
.disclosure > summary::before{content:"▸";display:inline-block;font-size:11px;color:var(--muted);
  transition:transform var(--motion) var(--ease)}
.disclosure[open] > summary::before{transform:rotate(90deg)}
.disclosure > summary:focus-visible{outline:2px solid var(--blue-500);outline-offset:-2px;border-radius:var(--r-sm)}
.disclosure > summary:hover{background:var(--surface-2)}
.disclosure > .disclosure-body{padding:4px 20px 20px;border-top:1px solid var(--line)}

/* ---- RowMenu: overflow de ações de linha (kebab) — <details> nativo ----
   Teclado/foco grátis (Enter abre, Esc/clique-fora fecha). Só tokens.
   Uso: 1 ação primária visível na linha + ações secundárias no kebab. */
.row-menu{position:relative;display:inline-block}
.row-menu>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);
  color:var(--muted);font:700 14px var(--font-mono)}
.row-menu>summary::-webkit-details-marker{display:none}
.row-menu>summary:hover{background:var(--surface-2)}
.row-menu>summary:focus-visible{outline:2px solid var(--blue-500);outline-offset:2px}
.row-menu[open]>.row-menu-panel{display:flex}
.row-menu-panel{display:none;position:absolute;right:0;top:calc(100% + 4px);z-index:30;flex-direction:column;
  min-width:180px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--sh-2);padding:var(--sp-1)}
.row-menu-panel button{display:block;width:100%;text-align:left;background:none;border:none;cursor:pointer;
  font:500 13px var(--font-sans);color:var(--ink);padding:9px 12px;border-radius:var(--r-sm);min-height:var(--tap)}
.row-menu-panel button:hover{background:var(--surface-2)}
.row-menu-panel button:focus-visible{outline:2px solid var(--blue-500);outline-offset:-2px}
.row-menu-panel button.danger-item{color:var(--risk-critical)}