/* =====================================================================================================
   ESTILO VISUAL E DE INTERAÇÃO — nascido no Portal Comercial Reijers (14/10/2026), mas NÃO é o Portal.
   É uma linguagem para QUALQUER app: gestão com cara de JOGO, sem os enfeites de jogo. Fundo cinza médio,
   quadros brancos com borda de 2 px, faixa de título CHEIA na cor da área, número grande, semáforo vivo,
   selos, placar. Os componentes são padrões neutros: aplique ao domínio do app, não copie telas do Portal.
   Copie este arquivo inteiro. Para outra marca, troque só o bloco "MARCA". A paleta de áreas (--c-*) é livre:
   escolha uma cor por área do SEU menu.
   ===================================================================================================== */

/* ---------- 1. TOKENS ---------------------------------------------------------------------------- */
:root{
  /* tipografia: escala curta, número sempre tabular */
  --t-2:12px; --t-1:13px; --t0:14.5px; --t1:16px; --t2:20px; --t3:26px; --t4:32px;
  --sans:"Geist","Segoe UI",system-ui,sans-serif;

  /* MARCA (troque aqui): grafite, laranja escurecido (passa AA com branco), verde-limão, pêssego */
  --grafite:#615D5E; --laranja:#B3540C; --limao:#BAD77B; --pessego:#EBB27B;
  --listra:linear-gradient(90deg,var(--limao) 0 25%,var(--grafite) 25% 50%,var(--laranja) 50% 75%,var(--pessego) 75%);

  /* superfícies: página CINZA MÉDIO, quadro branco, fios visíveis */
  --noite:#221F20; --noite2:#2D2A2B;                 /* menu lateral */
  --agua:#DCDFE5; --agua2:#EEF0F3; --papel:#FFFFFF;  /* fundo, fundo de apoio, quadro */
  --linha:#D0D4DB; --linha2:#B4BAC4;                 /* fio fino, fio de borda (2 px) */
  --tinta:#16171B; --tinta2:#4A4F59; --tinta3:#575D69; /* texto: nunca mais claro que tinta3 (AA) */

  /* SINAL (cor = significado, nunca posição) */
  --verde:#258047; --amarelo:#E9A21A; --vermelho:#C4344A;
  --verde-t:#1D7442; --amarelo-t:#8A5B00; --vermelho-t:#B42733;   /* versão para TEXTO */
  --azul:#2A5CB7; --azul-t:#2A5CB7; --roxo:#7C4DC9; --roxo-t:#6A3DB5;

  /* PALETA DE ÁREAS: dê uma a cada área do menu do seu app; tudo o que abre dela herda a cor (--cor) */
  --c-laranja:#B3540C; --c-vermelho:#D6363F; --c-verde:#258047; --c-roxo:#7C4DC9; --c-petroleo:#0E7490;
  --c-azul:#2A5CB7; --c-ouro:#9A6A09; --c-turquesa:#16877A; --c-coral:#E0603F;
  --c-magenta:#C93F84; --c-aco:#3A6B8C; --c-ardosia:#5B6B7A;

  /* calor da urgência (hoje → em 3 dias) */
  --q0:#C81E1E; --q1:#E8590C; --q2:#F08C00; --q3:#E9B81A;

  --sombra:0 1px 2px rgba(22,23,27,.06),0 1px 3px rgba(22,23,27,.04);
  --sombra-alta:0 14px 36px -12px rgba(22,23,27,.28);
  --anel:0 0 0 3px color-mix(in srgb,var(--laranja) 25%,transparent);
  --cor:var(--grafite);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --agua:#111012; --agua2:#1A191B; --papel:#1F1E20;
  --linha:#38353A; --linha2:#4D4A50;
  --tinta:#F2F2F4; --tinta2:#C2C5CC; --tinta3:#A3A7B0;
  --verde:#3FB872; --vermelho:#F0606B;
  --verde-t:#7ED6A0; --amarelo-t:#F2C866; --vermelho-t:#F59CA3; --azul-t:#9DBBF2; --roxo-t:#C9B0F2;
  --sombra:0 1px 2px rgba(0,0,0,.4); --sombra-alta:0 14px 36px -12px rgba(0,0,0,.8);
  color-scheme:dark;
}}
/* tom FORTE da cor do lugar (faixas, cabeçalhos) e tom de TEXTO (no escuro clareia) */
main,section.bloco,nav button,.cartao,dialog{--forte:color-mix(in srgb,var(--cor) 72%,#101012);--forte-t:var(--forte)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) :is(main,section.bloco,nav button,.cartao,dialog){--forte-t:color-mix(in srgb,var(--cor) 55%,#fff)}}
/* REGRA: texto branco só sobre cor com luminância ≤ 0,18; amarelo e âmbar levam texto escuro (#2B1B00/#3D2C00) */

/* ---------- 2. BASE ------------------------------------------------------------------------------ */
*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{margin:0;background:var(--agua);color:var(--tinta);font:400 var(--t0)/1.5 var(--sans);font-variant-numeric:tabular-nums}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
b,strong{font-weight:600}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--laranja);outline-offset:2px}
select,input[type=date],input[type=number],input[type=search],input[type=text]{border:2px solid var(--linha2);background:var(--papel);border-radius:8px;padding:6px 10px;font-size:var(--t-1);color:var(--tinta)}
select:focus,input:focus{outline:0;border-color:var(--laranja);box-shadow:var(--anel)}
.mudo{color:var(--tinta3)}
.num{font-variant-numeric:tabular-nums}

/* ---------- 3. CASCA: menu escuro + conteúdo -------------------------------------------------------- */
#app{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
nav{background:var(--noite);color:#E8E5E4;padding:0 12px 24px;position:sticky;top:0;height:100vh;overflow:auto}
nav::before{content:"";display:block;height:4px;margin:0 -12px 18px;background:var(--listra)}   /* listra da marca no topo */
nav .menu-grupo{margin:0 0 12px;padding:0 6px 6px;border-radius:12px;border:1px solid #3A3637;background:#262324}
nav .menu-grupo>h2{margin:0 -6px 6px;padding:8px 12px;border-radius:11px 11px 0 0;font:800 var(--t-2)/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#fff;background:#4A4547}
nav button{position:relative;display:grid;grid-template-columns:32px 1fr;column-gap:12px;align-items:center;width:100%;text-align:left;border:0;background:none;border-radius:10px;padding:6px 8px;margin-bottom:2px;color:#CFCACA}
nav button svg{width:32px;height:32px;padding:7px;border-radius:9px;background:var(--cor);color:#fff;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
nav button b{font-size:var(--t0);font-weight:500;color:#F2EFEE}
nav button:hover,nav button[aria-current="page"]{background:var(--noite2)}
nav button[aria-current="page"]::before{content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:4px;border-radius:0 4px 4px 0;background:var(--cor)}
nav button[aria-current="page"] b{color:#fff;font-weight:600}
nav .quem-sou{--cg:var(--verde);display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;margin:0 4px 14px;padding:12px;border-radius:12px;background:color-mix(in srgb,var(--cg) 22%,#1d1b1b);border:1px solid color-mix(in srgb,var(--cg) 55%,transparent)}
nav .avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--cg);color:#fff;font:700 16px/1 var(--sans)}
nav .quem-sou b{color:#fff}
nav .cargo{justify-self:start;padding:2px 8px;border-radius:6px;background:var(--cg);color:#fff;font-size:var(--t-2);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
main{min-width:0}
#conteudo{padding:24px 28px 48px;display:grid;gap:20px;max-width:1440px;container-type:inline-size;grid-template-columns:minmax(0,1fr)}

/* barra do topo: todo controle com 38 px, raio 10, borda 2 px */
#topo{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--papel) 96%,transparent);backdrop-filter:blur(10px);border-bottom:2px solid var(--linha2);box-shadow:0 2px 10px -6px rgba(22,23,27,.25);padding:10px 28px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px}
.tp-ctl{box-sizing:border-box;height:38px;display:inline-flex;align-items:center;gap:8px;padding:0 12px;border:2px solid var(--linha2);border-radius:10px;background:var(--papel);color:var(--tinta);font:600 var(--t-1)/1 var(--sans);letter-spacing:.02em;white-space:nowrap}
button.tp-ctl:hover{border-color:var(--azul)}
.tp-ctl.pronto{background:var(--azul);border-color:var(--azul);color:#fff;font-weight:800;letter-spacing:.05em}   /* a ação do topo é azul firme */
.tp-vivo{display:inline-flex;align-items:center;gap:9px;font:800 var(--t-2)/1 var(--sans);letter-spacing:.08em;color:var(--verde-t)}
.tp-ponto{width:10px;height:10px;border-radius:50%;background:#22B35E;animation:vivo 2s ease-out infinite}
@keyframes vivo{0%{box-shadow:0 0 0 0 rgba(34,179,94,.55)}70%,100%{box-shadow:0 0 0 8px rgba(34,179,94,0)}}

/* ---------- 4. FAIXA DE TÍTULO e BLOCO ------------------------------------------------------------- */
h1.titulo{margin:0;padding:22px 26px;border-radius:14px;font:700 var(--t3)/1.15 var(--sans);letter-spacing:-.02em;color:#fff;
  background:linear-gradient(120deg,var(--forte),color-mix(in srgb,var(--forte) 72%,#000));box-shadow:0 10px 28px -16px var(--forte)}
h1.titulo small{display:block;font:400 var(--t0)/1.45 var(--sans);letter-spacing:0;color:rgba(255,255,255,.86);margin-top:5px}
section.bloco{background:var(--papel);border:2px solid var(--linha2);box-shadow:0 2px 0 var(--linha2);border-radius:12px;padding:20px 22px;min-width:0}
section.bloco>h2{margin:-20px -22px 16px;padding:11px 22px;border-radius:10px 10px 0 0;background:var(--forte);color:#fff;font:700 var(--t1)/1.3 var(--sans)}
section.bloco>h2 small{font:400 var(--t-1) var(--sans);color:rgba(255,255,255,.88);margin-left:10px}
.sub-bloco{margin:18px 0 8px;font-size:var(--t-1);font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--tinta2)}

/* ---------- 5. CARTÕES DE NÚMERO (até 4 por fila, mesma largura; 2 em tela estreita) --------------- */
.cartoes{--n:4;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:14px}
.cartoes:has(>:only-child){--n:1} .cartoes:has(>:nth-child(2):last-child){--n:2} .cartoes:has(>:nth-child(3):last-child){--n:3}
@container (max-width:620px){.cartoes{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cartao{--cor:inherit;position:relative;min-width:0;background:color-mix(in srgb,var(--cor) 7%,var(--papel));border:2px solid var(--linha2);border-top:6px solid var(--cor);
  box-shadow:0 2px 0 var(--linha2);border-radius:12px;padding:14px 18px 16px;display:grid;gap:4px;align-content:start}
.cartao .rot{font-size:var(--t-1);line-height:1.35;min-height:2.7em;color:var(--forte-t);font-weight:600;display:flex;justify-content:space-between;gap:6px}  /* 2 linhas reservadas: todos os números na mesma altura */
.cartao .val{font:800 var(--fs-val,26px)/1.15 var(--sans);letter-spacing:-.02em;white-space:nowrap;overflow:hidden;color:var(--tinta)}
.cartao .leg{font-size:var(--t-2);color:var(--tinta2);line-height:1.45}
.cartao.sobe{--cor:var(--verde)} .cartao.sobe .val{color:var(--verde-t)}
.cartao.desce,.cartao.alerta{--cor:var(--vermelho)} .cartao.desce .val,.cartao.alerta .val{color:var(--vermelho-t)}
.cartao.atencao{--cor:var(--amarelo)} .cartao.atencao .val{color:var(--amarelo-t)}
.cartao.andamento{--cor:var(--azul)} .cartao.andamento .val{color:var(--azul-t)}
.cartao.zero{--cor:var(--linha2);background:var(--papel)} .cartao.zero .val{color:var(--tinta3)}   /* zero não chama atenção */
.clicavel{cursor:pointer;transition:transform .12s,box-shadow .12s}
.clicavel:hover{transform:translateY(-2px);box-shadow:0 10px 22px -12px var(--tinta)}
.ver-mais{margin-top:8px;font-size:var(--t-2);font-weight:800;letter-spacing:.04em;opacity:.8}

/* "i" do cartão: a regra da conta mora aqui, não no rótulo */
details.i{position:relative}
details.i summary{list-style:none;cursor:pointer;width:18px;height:18px;border-radius:50%;border:1px solid var(--linha2);display:grid;place-items:center;font:600 11px var(--sans);color:var(--tinta3)}
details.i summary::-webkit-details-marker{display:none}
details.i div{position:absolute;right:0;top:24px;z-index:9;width:min(340px,80vw);background:var(--papel);border:1px solid var(--linha2);box-shadow:var(--sombra-alta);border-radius:10px;padding:14px 16px;font-weight:400;line-height:1.5;color:var(--tinta2);font-size:var(--t-1)}
h1.titulo details.i summary,section.bloco>h2 details.i summary{border-color:rgba(255,255,255,.7);color:#fff}

/* manchete: a frase do dia com número gigante */
.manchete{display:flex;align-items:center;gap:18px;padding:14px 18px;border-radius:12px;border:2px solid var(--amarelo);background:color-mix(in srgb,var(--amarelo) 12%,var(--papel))}
.manchete.sobe{border-color:var(--verde);background:color-mix(in srgb,var(--verde) 12%,var(--papel))}
.manchete.desce{border-color:var(--vermelho);background:color-mix(in srgb,var(--vermelho) 10%,var(--papel))}
.man-val{font-size:2.4rem;font-weight:800;white-space:nowrap;color:var(--amarelo-t)}
.manchete.sobe .man-val{color:var(--verde-t)} .manchete.desce .man-val{color:var(--vermelho-t)}

/* ---------- 6. PLACAR (bloco de cor cheia que AFUNDA ao clicar) ≠ MESA (coluna de trabalho) ---------- */
.placar{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:10px}
@container (max-width:620px){.placar{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pl-box{all:unset;box-sizing:border-box;cursor:pointer;display:grid;gap:2px;align-content:start;padding:14px 16px;border-radius:12px;
  --kf:#BFE8C9;--kt:#123B1F;background:var(--kf);color:var(--kt);box-shadow:0 4px 0 color-mix(in srgb,var(--kf) 70%,#000)}
.pl-box:hover{filter:brightness(1.08)}
.pl-box:active{transform:translateY(2px);box-shadow:0 2px 0 color-mix(in srgb,var(--kf) 70%,#000)}   /* botão de fliperama */
.pl-box:focus-visible{outline:2px solid var(--laranja);outline-offset:2px}
.pl-box>span{font-size:var(--t-1);font-weight:600}
.pl-box>b{font-size:clamp(20px,2.2vw,34px);font-weight:800;line-height:1.1;white-space:nowrap}
.pl-box>small{font-size:var(--t-2)}
.pl-amarelo{--kf:#F2C230;--kt:#3A2C00} .pl-laranja{--kf:#FFC48C;--kt:#4A2300} .pl-vermelho{--kf:#C4344A;--kt:#fff} .pl-marrom{--kf:#D8B994;--kt:#3B2A14}
.mesa{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:12px;align-items:start}
@container (max-width:620px){.mesa{grid-template-columns:minmax(0,1fr)}}
.mesa-col{--kf:#BFE8C9;--kt:#123B1F;border-radius:12px;background:var(--agua);border:2px solid color-mix(in srgb,var(--kf) 45%,var(--linha2));min-width:0}
.mesa-cab{display:flex;justify-content:space-between;padding:10px 12px;background:var(--kf);color:var(--kt);border-radius:10px 10px 0 0;font-weight:700}
.mesa-corpo{display:grid;gap:8px;padding:10px}
.mesa-card{background:var(--papel);border:2px solid var(--linha2);box-shadow:inset 5px 0 0 var(--linha2);border-radius:10px;padding:10px 12px 10px 16px}
.mesa-card.at{box-shadow:inset 6px 0 0 var(--amarelo)} .mesa-card.urg{box-shadow:inset 6px 0 0 var(--vermelho)}

/* ---------- 7. SEMÁFORO VIVO (quanto mais urgente, mais rápido pulsa) -------------------------------- */
.lampada{flex:none;display:inline-block;width:11px;height:11px;border-radius:50%;background:var(--l,var(--verde));
  box-shadow:0 0 0 4px color-mix(in srgb,var(--l,var(--verde)) 22%,transparent);animation:acesa 3.6s ease-in-out infinite}
@keyframes acesa{50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--l,var(--verde)) 12%,transparent)}}
.at .lampada,.lampada.at{--l:var(--amarelo);animation-duration:2.4s}
.urg .lampada,.lampada.urg{--l:var(--vermelho);animation-duration:1.5s}
.luz{--l:var(--verde);display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center;text-align:left;border:2px solid var(--linha2);border-left:7px solid var(--l);border-radius:12px;padding:16px 18px;background:var(--papel);color:var(--tinta)}
.luz.at{--l:var(--amarelo)} .luz.urg{--l:var(--vermelho)}
.luz:hover{background:color-mix(in srgb,var(--l) 6%,var(--papel))}
.luz .lampada{grid-row:span 3;align-self:start;margin-top:6px}
.luz .val{font:800 28px/1.2 var(--sans);letter-spacing:-.02em}
.luz .estado{justify-self:start;padding:2px 10px;border-radius:6px;background:var(--l);color:#fff;font-weight:600;font-size:var(--t-1)}
.luz.at .estado{color:#3D2C00}

/* ---------- 8. SELOS, CHIPS, SEGMENTADO, GUIAS, BOTÕES --------------------------------------------- */
.selo{--l:var(--tinta3);--lt:var(--tinta2);display:inline-block;white-space:nowrap;font-size:var(--t-2);font-weight:700;padding:3px 9px;border-radius:6px;
  color:var(--lt);background:color-mix(in srgb,var(--l) 12%,var(--papel));border:1px solid color-mix(in srgb,var(--l) 35%,transparent)}
.selo::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--l);margin-right:7px;vertical-align:1px}
.selo.sim{--l:var(--verde);--lt:var(--verde-t)} .selo.at{--l:var(--amarelo);--lt:var(--amarelo-t)} .selo.urg{--l:var(--vermelho);--lt:var(--vermelho-t)} .selo.azul{--l:var(--azul);--lt:var(--azul-t)}
.selo.urg::before{animation:pisca 1.5s ease-in-out infinite}
.selo.cheio{background:var(--l);color:#fff;border-color:transparent} .selo.cheio::before{display:none}   /* etapa: fundo cheio */
@keyframes pisca{50%{opacity:.3}}
.pilula{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;border:2px solid var(--vc,var(--azul));background:var(--papel);color:var(--tinta);font-weight:800;font-size:var(--t-1);letter-spacing:.03em}
.pilula b{min-width:22px;padding:1px 7px;border-radius:999px;background:var(--vc,var(--azul));color:#fff;text-align:center}
.pilula[aria-pressed="true"]{background:var(--vc,var(--azul));color:#fff} .pilula[aria-pressed="true"] b{background:#fff;color:var(--vc,var(--azul))}
.chip{border:2px solid var(--linha2);background:var(--papel);border-radius:8px;padding:6px 12px;font-size:var(--t-1);font-weight:600;color:var(--tinta2)}
.chip:hover{border-color:var(--forte);color:var(--forte-t)}
.chip[aria-pressed="true"]{background:var(--forte);color:#fff;border-color:var(--forte)}
.seg{display:inline-flex;flex-wrap:wrap;border:2px solid var(--linha2);border-radius:9px;background:var(--agua2);padding:3px;gap:2px}
.seg button{border:0;background:none;border-radius:7px;padding:6px 14px;font-weight:600;font-size:var(--t-1);color:var(--tinta2)}
.seg button[aria-pressed="true"]{background:var(--forte);color:#fff}
.guias{display:flex;flex-wrap:wrap;gap:4px;padding:6px;border-radius:12px;border:2px solid var(--linha2);background:color-mix(in srgb,var(--cor) 7%,var(--papel))}
.guias button{display:inline-flex;align-items:center;gap:8px;border:0;border-bottom:4px solid transparent;border-radius:8px 8px 4px 4px;background:none;padding:9px 18px 7px;font-weight:600;color:var(--tinta2)}
.guias button:hover{background:color-mix(in srgb,var(--cor) 12%,var(--papel));color:var(--tinta)}
.guias button[aria-selected="true"]{font-weight:800;color:var(--forte-t);border-bottom-color:var(--cor);background:var(--papel)}
.guia-n{min-width:22px;padding:1px 7px;border-radius:999px;background:var(--q0);color:#fff;font-size:var(--t-2);font-weight:800;text-align:center}
.botao{padding:12px 20px;border:0;border-radius:10px;background:var(--laranja);color:#fff;font-weight:600;font-size:var(--t0);box-shadow:0 6px 16px -8px var(--laranja)}
.botao:hover{background:color-mix(in srgb,var(--laranja) 88%,#000)}
.botao:disabled{opacity:.6;cursor:wait}
.bt-acao{padding:7px 12px;border:0;border-radius:8px;background:var(--vc,var(--azul));color:#fff;font-weight:800;font-size:var(--t-2);letter-spacing:.03em;white-space:nowrap}
.bt-acao:hover{filter:brightness(1.15)}
.bt-mais{justify-self:center;border:2px solid var(--q1);border-radius:10px;background:none;color:var(--q1);font-weight:800;padding:9px 18px}
.bt-mais:hover{background:var(--q1);color:#fff}

/* ---------- 9. TABELA: cabeçalho cheio na cor do assunto, fios visíveis, listra, linha acesa -------- */
.tb-caixa{overflow:auto;max-height:560px;border:2px solid var(--linha2);border-radius:10px}
table{border-collapse:collapse;width:100%;font-size:var(--t-1)}
th,td{padding:10px 14px;border-bottom:1px solid var(--linha);text-align:left}
th{position:sticky;top:0;background:var(--forte);color:#fff;font-weight:600;font-size:var(--t-2);cursor:pointer;user-select:none}
th[aria-sort]{box-shadow:inset 0 -3px 0 var(--limao)}
th[aria-sort="ascending"]::after{content:" ↑"} th[aria-sort="descending"]::after{content:" ↓"}
td.n,th.n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
tbody tr:nth-child(even)>td{background:color-mix(in srgb,var(--cor) 5%,var(--agua2))}
tbody tr:hover>td{background:color-mix(in srgb,var(--cor) 14%,var(--papel))}
tr.mae>td{background:color-mix(in srgb,var(--cor) 16%,var(--papel))!important;font-weight:800}   /* linha-mãe distinta das filhas */
tr.filha>td:first-child{padding-left:30px;color:var(--tinta2)}

/* ---------- 10. CARTÃO DE AÇÃO (verbo em selo, QUEM, valor em jogo, motivo, botão) ----------------- */
.acoes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@container (max-width:820px){.acoes{grid-template-columns:minmax(0,1fr)}}
.acao{--vc:var(--azul);display:grid;gap:6px;padding:12px 14px;border:2px solid var(--linha2);border-left:6px solid var(--vc);border-radius:10px;background:var(--papel)}
.acao.urg{--vc:#B42733} .acao.roxo{--vc:#6A3DB5}
.acao-l1{display:flex;align-items:flex-start;gap:10px}
.acao-verbo{flex:none;padding:3px 9px;border-radius:6px;background:var(--vc);color:#fff;font-size:var(--t-2);font-weight:800;letter-spacing:.05em}
.acao-quem{flex:1;min-width:0;font-weight:800;line-height:1.25}
.acao-valor{display:grid;justify-items:end;line-height:1.1} .acao-valor small{font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--tinta3)} .acao-valor b{font-size:var(--t1);font-weight:800}
.acao-motivo{margin:0;font-size:var(--t-1);font-weight:600;color:var(--tinta2)}
.acao-pe{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;font-size:var(--t-2);color:var(--tinta3);font-weight:600}

/* ---------- 11. CARTÃO DE PRAZO: cor = calor da urgência, foguinho animado ------------------------- */
.prazos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:1180px){.prazos{grid-template-columns:repeat(2,minmax(0,1fr))}}
.prazo{--q:var(--q0);--qt:#fff;--qf:18%;min-width:0;display:grid;grid-template-rows:auto auto auto 1fr;gap:6px;padding:12px 14px 14px;
  border:1px solid color-mix(in srgb,var(--q) 45%,var(--linha2));border-top:6px solid var(--q);border-radius:12px;background:color-mix(in srgb,var(--q) var(--qf),var(--papel))}
.prazo.q1{--q:var(--q1);--qf:13%} .prazo.q2{--q:var(--q2);--qt:#2B1B00;--qf:9%} .prazo.q3{--q:var(--q3);--qt:#2B1B00;--qf:5%}
.pz-topo{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pz-selo{padding:3px 10px;border-radius:999px;font-size:var(--t-2);font-weight:800;letter-spacing:.03em;color:var(--qt);background:var(--q)}
.pz-nome{font-weight:800;font-size:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pz-valor{align-self:end;padding-top:8px;border-top:1px dashed color-mix(in srgb,var(--q) 40%,var(--linha2))}
.pz-valor b{font:800 24px/1.05 var(--sans)}
.pz-antes{color:var(--tinta3);text-decoration:line-through;text-decoration-thickness:2px;font-weight:600;margin-right:6px}
.fogo{display:inline-block;transform-origin:50% 90%;animation:fogo .7s ease-in-out infinite alternate}
@keyframes fogo{from{transform:scale(1) rotate(-5deg);filter:drop-shadow(0 0 2px #FFB000)}to{transform:scale(1.2) rotate(5deg);filter:drop-shadow(0 0 9px #FF3D00)}}

/* ---------- 12. CARTÃO DE SAÚDE (saúde: ruim/atenção/bom/neutro) e barra de proporção --------------- */
.saude{--s:var(--tinta3);display:grid;gap:8px;padding:12px 14px 14px;border-radius:12px;cursor:pointer;color:var(--tinta);text-align:left;
  border:1px solid color-mix(in srgb,var(--s) 45%,var(--linha2));border-top:5px solid var(--s);background:color-mix(in srgb,var(--s) 8%,var(--papel));transition:transform .12s,box-shadow .12s}
.saude.ruim{--s:var(--vermelho)} .saude.atencao{--s:var(--amarelo)} .saude.bom{--s:var(--verde)}
.saude:hover{transform:translateY(-2px);box-shadow:0 8px 20px color-mix(in srgb,var(--s) 28%,transparent)}
.saude-cod{font:800 var(--t1)/1 ui-monospace,Consolas,monospace;letter-spacing:.04em;padding:3px 8px;border-radius:6px;background:var(--tinta);color:var(--papel)}
.saude-num b{font:800 28px/1 var(--sans);color:var(--s)} .saude.atencao .saude-num b{color:var(--amarelo-t)}
.barra{display:flex;height:10px;border-radius:5px;overflow:hidden;background:var(--linha)}
.barra i{display:block} .barra .r{background:var(--vermelho)} .barra .a{background:var(--amarelo)} .barra .v{background:var(--verde)}
.legenda{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:var(--t-2);font-weight:800;letter-spacing:.04em;color:var(--tinta2)}
.legenda span{display:inline-flex;align-items:center;gap:6px} .legenda i{width:12px;height:12px;border-radius:3px;background:var(--q)}

/* ---------- 13. JANELA (dialog): cabeçalho cheio na cor da tela que a abriu ------------------------ */
dialog{--cor:var(--azul);padding:0;border:0;border-radius:14px;width:min(1000px,calc(100vw - 32px));background:var(--papel);color:var(--tinta);box-shadow:var(--sombra-alta)}
dialog::backdrop{background:rgba(22,23,27,.55)}
.jan-topo{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;background:var(--forte);color:#fff}
.jan-topo b{font-size:var(--t3);letter-spacing:-.02em} .jan-topo small{opacity:.85;font-size:var(--t-1);display:block}
.jan-x{width:40px;height:40px;border:0;border-radius:10px;background:rgba(255,255,255,.2);color:#fff;font-size:20px}
.jan-corpo{padding:18px 20px;display:grid;gap:14px}
html:has(dialog[open]){overflow:hidden}

/* ---------- 14. DICA flutuante (data-ajuda) ----------------------------------------------------------- */
#dica{position:fixed;z-index:999;max-width:340px;padding:10px 14px;border-radius:10px;background:var(--noite);color:#fff;font-size:var(--t-1);line-height:1.45;pointer-events:none;white-space:pre-line;box-shadow:var(--sombra-alta)}
[data-ajuda]{cursor:help}

/* ---------- 15. ENTRAR (login) ----------------------------------------------------------------------- */
#entrar{min-height:100vh;display:grid;place-items:center;padding:20px;background:linear-gradient(160deg,var(--noite) 0 38%,var(--agua) 38%)}
#entrar form{position:relative;overflow:hidden;background:var(--papel);border:1px solid var(--linha);box-shadow:var(--sombra-alta);border-radius:14px;padding:40px 36px 30px;width:min(400px,100%);display:grid;gap:14px}
#entrar form::before{content:"";position:absolute;inset:0 0 auto;height:5px;background:var(--listra)}

/* ---------- 17. ORGANIZAÇÃO: menu, página, listas, formulário, vazio --------------------------------- */
/* menu: contador no item e seletor de contexto (filial, empresa, projeto) logo abaixo de quem está logado */
nav button .n{justify-self:end;grid-column:3;min-width:22px;padding:1px 7px;border-radius:999px;background:var(--cor);color:#fff;font-size:var(--t-2);font-weight:800;text-align:center}
nav button:has(.n){grid-template-columns:32px 1fr auto}
nav .contexto{display:grid;gap:5px;margin:-4px 4px 12px;padding:10px 12px;border-radius:12px;background:#2D2A2B;border:1px solid #4A4547}
nav .contexto span{font-size:var(--t-2);font-weight:700;color:var(--pessego);text-transform:uppercase;letter-spacing:.05em}
nav .contexto select{width:100%;background:#1D1B1C;color:#fff;border:2px solid #6B6567;font-weight:700;font-size:var(--t0);padding:7px 10px}
/* página: duas colunas que viram uma */
.grade2{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:20px}
/* LISTA de linhas: estado na borda esquerda, lâmpada, nome, valor e comparação alinhados */
.lista{display:grid;gap:6px}
.linha-item{--l:var(--verde);display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:14px;align-items:center;text-align:left;width:100%;
  border:2px solid var(--linha2);border-left:6px solid var(--l);border-radius:10px;padding:10px 14px;background:var(--papel);color:var(--tinta)}
.linha-item.at{--l:var(--amarelo)} .linha-item.urg{--l:var(--vermelho)} .linha-item.neutro{--l:var(--linha2)}
.linha-item:hover{background:color-mix(in srgb,var(--l) 6%,var(--papel))}
.linha-item .quem{font-weight:700;min-width:0;overflow-wrap:anywhere} .linha-item .quem small{margin-left:8px;padding:1px 7px;border-radius:5px;background:var(--agua);font-weight:500;color:var(--tinta2)}
.linha-item .vl{font-weight:800;font-size:var(--t1);white-space:nowrap}
.linha-item .cmp{display:grid;justify-items:end;gap:2px;min-width:130px} .linha-item .cmp small{color:var(--tinta3);font-size:var(--t-2)}
@container (max-width:620px){.linha-item{grid-template-columns:auto 1fr} .linha-item .vl,.linha-item .cmp{grid-column:2;justify-items:start}}
/* ÁRVORE: grupo que abre (details) com filhos nas mesmas colunas */
.arvore{display:grid;gap:6px}
.ramo{--l:var(--verde);background:var(--papel);border:2px solid var(--linha2);border-left:6px solid var(--l);border-radius:10px}
.ramo.at{--l:var(--amarelo)} .ramo.urg{--l:var(--vermelho)}
.ramo>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 14px;font-weight:700}
.ramo>summary::-webkit-details-marker{display:none}
.ramo>summary::before{content:"▸";color:var(--tinta3)} .ramo[open]>summary::before{content:"▾"}
.ramo>summary:hover{background:var(--agua2);border-radius:8px}
.ramo .folhas{border-top:1px solid var(--linha);background:var(--agua2);border-radius:0 0 8px 8px}
.folha{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:7px 14px 7px 40px;border-top:1px solid var(--linha);font-size:var(--t-1);color:var(--tinta2)}
.folha:first-child{border-top:0} .folha b{color:var(--tinta)}
/* FORMULÁRIO: rótulo em cima, campo largo, ajuda e erro embaixo, ações no pé */
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px 18px;align-items:start}
.campo{display:grid;gap:6px;font-size:var(--t-1);font-weight:600;color:var(--tinta2)}
.campo.largo{grid-column:1/-1}
.campo input,.campo select,.campo textarea{width:100%;padding:10px 12px;border:2px solid var(--linha2);border-radius:10px;background:var(--papel);font:400 var(--t0) var(--sans);color:var(--tinta)}
.campo :is(input,select,textarea):focus{outline:0;border-color:var(--laranja);box-shadow:var(--anel)}
.campo .obr{color:var(--vermelho-t)}
.campo small{font-weight:500;color:var(--tinta3)}
.campo.erro :is(input,select,textarea){border-color:var(--vermelho)} .campo.erro small{color:var(--vermelho-t);font-weight:700}
.form-pe{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;padding-top:14px;border-top:2px solid var(--linha)}
.bt-sec{padding:12px 20px;border:2px solid var(--linha2);border-radius:10px;background:var(--papel);color:var(--tinta);font-weight:700}
.bt-sec:hover{border-color:var(--tinta2)}
/* VAZIO: diz o que aconteceu e o que fazer, sem desenho */
.vazio{display:grid;justify-items:center;gap:6px;padding:28px 16px;border:2px dashed var(--linha2);border-radius:12px;text-align:center;color:var(--tinta2)}
.vazio b{font-size:var(--t1);color:var(--tinta)}

/* ---------- 16. CELULAR: TUDO o que o PC tem, menu em gaveta, alvos de 44 px ------------------------ */
@media (max-width:900px){
  #app{grid-template-columns:1fr}
  nav{position:fixed;inset:0 auto 0 0;width:min(300px,86vw);z-index:60;transform:translateX(-100%);transition:transform .2s}
  html.menu-aberto nav{transform:none}
  #conteudo{padding:16px} #topo{padding:10px 16px}
  button,.chip,.seg button,.guias button{min-height:44px}
  .guias{flex-wrap:nowrap;overflow-x:auto}
  dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0}
  .manchete{flex-direction:column;align-items:flex-start;gap:6px} .man-val{font-size:1.9rem}
}
@media (prefers-reduced-motion:reduce){.lampada,.selo::before,.fogo,.tp-ponto{animation:none!important}}