/* Auditoria da API: tela de depuração, densa e legível nos dois temas. Sem estilo inline (a CSP não deixa). */

:root {
  color-scheme: light;
  --fundo: #f4f5f7;
  --painel: #ffffff;
  --painel-2: #f8f9fb;
  --borda: #e1e4e9;
  --texto: #1b1f24;
  --mudo: #5d6676;
  --destaque: #2a5bd7;
  --destaque-fundo: #e9effd;
  --ok: #1a7f37;
  --ok-fundo: #e6f4ea;
  --aviso: #9a6700;
  --aviso-fundo: #fdf3d7;
  --erro: #c4262e;
  --erro-fundo: #fde8e8;
  --info: #4a5568;
  --info-fundo: #edf0f4;
  --rodando: #6f42c1;
  --rodando-fundo: #efe8fb;
  --sombra: 0 1px 2px rgb(16 24 40 / 6%);
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --raio: 8px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --fundo: #0e1116;
    --painel: #151a21;
    --painel-2: #1a2029;
    --borda: #2a313c;
    --texto: #e5e8ed;
    --mudo: #98a1b0;
    --destaque: #6ea2ff;
    --destaque-fundo: #1b2a45;
    --ok: #4ac26b;
    --ok-fundo: #12301d;
    --aviso: #e0ad3a;
    --aviso-fundo: #33280f;
    --erro: #ff6b6b;
    --erro-fundo: #3a1719;
    --info: #b3bccb;
    --info-fundo: #232a35;
    --rodando: #b493ff;
    --rodando-fundo: #2a2140;
    --sombra: none;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --fundo: #0e1116;
  --painel: #151a21;
  --painel-2: #1a2029;
  --borda: #2a313c;
  --texto: #e5e8ed;
  --mudo: #98a1b0;
  --destaque: #6ea2ff;
  --destaque-fundo: #1b2a45;
  --ok: #4ac26b;
  --ok-fundo: #12301d;
  --aviso: #e0ad3a;
  --aviso-fundo: #33280f;
  --erro: #ff6b6b;
  --erro-fundo: #3a1719;
  --info: #b3bccb;
  --info-fundo: #232a35;
  --rodando: #b493ff;
  --rodando-fundo: #2a2140;
  --sombra: none;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--destaque); text-decoration: none; }
a:hover { text-decoration: underline; }
code, pre, .mono { font-family: var(--mono); font-size: 12.5px; }
[hidden] { display: none !important; }
.mudo { color: var(--mudo); }
.pequeno { font-size: 12.5px; }
.erro { color: var(--erro); }

button, input, select {
  font: inherit;
  color: inherit;
}
button {
  background: var(--destaque);
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
}
button.discreto {
  background: transparent;
  color: var(--texto);
  border: 1px solid var(--borda);
}
button:hover { filter: brightness(1.08); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--destaque);
  outline-offset: 2px;
}
input[type="search"], input[type="password"], select {
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: 6px;
  padding: 6px 10px;
  min-width: 0;
}
.alternar { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--mudo); }

/* ---- topo */
.topo {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  padding: 10px 16px;
  background: var(--painel);
  border-bottom: 1px solid var(--borda);
}
.marca { display: inline-flex; align-items: center; gap: 8px; color: var(--texto); }
.marca:hover { text-decoration: none; }
.marca small { color: var(--mudo); font-weight: 400; margin-left: 4px; }
.ambiente {
  font: 600 11px/1 var(--mono);
  letter-spacing: .06em;
  padding: 4px 7px;
  border-radius: 4px;
  background: var(--aviso-fundo);
  color: var(--aviso);
}
.ambiente.prod { background: var(--erro-fundo); color: var(--erro); }
.abas { display: flex; gap: 4px; }
.abas a {
  padding: 6px 10px;
  border-radius: 6px;
  color: var(--mudo);
  font-weight: 500;
}
.abas a:hover { text-decoration: none; background: var(--painel-2); }
.abas a[aria-current="page"] { background: var(--destaque-fundo); color: var(--destaque); }
.saude { display: flex; flex-wrap: wrap; gap: 6px; }
.controles { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }

.faixa-aviso {
  margin: 0;
  padding: 8px 16px;
  background: var(--erro-fundo);
  color: var(--erro);
  border-bottom: 1px solid var(--borda);
}

/* ---- selos (status) */
.selo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  background: var(--info-fundo);
  color: var(--info);
}
.selo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.selo.sem-ponto::before { display: none; }
.selo.ok { background: var(--ok-fundo); color: var(--ok); }
.selo.aviso { background: var(--aviso-fundo); color: var(--aviso); }
.selo.erro { background: var(--erro-fundo); color: var(--erro); }
.selo.rodando { background: var(--rodando-fundo); color: var(--rodando); }
.selo.rodando::before { animation: pulsar 1.2s ease-in-out infinite; }
@keyframes pulsar { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .selo.rodando::before { animation: none; } }

/* ---- entrada */
.entrada { display: grid; place-items: center; padding: 48px 16px; }
.cartao {
  width: min(440px, 100%);
  display: grid;
  gap: 10px;
  padding: 24px;
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: 12px;
  box-shadow: var(--sombra);
}
.cartao h1 { margin: 0; font-size: 18px; }
.cartao p { margin: 0; }
.cartao label { font-weight: 500; }

/* ---- consultas: lista + detalhe */
.consultas {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  min-height: calc(100vh - var(--altura-topo, 56px));
}
.lista {
  position: sticky;
  top: var(--altura-topo, 56px);
  height: calc(100vh - var(--altura-topo, 56px));
  overflow-y: auto;
  padding: 12px;
  border-right: 1px solid var(--borda);
  background: var(--painel);
}
.filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.filtros input[type="search"] { flex: 1 1 180px; }
#lista-consultas { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.item-consulta a {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid transparent;
  color: var(--texto);
}
.item-consulta a:hover { text-decoration: none; background: var(--painel-2); }
.item-consulta a[aria-current="true"] { background: var(--destaque-fundo); border-color: var(--destaque); }
.item-consulta .linha1 { display: flex; gap: 8px; align-items: baseline; }
.item-consulta .num { font: 600 12.5px var(--mono); color: var(--mudo); }
.item-consulta .hotel { flex: 1; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-consulta .quando { font-size: 12px; color: var(--mudo); white-space: nowrap; }
.item-consulta .linha2 { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 12.5px; color: var(--mudo); }

.detalhe { padding: 16px; display: grid; gap: 14px; align-content: start; min-width: 0; }
.vazio { padding: 48px 16px; text-align: center; color: var(--mudo); }

.bloco {
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  min-width: 0;
}
.bloco > h2 {
  margin: 0;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  border-bottom: 1px solid var(--borda);
  display: flex;
  align-items: center;
  gap: 8px;
}
.bloco > h2 .mudo { font-weight: 400; }
.bloco > .corpo { padding: 12px 14px; }

.cabeca { padding: 14px; display: grid; gap: 8px; }
.cabeca h1 { margin: 0; font-size: 18px; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.cabeca h1 .num { font: 600 15px var(--mono); color: var(--mudo); }
.fatos { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--mudo); margin: 0; padding: 0; list-style: none; }
.fatos b { color: var(--texto); font-weight: 500; }
.veredito { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 4px; }

.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1px; background: var(--borda); overflow: hidden; }
.numero { background: var(--painel); padding: 10px 14px; }
.numero b { display: block; font: 600 18px var(--mono); }
.numero span { font-size: 12px; color: var(--mudo); }

/* ---- destinos: por onde a API passou */
.destinos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; padding: 12px 14px; }
.destino {
  border: 1px solid var(--borda);
  border-left: 3px solid var(--info);
  border-radius: 6px;
  padding: 10px 12px;
  display: grid;
  gap: 6px;
  align-content: start;
  background: var(--painel-2);
  min-width: 0;
}
.destino.ok { border-left-color: var(--ok); }
.destino.aviso { border-left-color: var(--aviso); }
.destino.erro { border-left-color: var(--erro); }
.destino.rodando { border-left-color: var(--rodando); }
.destino .titulo { display: flex; gap: 8px; align-items: center; justify-content: space-between; font-weight: 600; }
.destino .host { font: 12px var(--mono); color: var(--mudo); overflow-wrap: anywhere; }
.destino .como { font-size: 12.5px; }
.destino dl { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 10px; font-size: 12.5px; }
.destino dt { color: var(--mudo); }
.destino dd { margin: 0; overflow-wrap: anywhere; }
.destino .falha { color: var(--erro); font-size: 12.5px; overflow-wrap: anywhere; }

/* ---- linha do tempo e chamadas: <details> em grade */
.linhas { display: grid; }
.linha { border-top: 1px solid var(--borda); }
.linha:first-child { border-top: 0; }
.linha > summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 78px 96px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 14px;
}
.linha > summary::-webkit-details-marker { display: none; }
.linha > summary:hover { background: var(--painel-2); }
.linha[open] > summary { background: var(--painel-2); }
.linha .hora { font: 12.5px var(--mono); color: var(--mudo); }
.linha .texto { min-width: 0; }
.linha .texto .sub { display: block; color: var(--mudo); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha .tempo { font: 12.5px var(--mono); color: var(--mudo); text-align: right; white-space: nowrap; }
.linha .aberto { padding: 4px 14px 14px; display: grid; gap: 10px; }
.linha .aberto p { margin: 0; overflow-wrap: anywhere; }

.etapa { font: 600 11.5px var(--mono); text-transform: uppercase; letter-spacing: .03em; }

pre {
  margin: 0;
  padding: 10px 12px;
  background: var(--painel-2);
  border: 1px solid var(--borda);
  border-radius: 6px;
  overflow: auto;
  max-height: 420px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.chamadas { padding: 16px; display: grid; gap: 8px; }
.cabecalho-chamadas, .chamada > summary {
  display: grid;
  grid-template-columns: 130px 64px minmax(160px, 1.2fr) 56px 72px 88px minmax(0, 2fr);
  gap: 10px;
  align-items: center;
}
.cabecalho-chamadas { padding: 0 14px; font-size: 12px; color: var(--mudo); }
#lista-chamadas, .bloco .lista-chamadas {
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}
.bloco .lista-chamadas { border: 0; border-radius: 0; }
.chamada > summary { padding: 7px 14px; }
.chamada .metodo { font: 600 12px var(--mono); }
.chamada .rota { font: 12.5px var(--mono); overflow-wrap: anywhere; }
.chamada .status { font: 600 12.5px var(--mono); }
.chamada .status.ok { color: var(--ok); }
.chamada .status.aviso { color: var(--aviso); }
.chamada .status.erro { color: var(--erro); }
.chamada .quem { font-size: 12.5px; color: var(--mudo); white-space: nowrap; }
.chamada .oque { min-width: 0; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chamada .oque .erro { display: block; overflow: hidden; text-overflow: ellipsis; }
.chamada .oque b { font-weight: 600; }

/* ---- ofertas */
.tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabela th, .tabela td { padding: 7px 10px; border-top: 1px solid var(--borda); text-align: left; vertical-align: top; }
.tabela thead th { border-top: 0; color: var(--mudo); font-weight: 500; font-size: 12px; }
.tabela .num { font-family: var(--mono); text-align: right; white-space: nowrap; }
.rolar { overflow-x: auto; }

.miniatura {
  padding: 0;
  border: 1px solid var(--borda);
  border-radius: 4px;
  background: var(--painel-2);
  width: 220px;
  max-width: 100%;
  height: 130px;
  overflow: hidden;
  cursor: zoom-in;
}
.miniatura img { width: 100%; height: 100%; object-fit: cover; object-position: left top; display: block; }
.miniatura.falhou { cursor: default; color: var(--mudo); font-size: 12px; }

dialog#visor {
  width: min(1100px, 96vw);
  max-height: 92vh;
  padding: 12px;
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: var(--painel);
  color: var(--texto);
}
dialog#visor::backdrop { background: rgb(0 0 0 / 55%); }
.acoes-visor { display: flex; justify-content: flex-end; margin-bottom: 8px; }
dialog#visor img { display: block; max-width: 100%; height: auto; margin: 0 auto; }

.acoes { display: flex; gap: 8px; align-items: center; }
.bloco > details > summary { cursor: pointer; padding: 10px 14px; font-weight: 600; font-size: 13px; }
.bloco > details > .corpo { padding: 0 14px 14px; display: grid; gap: 8px; }

/* ---- telas estreitas */
@media (max-width: 900px) {
  .consultas { grid-template-columns: 1fr; }
  .lista { position: static; height: auto; max-height: 45vh; border-right: 0; border-bottom: 1px solid var(--borda); }
  .detalhe { padding: 12px 0; }
  .detalhe .bloco { border-radius: 0; border-left: 0; border-right: 0; }
  .controles { margin-left: 0; }
  .cabecalho-chamadas { display: none; }
  .chamada > summary { grid-template-columns: auto auto minmax(0, 1fr) auto; }
  .chamada .quando { grid-column: 1 / -1; }
  .chamada .quem { display: none; }
  .chamada .oque { grid-column: 1 / -1; white-space: normal; }
  .chamadas { padding: 12px 0; }
  .chamadas > .filtros, .chamadas > p { padding: 0 16px; }
  #lista-chamadas { border-radius: 0; border-left: 0; border-right: 0; }
  .linha:not(.chamada) > summary { grid-template-columns: 64px minmax(0, 1fr) auto; }
  .linha:not(.chamada) > summary .etapa { display: none; }
}
@media (max-width: 520px) {
  .marca small { display: none; }
  .topo { padding: 10px 16px; }
}