/* Painel da IA local — tokens do DESIGN-SYSTEM-ORBE.md (OKLCH, 7 tamanhos, espaço em múltiplos de 4). */
:root {
  --bg: oklch(99% 0.002 250);
  --surface: oklch(100% 0 0);
  --surface-2: oklch(97% 0.003 250);
  --border: oklch(91% 0.004 250);
  --border-strong: oklch(84% 0.006 250);
  --fg: oklch(22% 0.01 250);
  --fg-muted: oklch(52% 0.012 250);
  --fg-subtle: oklch(66% 0.010 250);
  --acao: oklch(56% 0.16 255);
  --acao-fg: oklch(100% 0 0);
  --ok: oklch(58% 0.14 150);
  --atencao: oklch(75% 0.14 85);
  --atencao-fg: oklch(42% 0.09 85);
  --info: oklch(58% 0.15 300);
  --critico: oklch(56% 0.19 27);
  --ok-bg: oklch(96% 0.03 150);
  --critico-bg: oklch(96% 0.04 27);
  --atencao-bg: oklch(96% 0.05 85);
  --info-bg: oklch(96% 0.03 300);
  --ok-fg: oklch(42% 0.11 150);
  --critico-fg: oklch(46% 0.17 27);
  --info-fg: oklch(44% 0.14 300);

  --txt-2xs: 11px; --txt-xs: 12px; --txt-sm: 13px; --txt-base: 14px; --txt-lg: 16px; --txt-xl: 20px; --txt-2xl: 28px;
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-6: 24px; --e-8: 32px; --e-12: 48px;
  --raio: 8px;
  --fonte: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --bg: oklch(17% 0.008 250); --surface: oklch(21% 0.010 250); --surface-2: oklch(25% 0.010 250);
    --border: oklch(30% 0.012 250); --border-strong: oklch(38% 0.012 250);
    --fg: oklch(96% 0.004 250); --fg-muted: oklch(72% 0.010 250); --fg-subtle: oklch(58% 0.010 250);
    --acao: oklch(64% 0.14 255); --acao-fg: oklch(15% 0.01 250);
    --ok: oklch(70% 0.13 150); --critico: oklch(68% 0.16 27); --atencao: oklch(80% 0.12 85); --info: oklch(68% 0.13 300);
    --ok-bg: oklch(28% 0.04 150); --critico-bg: oklch(28% 0.05 27); --atencao-bg: oklch(30% 0.05 85); --info-bg: oklch(28% 0.04 300);
    --ok-fg: oklch(82% 0.11 150); --critico-fg: oklch(82% 0.10 27); --atencao-fg: oklch(86% 0.10 85); --info-fg: oklch(82% 0.09 300);
    color-scheme: dark;
  }
}
:root[data-tema="escuro"] {
  --bg: oklch(17% 0.008 250); --surface: oklch(21% 0.010 250); --surface-2: oklch(25% 0.010 250);
  --border: oklch(30% 0.012 250); --border-strong: oklch(38% 0.012 250);
  --fg: oklch(96% 0.004 250); --fg-muted: oklch(72% 0.010 250); --fg-subtle: oklch(58% 0.010 250);
  --acao: oklch(64% 0.14 255); --acao-fg: oklch(15% 0.01 250);
  --ok: oklch(70% 0.13 150); --critico: oklch(68% 0.16 27); --atencao: oklch(80% 0.12 85); --info: oklch(68% 0.13 300);
  --ok-bg: oklch(28% 0.04 150); --critico-bg: oklch(28% 0.05 27); --atencao-bg: oklch(30% 0.05 85); --info-bg: oklch(28% 0.04 300);
  --ok-fg: oklch(82% 0.11 150); --critico-fg: oklch(82% 0.10 27); --atencao-fg: oklch(86% 0.10 85); --info-fg: oklch(82% 0.09 300);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--fg); font: 400 var(--txt-base)/20px var(--fonte); -webkit-font-smoothing: antialiased; }
h1 { font-size: var(--txt-xl); line-height: 28px; font-weight: 600; margin: 0; }
h2 { font-size: var(--txt-lg); line-height: 24px; font-weight: 600; margin: 0 0 var(--e-3); }
h3 { font-size: var(--txt-base); line-height: 20px; font-weight: 600; margin: 0 0 var(--e-2); }
p { margin: 0 0 var(--e-2); }
a { color: var(--acao); }
:focus-visible { outline: 2px solid var(--acao); outline-offset: 2px; border-radius: 4px; }
.pular { position: absolute; left: var(--e-2); top: -48px; background: var(--surface); padding: var(--e-2) var(--e-3); z-index: 10; }
.pular:focus { top: var(--e-2); }

.topo { display: flex; align-items: center; gap: var(--e-6); padding: var(--e-3) var(--e-6); background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 5; flex-wrap: wrap; }
.marca { display: flex; flex-direction: column; }
.marca-nome { font-weight: 600; font-size: var(--txt-lg); line-height: 24px; }
.marca-sub { font-size: var(--txt-xs); line-height: 16px; color: var(--fg-muted); }
.abas { display: flex; gap: var(--e-1); flex: 1; flex-wrap: wrap; }
.abas a { color: var(--fg-muted); text-decoration: none; padding: var(--e-2) var(--e-3); border-radius: var(--raio); font-weight: 500; min-height: 36px; display: inline-flex; align-items: center; }
.abas a:hover { background: var(--surface-2); color: var(--fg); }
.abas a[aria-current="page"] { background: var(--surface-2); color: var(--fg); box-shadow: inset 0 -2px 0 var(--acao); }

main { padding: var(--e-6); max-width: 1280px; margin: 0 auto; }
main:focus { outline: none; }
.tela-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); margin-bottom: var(--e-4); flex-wrap: wrap; }
.tela-acoes { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; }
.tela-acoes select { width: auto; }

.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--e-4); }
.cartao { background: var(--surface); border: 1px solid var(--border); border-radius: var(--raio); padding: var(--e-4); min-width: 0; }
.cartao + .cartao, .bloco + .bloco { margin-top: var(--e-4); }
.grade .cartao + .cartao { margin-top: 0; }
.heroi { display: flex; align-items: baseline; gap: var(--e-2); }
.heroi-num { font-size: var(--txt-2xl); line-height: 34px; font-weight: 600; font-variant-numeric: tabular-nums; }
.heroi-un { font-size: var(--txt-xs); color: var(--fg-muted); }
.rotulo { font-size: var(--txt-xs); line-height: 16px; color: var(--fg-muted); font-weight: 500; }
.mudo { color: var(--fg-muted); font-size: var(--txt-sm); line-height: 18px; }
.mono { font-family: var(--mono); font-size: var(--txt-sm); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.un { font-size: var(--txt-xs); color: var(--fg-muted); margin-left: 2px; }

.tabela-caixa { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--txt-sm); line-height: 18px; }
th { position: sticky; top: 0; background: var(--surface-2); color: var(--fg-muted); font-size: var(--txt-xs); font-weight: 500; text-align: left; padding: var(--e-2) var(--e-3); border-bottom: 1px solid var(--border); white-space: nowrap; }
th.num { text-align: right; }
td { padding: var(--e-2) var(--e-3); border-bottom: 1px solid var(--border); height: 36px; vertical-align: middle; }
tr:last-child td { border-bottom: 0; }

.chip { display: inline-flex; align-items: center; gap: var(--e-1); font-size: var(--txt-xs); line-height: 16px; font-weight: 500; padding: 2px var(--e-2); border-radius: 999px; white-space: nowrap; border: 1px solid transparent; }
.chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.chip-ok { background: var(--ok-bg); color: var(--ok-fg); }
.chip-fora, .chip-falha { background: var(--critico-bg); color: var(--critico-fg); }
.chip-aviso { background: var(--atencao-bg); color: var(--atencao-fg); }
.chip-neutro { background: var(--surface-2); color: var(--fg-muted); border-color: var(--border); }
.chip-neutro::before { display: none; }

.selo { font-size: var(--txt-xs); line-height: 16px; color: var(--fg-muted); }
.selo-parcial { display: inline-flex; gap: var(--e-1); align-items: center; background: var(--info-bg); color: var(--info-fg); padding: 2px var(--e-2); border-radius: 4px; }

.aviso { border-radius: var(--raio); padding: var(--e-3) var(--e-4); border: 1px solid var(--border); background: var(--surface); margin-bottom: var(--e-4); }
.aviso-erro { background: var(--critico-bg); color: var(--critico-fg); border-color: transparent; }
.aviso-parcial { background: var(--info-bg); color: var(--info-fg); border-color: transparent; }
.aviso-atencao { background: var(--atencao-bg); color: var(--atencao-fg); border-color: transparent; }
.aviso strong { font-weight: 600; }
.aviso .botao { margin-top: var(--e-2); }

.vazio { text-align: left; padding: var(--e-6) var(--e-4); border: 1px dashed var(--border-strong); border-radius: var(--raio); color: var(--fg-muted); }
.vazio p { margin-bottom: var(--e-3); }

.esqueleto { background: var(--surface-2); border-radius: 4px; height: 16px; margin-bottom: var(--e-2); animation: pulsar 1.2s ease-in-out infinite; }
.esqueleto-alto { height: 34px; width: 40%; }
.esqueleto-curto { width: 60%; }
@keyframes pulsar { 50% { opacity: 0.5; } }
@media (prefers-reduced-motion: reduce) { .esqueleto { animation: none; } * { transition: none !important; } }

.botao { font: inherit; font-weight: 500; min-height: 36px; padding: var(--e-2) var(--e-4); border-radius: var(--raio); border: 1px solid var(--border-strong); background: var(--surface); color: var(--fg); cursor: pointer; transition: background-color 120ms, opacity 120ms; }
.botao:hover { background: var(--surface-2); }
.botao-principal { background: var(--acao); border-color: var(--acao); color: var(--acao-fg); }
.botao-principal:hover { background: var(--acao); opacity: 0.9; }
.botao-perigo { color: var(--critico-fg); border-color: var(--critico); background: var(--surface); }
.botao-fantasma { border-color: transparent; background: transparent; color: var(--fg-muted); }
.botao-pequeno { min-height: 28px; padding: var(--e-1) var(--e-2); font-size: var(--txt-sm); }
.botao[disabled] { opacity: 0.6; cursor: not-allowed; }

form { margin: 0; }
.campo { display: flex; flex-direction: column; gap: var(--e-1); margin-bottom: var(--e-3); min-width: 0; }
.campo label, .campo legend { font-size: var(--txt-xs); line-height: 16px; color: var(--fg-muted); font-weight: 500; padding: 0; }
.campo-dica { font-size: var(--txt-xs); line-height: 16px; color: var(--fg-muted); }
input[type="text"], input[type="number"], select, textarea, input[type="file"] { font: inherit; color: var(--fg); background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--raio); padding: var(--e-2) var(--e-3); min-height: 36px; width: 100%; }
textarea { resize: vertical; min-height: 96px; }
fieldset { border: 0; margin: 0 0 var(--e-3); padding: 0; }
.opcoes { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); }
.opcoes label { display: inline-flex; align-items: center; gap: var(--e-2); color: var(--fg); font-size: var(--txt-sm); min-height: 24px; }
.linha-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0 var(--e-3); }

.chave-nova { background: var(--ok-bg); color: var(--ok-fg); border-radius: var(--raio); padding: var(--e-4); margin-bottom: var(--e-4); }
.chave-nova code { display: block; word-break: break-all; background: var(--surface); color: var(--fg); padding: var(--e-3); border-radius: var(--raio); margin: var(--e-2) 0; font-family: var(--mono); font-size: var(--txt-sm); }

.resultado { margin-top: var(--e-3); }
.resposta { white-space: pre-wrap; background: var(--surface-2); padding: var(--e-3); border-radius: var(--raio); font-size: var(--txt-sm); line-height: 18px; overflow-wrap: anywhere; }
.lista-hist { list-style: none; margin: 0; padding: 0; max-height: 360px; overflow: auto; }
.lista-hist li { display: grid; grid-template-columns: 136px 72px 1fr; gap: var(--e-2); padding: var(--e-1) 0; border-bottom: 1px solid var(--border); font-size: var(--txt-sm); line-height: 18px; align-items: center; }
.lista-hist li:last-child { border-bottom: 0; }

.conversa { display: flex; flex-direction: column; gap: var(--e-3); }
.conversa-lista { display: flex; flex-direction: column; gap: var(--e-3); max-height: calc(100vh - 360px); min-height: 160px; overflow-y: auto; padding: var(--e-1); }
.msg { max-width: min(760px, 92%); padding: var(--e-3); border-radius: var(--raio); font-size: var(--txt-base); line-height: 20px; }
.msg-voce { align-self: flex-end; background: var(--surface-2); border: 1px solid var(--border); }
.msg-ia { align-self: flex-start; background: var(--surface); border: 1px solid var(--border-strong); }
.msg-quem { font-size: var(--txt-xs); line-height: 16px; color: var(--fg-muted); font-weight: 500; margin-bottom: var(--e-1); overflow-wrap: anywhere; }
.msg-texto { white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-rodape { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); margin-top: var(--e-2); }
.msg-rodape:empty { display: none; }
.msg-rodape .aviso { margin: 0; width: 100%; }
.msg-rodape .mudo { font-size: var(--txt-xs); line-height: 16px; font-variant-numeric: tabular-nums; }
.conversa .aviso { margin-bottom: 0; }
.conversa-form textarea { min-height: 72px; }
.conversa-form .campo { margin-bottom: var(--e-2); }
.conversa-botoes { display: flex; justify-content: flex-end; gap: var(--e-2); }

.dialogo { border: 1px solid var(--border); border-radius: var(--raio); background: var(--surface); color: var(--fg); padding: var(--e-6); width: min(520px, calc(100vw - 32px)); }
.dialogo::backdrop { background: oklch(0% 0 0 / 0.4); }
.dialogo-acoes { display: flex; gap: var(--e-2); justify-content: flex-end; margin-top: var(--e-4); }

/* Tela de login do acesso pela internet (Funnel). */
.entrar { display: flex; justify-content: center; padding: var(--e-12) var(--e-4); }
.entrar-cartao { width: min(400px, 100%); padding: var(--e-6); }
.entrar-cartao .marca { margin-bottom: var(--e-6); }
.entrar-cartao h1 { margin-bottom: var(--e-1); }
.entrar-cartao > .mudo { margin: 0 0 var(--e-4); }
.entrar input[type="password"] { font: inherit; color: var(--fg); background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--raio); padding: var(--e-2) var(--e-3); min-height: 44px; width: 100%; }
.entrar input[type="text"] { min-height: 44px; font-variant-numeric: tabular-nums; letter-spacing: 0.1em; }
.entrar-campos { margin: 0; }
.entrar-campos[disabled] { opacity: 0.6; }
.entrar-botao { width: 100%; min-height: 44px; margin-top: var(--e-1); }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 640px) {
  .topo { padding: var(--e-3) var(--e-4); gap: var(--e-3); }
  main { padding: var(--e-4); }
  .grade { grid-template-columns: 1fr; }
  .abas a, .botao { min-height: 44px; }
  .lista-hist li { grid-template-columns: 1fr auto; }
  .lista-hist li span:last-child { grid-column: 1 / -1; }
  .msg { max-width: 100%; }
  .conversa-lista { max-height: calc(100vh - 420px); }
  .conversa-botoes .botao { flex: 1; }
}