/* Paleta Sentinel: navy #16213E, gold #E99B4D, cobre #C97A3D (hover #B5692F) */
:root{
  --navy:#16213E; --navy-claro:#22315a; --gold:#E99B4D; --cobre:#C97A3D; --cobre-hover:#B5692F;
  --fundo:#f4f6fb; --card:#ffffff; --borda:#e2e6f0; --texto:#1c2333; --suave:#6b7488;
  --vermelho:#c0392b; --ambar:#d68910; --verde:#1e8449;
}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",system-ui,sans-serif;background:var(--fundo);color:var(--texto)}

.topo{display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:var(--navy);color:#fff;padding:14px 24px;box-shadow:0 2px 10px rgba(0,0,0,.15)}
.marca{display:flex;align-items:center;gap:14px}
.logo{width:40px;height:40px;border-radius:10px;background:var(--gold);color:var(--navy);
  display:grid;place-items:center;font-weight:700;font-size:20px}
.topo h1{margin:0;font-size:19px}
.topo p{margin:2px 0 0;font-size:12.5px;color:#c7cee0}
.topo-direita{display:flex;align-items:center;gap:16px}
/* fica sobre o navy do cabecalho: precisa de contraste suficiente para ser lido
   de longe, que e como um monitor de parede e usado */
.carimbo-topo{font-size:12.5px;color:#c7cee0;white-space:nowrap}
.voltar{color:var(--gold);text-decoration:none;font-size:14px}
.voltar:hover{text-decoration:underline}

main{max-width:1200px;margin:22px auto;padding:0 20px;display:flex;flex-direction:column;gap:18px}

.aviso{background:#fdecea;border:1px solid #f5b7b1;color:#922b21;padding:12px 16px;border-radius:10px;font-size:14px}
.aviso.ok{background:#eafaf1;border-color:#a9dfbf;color:#1e6b40}

.resumo{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
.bloco{background:var(--card);border:1px solid var(--borda);border-radius:12px;padding:16px;
  box-shadow:0 1px 3px rgba(22,33,62,.06)}
.bloco .n{font-size:30px;font-weight:700;line-height:1.1}
.bloco .r{font-size:12.5px;color:var(--suave);text-transform:uppercase;letter-spacing:.4px;margin-top:4px}
.bloco.d5 .n{color:var(--navy)} .bloco.d3 .n{color:var(--ambar)}
.bloco.hoje .n{color:var(--cobre)} .bloco.atraso .n{color:var(--vermelho)}

.painel{background:var(--card);border:1px solid var(--borda);border-radius:12px;padding:18px;
  box-shadow:0 1px 3px rgba(22,33,62,.06)}
.painel-topo{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.painel h2{margin:0;font-size:16px;color:var(--navy)}
.acoes{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.alternar{font-size:13px;color:var(--suave);display:flex;gap:6px;align-items:center}

.btn{border:1px solid var(--borda);background:#fff;color:var(--navy);padding:7px 13px;border-radius:8px;
  cursor:pointer;font-size:13.5px}
.btn:hover{background:#f0f2f8}
.btn.primario{background:var(--cobre);border-color:var(--cobre);color:#fff}
.btn.primario:hover{background:var(--cobre-hover);border-color:var(--cobre-hover)}
.btn:disabled{opacity:.55;cursor:not-allowed}

table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;color:var(--suave);font-weight:600;font-size:12px;text-transform:uppercase;
  letter-spacing:.3px;padding:8px 10px;border-bottom:2px solid var(--borda);position:sticky;top:0;background:var(--card)}
td{padding:8px 10px;border-bottom:1px solid var(--borda)}
tr:hover td{background:#fafbfe}
.rolavel{max-height:420px;overflow:auto}
.vazio{color:var(--suave);font-size:13.5px;padding:14px 4px}
td.secundaria{color:var(--suave)}
th small{font-weight:400;text-transform:none;letter-spacing:0;opacity:.75}

/* ---------------------------------------------------------------- gráficos
   Paleta validada com o script de acessibilidade da skill de dataviz, contra
   o branco do card (#fff):
   - urgência (5 níveis ORDENADOS): rampa de uma única hue, azul 700→250.
     Escala ordinal, não identidade — mais escuro = mais urgente. Passa nos 4
     checks (monotonia, gap de L >= 0.06, contraste da ponta clara, hue única).
   - entregas (2 séries de IDENTIDADE): slots categóricos 1 e 2 (azul/laranja),
     ΔE 24.7 sob protanopia, bem acima do piso 8. */
.viz{
  --u1:#0d366b; --u2:#1c5cab; --u3:#2a78d6; --u4:#5598e7; --u5:#86b6ef;
  --s1:#2a78d6; --s2:#eb6834;
  --grade:#e1e0d9; --eixo:#c3c2b7; --tinta:#52514e; --tinta-fraca:#898781;
  position:relative;margin-bottom:6px;
}
.viz svg{display:block;width:100%;height:auto;overflow:visible}
.viz .rotulo{font-size:12px;fill:var(--tinta)}
.viz .valor{font-size:12px;fill:var(--tinta);font-variant-numeric:tabular-nums}
.viz .eixo{font-size:11px;fill:var(--tinta-fraca)}
.viz .grade{stroke:var(--grade);stroke-width:1}
.viz .base{stroke:var(--eixo);stroke-width:1}
.viz rect.marca{cursor:default}
.viz rect.marca:hover{opacity:.82}

.legenda{display:flex;flex-wrap:wrap;gap:14px;margin:2px 0 12px;font-size:12px;color:var(--suave)}
.legenda span{display:inline-flex;align-items:center;gap:6px}
.legenda i{width:11px;height:11px;border-radius:3px;display:inline-block}

.dica-viz{position:fixed;z-index:60;background:#16213E;color:#fff;padding:7px 10px;
  border-radius:7px;font-size:12.5px;line-height:1.45;pointer-events:none;opacity:0;
  transition:opacity .1s;box-shadow:0 4px 14px rgba(0,0,0,.22);max-width:280px}
.dica-viz.on{opacity:1}
.dica-viz b{font-weight:600}

/* tabelas de contagem do painel */
.painel-num th.num,.painel-num td.num{text-align:right;white-space:nowrap}
.painel-num th small{font-weight:400;text-transform:none;letter-spacing:0;opacity:.75}
.painel-num td.num{font-variant-numeric:tabular-nums;font-size:14px}
.painel-num td.nome{font-weight:600}
.painel-num tfoot td{border-top:2px solid var(--borda);font-weight:700;background:#fafbfe}
.painel-num .zero{color:#c3c8d4}
/* numero que abre a lista das obrigacoes por tras dele */
.painel-num td.clicavel{cursor:pointer;text-decoration:underline;text-decoration-style:dotted;
  text-underline-offset:3px;text-decoration-color:#b9c0d0}
.painel-num td.clicavel:hover{background:#eef2fb}
#modal-corpo{max-height:70vh}
.painel-num .atraso-velho{color:var(--vermelho);font-weight:700}
.painel-num .atraso-novo{color:#c0662b;font-weight:700}
.painel-num .urgente{color:var(--cobre);font-weight:700}
.carimbo{font-size:12px;color:var(--suave)}

.tag{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11.5px;font-weight:600}
.tag.d5{background:#e8edf9;color:var(--navy)}
.tag.d3{background:#fdf0d9;color:#8a5a08}
.tag.hoje{background:#fbe6d6;color:#8f4a1c}
.tag.atraso{background:#fbe0dd;color:#922b21}
.tag.longe{background:#eef0f4;color:var(--suave)}

input[type=text]{width:100%;padding:6px 9px;border:1px solid var(--borda);border-radius:7px;font-size:13.5px;font-family:inherit}
input[type=text]:focus{outline:2px solid var(--gold);outline-offset:-1px;border-color:var(--gold)}
.dica{font-size:12.5px;color:var(--suave);margin:10px 0 0}
code{background:#eef0f6;padding:1px 5px;border-radius:4px;font-size:12px}
.remover{background:none;border:none;color:var(--vermelho);cursor:pointer;font-size:17px;line-height:1}

.modal{position:fixed;inset:0;background:rgba(22,33,62,.55);display:grid;place-items:center;padding:20px;z-index:50}
.modal-caixa{background:#fff;border-radius:12px;max-width:820px;width:100%;max-height:82vh;display:flex;flex-direction:column}
.modal-topo{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--borda)}
.modal-topo h3{margin:0;font-size:15px;color:var(--navy)}
.fechar{background:none;border:none;font-size:24px;cursor:pointer;color:var(--suave);line-height:1}
#modal-corpo{margin:0;padding:18px;overflow:auto;font-size:12.5px;white-space:pre-wrap;font-family:ui-monospace,Consolas,monospace}

/* Utilitario de esconder - fica por ULTIMO e com !important de proposito.
   Quando era so `.oculto{display:none}` la em cima, o `.modal{display:grid}`
   definido depois vencia por ordem (mesma especificidade) e a janela de previa
   aparecia vazia sobre a tabela desde o carregamento da pagina. */
.oculto{display:none !important}