[hidden] { display: none !important; }
:root {
  --fundo: #f4f5f7;
  --papel: #ffffff;
  --tinta: #1c2430;
  --suave: #5d6878;
  --linha: #e1e4ea;
  --linha-forte: #c9ced8;
  --marca: #1f3a5f;
  --marca-2: #2c5282;
  --zebra: #fafbfc;
  --hover: #eef4ff;

  --verde-bg: #dff3e6; --verde-tx: #17603a;
  --azul-bg: #dde9fb;  --azul-tx: #1d4f91;
  --amarelo-bg: #fff3c9; --amarelo-tx: #7a5a00;
  --laranja-bg: #ffe2c7; --laranja-tx: #8a4300;
  --vermelho-bg: #fbdcdc; --vermelho-tx: #9b1c1c;
  --cinza-bg: #eceef1; --cinza-tx: #6b7280;

  --s0: #e8ebf0; --s1: #e6eefa; --s2: #e7f4ec; --s3: #f3eafa; --s4: #fdf0e3; --s5: #e6f5f6;
  --s0f: #5b6475; --s1f: #2c5282; --s2f: #276749; --s3f: #6b3fa0; --s4f: #a0561a; --s5f: #23767d;
  font-family: "Segoe UI", system-ui, -apple-system, "Noto Sans", Ubuntu, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--fundo); color: var(--tinta); font-size: 13px; display: flex; flex-direction: column; }
main { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 0 16px 12px; }
button { font: inherit; }

/* topo */
.topo { display: flex; align-items: center; justify-content: space-between; background: var(--marca); color: #fff; padding: 8px 16px; gap: 12px; }
.marca { color: #fff; text-decoration: none; font-weight: 600; font-size: 15px; letter-spacing: .2px; }
.marca-icone { opacity: .7; margin-right: 4px; }
.topo-dir { display: flex; align-items: center; gap: 14px; }
.topo-dir form { margin: 0; }
.usuario small { opacity: .7; }
.lnk { color: #cfe0ff; background: none; border: 0; cursor: pointer; text-decoration: none; padding: 0; }
.lnk:hover { color: #fff; text-decoration: underline; }

.mensagens { padding: 8px 16px 0; }
.msg { padding: 8px 12px; border-radius: 6px; background: var(--azul-bg); color: var(--azul-tx); margin-bottom: 6px; }
.msg-success { background: var(--verde-bg); color: var(--verde-tx); }
.msg-error { background: var(--vermelho-bg); color: var(--vermelho-tx); }

/* botões */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 6px; border: 1px solid var(--linha-forte);
  background: var(--papel); color: var(--tinta); cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { border-color: var(--marca-2); color: var(--marca-2); }
.btn-prim { background: var(--marca-2); border-color: var(--marca-2); color: #fff; }
.btn-prim:hover { background: var(--marca); color: #fff; }

/* barra superior */
.barra { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0 8px; flex-wrap: wrap; }
.barra-esq, .barra-dir { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.barra form { margin: 0; }
.comp-sel { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.comp-sel select { font: inherit; font-size: 15px; font-weight: 600; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--linha-forte); background: var(--papel); }
.selo { padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.selo-aberta { background: var(--verde-bg); color: var(--verde-tx); }
.selo-fechada { background: var(--cinza-bg); color: var(--cinza-tx); }

/* resumo */
.resumo { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 8px; }
.kpi { display: flex; flex-direction: column; justify-content: center; gap: 2px; background: var(--papel); border: 1px solid var(--linha);
  border-radius: 8px; padding: 6px 12px; min-width: 92px; text-align: left; }
.kpi-num { font-size: 20px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi-rot { font-size: 11px; color: var(--suave); }
.kpi-filtro { cursor: pointer; }
.kpi-filtro:hover, .kpi-filtro.ativo { border-color: var(--marca-2); box-shadow: 0 0 0 2px var(--azul-bg); }
.kpi-ok .kpi-num { color: var(--verde-tx); }
.kpi-pend .kpi-num { color: var(--laranja-tx); }
.kpi-prog { min-width: 150px; }
.kpi-prog .prog { width: 100%; height: 7px; }
.kpi-pct { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* filtros */
.filtros { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0 10px; }
.filtros input[type=search], .filtros select { font: inherit; padding: 5px 8px; border: 1px solid var(--linha-forte); border-radius: 6px; background: var(--papel); }
.filtros input[type=search] { width: 260px; }
.chk { display: inline-flex; gap: 5px; align-items: center; background: var(--amarelo-bg); color: var(--amarelo-tx); padding: 4px 9px; border-radius: 6px; cursor: pointer; font-weight: 600; }
.sep { flex: 0 0 1px; height: 20px; background: var(--linha-forte); margin: 0 4px; }
.rot-secoes { color: var(--suave); }
.chip-secao { display: inline-flex; gap: 4px; align-items: center; border: 1px solid var(--linha); background: var(--papel); border-radius: 999px; padding: 2px 9px; cursor: pointer; }
.contagem { margin-left: auto; color: var(--suave); font-variant-numeric: tabular-nums; }

/* grade */
.grade-wrap { flex: 1; min-height: 300px; overflow: auto; background: var(--papel); border: 1px solid var(--linha); border-radius: 8px; }
.grade { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; }
.grade th, .grade td { border-right: 1px solid var(--linha); border-bottom: 1px solid var(--linha); padding: 0 6px; height: 26px; white-space: nowrap; }
.grade thead th { position: sticky; z-index: 3; background: var(--s0); font-weight: 600; }
.tr-secoes th { top: 0; height: 24px; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; text-align: center; }
.tr-cols th { top: 24px; font-size: 11.5px; text-align: center; border-bottom: 2px solid var(--linha-forte); }
.th-calc { font-style: italic; }
.grade tbody tr:nth-child(even) td { background-color: var(--zebra); }
.grade tbody tr:hover td { background-color: var(--hover); }
.fixa { position: sticky; z-index: 2; background: var(--papel); }
.grade thead .fixa, .grade thead .fixa-grupo { z-index: 5; }
.fixa-grupo { position: sticky; left: 0; background: var(--s0) !important; }
.f1 { left: 0; width: 46px; min-width: 46px; }
.f2 { left: 46px; width: 280px; min-width: 280px; max-width: 280px; box-shadow: 2px 0 0 var(--linha-forte); }
.grade td.num { text-align: right; font-variant-numeric: tabular-nums; color: var(--suave); }
.grade td.nome { overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.grade td.cnpj { font-variant-numeric: tabular-nums; color: var(--suave); font-size: 12px; }
.hist { border: 0; background: none; color: var(--suave); cursor: pointer; padding: 0 5px 0 0; font-size: 13px; }
.hist:hover { color: var(--marca-2); }
.obs-ponto { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #d97706; margin-left: 5px; vertical-align: middle; }

.sec-0 { background: var(--s0) !important; color: var(--s0f); }
.sec-1 { background: var(--s1) !important; color: var(--s1f); }
.sec-2 { background: var(--s2) !important; color: var(--s2f); }
.sec-3 { background: var(--s3) !important; color: var(--s3f); }
.sec-4 { background: var(--s4) !important; color: var(--s4f); }
.sec-5 { background: var(--s5) !important; color: var(--s5f); }
.oculta { display: none; }

td.cel { text-align: center; min-width: 64px; font-size: 12px; position: relative; }
td.cel.texto { text-align: left; max-width: 220px; overflow: hidden; text-overflow: ellipsis; color: var(--suave); }
td.editavel { cursor: pointer; }
td.editavel:hover { outline: 2px solid var(--marca-2); outline-offset: -2px; }
td.comentavel { cursor: context-menu; }
td.ativa { outline: 2px solid var(--marca) !important; outline-offset: -2px; }
td.salvando { opacity: .45; }
td.tem-obs::after { content: ""; position: absolute; top: 0; right: 0; border-style: solid; border-width: 0 7px 7px 0; border-color: transparent #d97706 transparent transparent; }
.grade tbody tr td.cor-verde    { background-color: var(--verde-bg); color: var(--verde-tx); }
.grade tbody tr td.cor-azul     { background-color: var(--azul-bg); color: var(--azul-tx); }
.grade tbody tr td.cor-amarelo  { background-color: var(--amarelo-bg); color: var(--amarelo-tx); }
.grade tbody tr td.cor-laranja  { background-color: var(--laranja-bg); color: var(--laranja-tx); font-weight: 600; }
.grade tbody tr td.cor-vermelho { background-color: var(--vermelho-bg); color: var(--vermelho-tx); font-weight: 600; }
.grade tbody tr td.cor-cinza    { color: var(--cinza-tx); }
/* células editáveis vazias e obrigatórias chamam atenção */
td.editavel:empty { background-image: repeating-linear-gradient(135deg, transparent 0 5px, rgba(44,82,130,.06) 5px 10px); }

td.calc { text-align: center; }
.st { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.st-ok { background: var(--verde-bg); color: var(--verde-tx); }
.st-pend { background: var(--laranja-bg); color: var(--laranja-tx); }
.prog-cel { min-width: 96px; }
.prog { display: inline-block; width: 52px; height: 6px; background: var(--cinza-bg); border-radius: 3px; overflow: hidden; vertical-align: middle; }
.prog-bar { display: block; height: 100%; background: linear-gradient(90deg, #4a8fe0, #2f9e5f); }
.pct { display: inline-block; width: 34px; text-align: right; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--suave); }

/* menu de edição */
.menu { position: fixed; z-index: 50; background: var(--papel); border: 1px solid var(--linha-forte); border-radius: 8px; padding: 6px;
  box-shadow: 0 8px 28px rgba(20,30,50,.18); display: flex; flex-direction: column; gap: 3px; min-width: 170px; max-width: 280px; }
.menu-tit { font-size: 11px; color: var(--suave); text-transform: uppercase; letter-spacing: .4px; padding: 2px 4px 4px; }
.menu-op { text-align: left; padding: 5px 9px; border-radius: 5px; border: 1px solid transparent; cursor: pointer; background: var(--cinza-bg); }
.menu-op:hover { border-color: var(--marca-2); }
.menu-op.sel { box-shadow: inset 0 0 0 2px var(--marca-2); }
.menu-op.cor-verde { background: var(--verde-bg); color: var(--verde-tx); }
.menu-op.cor-azul { background: var(--azul-bg); color: var(--azul-tx); }
.menu-op.cor-amarelo { background: var(--amarelo-bg); color: var(--amarelo-tx); }
.menu-op.cor-laranja { background: var(--laranja-bg); color: var(--laranja-tx); }
.menu-op.cor-vermelho { background: var(--vermelho-bg); color: var(--vermelho-tx); }
.menu-op.cor-neutra { background: #f3f4f6; }
.menu-limpar { background: none !important; color: var(--suave); font-style: italic; }
.menu-info { color: var(--suave); padding: 4px; }
.menu-sep { height: 1px; background: var(--linha); margin: 4px 0; }
.menu form { display: flex; gap: 4px; margin: 0; }
.menu-obs { flex-direction: column; }
.menu input, .menu textarea { font: inherit; flex: 1; padding: 5px; border: 1px solid var(--linha-forte); border-radius: 5px; resize: vertical; }
.menu form button { padding: 5px 9px; border-radius: 5px; border: 0; background: var(--marca-2); color: #fff; cursor: pointer; }

/* modal histórico */
.modal { position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal[hidden] { display: none; }
.modal-caixa { background: var(--papel); border-radius: 10px; max-width: 820px; width: 100%; max-height: 85vh; overflow: auto; padding: 18px 22px; position: relative; }
.modal-fechar { position: absolute; top: 8px; right: 12px; border: 0; background: none; font-size: 22px; cursor: pointer; color: var(--suave); }
.modal h2 { margin: 0; font-size: 16px; }
.sub { color: var(--suave); margin: 4px 0 12px; }
.hist-tab { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.hist-tab th, .hist-tab td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--linha); }
.hist-tab th { color: var(--suave); font-weight: 600; }

.toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: var(--tinta); color: #fff; padding: 8px 16px; border-radius: 8px; z-index: 70; box-shadow: 0 6px 20px rgba(0,0,0,.2); }
.toast-erro { background: var(--vermelho-tx); }

/* login */
.cartao-login { max-width: 360px; margin: 10vh auto; background: var(--papel); border: 1px solid var(--linha); border-radius: 10px; padding: 26px 28px; }
.cartao-login h1 { margin: 0 0 4px; font-size: 20px; }
.cartao-login label { display: flex; flex-direction: column; gap: 4px; margin: 12px 0; font-weight: 600; }
.cartao-login input { font: inherit; padding: 8px 10px; border: 1px solid var(--linha-forte); border-radius: 6px; font-weight: 400; }
.cartao-login .btn { width: 100%; justify-content: center; padding: 9px; margin-top: 6px; }

@media (max-width: 720px) {
  .f2 { width: 160px; min-width: 160px; max-width: 160px; }
  .filtros input[type=search] { width: 100%; }
  .usuario { display: none; }
}