:root {
  --fundo: #0e1014;
  --painel: #161a21;
  --painel-2: #1d222b;
  --borda: #2a303b;
  --texto: #e6e8ec;
  --texto-2: #9aa3b2;
  --ambar: #f5a524;
  --ambar-fundo: rgba(245, 165, 36, .14);
  --azul: #5aa9e6;
  --azul-fundo: rgba(90, 169, 230, .14);
  --verde: #4cc38a;
  --verde-fundo: rgba(76, 195, 138, .14);
  --vermelho: #ef6461;
  --raio: 10px;
  --mono: ui-monospace, "Cascadia Code", Consolas, "Courier New", monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 14px/1.45 system-ui, "Segoe UI", Roboto, sans-serif;
}

h2 { font-size: 15px; margin: 0 0 12px; font-weight: 600; }
h3 { font-size: 13px; margin: 0 0 8px; color: var(--texto-2); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
code, .mono { font-family: var(--mono); font-size: 12.5px; }
a { color: var(--ambar); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- elementos base ---------- */
.cartao {
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 16px;
}

label { display: flex; flex-direction: column; gap: 4px; color: var(--texto-2); font-size: 12.5px; }
label.inline { flex-direction: row; align-items: center; gap: 8px; flex-wrap: wrap; }
label.inline input { width: 72px; }
label.check { flex-direction: row; align-items: center; gap: 8px; color: var(--texto); }

input, select {
  background: var(--painel-2);
  border: 1px solid var(--borda);
  border-radius: 7px;
  color: var(--texto);
  padding: 7px 9px;
  font: inherit;
  min-width: 0;
}
input:focus, select:focus { outline: 2px solid var(--ambar); outline-offset: -1px; }

.btn {
  background: var(--painel-2);
  border: 1px solid var(--borda);
  color: var(--texto);
  border-radius: 7px;
  padding: 7px 14px;
  font: inherit;
  cursor: pointer;
}
.btn:hover { border-color: var(--texto-2); }
.btn:disabled { opacity: .4; cursor: default; }
.btn.primario { background: var(--ambar); border-color: var(--ambar); color: #1a1205; font-weight: 600; }
.btn.primario:hover { filter: brightness(1.08); }
.link { background: none; border: 0; color: var(--ambar); cursor: pointer; font: inherit; font-size: 12px; padding: 0; }

.msg { min-height: 18px; margin: 8px 0 0; font-size: 12.5px; }
.msg.ok { color: var(--verde); }
.msg.erro { color: var(--vermelho); }
.dica { color: var(--texto-2); font-size: 12px; margin: 10px 0; }
.vazio { color: var(--texto-2); text-align: center; padding: 32px 0; }

.marca { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; }
.marca .sub { font-weight: 400; color: var(--texto-2); }
.marca-icone {
  width: 18px; height: 18px; border-radius: 5px;
  background: linear-gradient(160deg, #ffd27a, var(--ambar) 55%, #b86e00);
  box-shadow: 0 0 12px rgba(245, 165, 36, .45);
}

/* ---------- login ---------- */
.tela-login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 14px; padding: 28px; }
.login .sub { margin: -8px 0 6px; color: var(--texto-2); }

/* ---------- topo ---------- */
.topo {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 20px; border-bottom: 1px solid var(--borda); background: var(--painel);
  position: sticky; top: 0; z-index: 5;
}
.topo-dir { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.usuario { display: flex; flex-direction: column; line-height: 1.2; text-align: right; }
.usuario small { color: var(--texto-2); font-size: 11px; }

.pilula {
  font-size: 12px; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--borda); color: var(--texto-2); white-space: nowrap;
}
.pilula::before { content: "●"; margin-right: 6px; }
.pilula.ok { color: var(--verde); border-color: rgba(76, 195, 138, .4); background: var(--verde-fundo); }
.pilula.alerta { color: var(--ambar); border-color: rgba(245, 165, 36, .4); background: var(--ambar-fundo); }
.pilula.erro { color: var(--vermelho); border-color: rgba(239, 100, 97, .4); }
.pilula.neutra::before { content: none; }

/* ---------- layout ---------- */
.layout { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 16px; padding: 16px 20px 32px; }
.lateral { display: flex; flex-direction: column; gap: 16px; }
.lateral form { display: flex; flex-direction: column; gap: 12px; }
.conteudo { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.aba { display: flex; flex-direction: column; gap: 16px; }
.grade-2 { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; }
#ultimo-payload { font-size: 12px; white-space: pre-wrap; word-break: break-all; }

@media (max-width: 1200px) { .grade-2 { grid-template-columns: 1fr; } }
@media (max-width: 960px) {
  .layout { grid-template-columns: 1fr; padding: 16px; }
  .topo { padding: 12px 16px; }
}

/* ---------- config ---------- */
fieldset { border: 1px solid var(--borda); border-radius: 8px; padding: 8px 10px 10px; margin: 0; }
legend { display: flex; gap: 10px; align-items: center; padding: 0 4px; color: var(--texto-2); font-size: 12px; }
.opcoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; }
.opcoes.chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.opcao { flex-direction: row; align-items: center; gap: 6px; color: var(--texto); font-size: 13px; cursor: pointer; }
.opcao small { display: block; color: var(--texto-2); font-size: 11px; }
.opcao input { accent-color: var(--ambar); margin: 0; }

.switch { flex-direction: row; align-items: center; gap: 10px; color: var(--texto); font-size: 13.5px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.trilho { width: 38px; height: 22px; border-radius: 999px; background: var(--borda); position: relative; transition: background .2s; flex: none; }
.trilho::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--texto); transition: transform .2s;
}
.switch input:checked + .trilho { background: var(--verde); }
.switch input:checked + .trilho::after { transform: translateX(16px); }
.switch input:focus-visible + .trilho { outline: 2px solid var(--ambar); outline-offset: 2px; }

/* ---------- abas ---------- */
.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--borda); overflow-x: auto; }
.abas button {
  background: none; border: 0; border-bottom: 2px solid transparent; color: var(--texto-2);
  padding: 8px 14px; font: inherit; cursor: pointer; white-space: nowrap;
}
.abas button.ativa { color: var(--texto); border-bottom-color: var(--ambar); }

/* ---------- mapa do processo ---------- */
.mapa { display: grid; grid-template-columns: minmax(0, 3fr) auto minmax(0, 1.4fr) auto minmax(0, 1fr); gap: 10px; align-items: center; }
.coluna { display: flex; flex-direction: column; gap: 8px; }
.nos { display: grid; gap: 8px; }
.coluna-producao .nos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.seta { color: var(--texto-2); font-size: 22px; text-align: center; }

.no {
  background: var(--painel-2); border: 1px solid var(--borda); border-left: 3px solid var(--cor-etapa, var(--borda));
  border-radius: 8px; padding: 8px 10px; transition: opacity .2s, border-color .2s;
}
.no-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.no-topo strong { font-size: 13px; }
.no-contador { font-family: var(--mono); font-size: 11.5px; color: var(--texto-2); }
.no-ip { font-family: var(--mono); font-size: 11px; color: var(--texto-2); margin: 2px 0 6px; }
.no-rodape { display: flex; justify-content: space-between; align-items: center; gap: 6px; flex-wrap: wrap; }
.no-destino { font-size: 11px; color: var(--texto-2); white-space: nowrap; }
.no.off { opacity: .35; }
.no.pisca { animation: pisca-no .7s ease-out; }

.antenas { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.antenas i { color: var(--texto-2); font-style: normal; font-size: 12px; }
.antena {
  font-family: var(--mono); font-size: 11px; padding: 1px 6px; border-radius: 5px;
  border: 1px solid var(--borda); color: var(--texto-2); background: var(--fundo);
}
.antena.off { text-decoration: line-through; opacity: .5; }
.antena.pisca { animation: pisca-antena .9s ease-out; }
.antena.acesa { color: var(--cor-etapa, var(--ambar)); border-color: currentColor; }

.etapa-producao { --cor-etapa: var(--azul); --cor-etapa-fundo: var(--azul-fundo); }
.etapa-doca { --cor-etapa: var(--ambar); --cor-etapa-fundo: var(--ambar-fundo); }
.etapa-expedicao { --cor-etapa: var(--verde); --cor-etapa-fundo: var(--verde-fundo); }

@keyframes pisca-no { from { border-color: var(--cor-etapa); box-shadow: 0 0 0 2px var(--cor-etapa-fundo); } }
@keyframes pisca-antena { from { background: var(--cor-etapa); color: #111; border-color: var(--cor-etapa); } }

@media (max-width: 1100px) {
  .mapa { grid-template-columns: 1fr; }
  .seta { transform: rotate(90deg); }
}

/* ---------- tabelas ---------- */
.cartao-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.cartao-topo h2 { margin: 0; }
.acoes { display: flex; gap: 8px; align-items: center; }
.contador { font-family: var(--mono); font-size: 12px; color: var(--texto-2); font-weight: 400; margin-left: 6px; }

.tabela-wrap { overflow: auto; max-height: 560px; border: 1px solid var(--borda); border-radius: 8px; }
.tabela-wrap.alta { max-height: 420px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
  position: sticky; top: 0; background: var(--painel-2); text-align: left; font-weight: 600;
  color: var(--texto-2); font-size: 12px; padding: 8px 10px; border-bottom: 1px solid var(--borda); white-space: nowrap;
}
td { padding: 6px 10px; border-bottom: 1px solid var(--borda); white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: rgba(255, 255, 255, .02); }
td.centro, th.centro { text-align: center; }
td.epc { color: var(--texto-2); font-size: 11.5px; }
tr.nova td { animation: nova-linha 1.2s ease-out; }
@keyframes nova-linha { from { background: var(--ambar-fundo); } }

.badge {
  display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 999px;
  color: var(--cor-etapa, var(--texto)); background: var(--cor-etapa-fundo, var(--painel-2));
}

.codigo {
  background: var(--fundo); border: 1px solid var(--borda); border-radius: 8px;
  padding: 12px; margin: 0; font-family: var(--mono); font-size: 12.5px; overflow-x: auto; white-space: pre;
}

/* ---------- histórico ---------- */
.filtros { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.filtros label { flex: 1 1 150px; }
.filtros label.largo { flex: 2 1 260px; }
.requisicao { color: var(--texto-2); word-break: break-all; flex: 1 1 300px; }
.paginacao span { font-size: 12.5px; color: var(--texto-2); min-width: 110px; text-align: center; }

.resumo { display: grid; grid-template-columns: 160px 160px minmax(0, 1fr); gap: 16px; align-items: start; }
.kpi { background: var(--painel); border: 1px solid var(--borda); border-radius: var(--raio); padding: 14px 16px; }
.kpi span { color: var(--texto-2); font-size: 12px; display: block; }
.kpi strong { font-size: 24px; font-family: var(--mono); font-weight: 600; }
.resumo-locais {
  background: var(--painel); border: 1px solid var(--borda); border-radius: var(--raio); padding: 10px 14px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 16px; font-size: 12.5px;
}
.resumo-local { display: flex; flex-direction: column; gap: 2px; padding: 4px 0; }
.resumo-local span { color: var(--texto-2); }
.resumo-local .badge { align-self: flex-start; }
@media (max-width: 900px) { .resumo { grid-template-columns: 1fr 1fr; } .resumo-locais { grid-column: 1 / -1; } }

/* ---------- rastreio ---------- */
#rastreio-resultado { display: flex; flex-direction: column; gap: 16px; }
.rastreio-topo { display: flex; gap: 28px; flex-wrap: wrap; margin-bottom: 18px; }
.rastreio-topo small { display: block; color: var(--texto-2); font-size: 11.5px; }
.rastreio-topo strong { font-size: 14px; word-break: break-all; }

.linha-tempo { list-style: none; margin: 0; padding: 0 0 0 6px; }
.linha-tempo li { position: relative; padding: 0 0 18px 24px; border-left: 2px solid var(--borda); }
.linha-tempo li:last-child { border-left-color: transparent; padding-bottom: 0; }
.linha-tempo li::before {
  content: ""; position: absolute; left: -7px; top: 2px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--cor-etapa); box-shadow: 0 0 0 3px var(--cor-etapa-fundo);
}
.lt-titulo { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-weight: 600; }
.lt-titulo small { font-family: var(--mono); font-weight: 400; color: var(--texto-2); }
.lt-hora { color: var(--texto-2); font-size: 12.5px; margin: 2px 0 6px; }
.tag-status { font-size: 11px; font-weight: 500; padding: 1px 8px; border-radius: 999px; }
.tag-status.ok { color: var(--verde); background: var(--verde-fundo); }
.tag-status.alerta { color: var(--ambar); background: var(--ambar-fundo); }

/* ---------- docs ---------- */
.docs p { color: var(--texto-2); margin: 10px 0 0; }
.docs p code { color: var(--texto); }
.token-linha { display: flex; gap: 10px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
#doc-token { flex: 1 1 300px; color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabela-docs td { white-space: normal; vertical-align: top; }
.tabela-docs td:first-child { white-space: nowrap; color: var(--ambar); font-family: var(--mono); font-size: 12px; }