/* ============================================================
   Planejamento de Obra — as duas paletas do site

   Este arquivo é carregado por TODAS as telas, inclusive as que não
   usam o ui.css (6WLA, Instalações, Interdependências): é aqui que
   moram as cores, uma vez só, e o interruptor que escolhe entre elas.

   ESCURO E CLARO
   O <html> chega do servidor com data-tema="escuro", "claro" ou
   "sistema". O escuro é o que o sistema sempre foi e continua sendo o
   padrão de dentro das obras; o claro reaproveita a vestimenta do
   portal da Workplan (azul-marinho, branco e laranja), para o site
   inteiro parecer uma coisa só.

   Para a lista de cores não ficar escrita duas vezes, cada paleta mora
   uma única vez — nos nomes --e-* (escuro) e --c-* (claro) — e os dois
   blocos de troca mais abaixo só apontam os tokens de uso para uma ou
   para a outra. Mexer numa cor é mexer em um lugar só.
   ============================================================ */
:root{
  /* ---------- paleta escura: cinza-carvão quente, sem preto puro ---------- */
  --e-bg:#17191c; --e-bg2:#1e2125; --e-bg3:#23262b; --e-bg4:#2a2e34;
  --e-ln:#2f343a; --e-ln2:#3a4047;
  --e-tx:#e7e9ec; --e-tx2:#98a0a9; --e-tx3:#8a909a;
  --e-o:#EB5B26; --e-o-dim:#C24A1D; --e-o-soft:#31200f; --e-o-tx:#FF8A47;
  /* Tinta sobre preenchimento colorido. No escuro são exatamente os
     valores que o site já usava — este tema não mudou. No claro elas
     precisam ser outras: as cores de estado do tema claro são fechadas
     (vermelho/verde escuros), então pedem tinta branca, e o laranja da
     marca é vivo, então pede tinta escura para o texto se ler. */
  --e-pri-tx:#1a1207; --e-o-ink:#1a1207; --e-err-ink:#2a1210; --e-warn-ink:#2a1f08; --e-inv-tx:#ffffff; --e-o-forte:#EB5B26; --e-pri-hv:#EC8340; --e-av-ln:#5a3d1e; --e-dg-ln:#4a3230;
  --e-ok:#6FA97C; --e-ok-bg:#1d2620; --e-ok-ln:#2c3a30; --e-ok-tx:#9CCFA8; --e-ok-2:#8FBF9B;
  --e-warn:#C9A25A; --e-warn-bg:#272219; --e-warn-ln:#3a3524; --e-warn-2:#D9BE84;
  --e-err:#CE8178; --e-err-bg:#2a1e1d; --e-err-ln:#40302e; --e-err-tx:#E6A29A;
  --e-tag-ed-bg:#1d2620; --e-tag-ed-tx:#8FBF9B; --e-tag-ed-ln:#2c3a30;
  --e-tag-vw-bg:#1c2126; --e-tag-vw-tx:#93A8BC; --e-tag-vw-ln:#2b3540;
  --e-zebra:rgba(255,255,255,.04); --e-zebra-hv:rgba(255,255,255,.02);
  --e-vidro:rgba(10,11,13,.72);
  --e-vidro-forte:rgba(20,15,10,.82);  /* véu com texto por cima */
  --e-sombra:0 18px 44px rgba(0,0,0,.55); --e-sombra2:0 24px 60px rgba(0,0,0,.55);
  --e-sombra3:0 6px 18px rgba(0,0,0,.40);   /* realce leve em cartão */
  --e-sombra4:0 1px 2px rgba(0,0,0,.35);    /* apoio mínimo */
  --e-sombra-p:0 1px 2px rgba(0,0,0,.35), 0 10px 26px -16px rgba(0,0,0,.75);  /* painel */
  --e-tip-bg:#0f1113; --e-tip-tx:#e7e9ec; --e-grad-fim:#D9A05A;
  --e-halo:#241d16;   /* brilho quente atrás do cartão de login */
  /* o amarelo de "sem sinal" é alerta: fica igual nos dois temas */
  --e-sinal:#F6A321; --e-sinal-tx:#2b1708; --e-sinal-halo:rgba(246,163,33,.22);
  --e-tarja-bg:#5a3a12; --e-tarja-tx:#ffe8c9; --e-tarja-ln:#7a5320;
  --e-tarja2-bg:#3a3116; --e-tarja2-tx:#f4e3bd; --e-tarja2-ln:#5c4d22;
  /* cabeçalho: no escuro ele é só uma superfície um pouco mais clara */
  --e-top-bg:#1e2125; --e-top-tx:#e7e9ec; --e-top-tx2:#98a0a9; --e-top-tx3:#8a909a;
  --e-mar:#1e2125; --e-mar2:#23262b;   /* "azul-marinho" da marca, no escuro */
  --e-top-bg2:#23262b; --e-top-ln:#2f343a; --e-top-ln2:#3a4047;
  /* ---- tons que vieram dos módulos da obra ---- */
  --e-plan:#7C93B8; --e-plan-bg:#1b2028;      /* azul do "planejado" */
  --e-palco:#121417;                          /* fundo do palco das instalações */
  --e-mat:#1e2125;                            /* moldura atrás de uma folha */
  /* o editor de apresentações: palco, painéis flutuantes e selos */
  --e-deck-fundo:#131518; --e-deck-luz:#1d2024;
  --e-deck-flut:#12151a; --e-deck-flut-tx:#e7e9ec; --e-deck-badge:#1a1d22;
  --e-deck-tx3:#8a909a;   /* o cinza das dicas do editor, um tom acima do --tx3 */
  /* o vermelho de excluir e a sombra dos menus flutuantes do editor */
  --e-deck-perigo:#E0857B; --e-deck-perigo-soft:#2a1e1d;
  --e-deck-sombra:rgba(0,0,0,.6);
  --e-marrom:#672C0C; --e-titulo:#937537;     /* acentos do painel de instalações */
  /* mapa de calor do PPC: do pior ao melhor, fundo e texto */
  --e-hm1:#3a2320; --e-hm2:#332a1e; --e-hm3:#26292d; --e-hm4:#1f2a23; --e-hm5:#1d3327;
  --e-hmi1:#E39189; --e-hmi2:#D9B274; --e-hmi3:#98a0a9; --e-hmi4:#8FBF9B; --e-hmi5:#A6D3B0;

  /* ---------- paleta clara: a vestimenta do portal Workplan ---------- */
  /* O fundo não é branco de propósito: é um cinza fosco. A folha de
     impressão, o slide e o relatório são brancos de verdade, e só se
     lêem como folha se o que está atrás for mais escuro que eles. */
  --c-bg:#DFE5EC; --c-bg2:#FFFFFF; --c-bg3:#F2F5F9; --c-bg4:#E7ECF2;
  --c-ln:#DDE3EB; --c-ln2:#C3CDD9;
  --c-tx:#16304C; --c-tx2:#4A5B6E; --c-tx3:#53647A;
  --c-o:#F07C22; --c-o-dim:#C25A0C; --c-o-soft:#FDF0E6; --c-o-tx:#9A4507;
  --c-pri-tx:#1F1206; --c-o-ink:#1F1206; --c-err-ink:#ffffff; --c-warn-ink:#ffffff; --c-inv-tx:#ffffff; --c-o-forte:#A84C08; --c-pri-hv:#E2740F; --c-av-ln:#F3C9A6; --c-dg-ln:#E8C4C1;
  --c-ok:#2C6B3F; --c-ok-bg:#E6F3EA; --c-ok-ln:#BFE0CB; --c-ok-tx:#245C34; --c-ok-2:#2C6B3F;
  --c-warn:#8A5A00; --c-warn-bg:#FFF8EE; --c-warn-ln:#F0D5B4; --c-warn-2:#8A5A00;
  --c-err:#A8392C; --c-err-bg:#FBEAE7; --c-err-ln:#F2CFC8; --c-err-tx:#8E2E23;
  --c-tag-ed-bg:#E6F3EA; --c-tag-ed-tx:#245C34; --c-tag-ed-ln:#BFE0CB;
  --c-tag-vw-bg:#EEF4FA; --c-tag-vw-tx:#2C5577; --c-tag-vw-ln:#D6E4F1;
  --c-zebra:rgba(22,48,76,.07); --c-zebra-hv:rgba(22,48,76,.035);
  --c-vidro:rgba(22,48,76,.42);
  --c-vidro-forte:rgba(16,34,54,.86);
  --c-sombra:0 18px 44px rgba(22,48,76,.16); --c-sombra2:0 24px 60px rgba(22,48,76,.18);
  --c-sombra3:0 6px 18px rgba(22,48,76,.10);
  --c-sombra4:0 1px 2px rgba(22,48,76,.05);
  --c-sombra-p:0 1px 2px rgba(22,48,76,.06), 0 10px 26px -18px rgba(22,48,76,.28);
  --c-tip-bg:#16304C; --c-tip-tx:#F4F6F9; --c-grad-fim:#F0B45A;
  --c-halo:#E6EDF6;
  --c-sinal:#F6A321; --c-sinal-tx:#2b1708; --c-sinal-halo:rgba(246,163,33,.22);
  --c-tarja-bg:#FFF1D6; --c-tarja-tx:#6B4300; --c-tarja-ln:#E7C98E;
  --c-tarja2-bg:#FBF3E2; --c-tarja2-tx:#7A4F00; --c-tarja2-ln:#EBDAB4;
  /* cabeçalho: no claro ele continua azul-marinho, como no portal — e
     assim o logotipo claro do cabeçalho serve nos dois temas */
  --c-top-bg:#16324C; --c-top-tx:#EAF1F8; --c-top-tx2:#A6BACE; --c-top-tx3:#9DB0C4;
  --c-mar:#12293F; --c-mar2:#1B3A57;
  --c-top-bg2:#1E4265; --c-top-ln:#25486A; --c-top-ln2:#31597E;
  --c-plan:#3D6A99; --c-plan-bg:#EDF3FA;
  --c-palco:#CFD8E3;   /* a moldura do slide, ainda mais fosca */
  --c-mat:#CFD8E3;
  --c-deck-fundo:#C9D3E0; --c-deck-luz:#E2E8F0;
  --c-deck-flut:#FFFFFF; --c-deck-flut-tx:#16304C; --c-deck-badge:#E7ECF2;
  --c-deck-tx3:#53647A;
  --c-deck-perigo:#A8392C; --c-deck-perigo-soft:#FBEBE8;
  --c-deck-sombra:rgba(22,48,76,.20);
  --c-marrom:#8A3A10; --c-titulo:#8A6A20;
  --c-hm1:#FAE1DD; --c-hm2:#FBF0DA; --c-hm3:#EDF0F4; --c-hm4:#E7F3EB; --c-hm5:#D7ECDE;
  --c-hmi1:#A8392C; --c-hmi2:#8A5A00; --c-hmi3:#5F7185; --c-hmi4:#2C6B3F; --c-hmi5:#1E5A33;

  --r:  10px;   /* raio padrão */
  --r2: 14px;
}

/* ---------- a troca: tokens de uso apontam para uma das paletas ---------- */
:root,:root[data-tema="escuro"]{
  color-scheme:dark;
  --bg:var(--e-bg); --bg2:var(--e-bg2); --bg3:var(--e-bg3); --bg4:var(--e-bg4);
  --ln:var(--e-ln); --ln2:var(--e-ln2);
  --tx:var(--e-tx); --tx2:var(--e-tx2); --tx3:var(--e-tx3);
  --o:var(--e-o); --o-dim:var(--e-o-dim); --o-soft:var(--e-o-soft); --o-tx:var(--e-o-tx);
  --pri-tx:var(--e-pri-tx); --o-ink:var(--e-o-ink); --err-ink:var(--e-err-ink); --warn-ink:var(--e-warn-ink); --inv-tx:var(--e-inv-tx); --o-forte:var(--e-o-forte); --pri-hv:var(--e-pri-hv); --av-ln:var(--e-av-ln); --dg-ln:var(--e-dg-ln);
  --ok:var(--e-ok); --ok-bg:var(--e-ok-bg); --ok-ln:var(--e-ok-ln); --ok-tx:var(--e-ok-tx); --ok-2:var(--e-ok-2);
  --warn:var(--e-warn); --warn-bg:var(--e-warn-bg); --warn-ln:var(--e-warn-ln); --warn-2:var(--e-warn-2);
  --err:var(--e-err); --err-bg:var(--e-err-bg); --err-ln:var(--e-err-ln); --err-tx:var(--e-err-tx);
  --tag-ed-bg:var(--e-tag-ed-bg); --tag-ed-tx:var(--e-tag-ed-tx); --tag-ed-ln:var(--e-tag-ed-ln);
  --tag-vw-bg:var(--e-tag-vw-bg); --tag-vw-tx:var(--e-tag-vw-tx); --tag-vw-ln:var(--e-tag-vw-ln);
  --zebra:var(--e-zebra); --zebra-hv:var(--e-zebra-hv); --vidro:var(--e-vidro); --vidro-forte:var(--e-vidro-forte);
  --sombra:var(--e-sombra); --sombra2:var(--e-sombra2); --sombra3:var(--e-sombra3); --sombra4:var(--e-sombra4); --sombra-p:var(--e-sombra-p);
  --tip-bg:var(--e-tip-bg); --tip-tx:var(--e-tip-tx); --grad-fim:var(--e-grad-fim); --halo:var(--e-halo); --sinal:var(--e-sinal); --sinal-tx:var(--e-sinal-tx); --sinal-halo:var(--e-sinal-halo);
  --tarja-bg:var(--e-tarja-bg); --tarja-tx:var(--e-tarja-tx); --tarja-ln:var(--e-tarja-ln);
  --tarja2-bg:var(--e-tarja2-bg); --tarja2-tx:var(--e-tarja2-tx); --tarja2-ln:var(--e-tarja2-ln);
  --top-bg:var(--e-top-bg); --top-tx:var(--e-top-tx); --top-tx2:var(--e-top-tx2);
  --top-tx3:var(--e-top-tx3); --top-bg2:var(--e-top-bg2);
  --top-ln:var(--e-top-ln); --top-ln2:var(--e-top-ln2);
  --mar:var(--e-mar); --mar2:var(--e-mar2); --lar:var(--e-o); --lar2:var(--e-o-tx);
  --pg-bg2:var(--e-bg2); --pg-tx:var(--e-tx); --pg-tx2:var(--e-tx2); --pg-ln:var(--e-ln);
  --plan:var(--e-plan); --plan-bg:var(--e-plan-bg); --palco:var(--e-palco); --mat:var(--e-mat);
  --deck-fundo:var(--e-deck-fundo); --deck-luz:var(--e-deck-luz);
  --deck-flut:var(--e-deck-flut); --deck-flut-tx:var(--e-deck-flut-tx); --deck-badge:var(--e-deck-badge); --deck-tx3:var(--e-deck-tx3);
  --deck-perigo:var(--e-deck-perigo); --deck-perigo-soft:var(--e-deck-perigo-soft); --deck-sombra:var(--e-deck-sombra);
  --marrom:var(--e-marrom); --titulo:var(--e-titulo);
  --hm1:var(--e-hm1); --hm2:var(--e-hm2); --hm3:var(--e-hm3); --hm4:var(--e-hm4); --hm5:var(--e-hm5);
  --hmi1:var(--e-hmi1); --hmi2:var(--e-hmi2); --hmi3:var(--e-hmi3); --hmi4:var(--e-hmi4); --hmi5:var(--e-hmi5);
}
:root[data-tema="claro"]{
  color-scheme:light;
  --bg:var(--c-bg); --bg2:var(--c-bg2); --bg3:var(--c-bg3); --bg4:var(--c-bg4);
  --ln:var(--c-ln); --ln2:var(--c-ln2);
  --tx:var(--c-tx); --tx2:var(--c-tx2); --tx3:var(--c-tx3);
  --o:var(--c-o); --o-dim:var(--c-o-dim); --o-soft:var(--c-o-soft); --o-tx:var(--c-o-tx);
  --pri-tx:var(--c-pri-tx); --o-ink:var(--c-o-ink); --err-ink:var(--c-err-ink); --warn-ink:var(--c-warn-ink); --inv-tx:var(--c-inv-tx); --o-forte:var(--c-o-forte); --pri-hv:var(--c-pri-hv); --av-ln:var(--c-av-ln); --dg-ln:var(--c-dg-ln);
  --ok:var(--c-ok); --ok-bg:var(--c-ok-bg); --ok-ln:var(--c-ok-ln); --ok-tx:var(--c-ok-tx); --ok-2:var(--c-ok-2);
  --warn:var(--c-warn); --warn-bg:var(--c-warn-bg); --warn-ln:var(--c-warn-ln); --warn-2:var(--c-warn-2);
  --err:var(--c-err); --err-bg:var(--c-err-bg); --err-ln:var(--c-err-ln); --err-tx:var(--c-err-tx);
  --tag-ed-bg:var(--c-tag-ed-bg); --tag-ed-tx:var(--c-tag-ed-tx); --tag-ed-ln:var(--c-tag-ed-ln);
  --tag-vw-bg:var(--c-tag-vw-bg); --tag-vw-tx:var(--c-tag-vw-tx); --tag-vw-ln:var(--c-tag-vw-ln);
  --zebra:var(--c-zebra); --zebra-hv:var(--c-zebra-hv); --vidro:var(--c-vidro); --vidro-forte:var(--c-vidro-forte);
  --sombra:var(--c-sombra); --sombra2:var(--c-sombra2); --sombra3:var(--c-sombra3); --sombra4:var(--c-sombra4); --sombra-p:var(--c-sombra-p);
  --tip-bg:var(--c-tip-bg); --tip-tx:var(--c-tip-tx); --grad-fim:var(--c-grad-fim); --halo:var(--c-halo); --sinal:var(--c-sinal); --sinal-tx:var(--c-sinal-tx); --sinal-halo:var(--c-sinal-halo);
  --tarja-bg:var(--c-tarja-bg); --tarja-tx:var(--c-tarja-tx); --tarja-ln:var(--c-tarja-ln);
  --tarja2-bg:var(--c-tarja2-bg); --tarja2-tx:var(--c-tarja2-tx); --tarja2-ln:var(--c-tarja2-ln);
  --top-bg:var(--c-top-bg); --top-tx:var(--c-top-tx); --top-tx2:var(--c-top-tx2);
  --top-tx3:var(--c-top-tx3); --top-bg2:var(--c-top-bg2);
  --top-ln:var(--c-top-ln); --top-ln2:var(--c-top-ln2);
  --mar:var(--c-mar); --mar2:var(--c-mar2); --lar:var(--c-o); --lar2:var(--c-o-tx);
  --pg-bg2:var(--c-bg2); --pg-tx:var(--c-tx); --pg-tx2:var(--c-tx2); --pg-ln:var(--c-ln);
  --plan:var(--c-plan); --plan-bg:var(--c-plan-bg); --palco:var(--c-palco); --mat:var(--c-mat);
  --deck-fundo:var(--c-deck-fundo); --deck-luz:var(--c-deck-luz);
  --deck-flut:var(--c-deck-flut); --deck-flut-tx:var(--c-deck-flut-tx); --deck-badge:var(--c-deck-badge); --deck-tx3:var(--c-deck-tx3);
  --deck-perigo:var(--c-deck-perigo); --deck-perigo-soft:var(--c-deck-perigo-soft); --deck-sombra:var(--c-deck-sombra);
  --marrom:var(--c-marrom); --titulo:var(--c-titulo);
  --hm1:var(--c-hm1); --hm2:var(--c-hm2); --hm3:var(--c-hm3); --hm4:var(--c-hm4); --hm5:var(--c-hm5);
  --hmi1:var(--c-hmi1); --hmi2:var(--c-hmi2); --hmi3:var(--c-hmi3); --hmi4:var(--c-hmi4); --hmi5:var(--c-hmi5);
}
/* "Seguir o sistema": quem está no modo claro do Windows abre claro, e
   muda na hora em que o Windows muda, sem recarregar a página */
@media (prefers-color-scheme: light){
  :root[data-tema="sistema"]{
    color-scheme:light;
    --bg:var(--c-bg); --bg2:var(--c-bg2); --bg3:var(--c-bg3); --bg4:var(--c-bg4);
    --ln:var(--c-ln); --ln2:var(--c-ln2);
    --tx:var(--c-tx); --tx2:var(--c-tx2); --tx3:var(--c-tx3);
    --o:var(--c-o); --o-dim:var(--c-o-dim); --o-soft:var(--c-o-soft); --o-tx:var(--c-o-tx);
    --pri-tx:var(--c-pri-tx); --o-ink:var(--c-o-ink); --err-ink:var(--c-err-ink); --warn-ink:var(--c-warn-ink); --inv-tx:var(--c-inv-tx); --o-forte:var(--c-o-forte); --pri-hv:var(--c-pri-hv); --av-ln:var(--c-av-ln); --dg-ln:var(--c-dg-ln);
    --ok:var(--c-ok); --ok-bg:var(--c-ok-bg); --ok-ln:var(--c-ok-ln); --ok-tx:var(--c-ok-tx); --ok-2:var(--c-ok-2);
    --warn:var(--c-warn); --warn-bg:var(--c-warn-bg); --warn-ln:var(--c-warn-ln); --warn-2:var(--c-warn-2);
    --err:var(--c-err); --err-bg:var(--c-err-bg); --err-ln:var(--c-err-ln); --err-tx:var(--c-err-tx);
    --tag-ed-bg:var(--c-tag-ed-bg); --tag-ed-tx:var(--c-tag-ed-tx); --tag-ed-ln:var(--c-tag-ed-ln);
    --tag-vw-bg:var(--c-tag-vw-bg); --tag-vw-tx:var(--c-tag-vw-tx); --tag-vw-ln:var(--c-tag-vw-ln);
    --zebra:var(--c-zebra); --zebra-hv:var(--c-zebra-hv); --vidro:var(--c-vidro); --vidro-forte:var(--c-vidro-forte);
    --sombra:var(--c-sombra); --sombra2:var(--c-sombra2); --sombra3:var(--c-sombra3); --sombra4:var(--c-sombra4); --sombra-p:var(--c-sombra-p);
    --tip-bg:var(--c-tip-bg); --tip-tx:var(--c-tip-tx); --grad-fim:var(--c-grad-fim); --halo:var(--c-halo); --sinal:var(--c-sinal); --sinal-tx:var(--c-sinal-tx); --sinal-halo:var(--c-sinal-halo);
  --tarja-bg:var(--c-tarja-bg); --tarja-tx:var(--c-tarja-tx); --tarja-ln:var(--c-tarja-ln);
  --tarja2-bg:var(--c-tarja2-bg); --tarja2-tx:var(--c-tarja2-tx); --tarja2-ln:var(--c-tarja2-ln);
    --top-bg:var(--c-top-bg); --top-tx:var(--c-top-tx); --top-tx2:var(--c-top-tx2);
    --top-tx3:var(--c-top-tx3); --top-bg2:var(--c-top-bg2);
    --top-ln:var(--c-top-ln); --top-ln2:var(--c-top-ln2);
    --mar:var(--c-mar); --mar2:var(--c-mar2); --lar:var(--c-o); --lar2:var(--c-o-tx);
  --pg-bg2:var(--c-bg2); --pg-tx:var(--c-tx); --pg-tx2:var(--c-tx2); --pg-ln:var(--c-ln);
    --plan:var(--c-plan); --plan-bg:var(--c-plan-bg); --palco:var(--c-palco); --mat:var(--c-mat);
  --deck-fundo:var(--c-deck-fundo); --deck-luz:var(--c-deck-luz);
  --deck-flut:var(--c-deck-flut); --deck-flut-tx:var(--c-deck-flut-tx); --deck-badge:var(--c-deck-badge); --deck-tx3:var(--c-deck-tx3);
  --deck-perigo:var(--c-deck-perigo); --deck-perigo-soft:var(--c-deck-perigo-soft); --deck-sombra:var(--c-deck-sombra);
    --marrom:var(--c-marrom); --titulo:var(--c-titulo);
    --hm1:var(--c-hm1); --hm2:var(--c-hm2); --hm3:var(--c-hm3); --hm4:var(--c-hm4); --hm5:var(--c-hm5);
    --hmi1:var(--c-hmi1); --hmi2:var(--c-hmi2); --hmi3:var(--c-hmi3); --hmi4:var(--c-hmi4); --hmi5:var(--c-hmi5);
  }
}
/* ------------------------------------------------------------
   IMPRESSÃO

   O papel não tem tema. Na hora de imprimir, seja qual for a cor
   escolhida na tela, o sistema volta à paleta de sempre — a mesma
   que está no ar hoje. Assim a folha do Curto Prazo, a folha das
   Interdependências e o relatório de Pavimentos saem exatamente
   como sempre saíram, e nada do que foi feito aqui muda uma única
   tinta do que vai para a impressora.
   ------------------------------------------------------------ */
@media print{
  :root,:root[data-tema="escuro"],:root[data-tema="claro"],:root[data-tema="sistema"],
  .top,.topbar{
    color-scheme:dark;
    --bg:var(--e-bg); --bg2:var(--e-bg2); --bg3:var(--e-bg3); --bg4:var(--e-bg4);
    --ln:var(--e-ln); --ln2:var(--e-ln2);
    --tx:var(--e-tx); --tx2:var(--e-tx2); --tx3:var(--e-tx3);
    --o:var(--e-o); --o-dim:var(--e-o-dim); --o-soft:var(--e-o-soft); --o-tx:var(--e-o-tx);
    --pri-tx:var(--e-pri-tx); --o-ink:var(--e-o-ink); --err-ink:var(--e-err-ink); --warn-ink:var(--e-warn-ink); --inv-tx:var(--e-inv-tx); --o-forte:var(--e-o-forte); --pri-hv:var(--e-pri-hv); --av-ln:var(--e-av-ln); --dg-ln:var(--e-dg-ln);
    --ok:var(--e-ok); --ok-bg:var(--e-ok-bg); --ok-ln:var(--e-ok-ln); --ok-tx:var(--e-ok-tx); --ok-2:var(--e-ok-2);
    --warn:var(--e-warn); --warn-bg:var(--e-warn-bg); --warn-ln:var(--e-warn-ln); --warn-2:var(--e-warn-2);
    --err:var(--e-err); --err-bg:var(--e-err-bg); --err-ln:var(--e-err-ln); --err-tx:var(--e-err-tx);
    --tag-ed-bg:var(--e-tag-ed-bg); --tag-ed-tx:var(--e-tag-ed-tx); --tag-ed-ln:var(--e-tag-ed-ln);
    --tag-vw-bg:var(--e-tag-vw-bg); --tag-vw-tx:var(--e-tag-vw-tx); --tag-vw-ln:var(--e-tag-vw-ln);
    --zebra:var(--e-zebra); --zebra-hv:var(--e-zebra-hv); --vidro:var(--e-vidro); --vidro-forte:var(--e-vidro-forte);
    --sombra:var(--e-sombra); --sombra2:var(--e-sombra2); --sombra3:var(--e-sombra3); --sombra4:var(--e-sombra4); --sombra-p:var(--e-sombra-p);
    --tip-bg:var(--e-tip-bg); --tip-tx:var(--e-tip-tx); --grad-fim:var(--e-grad-fim); --halo:var(--e-halo); --sinal:var(--e-sinal); --sinal-tx:var(--e-sinal-tx); --sinal-halo:var(--e-sinal-halo);
    --tarja-bg:var(--e-tarja-bg); --tarja-tx:var(--e-tarja-tx); --tarja-ln:var(--e-tarja-ln);
    --tarja2-bg:var(--e-tarja2-bg); --tarja2-tx:var(--e-tarja2-tx); --tarja2-ln:var(--e-tarja2-ln);
    --top-bg:var(--e-top-bg); --top-tx:var(--e-top-tx); --top-tx2:var(--e-top-tx2);
    --top-tx3:var(--e-top-tx3); --top-bg2:var(--e-top-bg2);
    --top-ln:var(--e-top-ln); --top-ln2:var(--e-top-ln2);
    --mar:var(--e-mar); --mar2:var(--e-mar2); --lar:var(--e-o); --lar2:var(--e-o-tx);
  --pg-bg2:var(--e-bg2); --pg-tx:var(--e-tx); --pg-tx2:var(--e-tx2); --pg-ln:var(--e-ln);
    --plan:var(--e-plan); --plan-bg:var(--e-plan-bg); --palco:var(--e-palco); --mat:var(--e-mat);
  --deck-fundo:var(--e-deck-fundo); --deck-luz:var(--e-deck-luz);
  --deck-flut:var(--e-deck-flut); --deck-flut-tx:var(--e-deck-flut-tx); --deck-badge:var(--e-deck-badge); --deck-tx3:var(--e-deck-tx3);
  --deck-perigo:var(--e-deck-perigo); --deck-perigo-soft:var(--e-deck-perigo-soft); --deck-sombra:var(--e-deck-sombra);
    --marrom:var(--e-marrom); --titulo:var(--e-titulo);
    --hm1:var(--e-hm1); --hm2:var(--e-hm2); --hm3:var(--e-hm3); --hm4:var(--e-hm4); --hm5:var(--e-hm5);
    --hmi1:var(--e-hmi1); --hmi2:var(--e-hmi2); --hmi3:var(--e-hmi3); --hmi4:var(--e-hmi4); --hmi5:var(--e-hmi5);
  }
}

/* ------------------------------------------------------------
   A FAIXA DA MARCA é escura nos dois temas: cinza-carvão no escuro,
   azul-marinho no claro (como no portal). Por isso, dentro dela, o
   que vale é a paleta escura — tintas, cores de estado e o laranja
   legível sobre fundo escuro. Sem isso, um âmbar escolhido para
   fundo branco ficaria ilegível sobre o azul-marinho.
   É também o que permite ao logotipo claro do cabeçalho servir nos
   dois temas, sem troca de imagem.
   ------------------------------------------------------------ */
.top,.topbar{
  color-scheme:dark;
  --bg2:var(--top-bg2); --bg3:var(--top-bg2); --bg4:var(--top-bg2);
  --ln:var(--top-ln); --ln2:var(--top-ln2);
  --tx:var(--top-tx); --tx2:var(--top-tx2); --tx3:var(--top-tx3);
  /* o acento escrito sobre a faixa: quando a obra tem faixa
     própria, o servidor manda o tom já acertado para ela */
  --o-tx:var(--top-o-tx,var(--e-o-tx)); --o-soft:var(--e-o-soft); --av-ln:var(--e-av-ln); --dg-ln:var(--e-dg-ln);
  --err-ink:var(--e-err-ink); --warn-ink:var(--e-warn-ink);
  --inv-tx:var(--e-inv-tx);
  --ok:var(--e-ok); --ok-bg:var(--e-ok-bg); --ok-ln:var(--e-ok-ln); --ok-tx:var(--e-ok-tx); --ok-2:var(--e-ok-2);
  --warn:var(--e-warn); --warn-bg:var(--e-warn-bg); --warn-ln:var(--e-warn-ln); --warn-2:var(--e-warn-2);
  --err:var(--e-err); --err-bg:var(--e-err-bg); --err-ln:var(--e-err-ln); --err-tx:var(--e-err-tx);
  --tag-ed-bg:var(--e-tag-ed-bg); --tag-ed-tx:var(--e-tag-ed-tx); --tag-ed-ln:var(--e-tag-ed-ln);
  --tag-vw-bg:var(--e-tag-vw-bg); --tag-vw-tx:var(--e-tag-vw-tx); --tag-vw-ln:var(--e-tag-vw-ln);
  --zebra:var(--e-zebra); --zebra-hv:var(--e-zebra-hv);
  --plan:var(--e-plan); --plan-bg:var(--e-plan-bg);
  --sombra:var(--e-sombra); --sombra2:var(--e-sombra2); --sombra3:var(--e-sombra3);
  --sombra4:var(--e-sombra4); --sombra-p:var(--e-sombra-p);
}

/* ------------------------------------------------------------
   A FAIXA DA MARCA — a mesma em todos os módulos

   Antes cada painel desenhava o seu cabeçalho: um tinha 68px e uma
   linha só, outro quebrava em duas e crescia, um terceiro centrava o
   conteúdo em 1680px. Agora a geometria mora aqui, uma vez, e vale
   para os dois jeitos de montar a barra que existem no sistema:

     <div class="top">            …conteúdo direto…
     <header class="topbar"><div class="in"|"wrap"> …conteúdo… </div>

   Dentro dela: o logotipo da obra, o nome do painel numa linha só
   (.nome), a informação de contexto em texto secundário (.crumb), o
   espaçador (.sp/.spacer), os indicadores (.cabkpi) e o menu da conta.
   ------------------------------------------------------------ */
.topbar{position:sticky; top:0; z-index:30;
  background:var(--top-bg); border-bottom:1px solid var(--top-ln); color:var(--tx)}
.top{height:68px}
.topbar>.in,.topbar>.wrap{height:67px}   /* 67 + 1 da borda = os mesmos 68 */
.top,.topbar>.in,.topbar>.wrap{
  display:flex; align-items:center; gap:14px;
  padding:0 22px; max-width:none; margin:0; flex-wrap:nowrap;
}
.top .ident,.topbar .mark{
  display:flex; align-items:center; gap:14px; min-width:0;
  text-decoration:none; color:inherit;
  border-radius:10px; padding:4px 8px; margin-left:-8px; transition:background .14s;
}
.top .ident:hover,.topbar .mark:hover{background:var(--bg3)}
.top .ident:focus-visible,.topbar .mark:focus-visible{outline:2px solid var(--o); outline-offset:2px}
.top img,.topbar .mark img{height:34px; width:auto; object-fit:contain; display:block}
/* Uma obra pode levar duas marcas — a construtora e o cliente. Elas vão
   num embrulho próprio, com o espaço e o fio fino entre as duas, porque
   cada cabeçalho tem o seu "gap" e nem todos têm um. */
.marcas2{display:flex; align-items:center; gap:11px; min-width:0}
/* o fio toma a cor do texto do lugar onde está: claro na faixa escura
   do cabeçalho, escuro na tela de login, sem precisar saber qual é */
.marcafio{
  display:block; width:1px; height:26px; flex:none;
  background:currentColor; opacity:.26;
}
.top .nome,.topbar .nome{
  font-size:15px; font-weight:600; letter-spacing:-.15px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.top .crumb,.topbar .crumb{
  display:flex; align-items:center; gap:7px; min-width:0;
  font-size:12px; color:var(--tx2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.top .crumb b,.topbar .crumb b{color:var(--tx); font-weight:600}
.top .sp,.topbar .sp,.topbar .spacer{flex:1 1 auto; min-width:0}
/* os números que ficam na própria faixa */
.top .cabkpi,.topbar .cabkpi{display:flex; gap:18px; flex:none}
.top .cabkpi>div,.topbar .cabkpi>div{
  font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--tx3); white-space:nowrap;
}
.top .cabkpi b,.topbar .cabkpi b{
  display:block; font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  font-size:19px; font-weight:600; color:var(--tx);
  letter-spacing:0; text-transform:none; font-variant-numeric:tabular-nums;
}
@media (max-width:1100px){
  .top .cabkpi,.topbar .cabkpi{display:none}
  .top .crumb,.topbar .crumb{display:none}
}
@media (max-width:640px){
  .top,.topbar>.in,.topbar>.wrap{height:auto; min-height:56px; padding:9px 13px; gap:8px 9px; flex-wrap:wrap}
  .top img,.topbar .mark img{height:26px}
  .top .nome,.topbar .nome{font-size:13px}
  .marcafio{height:20px}
  /* no celular a faixa só cabe uma marca: fica a primeira, que é de
     quem executa a obra, e o nome da obra continua escrito ao lado */
  .marcas2 img~img,.marcafio{display:none}
}

/* ---------- cor da tela, dentro do menu do avatar ---------- */
.tsel{padding:7px 12px 9px}
.tsel>i{display:block; font-style:normal; font-size:9.5px; font-weight:600; letter-spacing:.7px;
  text-transform:uppercase; color:var(--tx3); margin-bottom:6px}
.tsel .tops{display:grid; grid-template-columns:repeat(3,1fr); gap:4px}
.tsel .tops button{
  display:flex; flex-direction:column; align-items:center; gap:3px; width:auto;
  padding:7px 4px; border:1px solid var(--ln); border-radius:8px; background:var(--bg3);
  color:var(--tx2); font-size:10px; font-weight:500; cursor:pointer; font-family:inherit;
  transition:background .12s, border-color .12s, color .12s;
}
.tsel .tops button span{flex:none; font-size:14px; line-height:1; color:inherit;
  display:flex; align-items:center; justify-content:center; height:16px}
.tsel .tops button svg{display:block}
.tsel .tops button:hover{background:var(--bg4); border-color:var(--ln2); color:var(--tx)}
.tsel .tops button.on{background:var(--o-soft); border-color:var(--o); color:var(--o-tx); font-weight:600}

/* ---------- o mesmo seletor, na própria barra do topo ----------
   Três botõezinhos ao lado do avatar: é onde a pessoa procura, e
   troca a cor sem abrir menu nenhum. A barra é escura nos dois
   temas (carvão no escuro, azul-marinho no claro), por isso aqui
   valem as cores de cabeçalho — as mesmas do logotipo ao lado. */
.tbar{
  display:flex; gap:2px; padding:3px; flex:0 0 auto;
  border-radius:999px; background:var(--top-bg2,#23262b);
  border:1px solid var(--top-ln,#2f343a);
}
.top .tbar,.topbar .tbar{margin-left:auto}
.tbar+.uwrap{margin-left:0}
.tbar button{
  appearance:none; -webkit-appearance:none; border:0; background:transparent; cursor:pointer;
  width:30px; height:26px; padding:0; border-radius:999px; font-family:inherit;
  display:flex; align-items:center; justify-content:center; line-height:1; font-size:13px;
  color:var(--top-tx2,#98a0a9); transition:background .12s, color .12s;
}
.tbar button:hover{background:var(--top-ln2,#3a4047); color:var(--top-tx,#e7e9ec)}
.tbar button.on{background:var(--o); color:var(--o-ink); font-weight:600}
.tbar button svg{display:block}
.tbar button:focus-visible{outline:2px solid var(--o); outline-offset:2px}
/* o último botão fica colado na borda direita da tela: a dica dele sai
   alinhada à direita, senão metade dela ficaria fora do monitor */
.tbar button:last-child::after{left:auto; right:0; transform:translateY(-3px)}
.tbar button:last-child:hover::after{transform:translateY(0)}
.tbar button:last-child::before{left:auto; right:12px}
/* na tela estreita a barra fica apertada: o seletor do menu continua lá */
@media (max-width:700px){ .tbar{display:none} }