/* ═══════════════════════════════════════════════════════════════════════════
   PELE TECH — linguagem visual compartilhada pelos dois painéis.
   Carregado DEPOIS de sead.css (estrutura) e ANTES de prefeito.css
   (municipal). Sobrescreve por ordem de cascata com a mesma especificidade:
   a estrutura fica intacta e a pele é um arquivo só — tirar = voltar ao antigo.

   O que muda, e por quê (auditoria visual do SEAD antes deste bloco):
   · PALETA — o escuro "Cerrado" (âmbar #d9ab4e como acento) lia como
     documento antigo. Entra base azul-quase-preta com acento ciano: vocabulário
     de sala de operação. O claro fica frio e limpo.
   · ESCALA — 12 tamanhos de fonte em uso não é escala, é acúmulo. Entra uma
     escala declarada e o KPI vira herói (1,45rem → 2,1rem).
   · CONTRASTE — a bolha da IA reprovava no AA nos dois temas (2,34 no escuro):
     era um cinza hardcoded por cima do tema. Volta a ser token.
   · MOVIMENTO — curto, com função (entrada, foco, dado vivo), e some sob
     prefers-reduced-motion. 11 sombras viram 3 níveis de elevação.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── T1. Tokens ──────────────────────────────────────────────────────────── */

:root{
  --bg:#eef2f7; --surface:#ffffff; --surface2:#f4f7fb; --surface3:#e7edf5;
  --border:rgba(15,30,50,.10); --border-strong:rgba(15,30,50,.20);
  --text:#0d1520; --muted:#47586d; --faint:#64748b;
  --blue:#0b6fa4; --blue-bg:rgba(11,111,164,.08); --blue-bd:rgba(11,111,164,.30);
  --accent:#0891b2; --accent-2:#6366f1;
  --red:#c3283c; --red-bg:rgba(195,40,60,.07); --red-bd:rgba(195,40,60,.30);
  --amber:#c2410c; --amber-bg:rgba(194,65,12,.08); --amber-bd:rgba(194,65,12,.30);
  --green:#0f7a43; --green-bg:rgba(15,122,67,.08); --green-bd:rgba(15,122,67,.30); --green-glow:rgba(15,122,67,.55);
  --radius:14px; --radius-sm:9px;
  --shadow:0 12px 28px -8px rgba(13,21,32,.16);
  --on-primary:#fff; --primary-hover:#0a5f8c; --sel:rgba(8,145,178,.30);
  --avatar:linear-gradient(135deg,#cfe3f2,#b7cde3);
  --topbar-bg:rgba(238,242,247,.82); --sidebar-mobile-bg:rgba(255,255,255,.97);
  --c-line:#7d8ea3; --c-area:rgba(8,145,178,.14);
  --fx-a:#0b6fa4; --fx-b:#0f7a6b; --fx-c:#6366f1; --fx-d:#c2410c; --fx-e:#a8306b;

  --glow:0 0 0 1px rgba(8,145,178,.28),0 0 22px -6px rgba(8,145,178,.45);
  --elev-1:0 1px 2px rgba(13,21,32,.06),0 2px 8px -2px rgba(13,21,32,.08);
  --elev-2:0 2px 6px rgba(13,21,32,.08),0 12px 28px -8px rgba(13,21,32,.16);
  --elev-3:0 8px 20px rgba(13,21,32,.10),0 30px 60px -20px rgba(13,21,32,.28);
  --malha:rgba(15,30,50,.04);
}
html[data-theme="dark"]{
  --bg:#070b12; --surface:#0e141f; --surface2:#131b28; --surface3:#1b2534;
  --border:rgba(125,170,220,.10); --border-strong:rgba(125,170,220,.22);
  --text:#e6edf7; --muted:#97a8bd; --faint:#7286a0;
  --blue:#38bdf8; --blue-bg:rgba(56,189,248,.10); --blue-bd:rgba(56,189,248,.32);
  --accent:#22d3ee; --accent-2:#818cf8;
  --red:#ff5d73; --red-bg:rgba(255,93,115,.10); --red-bd:rgba(255,93,115,.34);
  --amber:#fbbf3c; --amber-bg:rgba(251,191,60,.10); --amber-bd:rgba(251,191,60,.32);
  --green:#34e0a1; --green-bg:rgba(52,224,161,.10); --green-bd:rgba(52,224,161,.32); --green-glow:rgba(52,224,161,.6);
  --radius:14px; --radius-sm:9px;
  --shadow:0 18px 40px -18px rgba(0,0,0,.70);
  --on-primary:#04121a; --primary-hover:#5cc9fa; --sel:rgba(34,211,238,.30);
  --avatar:linear-gradient(135deg,#14304a,#0d1b2b);
  --topbar-bg:rgba(7,11,18,.78); --sidebar-mobile-bg:rgba(14,20,31,.97);
  --c-line:#6f84a0; --c-area:rgba(34,211,238,.14);
  --fx-a:#38bdf8; --fx-b:#34e0a1; --fx-c:#818cf8; --fx-d:#fbbf3c; --fx-e:#f472b6;

  --glow:0 0 0 1px rgba(34,211,238,.30),0 0 26px -6px rgba(34,211,238,.55);
  --elev-1:0 1px 2px rgba(0,0,0,.40);
  --elev-2:0 4px 12px rgba(0,0,0,.45),0 18px 40px -18px rgba(0,0,0,.70);
  --elev-3:0 10px 30px rgba(0,0,0,.55),0 40px 80px -30px rgba(0,0,0,.85);
  --malha:rgba(125,170,220,.05);
}
:root{
  --t-xs:.72rem; --t-sm:.8rem; --t-md:.875rem; --t-lg:1rem; --t-xl:1.4rem; --t-hero:2.1rem;
  --mov-rapido:140ms; --mov-medio:260ms; --mov-lento:520ms;
  --easing:cubic-bezier(.22,1,.36,1);
}

/* ── T2. Fundo e casca ───────────────────────────────────────────────────── */

body{
  background-image:linear-gradient(var(--malha) 1px,transparent 1px),linear-gradient(90deg,var(--malha) 1px,transparent 1px);
  background-size:44px 44px,44px 44px;
}
.topbar{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

.nav-btn{
  position:relative;border-radius:9px;
  transition:background var(--mov-rapido) var(--easing),color var(--mov-rapido) var(--easing),transform var(--mov-rapido) var(--easing);
}
.nav-btn:hover{transform:translateX(2px)}
.nav-btn::before{
  content:'';position:absolute;left:0;top:50%;width:3px;height:0;border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,var(--accent),var(--accent-2));
  transform:translateY(-50%);transition:height var(--mov-medio) var(--easing);
}
.nav-btn.active::before{height:62%}
.nav-btn.active{box-shadow:inset 0 0 0 1px var(--border)}

.screen.active{animation:entraTela var(--mov-medio) var(--easing)}
@keyframes entraTela{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* ── T3. Superfícies: 3 níveis de elevação, um raio ──────────────────────── */

.card,.kpi,.bi-kpi,.pri-card,.chart-card,.insight-card,.chat-col,.viz-col,.orch-agent{
  border-radius:var(--radius);box-shadow:var(--elev-1);
}
.drawer,.modal{box-shadow:var(--elev-3)}
.btn.primary{box-shadow:var(--elev-1);transition:transform var(--mov-rapido) var(--easing),box-shadow var(--mov-rapido) var(--easing),background var(--mov-rapido) var(--easing)}
.btn.primary:hover{transform:translateY(-1px);box-shadow:var(--glow)}
.btn:focus-visible,.nav-btn:focus-visible,.tab-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Cards interativos sobem um fio ao passar o mouse — o resto fica quieto. */
.pri-card,.kpi,.bi-kpi{
  position:relative;overflow:hidden;
  transition:transform var(--mov-medio) var(--easing),box-shadow var(--mov-medio) var(--easing),border-color var(--mov-medio) var(--easing);
}
/* Feedback 23/08: lift = promessa de clique. Só sobe quem tem ação dentro
   (botão, link ou data-action) — KPI puramente informativo fica quieto. */
.pri-card:has(button:not([disabled]),[data-action],a):hover,
.kpi:has(button:not([disabled]),[data-action],a):hover,
.bi-kpi:has(button:not([disabled]),[data-action],a):hover{transform:translateY(-3px);box-shadow:var(--elev-2);border-color:var(--border-strong)}

/* Entrada escalonada: a tela se monta, não aparece de uma vez. */
.kpis .kpi,.bi-kpis .bi-kpi,.pri-card,.venc-item{animation:entraCard var(--mov-lento) var(--easing) backwards}
.kpis .kpi:nth-child(2),.bi-kpis .bi-kpi:nth-child(2),.pri-card:nth-of-type(2){animation-delay:45ms}
.kpis .kpi:nth-child(3),.bi-kpis .bi-kpi:nth-child(3),.pri-card:nth-of-type(3){animation-delay:90ms}
.kpis .kpi:nth-child(4),.bi-kpis .bi-kpi:nth-child(4),.pri-card:nth-of-type(4){animation-delay:135ms}
.kpis .kpi:nth-child(5),.bi-kpis .bi-kpi:nth-child(5),.pri-card:nth-of-type(5){animation-delay:180ms}
.kpis .kpi:nth-child(n+6),.bi-kpis .bi-kpi:nth-child(n+6),.pri-card:nth-of-type(n+6){animation-delay:225ms}
@keyframes entraCard{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}

/* ── T4. KPI — o número é o herói ────────────────────────────────────────── */

.kpi .v,.bi-kpi .v{font-size:var(--t-hero);font-weight:600;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums}
.kpi .l,.bi-kpi .l{font-size:var(--t-sm);color:var(--muted);margin-top:8px}
.metric-band .deleg .v{font-size:1.7rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
/* Faixa de estado no topo do KPI — verde fraco por padrão; só o crítico grita. */
.kpi::before,.bi-kpi::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent);opacity:.45}
/* No dashboard, .hint é alerta (vermelho na base); no funil de compras é só
   rótulo — por isso o funil fica fora. */
.kpi:not(.compras-funil):has(.hint)::before{background:var(--red);opacity:1;box-shadow:0 0 12px -2px var(--red)}
.kpi:not(.compras-funil):has(.hint){border-color:var(--red-bd)}

/* ── T5. Severidade como forma, não só como chip ─────────────────────────── */
/* O chip já carrega a cor; o card ganha uma faixa lateral que a repete, para
   o olho varrer a lista sem ler. Crítico é o único com brilho. */
.pri-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:3px 0 0 3px;background:var(--accent);opacity:.55}
.pri-card:has(.chip.warn)::before{background:var(--amber);opacity:.8}
.pri-card:has(.chip.crit)::before{background:var(--red);opacity:1;box-shadow:0 0 12px -2px var(--red)}
.pri-card:has(.chip.crit){border-color:var(--red-bd)}
.venc-item{position:relative;transition:transform var(--mov-rapido) var(--easing)}
.venc-item:hover{transform:translateX(3px)}
.venc-item.risco-alto{border-left:3px solid var(--red)}

.chip{letter-spacing:.01em}
.chip.crit{box-shadow:0 0 0 2px var(--red-bg)}

/* ── T6. Abas ────────────────────────────────────────────────────────────── */

.tab-btn{position:relative;transition:color var(--mov-rapido) var(--easing)}
.tab-btn::after{content:'';position:absolute;left:16px;right:16px;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent-2));transform:scaleX(0);transition:transform var(--mov-medio) var(--easing);transform-origin:left}
.tab-btn.active::after{transform:scaleX(1)}

/* ── T7. Chat e constelação ──────────────────────────────────────────────── */

/* Bolhas voltam ao token (o cinza hardcoded do punch list reprovava no AA). */
.msg.ai,html[data-theme="dark"] .msg.ai{background:var(--surface2);border-color:var(--border);color:var(--text)}
.msg.user,html[data-theme="dark"] .msg.user{background:var(--blue-bg);border-color:var(--blue-bd);color:var(--text)}
.msg{animation:entraMsg var(--mov-medio) var(--easing)}
@keyframes entraMsg{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.chat-inbar textarea{transition:border-color var(--mov-rapido) var(--easing),box-shadow var(--mov-rapido) var(--easing)}
.chat-inbar textarea:focus{border-color:var(--accent);box-shadow:var(--glow)}

/* Radar: anéis concêntricos atrás da constelação. */
.viz-stage::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%,transparent 90px,var(--malha) 91px,transparent 92px),
    radial-gradient(circle at 50% 50%,transparent 160px,var(--malha) 161px,transparent 162px),
    radial-gradient(circle at 50% 50%,transparent 230px,var(--malha) 231px,transparent 232px);
}
.viz-head{letter-spacing:.14em}
/* Log: cada linha entra e carrega a cor do agente na borda. */
.viz-feed .fl{
  padding-left:9px;border-left:2px solid var(--agent-c,var(--border));
  animation:entraLog var(--mov-medio) var(--easing);
}
@keyframes entraLog{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}

/* ── T8. Menos movimento, quando pedido ──────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .nav-btn:hover,.pri-card:hover,.kpi:hover,.bi-kpi:hover,.venc-item:hover,.btn.primary:hover{transform:none}
}

/* ── T9. Telas pequenas: o herói encolhe, a faixa some ───────────────────── */
@media (max-width:900px){
  .kpi .v,.bi-kpi .v{font-size:1.6rem}
  .nav-btn::before{display:none}
  .viz-stage::before{display:none}
}

/* ── T10. Escala tipográfica — consolidação mecânica ─────────────────── */
/* A base tinha 16 valores entre .68 e .95rem. Cada seletor recebe o token
   mais próximo, com a MESMA especificidade (vence por ordem). Gerado a
   partir de sead.css; regras dentro de @media ficaram de fora de propósito. */
.logo .name,.topbar .title,.brief-head .greet p,.rev-card h4,.alert-card h4,.pref-card h3,.theme-toggle,.inst-bloco,.kpi.compras-funil .hint,.ex-conta{font-size:var(--t-lg)}
.logo .org,.nav-btn .n,.sidebar .foot,.sim-badge,.bell .count,.ai-badge,.lvl,.sources,.section-label,.metric-band .deleg .l,.pri-why .lbl,.alert-item .time,.agent-card .st,.agent-card .items,.tab-btn .badge,thead th,.vig .txt,.field .hint,.bi-filters .upd,.bi-kpi .l,.bi-kpi .delta,.chart-card .sub,.legend,.donut-center,.orch-agent .oa-status,.task.done .t-ic::after,.t-agent,.viz-head,.viz-legend,.viz-stage .packet-label,.viz-feed .fl,.viz-feed .fl .t,.d-section h4,.timeline .tl-date,.compras-funil .hint,.proc-head,.ord-seta,.tl-fase,.tl-n,.peca-badge,.bloq-tag,.peca-btn,.peca-doc,.inst-fhint,.inst-ess,.inst-sug,.mock-selo,.dr-fonte,.chat-hist-meta,.econ-head,.econ-det summary,.econ-criterio,.notif-badge,.doc-row.doc-head,.mx-head,.mx-fase,.mx-n,.mx-data,.mx-agora,.hbar-row.hbar-head,.venc-risco,.ex-head,.ex-tipo,.ex-orgao,.ex-rot,.ex-bloco h4,.ex-regra h4,.ex-faixas,.ex-faixa-nota,.ex-legenda,.ex-fonte{font-size:var(--t-xs)}
.nav-btn,.topbar .date,.empty,.agent-card h4,.ask-bar input,.tab-btn,.filters input[type=search],.rec-body,.field select,.field input[type=time],.audit-banner,.insight-card,.chart-card h3,.msg,.chat-inbar input,.chat-inbar textarea,.orch-coord .oc-head,.doc-body,.modal select,.q-bubble,.a-block,.rec-box,.modal textarea,.modal input[type=text],.toast,.compras-alertas li,.proc summary,.peca-list li,.fld input,.fld select,.fld textarea,.modal-acts button,.force-pecas,.compras-empty,.chart-etiqueta,.dr-objeto,.dr-row,.notif-item,.doc-row,.mx-linha,.dr-lista,.bi-leitura,.modal-lead,.venc-item,.ex-intro,.ex-linha,.ex-regra-txt,.ex-ia p,.ex-lista,.ex-pag div b{font-size:var(--t-md)}
.avatar,.conf,.btn,.btn.sm,.error-strip,.error-strip .retry,.toggle-group button,.metric-band .sub,.pri-meta,.pri-why,.alert-item .type,.alert-item .action,.kpi .l,.filters select,table,.mono,.pref-card .desc,.field label,.range-val,.radio-opt,.radio-opt .t span,.seg button,.pref-foot .note,.who,.exp-link,.bi-filters select,.hbar-row,.donut-legend,.orch-coord .oc-status,.orch-agent .oa-head,.task,.orch-empty,.ai-note,.check-item,.mini-table,.timeline li,.clause,.factor,.m-label,.audit-note,.proc-num,.proc-orgao,.proc-passo,.proc-data,.proc-body h4,.tl-passo,.compras-fonte,.btn-novo,.btn-avancar,.cn-origem,.inst-hint,.inst-intro,.inst-mais summary,.doc-link,.conducao-pin,.fld,.chart-legend,.lic-row,.lic-orgao,.chat-hist-item,.econ-box,.proc-tip,.ui-tip,.dr-ctr-obj,.dr-anulada,.mx-sem,.cons-lista li,.cons-obj,.cons-mais,.bi-kpi .l,.bi-kpi .delta,.drawer .dr-fonte,.venc-forn,.venc-obj,.ex-sub,.fbtn-ex,.ex-filtros .ex-dica,.ex-num,.ex-ultimo,.ex-mudo,.ex-conf,.ex-lista .quando,.ex-lista .quem,.ex-pag div{font-size:var(--t-sm)}

/* ── T11. Sombras one-off da base → níveis de elevação ────────────────── */
.alert-item,.rev-card,.agent-card,.celula-cracha{box-shadow:var(--elev-1)}
.aviso-tip{box-shadow:var(--elev-3)}
.toast,.drawer,.modal,.tooltip{box-shadow:var(--elev-3)}

/* ── T12. Tabelas — linhas legíveis (feedback 23/08) ─────────────────────── */
/* A trilha de auditoria tinha linhas transparentes sobre o fundo da página e
   um divisor de 1px a 10% — não dava para ver onde uma linha acaba e a outra
   começa. Zebra por token (funciona nos dois temas), divisor mais firme,
   hover com o tinte do acento e moldura arredondada na tabela inteira. */

table{
  border-collapse:separate;border-spacing:0;
  border:1px solid var(--border);border-radius:var(--radius);
  background:var(--surface);overflow:hidden;
}
thead th{background:var(--surface2);border-bottom:1px solid var(--border-strong)}
tbody tr{background:var(--surface)}
tbody tr:nth-child(even){background:var(--surface2)}
tbody tr:hover{background:var(--blue-bg)}
tbody td{border-bottom:1px solid var(--border)}
tbody tr:last-child td{border-bottom:0}
/* cantos arredondados de verdade (border-collapse:separate não recorta) */
thead th:first-child{border-top-left-radius:calc(var(--radius) - 1px)}
thead th:last-child{border-top-right-radius:calc(var(--radius) - 1px)}
tbody tr:last-child td:first-child{border-bottom-left-radius:calc(var(--radius) - 1px)}
tbody tr:last-child td:last-child{border-bottom-right-radius:calc(var(--radius) - 1px)}

/* ── T13. Portas novas (feedback 23/08) ──────────────────────────────────── */
.flash-focus{animation:flashFocus 1.6s var(--easing)}
@keyframes flashFocus{
  0%{box-shadow:0 0 0 2px var(--accent),var(--glow);background:var(--blue-bg)}
  70%{box-shadow:0 0 0 2px var(--accent),var(--glow)}
  100%{box-shadow:none}
}
.alert-item[data-action]{cursor:pointer;transition:transform var(--mov-rapido) var(--easing),border-color var(--mov-rapido) var(--easing)}
.alert-item[data-action]:hover{transform:translateX(3px);border-color:var(--blue-bd)}
/* botão desabilitado diz por quê no hover e não finge vida */
button[disabled]{opacity:.45;cursor:not-allowed}