:root{
  --verde:#0F4C2A; --verde-claro:#1a6b3d; --verde-fraco:#e8f3ec;
  --tinta:#16211b; --tinta-fraca:#5c6b62; --linha:#dde5e0; --fundo:#f6f8f7; --papel:#fff;
  --vermelho:#b42318; --vermelho-fraco:#fee4e2; --ambar:#b54708; --ambar-fraco:#fef0c7;
  --azul:#175cd3; --azul-fraco:#e0eaff; --cinza-fraco:#eef1ef;
  --raio:10px; --sombra:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.1);
}
*{box-sizing:border-box}
/* o atributo hidden precisa vencer qualquer display de autor (.quadro usa flex) */
[hidden]{display:none !important}
body{margin:0;background:var(--fundo);color:var(--tinta);
  font:14px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
a{color:var(--azul);text-decoration:none} a:hover{text-decoration:underline}
h1,h2,h3{margin:0 0 .4em;line-height:1.25} h1{font-size:20px} h2{font-size:16px} h3{font-size:14px}

/* topo */
header.topo{background:var(--verde);color:#fff;padding:0 18px;display:flex;align-items:center;
  gap:22px;height:52px;position:sticky;top:0;z-index:40}
header.topo .marca{font-weight:700;letter-spacing:.2px;font-size:15px}
header.topo nav{display:flex;gap:2px;flex:1}
header.topo nav a{color:#cfe6d8;padding:6px 11px;border-radius:7px;font-weight:500}
header.topo nav a:hover{background:rgba(255,255,255,.12);color:#fff;text-decoration:none}
header.topo nav a.on{background:rgba(255,255,255,.18);color:#fff}
header.topo .eu{font-size:12px;color:#cfe6d8;text-align:right;line-height:1.3}
.faixa-teste{background:var(--ambar);color:#fff;text-align:center;padding:4px;font-size:12px;font-weight:600}

main{max-width:1500px;margin:0 auto;padding:18px}
.cartao{background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio);
  box-shadow:var(--sombra);padding:16px;margin-bottom:14px}
.linha{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.cresce{flex:1;min-width:0}

/* kpis */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:14px}
.kpi{background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio);
  padding:12px 14px;box-shadow:var(--sombra)}
.kpi .r{font-size:11px;color:var(--tinta-fraca);text-transform:uppercase;letter-spacing:.4px;
  font-weight:600;margin-bottom:3px}
.kpi .v{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
.kpi .s{font-size:11px;color:var(--tinta-fraca);margin-top:2px}
.kpi.destaque{border-color:var(--verde);background:var(--verde-fraco)}
.kpi.alerta{border-color:var(--vermelho);background:var(--vermelho-fraco)}
.kpi.alerta .v{color:var(--vermelho)}

/* formulário */
label{display:block;font-size:12px;font-weight:600;color:var(--tinta-fraca);margin-bottom:4px}
input,select,textarea{font:inherit;color:inherit;background:var(--papel);
  border:1px solid var(--linha);border-radius:8px;padding:7px 9px;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--verde-claro);outline-offset:-1px;
  border-color:var(--verde-claro)}
textarea{resize:vertical;min-height:64px}
.campo{min-width:150px}
button{font:inherit;font-weight:600;cursor:pointer;border-radius:8px;padding:8px 14px;
  border:1px solid var(--linha);background:var(--papel);color:var(--tinta)}
button:hover{background:var(--cinza-fraco)}
button.primario{background:var(--verde);border-color:var(--verde);color:#fff}
button.primario:hover{background:var(--verde-claro)}
button.perigo{color:var(--vermelho);border-color:#f3c1bc}
button.pequeno{padding:4px 9px;font-size:12px}
button:disabled{opacity:.5;cursor:not-allowed}

/* tabela */
table{border-collapse:collapse;width:100%;font-size:13px}
th{background:var(--verde);color:#fff;text-align:left;padding:8px 10px;font-weight:600;
  font-size:12px;white-space:nowrap}
/* gruda só quem rola junto com a página */
.rolagem.pagina{max-height:calc(100vh - 300px);overflow:auto}
.rolagem.pagina th{position:sticky;top:0;z-index:5}
.rolagem.caixa{max-height:320px;overflow-y:auto}
.rolagem.caixa th{position:sticky;top:0;z-index:5}
td{padding:7px 10px;border-bottom:1px solid var(--linha);vertical-align:top}
tbody tr:hover{background:var(--verde-fraco)}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.rolagem{overflow-x:auto;border:1px solid var(--linha);border-radius:var(--raio);background:var(--papel)}

/* etiquetas de etapa */
.et{display:inline-block;padding:2px 8px;border-radius:99px;font-size:11px;font-weight:700;
  white-space:nowrap;border:1px solid transparent}
.et.aberto{background:var(--azul-fraco);color:var(--azul);border-color:#b7cdfb}
.et.ganho{background:var(--verde-fraco);color:var(--verde);border-color:#b9dcc7}
.et.perdido{background:var(--vermelho-fraco);color:var(--vermelho);border-color:#fbc9c4}
.et.descarte{background:var(--cinza-fraco);color:var(--tinta-fraca);border-color:var(--linha)}

.cod{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-weight:700;
  background:var(--verde-fraco);color:var(--verde);padding:2px 7px;border-radius:6px;
  border:1px solid #b9dcc7;white-space:nowrap}
.cod.grande{font-size:22px;padding:8px 14px;display:inline-block}

.vazio{text-align:center;padding:48px 20px;color:var(--tinta-fraca)}
.vazio .ico{display:block;margin:0 auto 10px;width:38px;height:38px;opacity:.45}
.vazio .ico svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.5}
.ajuda{font-size:12px;color:var(--tinta-fraca);margin-top:4px}
.erro{background:var(--vermelho-fraco);color:var(--vermelho);border:1px solid #fbc9c4;
  padding:9px 12px;border-radius:8px;margin-bottom:12px;font-weight:500}
.ok{background:var(--verde-fraco);color:var(--verde);border:1px solid #b9dcc7;
  padding:9px 12px;border-radius:8px;margin-bottom:12px;font-weight:500}

/* modal */
.fundo-modal{position:fixed;inset:0;background:rgba(16,33,27,.5);display:flex;
  align-items:center;justify-content:center;z-index:100;padding:20px}
.modal{background:var(--papel);border-radius:12px;max-width:640px;width:100%;
  max-height:88vh;overflow:auto;padding:20px;box-shadow:0 20px 40px rgba(16,24,40,.2)}

/* grade de itens */
table.grade{font-size:13px}
table.grade th{position:static}
table.grade td{padding:2px;border:1px solid var(--linha)}
table.grade input,table.grade select{border:0;border-radius:0;padding:6px 7px;
  background:transparent;width:100%;min-width:0}
table.grade td{max-width:0}   /* deixa a largura do <th> mandar */
table.grade input:focus{outline:2px solid var(--verde-claro);outline-offset:-2px}
table.grade tr:hover{background:transparent}
.dias{font-weight:700;font-variant-numeric:tabular-nums}
.dias.vence{color:var(--vermelho)} .dias.perto{color:var(--ambar)}

/* data em dd/mm/aaaa: o <input type=date> mostra no formato do NAVEGADOR, e
   máquina em en-US leria 12/05 como 5 de dezembro. Campo de texto com máscara
   é igual em qualquer máquina. */
input.data{font-variant-numeric:tabular-nums}
input.data.ruim{border-color:var(--vermelho);background:var(--vermelho-fraco)}
.semvalor{color:var(--tinta-fraca);font-weight:500}