/* ============================================================================
   TEMA PRISMA — a identidade visual da LUMISET (manual de 09/2026) numa
   estrutura de SISTEMA PROFISSIONAL (12/09/2026): barra azul-marinho no topo
   com as seções, abas de segundo nível, tabelas densas, uma cor de acento e
   cores semânticas só em status. Referências: 7 telas de SaaS de obra, agenda
   e ponto reunidas pelo Samuel em img-exemplos/ (o que elas têm em comum está
   descrito no HANDOFF-FRONT.md).

   A PALETA vem do manual (p. 2): Azul noturno #0E2A47 · Azul profundo #1D4ED8 ·
   Verde profundo #0E8F66 · Vermelho #C42A25 · Gelo #EEF3F9.

   O CLARO É O PADRÃO (desde 12/09): fundo no Gelo — branco só nas superfícies
   (tabelas, cards, campos), para não "estourar o olho" — e texto em azul
   noturno. A barra do topo é o noturno nos DOIS temas: por isso o texto sobre
   ela tem tokens próprios (--barra-*), que não mudam com o tema.
   O ESCURO fica sob `:root[data-tema="escuro"]`, construído a partir do azul
   noturno: o fundo É o noturno, a barra um tom abaixo, os cards um tom acima.

   CONTRASTE (WCAG 2, medido — não no olho; scratchpad/paleta.py, 11/09):
     claro   ink #0e2a47 14,6:1 · muted 6,9:1 · faint 5,4:1   (sobre branco)
             brand #1d4ed8 6,7:1 · brand-2 #1841b4 8,6:1
             ok #0c7956 5,4:1 · crit #c42a25 5,7:1 · warn #9a4a0b 6,3:1
     escuro  ink #eef3f9 11,0:1 · muted 7,1:1 · faint 5,0:1   (sobre o card)
             brand #7897ed 4,4:1 (linha) · brand-2 #8fa8f0 5,3:1 (texto)
             ok #12ba85 4,9:1 · crit #e7827e 4,6:1 · warn #f0b13c 6,5:1
     barra   ink #eef3f9 13,1:1 · muted #b4c7da 8,4:1 sobre o noturno #0e2a47
             (medido de novo em 14/09 — a tabela de 11/09 dizia 13,9 e 8,9)
             SELEÇÃO #c42a25 (14/09): 2,57:1 na barra do claro · 2,97:1 na do
             escuro · 5,67:1 nas abas do claro · 2,17:1 nas do escuro — abaixo
             de 3:1, então: traço de 3px + rótulo ativo em branco (#fff 14,6:1)
     cartão do gráfico (o noturno, nos dois temas): texto 13,1:1 · rótulo
             8,4:1 · física #7897ed 5,2:1 · risco #e7827e 5,5:1 (escuro:
             15,1 · 9,7 · 6,0 · 6,3)
   (o verde profundo puro dá 4,1:1 sobre branco — abaixo do 4,5 exigido para
   texto; por isso o --ok claro é o mesmo verde um tom abaixo.)

   TIPOGRAFIA do manual: Poppins (marca, títulos e destaques) e Work Sans
   (texto corrido e sistema). NADA vem de CDN: as pilhas começam pela fonte da
   identidade e caem em system-ui quando ela não está na máquina — o app
   continua 100% offline.

   O QUE NÃO MUDOU, DE PROPÓSITO: os NOMES das variáveis. `app.py` e
   `piloto/relatorio.py` usam --ground, --panel, --ink, --muted, --faint,
   --line, --brand, --crit/--warn/--ok, --cost etc. Trocar valor e estrutura
   mantendo o nome é o que faz a troca ser segura.

   TODA cor vive numa variável aqui embaixo. Cor literal em qualquer outro lugar
   quebra um dos dois modos (verificar.py confere).

   --cliente: a cor da construtora CONTRATANTE. O app a injeta num <style>
   (`:root{--cliente:#rrggbb}`) só quando a empresa definiu uma; quem a usa
   escreve `var(--cliente, var(--brand))` — sem cliente, vale a marca. Nunca
   em texto (o contraste seria imprevisível): só tinta do fundo da entrada e
   o ícone da marca na barra.
   ============================================================================ */

:root{
  /* ---------- MODO CLARO (padrão) — Gelo com texto em azul noturno ---------- */
  --ground:#eef3f9;            /* fundo da tela: o gelo da identidade */
  --panel:#ffffff;             /* superfícies: tabelas, cards, campos */
  --panel-2:#dee5ed;           /* trilhos de barra, chips neutros, hover forte */
  --sidebar:#0e2a47;           /* A BARRA DO TOPO (nome histórico): o azul noturno */
  --sup:#ffffff;               /* campos de formulário */
  --ink:#0e2a47;--muted:#465c74;--faint:#586c82;
  --line:rgba(14,42,71,.14);
  --nav-on:rgba(14,42,71,.06); /* linha em hover, item ativo de menu */
  --brand:#1d4ed8;             /* o acento: curva física, sublinhado da aba, foco */
  --brand-2:#1841b4;           /* texto na marca, links */
  --brand-suave:#e2e8fa;       /* tinta da marca */
  --brand-solido:#1d4ed8;      /* preenchimento do botão principal */
  --sobre-solido:#ffffff;      /* texto sobre o sólido (6,7:1) — igual nos dois temas */
  --crit:#c42a25;--crit-suave:rgba(196,42,37,.10);--crit-texto:#a3231f;
  --warn:#9a4a0b;--warn-suave:rgba(240,177,60,.18);--warn-texto:#7f3d09;
  --ok:#0c7956;--ok-suave:rgba(14,143,102,.12);--ok-texto:#0b6a4c;
  --cost:#687a8e;              /* curva do custo: cinza-azulado neutro */
  /* GRÁFICOS (14/09, pedido do Samuel a partir de um gráfico de faturamento que
     ele gostou: "a sombra embaixo um pouco mais forte, a linha um pouco mais
     fina, bolinhas nos pontos"). A espessura é a mesma nos dois temas (vale
     daqui); a força da área sob a física e a do gap mudam com o fundo — no
     escuro a mesma opacidade quase some. ANTES: física 2,2px (carteira) e
     2,4px (ficha), custo 1,8–2px, projeção 2 e 1,8px, área .30 → .03, gap .22. */
  --graf-traco:1.75px;--graf-traco-sec:1.5px;
  --graf-area-topo:.40;--graf-area-base:.06;--graf-gap:.26;
  /* classes de causa das OCORRÊNCIAS (o porquê, 12/09): uma cor por classe —
     fora do controle · suprimentos · execução · projeto/escopo · gestão · outra.
     Escuras o bastante para um losango de 9px sobre o branco. */
  --oc-externa:#0f7b8a;--oc-suprimento:#6d4fc2;--oc-execucao:#b8660f;
  --oc-escopo:#b0338a;--oc-gestao:#3b5f8f;--oc-outra:#687a8e;
  --sombra:0 1px 2px rgba(14,42,71,.06);
  --sombra-alta:0 1px 2px rgba(14,42,71,.08),0 10px 30px rgba(14,42,71,.14);
  --veu:rgba(14,42,71,.45);    /* o escurecido atrás do tutorial e do painel */
  --anel:rgba(29,78,216,.35);  /* anel de foco e de realce: a marca com transparência */
  /* a barra do topo é noturna nos dois temas — o que vai sobre ela também */
  --barra-ink:#eef3f9;--barra-muted:#b4c7da;
  --barra-on:rgba(238,243,249,.10);--barra-linha:rgba(238,243,249,.12);
  --barra-acento:#7897ed;      /* ícone da marca, avatar, barra de progresso e a física no cartão do gráfico: azul profundo com mais luz (o puro some no noturno) */
  --barra-crit:#e7827e;        /* risco SOBRE o noturno (cartão do gráfico): 5,5:1 — o #c42a25 puro dá 2,6:1 ali */
  /* A MARCA DA SELEÇÃO (14/09, pedido do Samuel: "não estou conseguindo ver que
     foi selecionado"): o traço sob a seção ativa da barra, sob a aba ativa da
     seção e sob a aba ativa da ficha é o VERMELHO do manual, exato, e vale nos
     dois temas (o escuro não o redefine). Antes: --barra-acento (#7897ed) na
     barra e --brand nas abas, com 2px. Medido (WCAG 2): 2,57:1 sobre a barra
     do claro, 2,97:1 sobre a do escuro, 5,67:1 nas abas do claro e 2,17:1 nas
     do escuro — abaixo dos 3:1 que a WCAG 1.4.11 pede a um indicador de
     estado. Compensado SEM trocar a cor: traço de 3px (era 2px) e o rótulo da
     seção ativa em branco pleno (14,6:1; as abas já usam a tinta cheia, --ink).
     Token separado de --crit DE PROPÓSITO: seleção não é risco — o contador
     do Radar é pílula cheia em --crit; a seleção é traço. */
  --selecao:#c42a25;--sel-traco:3px;--barra-ink-sel:#ffffff;
  /* tipografia da identidade, com a pilha do sistema atrás (sem CDN) */
  --titulo:"Poppins",system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --sans:"Work Sans",system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:var(--titulo);       /* nome antigo, mantido: quem pedia --serif pedia "fonte de título" */
  --mono:ui-monospace,"Cascadia Mono",Consolas,monospace;
  /* pontes para o Bootstrap */
  --bs-body-bg:var(--ground);--bs-body-color:var(--ink);
  --bs-body-font-family:var(--sans);
  --bs-border-color:var(--line);--bs-border-radius:6px;
  --bs-link-color-rgb:24,65,180;--bs-link-hover-color-rgb:29,78,216;
  --bs-secondary-color:var(--muted);
  --bs-font-monospace:ui-monospace,Consolas,monospace;
  --bs-primary:#1d4ed8;--bs-primary-rgb:29,78,216;
  --bs-emphasis-color:var(--ink);
  color-scheme:light;
}

:root[data-tema="escuro"]{
  /* ---------- MODO ESCURO — a partir do azul noturno ---------- */
  --ground:#0e2a47;--panel:#12365c;--panel-2:#174473;--sidebar:#0a1e33;--sup:#0e2a47;
  --ink:#eef3f9;--muted:#b4c7da;--faint:#8ea8c2;
  --line:rgba(238,243,249,.14);--nav-on:rgba(238,243,249,.09);
  --brand:#7897ed;--brand-2:#8fa8f0;--brand-suave:#113267;--brand-solido:#1d4ed8;
  --crit:#e7827e;--crit-suave:rgba(196,42,37,.18);--crit-texto:#e7827e;
  --warn:#f0b13c;--warn-suave:rgba(240,177,60,.14);--warn-texto:#f0b13c;
  --ok:#12ba85;--ok-suave:rgba(14,143,102,.18);--ok-texto:#12ba85;
  --cost:#94a8bd;
  --graf-area-topo:.46;--graf-area-base:.08;--graf-gap:.30;   /* no escuro a área e o gap precisam de mais tinta para aparecer (antes .30 → .03 e .22) */
  --oc-externa:#4fc3d4;--oc-suprimento:#b39ddb;--oc-execucao:#f0a552;
  --oc-escopo:#ef7fc9;--oc-gestao:#8fb3e0;--oc-outra:#94a8bd;
  /* no escuro, elevação é BORDA — sem sombra empilhada */
  --sombra:0 0 0 1px #1b4a7c;
  --sombra-alta:0 0 0 1px #2a5f95,0 6px 18px rgba(0,0,0,.5);
  --veu:rgba(5,16,30,.6);
  --anel:rgba(120,151,237,.45);
  --bs-link-color-rgb:143,168,240;--bs-link-hover-color-rgb:176,196,245;
  --bs-primary:#7897ed;--bs-primary-rgb:120,151,237;
  color-scheme:dark;
}

:root{
  /* ---------- MOVIMENTO (igual nos dois temas) ----------
     Uma fonte só para TODA transição e animação do app: três durações e
     duas curvas. Quem entra na tela usa --curva-saida (ease-out: parte
     rápido e assenta); quem sai usa --curva-entrada (ease-in: parte devagar
     e some). Teto de ~400 ms — acima disso a pessoa está esperando o
     sistema, não vendo uma resposta. As exceções, conscientes: a contagem
     dos KPIs (600 ms), o destaque da linha nova (1,5 s), a barra de tempo do
     aviso de retorno (6 s) e o rastejo da barra de progresso (é espera de
     rede, não animação de interface). Só se anima o que o navegador compõe
     sem relayout: transform, opacity, cor de fundo/borda/texto e sombra. */
  --dur-rapida:120ms;--dur-media:220ms;--dur-lenta:360ms;
  --curva-saida:cubic-bezier(.2,.8,.2,1);--curva-entrada:cubic-bezier(.4,0,1,1);
}

/* --------------------------------- base ---------------------------------- */
body{background:var(--ground);color:var(--ink);-webkit-font-smoothing:antialiased;
 font-family:var(--sans);font-size:13.5px;line-height:1.45}
/* Poppins (manual: "marca, títulos e destaques") nos títulos, na marca e nos
   números grandes; o texto corrido fica em Work Sans (--sans). Sem a fonte na
   máquina, as duas pilhas caem na MESMA fonte do sistema — nada desalinha. */
.pg-head h1,.entrada-card h1,.card-t,.card-title,.tour-titulo,.marca,.entrada-nome,
.foot-marca,.kpi-item .val,.faixa-mid .v,.bandval,.prazo-val,.painel-nome,.vazio h3{font-family:var(--titulo)}
/* números: algarismos tabulares da própria fonte (o desenho não usa mono) */
.num,td.n,th.n,.kpi-item .val,.delta,.brl,.fact .v,.mem-row .r{font-variant-numeric:tabular-nums}
.titulo-serif{font-family:var(--serif);font-weight:500;letter-spacing:-.015em;color:var(--ink)}
.text-secondary{color:var(--muted)!important}
a{color:var(--brand-2)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
b,strong,.fw-semibold{font-weight:600}

/* --------------------- botão de alternar claro/escuro --------------------- */
/* dois ícones em SVG; o CSS mostra um por vez conforme o tema */
#btn-tema .sol{display:none}
[data-tema="escuro"] #btn-tema .lua{display:none}
[data-tema="escuro"] #btn-tema .sol{display:flex}

/* =============================== A CASCA ==================================
   Barra do topo (azul-marinho, fixa) com a marca, as seções e os botões de
   canto; abaixo, quando a seção tem subitens, a barra branca de abas; e o
   conteúdo numa coluna de largura limitada. Sem barra lateral.
   ========================================================================= */
.top{position:sticky;top:0;z-index:50;background:var(--sidebar);color:var(--barra-ink);
 min-height:52px;display:flex;align-items:stretch;padding:0 20px;gap:18px}
.marca{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--barra-ink);
 font-weight:600;font-size:16px;letter-spacing:-.01em;flex:none}
.marca:hover{color:var(--barra-ink)}
.marca .logo{display:grid;place-items:center;color:var(--cliente,var(--barra-acento))}
.marca .by{font-family:var(--sans);font-weight:400;font-size:11px;color:var(--barra-muted);margin-left:2px}
.nav-main{display:flex;align-items:stretch;gap:2px;min-width:0;position:relative}
.nav-item{display:inline-flex;align-items:center;gap:7px;padding:0 11px;font-size:13.5px;font-weight:500;
 color:var(--barra-muted);text-decoration:none;white-space:nowrap;
 border-top:var(--sel-traco) solid transparent;border-bottom:var(--sel-traco) solid transparent;
 transition:color var(--dur-rapida),background-color var(--dur-rapida)}
.nav-item:hover{color:var(--barra-ink)}
.nav-item:active{color:var(--barra-ink);background:var(--barra-on)}
/* a seção ativa: rótulo em BRANCO PLENO + o traço VERMELHO da seleção
   (--selecao, 3px). O vermelho sobre o noturno fica abaixo de 3:1 (ver os
   tokens): o branco do rótulo é a outra metade do sinal, não enfeite. */
.nav-item.on{color:var(--barra-ink-sel);border-bottom-color:var(--selecao)}
/* O INDICADOR QUE DESLIZA: um traço só por barra (seções, abas da seção,
   abas da ficha), criado pelo JS e posicionado por transform sob o item
   ativo — com JS o traço substitui a borda do item (.js), sem JS a borda
   fica. Ao trocar de tela, ele parte de onde a pessoa clicou e desliza até
   a seção nova: é o que mostra "de onde vim, para onde fui". */
.ind{position:absolute;left:0;bottom:0;height:var(--sel-traco);width:1px;background:var(--selecao);transform-origin:left;
 opacity:0;pointer-events:none;transition:transform var(--dur-media) var(--curva-saida),opacity var(--dur-rapida)}
.ind.on{opacity:1}
/* a borda do item só some enquanto o traço está LIGADO (:has): se o JS o
   desliga — menu vertical, aba na linha de cima — a borda volta sozinha */
.nav-main:has(.ind.on) .nav-item.on{border-bottom-color:transparent}
/* contador de obras em risco: sólido, porque é o único número da barra */
.nav-item .conta{background:var(--crit);color:var(--sobre-solido);font-size:10.5px;font-weight:600;
 border-radius:9px;padding:1px 6px;line-height:1.35;min-width:18px;text-align:center}
.top-dir{margin-left:auto;display:flex;align-items:center;gap:2px;flex:none}
.tb-btn{width:32px;height:32px;border:0;background:transparent;color:var(--barra-muted);display:grid;
 place-items:center;border-radius:6px;text-decoration:none;cursor:pointer;padding:0;
 transition:background-color var(--dur-rapida),color var(--dur-rapida),transform var(--dur-rapida)}
.tb-btn:hover{background:var(--barra-on);color:var(--barra-ink)}
.tb-btn:active{transform:scale(.92)}
/* empresa + quem está logado: um chip que abre o menu (conta, usuários, sair) */
details.menu-conta{position:relative;margin-left:8px}
details.menu-conta>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;
 padding:4px 8px 4px 5px;border-radius:6px;color:var(--barra-ink);font-size:13px;font-weight:500;
 background:var(--barra-on);line-height:1.15;transition:background-color var(--dur-rapida)}
details.menu-conta>summary::-webkit-details-marker{display:none}
details.menu-conta>summary:hover{background:var(--barra-linha)}
.menu-conta .txt{display:flex;flex-direction:column;min-width:0;text-align:left}
.menu-conta .nome{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-conta .sub{font-size:11px;font-weight:400;color:var(--barra-muted)}
.menu-conta .chev{color:var(--barra-muted);display:flex;transition:transform var(--dur-media) var(--curva-saida)}
details.menu-conta[open] .chev{transform:rotate(180deg)}
/* os menus suspensos descem com fade (o <details> só anima o abrir: ao
   fechar, o navegador some com o conteúdo na hora) */
@keyframes menu-abrir{from{opacity:0;transform:translateY(-6px)}}
details.menu-conta[open] .menu-lista,details.acao-menu[open] .acao-lista{animation:menu-abrir var(--dur-media) var(--curva-saida)}
.chip-empresa{display:flex;align-items:center;gap:8px;margin-left:8px;padding:4px 10px 4px 5px;border-radius:6px;
 color:var(--barra-ink);font-size:13px;font-weight:500;background:var(--barra-on)}
.av{width:28px;height:28px;border-radius:50%;background:var(--panel-2);color:var(--muted);font-size:10.5px;
 font-weight:600;display:inline-grid;place-items:center;flex:none;letter-spacing:.02em}
.top .av{width:24px;height:24px;font-size:10px;background:var(--barra-acento);color:var(--sidebar)}
.menu-lista{position:absolute;right:0;top:calc(100% + 6px);min-width:220px;background:var(--panel);color:var(--ink);
 border:1px solid var(--line);border-radius:8px;box-shadow:var(--sombra-alta);padding:6px;z-index:60;
 display:flex;flex-direction:column;gap:2px}
.menu-lista .cab{padding:6px 10px 8px;font-size:12px;color:var(--faint);border-bottom:1px solid var(--line);
 margin-bottom:4px;line-height:1.4}
.menu-lista .cab b{color:var(--ink);font-weight:600;display:block}
.menu-lista a,.menu-lista button{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px;
 text-decoration:none;color:var(--ink);font:inherit;font-size:13.5px;border:0;background:transparent;
 width:100%;text-align:left;cursor:pointer}
.menu-lista a,.menu-lista button{transition:background-color var(--dur-rapida)}
.menu-lista a:hover,.menu-lista button:hover{background:var(--nav-on);color:var(--ink)}
.menu-lista svg{color:var(--faint);flex:none}
.nav-burger{display:none;width:36px;height:36px;border:0;background:transparent;color:var(--barra-ink);
 border-radius:6px;place-items:center;cursor:pointer;padding:0;align-self:center;
 transition:background-color var(--dur-rapida),transform var(--dur-rapida)}
.nav-burger:hover{background:var(--barra-on)}
.nav-burger:active{transform:scale(.92)}

/* abas de segundo nível (Financeiro: Lançamentos · Conciliação · Relatórios) */
.abas-bar{background:var(--panel);border-bottom:1px solid var(--line)}
.abas-in{max-width:1360px;margin:0 auto;padding:0 28px;display:flex;align-items:center;gap:16px;min-height:44px}
/* a seção a que as abas pertencem, em caixa alta e apagada, antes delas:
   "FINANCEIRO  Lançamentos · Conciliação · Relatórios" — sem isso as abas
   pareciam filtros soltos (queixa de 12/09: "meio confuso") */
.abas-secao{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);font-weight:500;
 white-space:nowrap;padding-right:14px;border-right:1px solid var(--line);line-height:1}
.abas{display:flex;flex-wrap:wrap;gap:0 18px;min-width:0;position:relative}
.aba{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 2px;font-size:13.5px;font-weight:500;
 color:var(--muted);text-decoration:none;border:0;background:transparent;font-family:inherit;
 border-bottom:var(--sel-traco) solid transparent;white-space:nowrap;cursor:pointer;
 transition:color var(--dur-rapida),transform var(--dur-rapida)}
.aba:hover{color:var(--ink)}
.aba:active{transform:translateY(1px)}
/* a aba ativa usa a MESMA marca da barra do topo (14/09; antes era --brand):
   o traço vermelho da seleção, 3px. Uma marca só para "você está aqui" — nas
   seções, nas abas da seção e nas abas da ficha. O .ind herda a cor da regra
   dele (não há mais cor própria para as abas). */
.aba.on{color:var(--ink);border-bottom-color:var(--selecao)}
.abas:has(.ind.on) .aba.on,.abas-pg:has(.ind.on) .aba.on{border-bottom-color:transparent}
.aba .n{font-size:11.5px;color:var(--faint);font-weight:500}
.abas-dir{margin-left:auto;display:flex;gap:6px;align-items:center;flex:none}
/* abas DENTRO da página (ficha da obra): mesmo desenho, sem a barra cheia */
.abas-pg{border-bottom:1px solid var(--line);display:flex;align-items:center;gap:16px;flex-wrap:wrap;position:relative}
.abas-pg .aba{min-height:40px}
.aba-pane[hidden]{display:none}
/* o painel da aba entra com fade + 8px (a mesma entrada da página; ao trocar
   de aba o JS marca .troca para não esperar a cascata da página) */
.content-col>.aba-pane.troca{animation-delay:0s}

.content-col{max-width:1360px;margin:0 auto;width:100%;padding:18px 28px 32px;
 display:flex;flex-direction:column;gap:16px}

/* cabeçalho da página: título pequeno + linha de apoio à esquerda, ações à direita */
.pg-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.pg-head h1{margin:0;font-size:20px;font-weight:600;letter-spacing:-.015em;color:var(--ink);line-height:1.25}
.pg-head .sub{color:var(--faint);margin-top:2px;font-size:12.5px}
.pg-head .crumb{font-size:12px;color:var(--faint);margin-bottom:2px}
.pg-head .crumb a{color:var(--faint);text-decoration:none}
.pg-head .crumb a:hover{color:var(--ink)}
.pg-acoes{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.chip-h1{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* menu de ações que lista as obras (Registrar medição ▾, Aditivo ▾) */
details.acao-menu{position:relative}
details.acao-menu>summary{list-style:none;cursor:pointer}
details.acao-menu>summary::-webkit-details-marker{display:none}
details.acao-menu:not([open]) .acao-lista{display:none}  /* fechado não pode criar rolagem lateral (13/09) */
.pg-acoes .acao-lista{left:auto;right:0}                     /* na barra de ações, abre para dentro da tela */
.acao-lista{position:absolute;top:calc(100% + 6px);left:0;min-width:260px;max-height:320px;overflow:auto;
 background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:var(--sombra-alta);
 padding:6px;z-index:50;display:flex;flex-direction:column;gap:2px}
.acao-lista a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:7px 10px;
 border-radius:6px;text-decoration:none;color:var(--ink);font-size:13px;white-space:nowrap}
.acao-lista a:hover{background:var(--nav-on);color:var(--ink)}
.acao-lista .sub{color:var(--faint);font-size:11.5px}

/* rodapé: o produto assina, com a versão */
.rodape{display:flex;gap:18px;align-items:center;flex-wrap:wrap;padding-top:8px;margin-top:auto;
 font-size:11.5px;color:var(--faint);border-top:1px solid var(--line)}
.rodape>span{display:inline-flex;align-items:center;gap:6px}
.foot-marca{font-size:12px;font-weight:500;color:var(--muted);letter-spacing:.01em}
.foot-marca svg{color:var(--cliente,var(--brand))}
.foot-marca .by{font-weight:400;color:var(--faint)}

/* --------------------------------- cards --------------------------------- */
.card{--bs-card-bg:var(--panel);--bs-card-border-color:var(--line);--bs-card-spacer-y:14px;--bs-card-spacer-x:16px;
 --bs-card-color:var(--ink);--bs-card-border-radius:8px;box-shadow:var(--sombra)}
.card-title{font-weight:600;font-size:14px;letter-spacing:-.005em;color:var(--ink);margin-bottom:4px}
.card-title.h5{font-size:14px}
.card-t{font-size:14px;font-weight:600;color:var(--ink)}
.card-h{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.card-h .st{font-size:12px;white-space:nowrap}
.card-sub{font-size:12px;color:var(--faint)}

/* --------------------------------- botões -------------------------------- */
/* UMA cor de acento: o botão principal é sólido; o resto é contornado */
.btn{--bs-btn-border-radius:6px;--bs-btn-font-size:13px;font-weight:500;--bs-btn-padding-y:.36rem;--bs-btn-padding-x:.75rem;
 white-space:nowrap;--bs-btn-focus-box-shadow:0 0 0 3px var(--anel);
 transition:background-color var(--dur-rapida),border-color var(--dur-rapida),color var(--dur-rapida),
  box-shadow var(--dur-rapida),transform var(--dur-rapida),filter var(--dur-rapida)}
/* resposta ao toque: sobe 1px no hover, encolhe ao pressionar, anel no foco */
.btn:hover{transform:translateY(-1px);box-shadow:var(--sombra)}
.btn:active,.btn.active:active{transform:scale(.97);box-shadow:none}
.btn-sm{--bs-btn-font-size:12.5px;--bs-btn-padding-y:.26rem;--bs-btn-padding-x:.6rem}
.btn-primary{--bs-btn-bg:var(--brand-solido);--bs-btn-border-color:var(--brand-solido);--bs-btn-color:var(--sobre-solido);
 --bs-btn-hover-bg:var(--brand-solido);--bs-btn-hover-border-color:var(--brand-solido);--bs-btn-hover-color:var(--sobre-solido);
 --bs-btn-active-bg:var(--brand-solido);--bs-btn-active-border-color:var(--brand-solido);--bs-btn-active-color:var(--sobre-solido);
 --bs-btn-disabled-bg:var(--panel-2);--bs-btn-disabled-border-color:var(--panel-2);--bs-btn-disabled-color:var(--faint)}
.btn-primary:hover{filter:brightness(1.1)}
.btn-outline-primary{--bs-btn-color:var(--brand-2);--bs-btn-border-color:var(--brand);--bs-btn-bg:var(--panel);
 --bs-btn-hover-bg:var(--brand-suave);--bs-btn-hover-color:var(--brand-2);--bs-btn-hover-border-color:var(--brand);
 --bs-btn-active-bg:var(--brand-suave);--bs-btn-active-border-color:var(--brand-2);--bs-btn-active-color:var(--ink)}
.btn-outline-secondary{--bs-btn-color:var(--ink);--bs-btn-border-color:var(--line);--bs-btn-bg:var(--panel);
 --bs-btn-hover-bg:var(--panel-2);--bs-btn-hover-color:var(--ink);--bs-btn-hover-border-color:var(--faint);
 --bs-btn-active-bg:var(--panel-2);--bs-btn-active-border-color:var(--faint);--bs-btn-active-color:var(--ink)}
.btn-outline-danger{--bs-btn-color:var(--crit);--bs-btn-border-color:var(--line);--bs-btn-bg:var(--panel);
 --bs-btn-hover-bg:var(--crit-suave);--bs-btn-hover-color:var(--crit);--bs-btn-hover-border-color:var(--crit);
 --bs-btn-active-bg:var(--crit-suave);--bs-btn-active-border-color:var(--crit);--bs-btn-active-color:var(--crit)}
/* os sólidos semânticos do Bootstrap também lêem o tema (nada de vermelho literal) */
.btn-danger{--bs-btn-bg:var(--crit);--bs-btn-border-color:var(--crit);--bs-btn-color:var(--sobre-solido);
 --bs-btn-hover-bg:var(--crit);--bs-btn-hover-border-color:var(--crit);--bs-btn-hover-color:var(--sobre-solido);
 --bs-btn-active-bg:var(--crit);--bs-btn-active-border-color:var(--crit);--bs-btn-active-color:var(--sobre-solido)}
.btn-success{--bs-btn-bg:var(--ok);--bs-btn-border-color:var(--ok);--bs-btn-color:var(--sobre-solido);
 --bs-btn-hover-bg:var(--ok);--bs-btn-hover-border-color:var(--ok);--bs-btn-hover-color:var(--sobre-solido);
 --bs-btn-active-bg:var(--ok);--bs-btn-active-border-color:var(--ok);--bs-btn-active-color:var(--sobre-solido)}
.btn-warning{--bs-btn-bg:var(--warn-suave);--bs-btn-border-color:var(--warn);--bs-btn-color:var(--warn-texto);
 --bs-btn-hover-bg:var(--warn-suave);--bs-btn-hover-border-color:var(--warn);--bs-btn-hover-color:var(--warn-texto);
 --bs-btn-active-bg:var(--warn-suave);--bs-btn-active-border-color:var(--warn);--bs-btn-active-color:var(--warn-texto)}
.btn-group>.btn{--bs-btn-padding-x:.65rem}
.btn-mini{font:inherit;font-size:12.5px;padding:4px 10px;border-radius:6px;border:1px solid var(--line);
 background:var(--panel);color:var(--ink);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px;
 transition:border-color var(--dur-rapida),background-color var(--dur-rapida),transform var(--dur-rapida)}
.btn-mini:hover{border-color:var(--faint);color:var(--ink)}
.btn-mini:active{transform:scale(.97)}
.link-suave{font-size:13px;color:var(--brand-2);text-decoration:none}
.link-suave:hover{text-decoration:underline}
/* ESTADO "ENVIANDO" (JS da casca): o botão que disparou o POST trava, ganha
   o spinner e diz "Enviando…" — evita o envio duplo e responde ao clique.
   O giro é o único loop além do fundo do login e do pulso do crítico, e só
   vive enquanto a resposta não chega. */
.enviando{position:relative;pointer-events:none;opacity:.8;cursor:progress}
.enviando::before{content:"";width:12px;height:12px;border-radius:50%;border:2px solid currentColor;
 border-right-color:transparent;display:inline-block;vertical-align:-2px;margin-right:7px;animation:girar .7s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}

/* ------------------------------- formulários ------------------------------ */
/* compactos e alinhados: rótulo pequeno em cima, campo de 36px */
.form-label{display:block;font-size:12px;color:var(--muted);font-weight:500;margin-bottom:4px;
 white-space:nowrap;line-height:16px;min-height:16px}
.form-control,.form-select{min-height:36px;height:auto;padding:.3rem .6rem;background-color:var(--sup);border-color:var(--line);
 border-radius:6px;color:var(--ink);font-size:13.5px;
 transition:border-color var(--dur-rapida),box-shadow var(--dur-rapida),background-color var(--dur-rapida)}
/* campo inválido treme uma vez (JS marca .invalido no evento `invalid`);
   a máscara de dinheiro, ao inserir um ponto de milhar, dá um realce curto */
@keyframes tremer{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}
 30%,50%,70%{transform:translateX(-3px)}40%,60%{transform:translateX(3px)}}
.invalido{animation:tremer var(--dur-lenta) var(--curva-saida)}
@keyframes realce{from{box-shadow:0 0 0 4px var(--anel)}}
.dinheiro.realce{animation:realce var(--dur-media) var(--curva-entrada)}
.form-control-sm,.form-select-sm{min-height:30px;font-size:12.5px;padding:.2rem .5rem}
.form-control::placeholder{color:var(--faint)}
input[type=file].form-control{min-height:36px;padding-top:5px}
.form-control:focus,.form-select:focus{background-color:var(--sup);border-color:var(--brand);
 box-shadow:0 0 0 3px var(--brand-suave);color:var(--ink)}
.form-text{font-size:11.5px;color:var(--faint);min-height:14px;line-height:1.35}
input[type=number].form-control{font-variant-numeric:tabular-nums;text-align:right}
form .row .btn{min-height:36px}
.row.g-3{--bs-gutter-x:.9rem;--bs-gutter-y:.7rem}
.navsec-form{color:var(--faint);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
 border-bottom:1px solid var(--line);padding-bottom:5px;margin-top:4px}
/* filtros compactos em linha ("Régua: Vencimento ▾ · de … até …") */
.filtros{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;margin:0}
.filtro{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);margin:0}
.filtro>span{white-space:nowrap}
.filtro .form-select,.filtro .form-control{width:auto;min-height:30px;font-size:12.5px;padding:.2rem 1.6rem .2rem .5rem}
.filtro .form-control{padding-right:.5rem}
.filtros .nota{font-size:12px;color:var(--faint);margin-left:auto}
.filtros .btn-group .btn{--bs-btn-font-size:12.5px;--bs-btn-padding-y:.22rem;--bs-btn-padding-x:.55rem}

/* --------------------------------- alertas -------------------------------- */
/* borda na cor do estado + tinta do estado; texto na cor da tela (legível nos dois temas) */
.alert{border-radius:6px;font-size:13px;border-width:1px;color:var(--ink);padding:9px 12px;margin-bottom:0}
.alert b,.alert strong{font-weight:600}
.alert-warning{--bs-alert-bg:var(--warn-suave);--bs-alert-border-color:var(--warn);--bs-alert-color:var(--ink)}
.alert-danger{--bs-alert-bg:var(--crit-suave);--bs-alert-border-color:var(--crit);--bs-alert-color:var(--ink)}
.alert-success{--bs-alert-bg:var(--ok-suave);--bs-alert-border-color:var(--ok);--bs-alert-color:var(--ink)}
/* AVISO DE RETORNO de um POST (`?ok=`, classe .flash): desce com fade, uma
   barra fina de tempo corre embaixo e, dentro da casca, o JS recolhe o aviso
   (altura via grid-template-rows 1fr→0fr — o único jeito de animar "auto")
   quando a barra acaba. Erros não têm barra nem somem: precisam ser lidos. */
.flash-wrap{display:grid;grid-template-rows:1fr;
 transition:grid-template-rows var(--dur-media) var(--curva-entrada),opacity var(--dur-media) var(--curva-entrada)}
.flash-wrap>.alert{min-height:0;overflow:hidden}
.flash-wrap.sumindo{grid-template-rows:0fr;opacity:0}
@keyframes flash-entrar{from{opacity:0;transform:translateY(-8px)}}
.alert.flash{position:relative;animation:flash-entrar var(--dur-lenta) var(--curva-saida) backwards}
@keyframes tempo{to{transform:scaleX(0)}}
.content-col .alert.flash::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
 background:var(--bs-alert-border-color);opacity:.6;transform-origin:left;animation:tempo 6s linear forwards}

/* --------------------------------- tabelas -------------------------------- */
/* densas: cabeçalho pequeno em caixa alta, linhas de ~40px, números à direita */
.table{--bs-table-bg:transparent;--bs-table-color:var(--ink);
 --bs-table-hover-bg:var(--nav-on);--bs-table-hover-color:var(--ink);
 --bs-table-border-color:var(--line);font-size:13px;color:var(--ink);font-variant-numeric:tabular-nums;margin-bottom:0}
.table>:not(caption)>*>*{padding:8px 10px;color:inherit;
 transition:background-color var(--dur-rapida),box-shadow var(--dur-rapida)}
.table thead th{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);
 font-weight:500;border-bottom:1px solid var(--line);padding:7px 10px;white-space:nowrap;vertical-align:bottom}
.table tbody tr:last-child>*{border-bottom:0}
td.n,th.n{text-align:right}
.table .principal{font-weight:500}
.table .principal a{color:var(--ink);text-decoration:none}
.table .principal a:hover{color:var(--brand-2);text-decoration:underline}
.td-sub,.table .small{font-size:12px;color:var(--faint);font-weight:400}
/* linha clicável: cursor, hover e um chevron na ponta que avança no hover —
   a afordância de "esta linha abre alguma coisa" (queixa de 12/09) */
.linha-clic{cursor:pointer}
td.chev{width:30px;padding-left:0!important;color:var(--faint)}
td.chev svg{transition:transform var(--dur-rapida),color var(--dur-rapida);display:block;margin-left:auto}
.linha-clic:hover td.chev svg{transform:translateX(3px);color:var(--brand-2)}
.linha-clic:hover .cel-obra .nome{color:var(--brand-2)}
.tabela-rolavel{overflow-x:auto}
.tabela-rolavel table{min-width:100%}
/* a caixa da tabela: superfície branca com cabeçalho (título · contagem · ações) */
.tabela-box{background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:var(--sombra)}
.tabela-head{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.tabela-head .t{font-size:14px;font-weight:600;color:var(--ink)}
.tabela-head .n{font-size:12.5px;color:var(--faint);font-weight:400}
.tabela-head .dir{margin-left:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.tabela-head .sub{font-size:12px;color:var(--faint);width:100%;margin-top:-4px}
.tabela-box .vazio{padding:32px 20px}
.tabela-box>.table,.tabela-box .tabela-rolavel>.table{border-bottom-left-radius:8px;border-bottom-right-radius:8px}
/* célula "obra": avatar de iniciais + nome + linha de apoio */
.cel-obra{display:flex;align-items:center;gap:10px;min-width:0}
.cel-obra .txt{min-width:0}
.cel-obra .nome{font-weight:500;color:var(--ink);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.cel-obra .nome:hover{color:var(--brand-2);text-decoration:underline}
/* barra fina de progresso na linha */
.barra{display:inline-flex;align-items:center;gap:8px;justify-content:flex-end}
.barra .trilho{width:64px;height:4px;border-radius:2px;background:var(--panel-2);position:relative;overflow:hidden;flex:none}
.barra .fill{position:absolute;inset:0 auto 0 0;border-radius:2px;background:var(--brand)}
/* barras preenchendo ao entrar (scaleX a partir da esquerda: não mexe no layout) */
@keyframes encher{from{transform:scaleX(0)}}
.barra .fill,.ind-fill{transform-origin:left;animation:encher var(--dur-lenta) var(--curva-saida) 160ms backwards}
.barra .fill.custo{background:var(--cost)}
.barra .v{min-width:44px;text-align:right}

/* ----------------------------------- KPIs --------------------------------- */
/* faixa de indicadores: um bloco só, dividido por linhas; número + variação */
.kpis{display:flex;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:var(--sombra)}
.kpi-item{flex:1 1 150px;padding:11px 16px 10px;border-right:1px solid var(--line);min-width:0;
 animation:entrar var(--dur-lenta) var(--curva-saida) backwards}
.kpi-item:nth-child(2){animation-delay:40ms}.kpi-item:nth-child(3){animation-delay:80ms}
.kpi-item:nth-child(4){animation-delay:120ms}.kpi-item:nth-child(5){animation-delay:160ms}
.kpi-item:nth-child(n+6){animation-delay:200ms}
.kpi-item:last-child{border-right:0}
.kpi-item .lab{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi-item .val{font-size:22px;font-weight:600;letter-spacing:-.015em;line-height:1.2;color:var(--ink);margin-top:1px;white-space:nowrap}
.kpi-item .val small{font-size:13px;font-weight:500;color:var(--faint);margin-left:2px}
.delta{font-size:12px;color:var(--faint);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.delta.bom{color:var(--ok)}.delta.ruim{color:var(--crit)}
.v-crit{color:var(--crit)!important}.v-warn{color:var(--warn)!important}
.v-ok{color:var(--ok)!important}.v-brand{color:var(--brand-2)!important}

/* os "badge text-bg-*" do Bootstrap (usados pela importação livre) lêem o tema
   em vez das cores literais do Bootstrap — mesma família dos chips de estado */
.badge{font-weight:500;border-radius:6px;padding:3px 8px;font-size:11.5px}
.badge.text-bg-primary{background:var(--brand-solido)!important;color:var(--sobre-solido)!important}
.badge.text-bg-success{background:var(--ok-suave)!important;color:var(--ok-texto)!important}
.badge.text-bg-danger{background:var(--crit-suave)!important;color:var(--crit-texto)!important}
.badge.text-bg-warning{background:var(--warn-suave)!important;color:var(--warn-texto)!important}
.badge.text-bg-secondary,.badge.text-bg-light{background:var(--panel-2)!important;color:var(--muted)!important}
.table-sm>:not(caption)>*>*{padding:5px 8px}

/* ----------------------------- estados / chips ---------------------------- */
/* status = pontinho + texto, sem caixa (é o que as referências fazem) */
.estado{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;
 white-space:nowrap;text-transform:none;letter-spacing:0;line-height:1.3}
.estado::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
/* só o ponto do CRÍTICO pulsa: um anel que se abre e some a cada 2 s */
@keyframes pulso{0%{box-shadow:0 0 0 0 var(--crit)}70%,100%{box-shadow:0 0 0 6px transparent}}
.estado.b-crit::before{animation:pulso 2s var(--curva-saida) infinite}
.b-crit{color:var(--crit)}
.b-warn{color:var(--warn)}
.b-ok{color:var(--ok)}
.b-novo{color:var(--muted)}
.estado .sub{font-weight:400;color:var(--faint);font-size:11.5px}

/* ------------------------- análise / faixa / memória ----------------------- */
.dcols{display:grid;grid-template-columns:1.5fr 1fr;gap:16px;align-items:start}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:8px}
.legend i{width:14px;height:2px;display:inline-block;vertical-align:middle;margin-right:6px}
.band{background:var(--ground);border:1px solid var(--line);border-radius:6px;padding:12px 14px;margin-bottom:12px}
.bandval{font-size:24px;font-weight:500;letter-spacing:-.01em;line-height:1.1}
.bandsub{font-size:12.5px;color:var(--muted);margin-top:5px;line-height:1.5}
.src{font-size:12px;color:var(--faint);margin-top:10px;line-height:1.5}
.fact{display:flex;justify-content:space-between;gap:12px;padding:6px 0;
 border-bottom:1px solid var(--line);font-size:13px}
.fact:last-child{border-bottom:none}.fact .k{color:var(--muted)}
.fact .v{font-weight:500;text-align:right}

/* a FAIXA: piso · mais provável · teto, sempre nesta ordem — compacta */
.faixa{background:var(--ground);border:1px solid var(--line);border-radius:6px;padding:12px 14px;margin-bottom:12px}
.faixa-lab{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-bottom:6px}
.faixa-grid{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:14px;font-variant-numeric:tabular-nums}
.faixa-grid .k{font-size:11px;color:var(--faint)}
.faixa-piso .v,.faixa-teto .v{font-size:17px;color:var(--muted)}
.faixa-teto{text-align:right}
.faixa-mid{text-align:center}
.faixa-mid .v{font-size:26px;line-height:1.05;font-weight:600}
.faixa-mid .sub{font-size:12px;color:var(--muted);margin-top:2px}
.faixa-bar{position:relative;height:5px;border-radius:3px;background:var(--panel-2);margin:10px 0 7px}
.faixa-span{position:absolute;top:0;bottom:0;border-radius:3px;opacity:.3}
.faixa-mark{position:absolute;top:-3px;width:2px;height:11px}
.faixa-base{font-size:12px;color:var(--faint);line-height:1.5}
/* sem faixa: caixa tracejada, honesta */
.faixa-vazia{border:1px dashed var(--line);border-radius:6px;padding:12px 14px;margin-bottom:12px;color:var(--muted);font-size:12.5px;line-height:1.5}
.faixa-vazia .t{font-size:14px;font-weight:600;color:var(--ink);margin-bottom:3px}
.faixa-vazia .faixa-lab{margin-bottom:5px}

/* ------------------------------ estado vazio ------------------------------ */
.vazio{text-align:center;padding:44px 20px;color:var(--muted)}
.vazio .ic{font-size:26px;margin-bottom:10px;color:var(--brand)}
.vazio h3{font-weight:600;font-size:17px;letter-spacing:-.01em;color:var(--ink);margin-bottom:6px}
.vazio p{margin:0 0 16px;font-size:13px}

/* ------------------------ financeiro: lançamentos -------------------------- */
.fin-tots{display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:flex-end;
 border-top:1px solid var(--line);padding:12px 14px}
.fin-t .lab{font-size:11.5px;color:var(--faint)}
.fin-t .val{font-size:14px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.fin-saldo td{background:var(--ground)!important}

/* ------------------------- indicadores (dashboard) ------------------------- */
.ind-row{display:grid;grid-template-columns:150px 1fr 74px;gap:11px;align-items:center;margin-bottom:8px}
.ind-lab{font-size:12.5px;color:var(--muted);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ind-lab a{color:var(--brand-2);text-decoration:none}
.ind-track{height:5px;background:var(--panel-2);border-radius:3px;position:relative;overflow:hidden}
.ind-fill{position:absolute;inset:0 auto 0 0;border-radius:3px}
.ind-val{font-size:12px;color:var(--ink);font-variant-numeric:tabular-nums}

/* -------------------- relatórios: analítico (modo livre) ------------------- */
.col-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:6px 14px}
.col-chk{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink);cursor:pointer;user-select:none}
.col-chk input{accent-color:var(--brand)}

/* ---------------------- conciliação bancária (OFX) ------------------------- */
.ofx-linha{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;
 border-bottom:1px solid var(--line);padding:10px 14px}
.ofx-linha:last-child{border-bottom:0}
.ofx-linha:hover{background:var(--nav-on)}
.ofx-info{min-width:240px;flex:1}
.ofx-acoes{display:flex;gap:6px;align-items:center;flex-wrap:wrap}

/* ---------------------- orçamentos: cards de entrada ----------------------- */
.entrada-card{transition:border-color var(--dur-rapida),box-shadow var(--dur-rapida);border-radius:8px}
.entrada-card:hover{border-color:var(--brand);box-shadow:var(--sombra-alta)}
.ic-quad{width:36px;height:36px;flex:none;border-radius:6px;background:var(--brand-suave);
 display:grid;place-items:center;font-size:16px;color:var(--brand-2)}

/* --------------------------- tarefas (kanban) ------------------------------ */
.kb-board{display:flex;gap:14px;align-items:flex-start;overflow-x:auto;padding-bottom:10px}
.kb-col{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:12px;width:272px;flex:none;box-shadow:var(--sombra)}
.kb-col.kb-over{outline:2px dashed var(--brand);outline-offset:2px}
.kb-col.kb-nova{background:transparent;border-style:dashed;box-shadow:none}
.kb-head{display:flex;align-items:center;justify-content:space-between;gap:8px;font-weight:600;font-size:13.5px;color:var(--ink);padding:2px 2px 10px}
.kb-n{display:inline-block;background:var(--panel-2);color:var(--muted);border-radius:6px;font-size:11px;padding:1px 7px;margin-left:7px;vertical-align:1px;font-variant-numeric:tabular-nums}
.kb-add summary{list-style:none;cursor:pointer;color:var(--muted);font-size:12.5px;border:1px dashed var(--line);border-radius:6px;padding:7px 10px;user-select:none}
.kb-add summary::-webkit-details-marker{display:none}
.kb-add summary:hover{background:var(--nav-on);color:var(--brand-2);border-color:var(--brand)}
.kb-lista{display:flex;flex-direction:column;gap:8px;margin-top:10px;min-height:34px}
.kb-card{background:var(--ground);border:1px solid var(--line);border-radius:6px;padding:10px 12px;cursor:grab}
.kb-card:hover{box-shadow:var(--sombra-alta)}
.kb-card:active{cursor:grabbing}
.kb-titulo{font-size:13px;color:var(--ink);line-height:1.4;overflow-wrap:anywhere}
.kb-acoes{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px}
.kb-mover{border:none;background:transparent;color:var(--faint);font-size:11.5px;cursor:pointer;padding:0;max-width:120px}
.kb-mover:hover{color:var(--brand-2)}
.kb-x{border:none;background:transparent;color:var(--faint);cursor:pointer;font-size:12px;line-height:1;padding:3px 5px;border-radius:6px}
.kb-x:hover{color:var(--crit);background:var(--crit-suave)}
.kb-vazio{text-align:center;color:var(--faint);font-size:12px;padding:16px 6px}

/* =============================== GRÁFICOS ================================
   Eixo Y em HTML (fora do SVG, para não esticar), SVG sem proporção fixa e
   `vector-effect` para a linha manter a espessura. Área preenchida no que
   foi executado, tracejado na projeção, linha vertical na última medição
   (o "hoje" do dado) — como no gráfico de referência.
   ========================================================================= */
.graf{position:relative;margin-top:8px;padding:0 0 18px 36px}
.graf-y{position:absolute;left:0;top:0;bottom:18px;width:30px;font-size:10.5px;color:var(--faint);
 font-variant-numeric:tabular-nums;text-align:right}
.graf-y span{position:absolute;right:0;transform:translateY(-50%)}
.graf svg{display:block;width:100%;height:240px;overflow:hidden}  /* fora do viewBox não pinta por cima da página (13/09) */
.graf-carteira svg{height:220px}
.graf-x{position:absolute;left:36px;right:0;bottom:0;height:16px;font-size:10.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.graf-x span{position:absolute;white-space:nowrap}
.graf-x .hoje{color:var(--ink);font-weight:600}
.graf-tag{position:absolute;font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1.2}
/* A ÁREA DE DESENHO (14/09): o SVG e tudo o que se posiciona sobre ele em %
   — rótulos, bolinhas, linha-guia e cartão — ficam numa caixa do tamanho
   exato do SVG. Antes o ponto da última medição usava o .graf inteiro (SVG +
   a faixa do eixo do tempo embaixo) como 100% da altura e caía até 14px
   abaixo da linha. */
.graf-plot{position:relative}
.graf-plot:focus-visible{outline-offset:4px;border-radius:2px}
/* AS LINHAS: espessura por token (14/09, "um pouco mais fina"). A física é a
   principal; o custo e a projeção do custo, secundários. */
.graf-linha,.graf-proj path{stroke-width:var(--graf-traco)}
.graf-linha.custo,.graf-proj path.custo{stroke-width:var(--graf-traco-sec)}
.graf-gap{opacity:var(--graf-gap)}
/* as linhas se DESENHAM da esquerda para a direita (pathLength="1" no <path>
   deixa o traço valer 1 unidade, qualquer que seja o comprimento; o
   dashoffset vai de 1 a 0). A área, a projeção, as bolinhas e os rótulos
   aparecem depois. O estado "escondido" vive só dentro dos keyframes: sem
   animação (navegador antigo, menos movimento) a linha está lá desde o
   início. */
@keyframes desenhar{from{stroke-dasharray:1;stroke-dashoffset:1}to{stroke-dasharray:1;stroke-dashoffset:0}}
@keyframes surgir{from{opacity:0}}
.graf-linha{animation:desenhar var(--dur-lenta) var(--curva-saida) 80ms backwards}
.graf-area,.graf-proj,.graf-tag{animation:surgir var(--dur-media) var(--curva-saida) 400ms backwards}
/* AS BOLINHAS (14/09): uma em cada ponto medido, na cor da linha, com um anel
   da cor do card que as separa da linha e da área. Entram DEPOIS de a linha
   terminar de se desenhar (80 ms + --dur-lenta = 440 ms). Não capturam o
   ponteiro: quem responde é a área de desenho (o cartão do mês).
   A PONTA DA PROJEÇÃO (14/09, tarde — "na ponta do gráfico não dá pra ver
   porque fica em cima da linha"): os rótulos "custo 113% em ago/28" saíram.
   No fim de cada reta tracejada — na borda, quando a janela corta, ou no
   término, quando cabe — fica uma bolinha APAGADA, vazada e tracejada, que
   acende quando é lida (mouse, toque ou a última parada das setas) e abre o
   cartão "Projeção (mais provável)". Projeção nunca se parece com medição. */
@keyframes pt-entrar{from{opacity:0;transform:scale(.3)}}
.graf-pt{position:absolute;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--pt);
 box-shadow:0 0 0 1.5px var(--panel);pointer-events:none;
 transition:transform var(--dur-rapida) var(--curva-saida),opacity var(--dur-rapida);
 animation:pt-entrar var(--dur-media) var(--curva-saida) 460ms backwards}
.graf-pt.fis{--pt:var(--brand)}
.graf-pt.custo{--pt:var(--cost)}
.graf-pt.crit{--pt:var(--crit)}
/* (2px de borda: com 1,5px o Chrome arredonda para 1px e o tracejado some num círculo de 10px) */
.graf-pt.proj{width:10px;height:10px;margin:-5px 0 0 -5px;background:var(--panel);border:2px dashed var(--pt);
 box-shadow:none;opacity:.55;animation-delay:400ms}
.graf-pt.on{transform:scale(1.5)}
.graf-pt.proj.on{opacity:1}
/* A LINHA DA ÚLTIMA MEDIÇÃO (14/09, tarde): clara e fina, sem texto por cima
   — separa o medido da projeção. O mês dela vai em negrito no eixo
   (.graf-x .hoje) e a legenda do card diz "medido | projeção". */
.graf-hoje{stroke:var(--ink);stroke-width:1px;stroke-opacity:.24}
/* A LINHA-GUIA E O CARTÃO DO MÊS (JS da casca, _grafDica): passar o mouse,
   tocar ou chegar pelo teclado acende a coluna do ponto mais próximo. O
   cartão é escuro nos DOIS temas (o noturno da barra), por isso as amostras
   e o risco lá dentro usam os tokens --barra-* (as cores do gráfico somem
   sobre o noturno). Escondido é display:none — visibility:hidden ainda
   contaria na largura rolável. Só transform e opacity transicionam. */
.graf-guia{position:absolute;left:0;top:0;bottom:0;width:1px;margin-left:-.5px;background:var(--ink);opacity:0;
 pointer-events:none;transition:opacity var(--dur-rapida),transform var(--dur-rapida) var(--curva-saida)}
.graf-guia.on{opacity:.32}
.graf-tip{position:absolute;left:0;top:0;z-index:6;min-width:150px;max-width:260px;padding:8px 11px 7px;border-radius:8px;
 background:var(--sidebar);color:var(--barra-ink);box-shadow:var(--sombra-alta);font-size:12px;line-height:1.45;
 pointer-events:none;transition:transform var(--dur-rapida) var(--curva-saida);
 animation:surgir var(--dur-rapida) var(--curva-saida)}
.graf-tip[hidden]{display:none}
.graf-tip b{display:block;font-weight:600;margin-bottom:3px}
.graf-tip .r{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.graf-tip .l{color:var(--barra-muted);white-space:nowrap}
.graf-tip .v{font-variant-numeric:tabular-nums;font-weight:500;white-space:nowrap}
.graf-tip .v.crit{color:var(--barra-crit)}
.graf-tip .sw{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:7px;vertical-align:1px;
 background:var(--sw,transparent)}
.graf-tip .sw.fis{--sw:var(--barra-acento)}
.graf-tip .sw.custo{--sw:var(--barra-muted)}
.graf-tip .sw.crit{--sw:var(--barra-crit)}
.graf-tip.proj .sw{background:transparent;box-shadow:inset 0 0 0 1.5px var(--sw,transparent)}
/* no cartão, a NOTA da ponta ("o término fica além da janela do gráfico") e a
   LISTA DO MÊS (14/09, tarde): momentos-chave (anel) e ocorrências (losango),
   em português do dia a dia. Sobre o noturno do cartão as cores do gráfico
   somem: o anel usa --barra-crit (risco) ou --barra-ink, e o losango leva a
   cor da causa com um contorno claro. Anel da projeção: tracejado. */
.graf-tip .nt{display:block;margin-top:3px;color:var(--barra-muted);font-size:11.5px;line-height:1.4}
.graf-tip .evs{display:block;margin-top:6px;padding-top:6px;border-top:1px solid var(--barra-linha)}
.graf-tip b+.evs{margin-top:0;padding-top:0;border-top:0}
.graf-tip .ev{display:flex;align-items:flex-start;gap:7px;line-height:1.4}
.graf-tip .ev+.ev{margin-top:5px}
.graf-tip .ev i{flex:none;width:9px;height:9px;margin-top:4px;border-radius:50%;border:2px solid var(--barra-ink)}
.graf-tip .ev.crit i{border-color:var(--barra-crit)}
.graf-tip .ev.proj i{border-style:dashed}
.graf-tip .ev.oc i{width:7px;height:7px;margin:5px 1px 0;border:0;border-radius:1px;transform:rotate(45deg);
 background:var(--c,var(--barra-ink));box-shadow:0 0 0 1.5px var(--barra-ink)}
.graf-tip .ev em{display:block;font-style:normal;font-size:11.5px;color:var(--barra-muted)}
.graf-nota{font-size:12px;color:var(--faint);margin-top:8px;line-height:1.5}
.legend-inline{display:flex;gap:14px;font-size:12px;color:var(--muted);flex-wrap:wrap}
.legend-inline span{display:inline-flex;align-items:center;gap:6px}
.legend-inline i{width:14px;height:2px;display:inline-block}
.legend-inline i.area{height:8px;opacity:var(--graf-area-topo)}
/* linha com bolinha: "cada ponto é uma medição" já na legenda */
.legend-inline i.pt{position:relative}
.legend-inline i.pt::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;
 border-radius:50%;background:inherit}
.legend-inline i.tracejado{height:0;border-top:2px dashed currentColor;background:none}
.legend-inline i.vertical{width:2px;height:12px}
/* "medido | projeção" (14/09, tarde): a linha clara da última medição entre
   as duas palavras e, depois dela, o tracejado com a bolinha apagada na ponta */
.legend-inline .divisa{gap:5px}
.legend-inline .divisa i.vertical{width:1px;background:var(--ink);opacity:.4}
.legend-inline i.tracejado.ponta{position:relative;width:16px;margin-right:7px}
.legend-inline i.tracejado.ponta::after{content:"";position:absolute;right:-7px;top:-5px;width:8px;height:8px;
 border-radius:50%;border:2px dashed currentColor;background:var(--panel);opacity:.6}
/* anel = momento-chave; losango = ocorrência (as mesmas formas da base do gráfico) */
.legend-inline i.mk{width:9px;height:9px;border-radius:50%;border:2px solid currentColor}
.legend-inline i.oc{width:9px;height:9px;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
/* MOMENTOS-CHAVE E OCORRÊNCIAS NA BASE DO GRÁFICO DA FICHA (14/09, tarde —
   pedido do Samuel: "tira esse sinal de custo escrito do gráfico" e "tem
   outras barras que não sei qual utilidade"). Saíram de dentro do gráfico as
   linhas verticais, as faixas e todos os rótulos. Cada momento-chave é um
   ANEL pequeno (tracejado na previsão de estouro, que é projeção) e cada
   ocorrência um LOSANGO, na faixa de 12px entre o gráfico e o eixo do tempo
   (por isso a ficha tem 30px embaixo), na coluna do mês a que pertencem —
   dois no mesmo mês ficam lado a lado (--o é a posição na fila; o passo
   encolhe no celular). A caixa de 16px é a área de toque; o desenho é o <i>
   de dentro. Sem texto e sem title: o mouse, o toque e o teclado abrem o
   CARTÃO DO MÊS, que diz o que cada um é. Entram depois das bolinhas. */
.graf-ficha{padding-bottom:30px}
.graf-ficha .graf-y{bottom:30px}
.graf-ev{--ev-passo:10px;position:absolute;top:100%;width:16px;height:16px;
 margin:-2px 0 0 calc(-8px + var(--o,0) * var(--ev-passo));display:grid;place-items:center;cursor:default;
 animation:surgir var(--dur-media) var(--curva-saida) 700ms backwards}
.graf-ev i{display:block;width:8px;height:8px;border-radius:50%;border:2px solid var(--c);background:var(--panel);
 transition:transform var(--dur-rapida) var(--curva-saida)}
.graf-ev.proj i{width:10px;height:10px;border-style:dashed}
.graf-ev.oc i{width:9px;height:9px;border:0;border-radius:0;background:var(--c);
 clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.graf-ev.on i{transform:scale(1.35)}
.graf-fora{font-size:11.5px;color:var(--faint);margin-top:4px;line-height:1.4}
/* o card do gráfico: cabeçalho com título, legenda e os números do momento */
.graf-card .card-h{align-items:flex-start}
.graf-nums{display:flex;gap:18px;flex-wrap:wrap;font-variant-numeric:tabular-nums}
.graf-nums .k{font-size:11px;color:var(--faint);display:block}
.graf-nums .v{font-size:15px;font-weight:600;color:var(--ink)}

/* ============================== RADAR DE RISCO ============================
   KPIs · gráfico da carteira · tabela densa das obras · painel deslizante
   ========================================================================= */
.radar-grid{display:grid;grid-template-columns:1fr;gap:16px}
.tabela-obras .estado{font-size:12.5px}
.tabela-obras td{vertical-align:middle;white-space:nowrap}
.tabela-obras td.principal{min-width:220px;max-width:320px}
.cel-obra .td-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tabela-obras .faixa-cel{white-space:nowrap}
.tabela-obras .faixa-cel .mp{font-weight:600}
.tabela-obras .faixa-cel .pt{color:var(--faint);font-size:12px}
.tabela-obras tr.oculta{display:none}
.tabela-obras tr.on>*{background:var(--brand-suave)!important}
.tabela-obras tr:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
/* botões de linha ("editar", "excluir"): discretos, sem competir com a ação principal da tela */
.table .btn-sm{--bs-btn-padding-y:.18rem;--bs-btn-padding-x:.5rem;--bs-btn-font-size:12px}
.aviso-fisica{display:inline-flex;align-items:center;gap:4px;color:var(--warn);font-size:11.5px}

/* o painel que desliza da direita com o resumo da obra (sem sair da lista).
   Entra com o véu escurecendo em fade e sai do mesmo jeito: a visibilidade
   só vira "hidden" DEPOIS do deslize (transition-delay), senão o painel
   sumiria antes de terminar de sair. */
.painel-veu{position:fixed;inset:0;background:var(--veu);z-index:900;opacity:0;visibility:hidden;
 transition:opacity var(--dur-media) var(--curva-entrada),visibility 0s linear var(--dur-media)}
.painel{position:fixed;top:0;right:0;bottom:0;width:460px;max-width:100vw;background:var(--panel);color:var(--ink);
 border-left:1px solid var(--line);box-shadow:var(--sombra-alta);z-index:901;transform:translateX(102%);
 transition:transform var(--dur-media) var(--curva-entrada),visibility 0s linear var(--dur-media);
 display:flex;flex-direction:column;overflow:auto;visibility:hidden}
body.painel-aberto .painel{transform:none;visibility:visible;
 transition:transform var(--dur-media) var(--curva-saida),visibility 0s}
body.painel-aberto .painel-veu{opacity:1;visibility:visible;
 transition:opacity var(--dur-media) var(--curva-saida),visibility 0s}
/* o conteúdo do painel entra em cascata a cada obra aberta */
.painel-body>*{animation:entrar var(--dur-media) var(--curva-saida) backwards}
.painel-body>:nth-child(2){animation-delay:30ms}.painel-body>:nth-child(3){animation-delay:60ms}
.painel-body>:nth-child(4){animation-delay:90ms}.painel-body>:nth-child(5){animation-delay:120ms}
.painel-body>:nth-child(n+6){animation-delay:150ms}
.painel-head{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--line);
 position:sticky;top:0;background:var(--panel);z-index:1}
.painel-head .pos{font-size:12.5px;color:var(--faint);margin-left:4px}
.painel-head .fechar{margin-left:auto}
.painel-head .tb-btn{color:var(--muted)}
.painel-head .tb-btn:hover{background:var(--nav-on);color:var(--ink)}
.painel-body{padding:16px}
.painel-nome{font-size:17px;font-weight:600;line-height:1.25}
.painel-meta{font-size:12.5px;color:var(--faint);margin-top:2px}
.painel-acoes{display:flex;gap:6px;margin:12px 0 14px;flex-wrap:wrap}
.painel .kpis{margin-bottom:14px}
.painel .kpi-item{flex:1 1 30%;padding:9px 12px}
.painel .kpi-item .val{font-size:18px}
.painel .sec{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin:14px 0 6px}
.painel .sec:first-child{margin-top:0}
.painel .proxima{background:var(--ground);border:1px solid var(--line);border-radius:6px;padding:10px 12px;font-size:13px;line-height:1.5}
.painel .faixa,.painel .faixa-vazia{margin-bottom:0}

/* ============================== FICHA DA OBRA ==============================
   Cabeçalho (nome, estado, dados de contrato, ações) + abas: Resumo ·
   Medições · Orçamento e revisões · Prazo · Desfecho.
   ========================================================================= */
.aviso-gap{display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:6px;
 border:1px solid var(--crit);background:var(--crit-suave);font-size:13px;color:var(--ink);border-left-width:3px}
.aviso-gap.warn{border-color:var(--warn);background:var(--warn-suave)}
.aviso-gap.ok{border-color:var(--ok);background:var(--ok-suave)}
.aviso-gap.novo{border-color:var(--line);background:var(--panel)}
.aviso-gap svg{flex:none}
.aviso-gap b{font-weight:600}
.aviso-gap .det{color:var(--muted)}
.aviso-gap .ajuda{margin-left:auto}
.ficha-grid{display:grid;grid-template-columns:1fr 360px;gap:16px;align-items:start}
.ficha-grid.inv{grid-template-columns:360px 1fr}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.pilha{display:flex;flex-direction:column;gap:16px}
.ficha-meta{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:12.5px;color:var(--faint);margin-top:4px}
.ficha-meta b{color:var(--ink);font-weight:500}
.lanc{display:flex;flex-direction:column;gap:12px}
.lanc .campo{display:flex;flex-direction:column;gap:4px}
.lanc .form-label{display:flex;align-items:center;gap:2px;font-size:12px;color:var(--muted);margin:0;white-space:normal;min-height:0}
.lanc .form-control,.lanc .form-select{font-size:14px;min-height:38px}
.mem-row{display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:baseline;padding:6px 0;
 border-top:1px solid var(--line);font-size:13px}
.mem-row .n{color:var(--faint);font-variant-numeric:tabular-nums}
.mem-row .conta{color:var(--faint);font-size:12px;font-variant-numeric:tabular-nums}
.mem-row .r{text-align:right;white-space:nowrap;font-weight:500}
.rev-list{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;font-size:13px;font-variant-numeric:tabular-nums}
.rev-list .q,.rev-list .m{color:var(--faint)}
/* ao voltar de um POST (medição lançada, revisão registrada) a linha nova
   acende na tinta da marca e apaga em 1,5 s — a pessoa vê ONDE entrou o
   que acabou de fazer */
@keyframes destacar{from{background-color:var(--brand-suave)}}
tr.nova>*,.rev-list .nova{animation:destacar 1.5s var(--curva-entrada) 240ms backwards}
.rev-list .nova{border-radius:4px}
details.dobra>summary{list-style:none;cursor:pointer;user-select:none;display:inline-flex;align-items:center;gap:6px}
details.dobra>summary::-webkit-details-marker{display:none}
/* a seta do colapsável é um chevron que gira ao abrir */
details.dobra>summary::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
 transform:rotate(-45deg) translateY(1px);margin-left:2px;transition:transform var(--dur-media) var(--curva-saida)}
details.dobra[open]>summary::after{transform:rotate(45deg) translateY(-2px)}
details.dobra[open]>summary{margin-bottom:10px}
details.dobra.js[open]>summary{margin-bottom:0}
details.dobra.js>.dobra-in>div{padding-top:10px}
.prazo-val{font-size:22px;line-height:1.15;font-weight:600}
.excluir-obra{display:flex;justify-content:flex-end;align-items:center;gap:12px;font-size:12.5px;color:var(--faint)}
.etiqueta{font-size:10px;color:var(--faint);font-family:var(--mono);margin-left:4px}
/* a frase do motor sob o nome (os marcos que existem) e o motivo do silêncio */
.ficha-frase{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.45;max-width:880px}
.ficha-motivo{color:var(--faint);font-size:12px;font-style:italic;white-space:nowrap}
.painel-frase{font-size:13px;color:var(--muted);margin-top:8px;line-height:1.45}
/* anel = momento-chave (14/09, tarde): a mesma forma da base do gráfico, no painel do Radar */
.pm-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:-1px;
 border:2px solid currentColor}
.oc-dot{display:inline-block;width:9px;height:9px;margin-right:6px;vertical-align:-1px;
 clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.tabela-box td.oc-desc{white-space:normal;max-width:380px;line-height:1.4}
/* LINHA DO TEMPO (aba Resumo): momentos-chave e ocorrências em ordem de data
   — data à esquerda, a forma do gráfico sobre um fio vertical (anel na cor do
   momento, tracejado na projeção; losango na cor da causa da ocorrência),
   rótulo e detalhe. */
.tl{list-style:none;margin:8px 0 0;padding:0;position:relative}
.tl::before{content:"";position:absolute;left:96px;top:8px;bottom:8px;width:1px;background:var(--line)}
.tl-item{display:grid;grid-template-columns:84px 24px 1fr;align-items:start;padding:6px 0;font-size:13px}
.tl-data{color:var(--faint);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap;padding-top:1px}
.tl-dot{width:9px;height:9px;border-radius:50%;margin:4px auto 0;position:relative;z-index:1;box-shadow:0 0 0 2px var(--panel)}
.tl-dot.mk{background:var(--panel);border:2px solid currentColor}
/* (2px: com 1,5px o Chrome arredonda a borda para 1px e o tracejado some) */
.tl-item.proj .tl-dot{background:var(--panel)!important;border:2px dashed var(--crit)}
.tl-item.oc .tl-dot{border-radius:0;box-shadow:none;width:10px;height:10px;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.tl-rot{font-weight:500;color:var(--ink)}
.tl-val{font-weight:600;font-variant-numeric:tabular-nums}
.tl-tag{display:inline-block;font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);
 border:1px solid var(--line);border-radius:3px;padding:0 5px;margin-left:6px;vertical-align:1px;line-height:15px}
.tl-tag.proj{color:var(--crit);border-color:var(--crit);border-style:dashed}
.tl-det{color:var(--muted);font-size:12.5px;line-height:1.45;margin-top:1px}
.tl-pe{font-size:12px;color:var(--faint);margin-top:8px}
.tl-vazio{font-size:13px;color:var(--muted);margin-top:8px;line-height:1.5}

/* ------------------------------- responsivo -------------------------------- */
@media(max-width:991.98px){
 .top{padding:0 10px 0 12px;gap:8px;position:sticky}
 .nav-burger{display:grid}
 .marca .by{display:none}
 /* a navegação vira um menu vertical que desce da barra — sem rolagem lateral */
 .nav-main{display:none;position:absolute;top:100%;left:0;right:0;background:var(--sidebar);flex-direction:column;
  padding:6px 8px 10px;border-top:1px solid var(--barra-linha);box-shadow:var(--sombra-alta);z-index:55}
 .top.aberto .nav-main{display:flex;animation:menu-abrir var(--dur-media) var(--curva-saida)}
 .nav-main .ind{display:none}   /* no menu vertical o ativo é o fundo, não o traço */
 .nav-item{min-height:42px;border:0;border-radius:6px;padding:0 12px;font-size:14px}
 .nav-item.on{background:var(--barra-on);box-shadow:inset var(--sel-traco) 0 0 var(--selecao)}  /* menu vertical: fundo + traço vermelho à esquerda */
 .abas-secao{display:none}
 .menu-conta .txt,.chip-empresa .txt{display:none}
 details.menu-conta>summary,.chip-empresa{padding:4px}
 .abas-in{padding:0 12px}
 .abas{gap:0 14px}
 .content-col{padding:14px 12px 28px;gap:14px}
 .pg-head{align-items:flex-start}
 .pg-head h1{font-size:18px}
 .ficha-grid,.ficha-grid.inv,.g2,.radar-grid{grid-template-columns:1fr}
 .dcols{grid-template-columns:1fr}
 .graf svg{height:200px}
 .kpi-item{flex:1 1 45%}
 .kpi-item:nth-child(2n){border-right:0}
 .kpi-item{border-bottom:1px solid var(--line)}
 .kpi-item:nth-last-child(-n+2){border-bottom:0}
 .form-control,.form-select{font-size:16px;min-height:44px}  /* iOS não dá zoom no foco */
 .filtro .form-select,.filtro .form-control{font-size:14px;min-height:34px}
}
/* tabelas viram cartões empilhados no celular — zero arrasto lateral */
@media(max-width:700px){
 .table thead{display:none}
 .table,.table tbody,.table tr,.table td{display:block;width:100%;border:0}
 .table tr{border-bottom:1px solid var(--line);padding:6px 14px}
 .table tr:last-child{border-bottom:0}
 .table td{display:flex;justify-content:space-between;align-items:baseline;gap:14px;text-align:right;
  border-bottom:1px dashed var(--line);padding:7px 0;background:transparent!important;box-shadow:none!important}
 .table td:last-child{border-bottom:none}
 .table td::before{content:attr(data-l);color:var(--faint);font-size:11px;letter-spacing:.05em;
  text-transform:uppercase;text-align:left;flex:none}
 .table td.principal{display:block;text-align:left}
 .table td.principal::before{display:none}
 .table td.chev{display:none}
 .table.mem td{display:block;text-align:left;padding:4px 0}
 .table.mem td:first-child{padding-top:9px}
 .table.mem td:last-child{padding-bottom:11px}
 .barra{justify-content:flex-end}
 .fin-tots{justify-content:flex-start}
 .ind-row{grid-template-columns:96px 1fr 66px}
 .faixa-mid .v{font-size:24px}
 .faixa-piso .v,.faixa-teto .v{font-size:15px}
 .painel{width:100%;border-left:0}
 .kpi-item{flex:1 1 45%}
 /* gráfico estreito (~290px): as marquinhas do mesmo mês ficam mais juntas
    (o cartão do mês continua abrindo no toque) */
 .graf-ev{--ev-passo:7px}
 /* o cartão do mês mais compacto: aqui o gráfico tem ~290px de largura */
 .graf-tip{min-width:0;max-width:210px;font-size:11.5px;padding:7px 9px 6px}
 .graf-tip .r{gap:10px}
 .tl::before{left:80px}
 .tl-item{grid-template-columns:70px 20px 1fr}
 .tl-data{font-size:11.5px}
 .ficha-motivo{white-space:normal}
}

/* ============================ ENTRADA / LOGIN =============================
   "Acesse sua conta" (desenho 02): cartão centrado de 440px. Ao fundo, o
   ícone da Lumiset (o arco da figura, o sol e os raios) em tamanho grande e
   baixa opacidade, com DOIS movimentos lentos: os raios giram em volta do
   sol (um giro a cada 150 s) e o brilho atrás dele respira. Tudo CSS + SVG
   inline: sem GIF, sem canvas, sem WebGL, sem arquivo externo.

   Por que é leve: o que anima é um `rotate` num <svg> inteiro e uma
   `opacity` numa <div> — as duas propriedades que o navegador compõe na GPU
   sem repintar a página. E `prefers-reduced-motion` desliga os dois.

   A cor: `var(--cliente, var(--brand))` etc. Com a cor da empresa definida,
   o fundo inteiro assume a cor dela; sem ela, as cores do ícone (sol na
   marca, arco em verde, raios em vermelho — as mesmas --brand/--ok/--crit).
   ========================================================================= */
.entrada-wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:20px;padding:96px 18px 64px;position:relative;isolation:isolate}
#fundo-sol{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
/* a cena é um quadrado; o ícone (viewBox 150) enche o quadrado, e o sol fica
   em (101,25 ; 65,25)/150 = (67,5% ; 43,5%) dele — é daí que saem as posições
   do brilho e dos raios, que precisam ficar centrados no sol */
.fs-cena{position:absolute;top:50%;left:50%;width:min(92vh,820px);height:min(92vh,820px);
  transform:translate(calc(-50% + 9vw),-50%)}
/* o fundo é a versão AMBIENTE do ícone: um tom só (marca ou cliente), o sol
   mais presente que o arco e os raios — as três cores da identidade ficam
   para o ícone pequeno da marca, no topo */
.fs-icone{position:absolute;inset:0;width:100%;height:100%}
.fs-icone .fs-arco{opacity:.22}
.fs-icone .fs-sol{opacity:.4}
.fs-brilho{position:absolute;left:67.5%;top:43.5%;width:150%;height:150%;margin:-75% 0 0 -75%;
  border-radius:50%;--fs-min:.08;--fs-max:.2;
  background:radial-gradient(circle closest-side,var(--cliente,var(--brand)),transparent);
  animation:fs-respirar 9s ease-in-out infinite alternate}
/* os raios são um <svg> à parte (viewBox de 100 = 2/3 do ícone), centrado no
   sol: 67,5% − 33,3% e 43,5% − 33,3% */
.fs-raios{position:absolute;left:34.167%;top:10.167%;width:66.667%;height:66.667%;opacity:.24;
  animation:fs-girar 150s linear infinite}
@keyframes fs-girar{to{transform:rotate(360deg)}}
@keyframes fs-respirar{from{opacity:var(--fs-min)}to{opacity:var(--fs-max)}}
[data-tema="escuro"] .fs-icone .fs-arco{opacity:.3}
[data-tema="escuro"] .fs-icone .fs-sol{opacity:.55}
[data-tema="escuro"] .fs-raios{opacity:.32}
[data-tema="escuro"] .fs-brilho{--fs-min:.12;--fs-max:.28}
.entrada-topo{position:fixed;left:0;right:0;top:0;padding:24px 40px;display:flex;
  justify-content:space-between;align-items:center;gap:16px}
.entrada-marca{display:flex;align-items:center;gap:10px;text-decoration:none}
.entrada-marca .logo{width:30px;height:30px;display:grid;place-items:center}
.entrada-nome{font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.1;color:var(--ink)}
.entrada-eyebrow{font-size:11px;color:var(--faint)}
.entrada-sigilo{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--faint)}

.entrada-card{width:100%;max-width:440px;border-radius:10px;padding:0;overflow:hidden;
  background:var(--panel);border:1px solid var(--line);box-shadow:var(--sombra-alta);
  animation:entrar var(--dur-lenta) var(--curva-saida) backwards}
/* senha errada: o cartão treme uma vez (o :has() é o "tem um erro dentro") */
.entrada-card:has(.alert-danger){animation:tremer var(--dur-lenta) var(--curva-saida) 80ms}
[data-tema="escuro"] .entrada-card{box-shadow:0 24px 60px rgba(0,0,0,.35)}
.entrada-form{padding:32px 36px 28px;display:flex;flex-direction:column;gap:6px}
.entrada-card h1{font-size:22px;font-weight:600;letter-spacing:-.015em;line-height:1.15;margin:0 0 4px;color:var(--ink)}
.entrada-sub{font-size:13px;color:var(--faint);margin:0 0 18px;line-height:1.5}
.entrada-card .form-label{font-size:12.5px;color:var(--muted);font-weight:500;text-transform:none;
  letter-spacing:0;margin-bottom:5px;white-space:normal}
.entrada-card .form-control{background:var(--ground);border:1px solid var(--line);border-radius:6px;
  min-height:42px;font-size:14.5px;color:var(--ink)}
.entrada-card .form-control:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-suave)}
.btn-entrar{width:100%;min-height:42px;border-radius:6px;cursor:pointer;margin-top:4px;
  background:var(--brand-solido);border:1px solid var(--brand-solido);color:var(--sobre-solido);font-size:14.5px;font-weight:500;
  display:flex;align-items:center;justify-content:center;gap:9px;
  transition:filter var(--dur-rapida),transform var(--dur-rapida),box-shadow var(--dur-rapida)}
.btn-entrar:hover{filter:brightness(1.1);box-shadow:var(--sombra-alta)}
.btn-entrar:active{transform:scale(.97);box-shadow:none}
.btn-entrar:focus-visible{outline:0;box-shadow:0 0 0 3px var(--anel)}
.btn-entrar .seta{font-size:15px;transition:transform var(--dur-rapida)}
.btn-entrar:hover .seta{transform:translateX(3px)}
.entrada-rodape-card{padding:12px 36px;border-top:1px solid var(--line);background:var(--ground);
  font-size:12.5px;color:var(--faint);text-align:center}
.entrada-rodape-card a{color:var(--brand-2);text-decoration:none}
.entrada-divisor{display:flex;align-items:center;gap:14px;margin:18px 0 12px}
.entrada-divisor::before,.entrada-divisor::after{content:"";height:1px;flex:1;background:var(--line)}
.entrada-divisor span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.entrada-nota{font-size:12.5px;color:var(--faint);line-height:1.55;margin:0}
.entrada-comando{font-family:var(--mono);font-size:12px;color:var(--ink);background:var(--ground);
  border:1px solid var(--line);border-radius:6px;padding:10px 12px;margin:14px 0 0;white-space:pre-wrap;word-break:break-all}
/* rodapé: o logo horizontal da Lumiset assina a tela. São dois arquivos —
   branco para o escuro, colorido para o claro — e o CSS mostra um por vez
   (dentro de <img> o SVG não enxerga o tema; por isso não dá para tingir). */
.entrada-rodape{position:fixed;left:40px;bottom:24px;display:flex;gap:20px;align-items:center;
  font-size:12px;color:var(--faint)}
.entrada-rodape a{color:var(--faint);text-decoration:none}
.entrada-rodape img{height:36px;width:auto}
/* (sem `display` na regra acima: ela tem mais especificidade que .so-escuro
   e engoliria o display:none — os dois logos apareciam juntos) */
.so-escuro{display:none}
[data-tema="escuro"] .so-escuro{display:inline-block}
[data-tema="escuro"] .so-claro{display:none}

/* senha com o olho (mostrar/esconder) e o link "Esqueceu a senha?" — desenho Entrar */
.campo-senha{position:relative}
.campo-senha .form-control{padding-right:44px}
.olho{position:absolute;right:4px;top:3px;width:36px;height:36px;border:0;background:transparent;
  color:var(--faint);display:grid;place-items:center;cursor:pointer;border-radius:6px;
  transition:color var(--dur-rapida),transform var(--dur-rapida)}
.olho:hover{color:var(--ink)}
.olho:active{transform:scale(.9)}
.entrada-link{font-size:12.5px;color:var(--brand-2);text-decoration:none;margin-bottom:5px}

@media (max-width:640px){
  .entrada-wrap{padding:80px 14px 40px}
  .entrada-topo{padding:16px 18px}
  .entrada-sigilo{display:none}
  /* no celular o sol espia por cima do cartão, à direita */
  .fs-cena{width:130vw;height:130vw;top:0;left:0;transform:translate(-22%,-32%)}
  .entrada-form{padding:26px 20px 22px}
  .entrada-rodape-card{padding:12px 20px}
  .entrada-card h1{font-size:20px}
  .entrada-rodape{position:static;justify-content:center}
}

/* ==================== PERMISSÕES POR ÁREA (tela de Usuários) ============== */
.linha-areas td{border-bottom:1px solid var(--line)}
.area-abrir{cursor:pointer;padding:9px 14px;font-size:12.5px;color:var(--brand-2);list-style:none;user-select:none}
.area-abrir::-webkit-details-marker{display:none}
.area-abrir:hover{background:var(--nav-on)}
.area-form{padding:6px 14px 18px}
.area-grade{display:grid;gap:8px;margin-top:8px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.area-caixa{display:flex;gap:10px;align-items:flex-start;padding:9px 12px;background:var(--ground);
  border:1px solid var(--line);border-radius:6px;cursor:pointer;font-size:12.5px;line-height:1.35}
.area-caixa:hover{border-color:var(--brand)}
.area-caixa input{margin-top:2px;flex:none;accent-color:var(--brand);width:16px;height:16px}
.area-dica{font-size:12px;color:var(--faint);line-height:1.4}

/* atalho de desenvolvimento na tela de entrada */
.atalho-dev{background:var(--warn-suave);border:1px solid var(--warn);border-radius:6px;padding:12px 14px;margin-bottom:18px}
.rot-dev{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--warn);margin-bottom:8px}

/* ======================= AJUDA CONTEXTUAL (o "i" redondo) =================
   Desktop: bolha ao passar o mouse ou focar. Celular: folha inferior de
   largura cheia (desenho "Ajuda (i) · toque"). Sem JavaScript.
   ========================================================================= */
.ajuda{position:relative;display:inline-flex;align-items:center;vertical-align:middle;margin-left:5px;cursor:help;outline:none}
.ajuda-i{width:14px;height:14px;display:block;color:var(--faint);transition:color var(--dur-rapida)}
.ajuda:hover .ajuda-i,.ajuda:focus .ajuda-i{color:var(--brand-2)}
.ajuda-bolha{display:none;position:absolute;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%);
  width:max-content;max-width:310px;z-index:60;background:var(--panel);color:var(--muted);
  border:1px solid var(--line);border-radius:8px;box-shadow:var(--sombra-alta);
  padding:11px 13px;font-size:12.5px;font-weight:400;line-height:1.5;text-align:left;
  text-transform:none;letter-spacing:0;font-style:normal;white-space:normal;
  opacity:0;visibility:hidden;transition:opacity var(--dur-rapida),visibility 0s linear var(--dur-rapida),transform var(--dur-media) var(--curva-saida);
  transform:translate(-50%,4px)}
.ajuda-bolha b{display:block;margin-bottom:4px;font-size:12.5px;color:var(--ink);font-weight:600}
@keyframes bolha-in{from{opacity:0;transform:translate(-50%,4px)}}
/* escondida = display:none (13/09): com visibility:hidden a bolha ainda contava na
   largura rolável da página e o Radar ganhava rolagem lateral a 1366 px */
.ajuda:hover .ajuda-bolha,.ajuda:focus .ajuda-bolha{display:block;opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:0s;animation:bolha-in var(--dur-rapida) var(--curva-saida)}
.ajuda-bolha::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:6px solid transparent;border-top-color:var(--line)}
.ajuda.ajuda-dir .ajuda-bolha{left:0;transform:translateY(4px)}
.ajuda.ajuda-dir:hover .ajuda-bolha,.ajuda.ajuda-dir:focus .ajuda-bolha{transform:none}
.ajuda.ajuda-dir .ajuda-bolha::after{left:14px}
/* "i" encostado na borda DIREITA (o do gap, no aviso da ficha): a bolha abre
   para a esquerda. Centrada, ela vazava 90px além da tela mesmo invisível
   (visibility:hidden ainda conta no scrollWidth) e a ficha ganhava rolagem
   lateral a 1280px. */
.ajuda.ajuda-esq .ajuda-bolha{left:auto;right:0;transform:translateY(4px)}
.ajuda.ajuda-esq:hover .ajuda-bolha,.ajuda.ajuda-esq:focus .ajuda-bolha{transform:none}
.ajuda.ajuda-esq .ajuda-bolha::after{left:auto;right:6px;transform:none}
@media (max-width:640px){
  .ajuda-bolha{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;max-width:none;transform:translateY(12px);
    border-radius:16px 16px 0 0;padding:20px 20px 32px;font-size:14px;box-shadow:var(--sombra-alta)}
  .ajuda:hover .ajuda-bolha,.ajuda:focus .ajuda-bolha{transform:none}
  .ajuda-bolha b{font-size:18px;margin-bottom:8px}
  .ajuda-bolha::after{display:none}
}

/* ========================= TUTORIAL DE PRIMEIRO USO =======================
   Balões passo a passo (desenho de referência dos sócios): fundo escurecido,
   o alvo da vez ganha um anel na cor da marca e o balão fica ao lado — no
   celular, fixo embaixo. Sem biblioteca; os passos vêm da própria tela.
   ========================================================================= */
/* O fundo só bloqueia o clique; quem escurece a tela é a SOMBRA do foco
   (.tour-foco): uma caixa fixa sem fundo, com um box-shadow enorme em volta
   — o alvo aparece pela "janela" e o resto fica sob o véu. Ao passar de
   um passo ao outro a caixa DESLIZA até o alvo novo em vez de pular (único
   lugar do app que transiciona top/left/width/height: é um retângulo fixo,
   sem filhos — o custo de layout é o dele só). */
.tour-fundo{position:fixed;inset:0;z-index:1000}
.tour-foco{position:fixed;z-index:1001;border-radius:8px;outline:3px solid var(--brand);pointer-events:none;
 box-shadow:0 0 0 200vmax var(--veu);animation:surgir var(--dur-media) var(--curva-saida);
 transition:top var(--dur-lenta) var(--curva-saida),left var(--dur-lenta) var(--curva-saida),
  width var(--dur-lenta) var(--curva-saida),height var(--dur-lenta) var(--curva-saida)}
.tour-foco.sem-anima{transition:none}
.tour-card{position:fixed;z-index:1002;width:340px;max-width:calc(100vw - 24px);background:var(--panel);
 color:var(--ink);border:1px solid var(--line);border-radius:10px;box-shadow:var(--sombra-alta);padding:14px 16px 12px;
 animation:entrar var(--dur-media) var(--curva-saida) 140ms backwards}
.tour-eyebrow{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-2);margin-bottom:6px}
.tour-titulo{font-size:15px;font-weight:600;margin-bottom:5px;color:var(--ink)}
.tour-texto{font-size:13px;color:var(--muted);line-height:1.5;margin:0 0 12px}
.tour-pe{display:flex;align-items:center;gap:10px}
.tour-pular{border:0;background:transparent;color:var(--faint);font:inherit;font-size:12.5px;cursor:pointer;padding:0}
.tour-pular:hover{color:var(--ink);text-decoration:underline}
.tour-pontos{margin-left:auto;display:flex;gap:5px}
.tour-pontos i{width:6px;height:6px;border-radius:50%;background:var(--line);display:block}
.tour-pontos i.on{background:var(--brand)}
.tour-prox{font:inherit;font-size:13px;font-weight:500;padding:6px 13px;border-radius:6px;border:1px solid var(--brand-solido);
 background:var(--brand-solido);color:var(--sobre-solido);cursor:pointer;transition:filter var(--dur-rapida),transform var(--dur-rapida)}
.tour-prox:hover{filter:brightness(1.1)}
.tour-prox:active{transform:scale(.97)}
.tour-pontos i{transition:background-color var(--dur-media)}
@media (max-width:700px){
 .tour-card{left:12px!important;right:12px;bottom:12px;top:auto!important;width:auto;max-width:none}
}

/* aviso curto ("Link copiado"): sobe com fade e desce ao sair (.saindo) */
@keyframes toast-subir{from{opacity:0;transform:translate(-50%,10px)}}
.toast-radar{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:1100;
 background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:6px;
 padding:8px 14px;font-size:13px;box-shadow:var(--sombra-alta);max-width:calc(100vw - 24px);
 animation:toast-subir var(--dur-media) var(--curva-saida);
 transition:opacity var(--dur-media) var(--curva-entrada),transform var(--dur-media) var(--curva-entrada)}
.toast-radar.saindo{opacity:0;transform:translate(-50%,10px)}

/* ================================ MOVIMENTO ================================
   O que dá vida e orientação às telas (pedido de 12/09: "falta animação,
   está meio confuso"). Tudo lê os tokens --dur-* e --curva-* do topo.
   ========================================================================= */
/* ENTRADA DE PÁGINA: cada bloco do conteúdo entra com fade + 8px, em
   cascata de 40 ms até o 6º; do 7º em diante todos juntos. `backwards`
   (não `both`): terminada a animação não sobra transform nenhum — um
   transform residual prenderia o painel fixo e os menus suspensos dentro
   do bloco. O painel, o véu e o rodapé ficam de fora. */
@keyframes entrar{from{opacity:0;transform:translateY(8px)}}
.content-col>*{animation:entrar var(--dur-lenta) var(--curva-saida) backwards}
.content-col>:nth-child(2){animation-delay:40ms}.content-col>:nth-child(3){animation-delay:80ms}
.content-col>:nth-child(4){animation-delay:120ms}.content-col>:nth-child(5){animation-delay:160ms}
.content-col>:nth-child(n+6){animation-delay:200ms}
.content-col>.painel,.content-col>.painel-veu,.content-col>.rodape,.content-col>script,.content-col>template,
.content-col>.flash-wrap{animation:none}   /* o aviso tem a entrada dele (flash-entrar) */
/* BARRA DE PROGRESSO no topo (JS): liga ao clicar num link interno ou ao
   enviar um formulário — vai a 80% em --dur-lenta e depois RASTEJA até 94%
   enquanto a resposta não chega (é espera de rede, por isso 1,6 s); some
   sozinha porque a página é trocada. */
#barra-ir{position:fixed;top:0;left:0;right:0;height:3px;z-index:2000;background:var(--barra-acento);
 transform:scaleX(0);transform-origin:left;opacity:0;pointer-events:none;
 transition:transform var(--dur-lenta) var(--curva-saida),opacity var(--dur-rapida)}
#barra-ir.indo{opacity:1;transform:scaleX(.8)}
#barra-ir.indo.devagar{transform:scaleX(.94);transition:transform 1.6s linear,opacity var(--dur-rapida)}
/* <details> ABRINDO E FECHANDO: o JS envolve o conteúdo (tudo menos o
   summary) em .dobra-in > div e anima a altura por grid-template-rows
   0fr ↔ 1fr — o único jeito de animar "auto" sem medir nada. Ao fechar, o
   JS segura o <details> aberto até a animação acabar. O overflow:hidden só
   vale durante a animação (.animando): fora dela a bolha de ajuda precisa
   poder sair da caixa. Sem JS, o <details> abre e fecha do jeito nativo. */
.dobra-in{display:grid;grid-template-rows:1fr;animation:dobra-abrir var(--dur-media) var(--curva-saida)}
.dobra-in>div{min-height:0}
.dobra-in.animando>div{overflow:hidden}
@keyframes dobra-abrir{from{grid-template-rows:0fr;opacity:0}}
@keyframes dobra-fechar{to{grid-template-rows:0fr;opacity:0}}
details.fechando>.dobra-in{animation:dobra-fechar var(--dur-media) var(--curva-entrada) forwards}
/* MENOS MOVIMENTO: quem pediu ao sistema (prefers-reduced-motion) recebe o
   estado final direto — durações e atrasos a zero, loops a uma volta. O
   JS da casca também se cala (_movimento()). A primeira regra é a dos
   loops explícitos; a segunda cobre tudo o mais. */
@media (prefers-reduced-motion:reduce){
 :root:not([data-movimento="ligado"]) .fs-raios,:root:not([data-movimento="ligado"]) .fs-brilho,
 :root:not([data-movimento="ligado"]) .estado.b-crit::before{animation:none}
 :root:not([data-movimento="ligado"]) *,:root:not([data-movimento="ligado"]) *::before,
 :root:not([data-movimento="ligado"]) *::after{animation-duration:.01ms!important;animation-delay:0s!important;
  animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
}
/* A CHAVE DO APP (13/09): o Windows do Samuel está com "menos movimento"
   ligado (comum em máquina remota) e ele não via animação nenhuma. O botão
   da barra guarda em localStorage "movimento" = ligado | desligado; sem
   escolha, vale o sistema. "ligado" tira a página do bloco acima;
   "desligado" aplica as mesmas reduções mesmo com o sistema pedindo movimento. */
:root[data-movimento="desligado"] .fs-raios,:root[data-movimento="desligado"] .fs-brilho,
:root[data-movimento="desligado"] .estado.b-crit::before{animation:none}
:root[data-movimento="desligado"] *,:root[data-movimento="desligado"] *::before,
:root[data-movimento="desligado"] *::after{animation-duration:.01ms!important;animation-delay:0s!important;
 animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
.tb-btn .mov-ponto{position:absolute;right:3px;bottom:3px;width:6px;height:6px;border-radius:50%;background:var(--faint)}
:root[data-movimento="ligado"] .tb-btn .mov-ponto{background:var(--ok)}
:root[data-movimento="desligado"] .tb-btn .mov-ponto{background:var(--crit)}

/* ============ DOCUMENTAÇÃO DA API (modo --docs, doc.bylumiset.com) ============
   Fase 2 do plano complementar (15/09/2026). Só tokens: vale no claro e no
   escuro. O `code` do Bootstrap é rosa e não segue o data-tema — aqui dentro
   ele assume a tinta do tema. */
.doc{display:flex;flex-direction:column;gap:16px;min-width:0}
.doc .card-body{padding:18px 20px}
.doc-h2{font-size:16px;margin:0 0 10px}
.doc-h3{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);font-weight:600;margin:18px 0 8px}
.doc p{font-size:13.5px;line-height:1.6;color:var(--ink);margin:0 0 10px}
.doc p.doc-lead{font-size:15px;color:var(--muted)}
.doc p.doc-nota{font-size:12.5px;color:var(--faint)}
.doc-lista{font-size:13.5px;line-height:1.6;padding-left:18px;margin:0 0 10px;color:var(--ink)}
.doc-lista li{margin-bottom:4px}
.doc code,.doc-inline{font-family:var(--mono);font-size:.86em;color:var(--ink);background:var(--panel-2);
 padding:.08em .38em;border-radius:4px;overflow-wrap:anywhere}
.doc-codigo{border:1px solid var(--line);border-radius:8px;background:var(--ground);margin:6px 0 12px;overflow:hidden}
.doc-codigo-topo{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:5px 8px 5px 12px;
 border-bottom:1px solid var(--line);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--faint)}
.doc-copiar{border:1px solid var(--line);background:var(--panel);color:var(--muted);font-size:11.5px;border-radius:5px;
 padding:2px 9px;cursor:pointer;text-transform:none;letter-spacing:0}
.doc-copiar:hover{color:var(--ink);border-color:var(--brand)}
.doc-codigo pre{margin:0;padding:12px 14px;max-height:460px;overflow:auto;font-family:var(--mono);font-size:12.5px;
 line-height:1.55;color:var(--ink);white-space:pre}
.doc .doc-codigo pre code{background:none;padding:0;font-size:inherit;color:inherit;overflow-wrap:normal}
.doc-metodo{display:inline-block;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.04em;
 padding:2px 7px;border-radius:4px;background:var(--ok-suave);color:var(--ok-texto)}
.doc-rota{font-family:var(--mono);font-size:13px;color:var(--ink);overflow-wrap:anywhere}
a.doc-rota{text-decoration:none}
a.doc-rota:hover{color:var(--brand-2);text-decoration:underline}
.doc-endpoint{scroll-margin-top:72px}
.doc-endpoint-topo{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.doc-tabela{border:1px solid var(--line);border-radius:8px;margin-bottom:8px}
.doc-tabela .table td{font-size:12.5px;vertical-align:top}
.doc-tabela td.doc-campo{font-family:var(--mono);font-size:12px;white-space:nowrap;color:var(--ink)}
.doc-tabela td.doc-campo.n1{padding-left:24px}
.doc-tabela td.doc-campo.n2{padding-left:40px}
.doc-tabela td.doc-campo.n3{padding-left:56px}
.doc-tabela td.doc-tipo{white-space:nowrap;color:var(--muted)}
.doc-indice{list-style:none;padding:0;margin:0 0 8px;display:grid;gap:6px;font-size:13px}
.doc-indice a{text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.doc-resumo{font-size:12.5px;color:var(--faint);margin-left:8px}
.doc-outras>summary{font-size:12.5px;color:var(--brand-2);margin:2px 0 8px}
/* dentro do <details> animado (.dobra-in é grid), o bloco de código não pode esticar a coluna até o tamanho da linha mais longa: no celular o botão Copiar sumia */
.doc .dobra-in>div{min-width:0}
.doc-mudancas{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.doc-mudanca-topo{font-size:13.5px;margin-bottom:4px;color:var(--ink)}
.doc-data{color:var(--faint);font-size:12.5px;margin-left:8px}
.doc-mudanca ul{font-size:13.5px;line-height:1.6;padding-left:18px;margin:0;color:var(--ink)}
@media (max-width:700px){
 .doc .card-body{padding:14px}
 .doc-tabela td.doc-campo{white-space:normal;overflow-wrap:anywhere}
}