@font-face {
  font-family: 'Inter';
  font-weight: 100 900;
  font-display: swap;
  src: url('inter-latin-wght-normal.woff2') format('woff2-variations');
}

:root {
  color-scheme: light dark;
  --fundo: #fafafa;
  --superficie: #ffffff;
  --superficie-2: #f4f4f5;
  --linha: #e9e9ec;
  --linha-forte: #d4d4d8;
  --texto: #18181b;
  --texto-2: #52525b;
  --texto-3: #6b6b76;
  --destaque: #4f46e5;
  --destaque-forte: #4338ca;
  --sobre-destaque: #ffffff;
  --verde: #16a34a;
  --amarelo: #d97706;
  --vermelho: #dc2626;
  --cinza: #a1a1aa;
  --amarelo-texto: #b45309;
  --vermelho-texto: #b91c1c;
  --aviso-fundo: #fffbeb;
  --aviso-linha: #fde68a;
  --erro-fundo: #fef2f2;
  --erro-linha: #fecaca;
  --sombra: 0 1px 2px rgb(24 24 27 / 4%);
  --sombra-alta: 0 1px 2px rgb(24 24 27 / 4%), 0 12px 32px rgb(24 24 27 / 8%);
  --raio: 12px;
  --raio-menor: 8px;
  --topo: 56px;
  --largura: 1040px;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'Cascadia Mono', Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #0c0c0e;
    --superficie: #141416;
    --superficie-2: #1c1c20;
    --linha: #26262b;
    --linha-forte: #3a3a42;
    --texto: #f4f4f5;
    --texto-2: #b4b4bc;
    --texto-3: #8f8f9a;
    --destaque: #818cf8;
    --destaque-forte: #a5b4fc;
    --sobre-destaque: #0c0c0e;
    --verde: #22c55e;
    --amarelo: #f59e0b;
    --vermelho: #f87171;
    --cinza: #71717a;
    --amarelo-texto: #fbbf24;
    --vermelho-texto: #fca5a5;
    --aviso-fundo: #231b0b;
    --aviso-linha: #4a3a12;
    --erro-fundo: #2a1212;
    --erro-linha: #5a2020;
    --sombra: 0 1px 2px rgb(0 0 0 / 30%);
    --sombra-alta: 0 1px 2px rgb(0 0 0 / 30%), 0 12px 32px rgb(0 0 0 / 40%);
  }
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topo) + 60px);
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--texto);
  background: var(--fundo);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
h1, h2, h3, p, dl, dd, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
code, pre { font-family: var(--mono); font-size: 0.9em; }
:focus-visible { outline: 2px solid var(--destaque); outline-offset: 2px; border-radius: 4px; }

/* Topo */
.topo {
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--topo);
  background: var(--superficie);
  border-bottom: 1px solid var(--linha);
}
.topo-dentro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 100%;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 24px;
}
.marca { display: flex; align-items: center; gap: 10px; min-width: 0; }
.marca strong { font-weight: 650; letter-spacing: -0.01em; white-space: nowrap; }
.marca span { color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.marca span::before { content: '/'; margin-right: 10px; color: var(--linha-forte); }

.conteudo {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 32px 24px 64px;
}

/* Botões */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-menor);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms ease;
}
.botao:hover { background: var(--superficie-2); }
.botao--leve { color: var(--texto-2); background: transparent; border-color: transparent; }
.botao--cheio {
  width: 100%;
  padding: 10px 14px;
  color: var(--sobre-destaque);
  background: var(--destaque);
  border-color: var(--destaque);
}
.botao--cheio:hover { background: var(--destaque-forte); }

/* Status: ponto colorido e uma palavra. */
.selo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 550;
  white-space: nowrap;
}
.ponto { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--cinza); }
.selo--verde .ponto { background: var(--verde); }
.selo--amarelo { color: var(--amarelo-texto); }
.selo--amarelo .ponto { background: var(--amarelo); }
.selo--vermelho { color: var(--vermelho-texto); }
.selo--vermelho .ponto { background: var(--vermelho); }
.selo--cinza { color: var(--texto-2); }

/* Título e resumo */
.cabeca { margin-bottom: 24px; }
.cabeca h1 { font-size: 26px; font-weight: 650; line-height: 1.25; letter-spacing: -0.02em; }
.cabeca p { margin-top: 4px; color: var(--texto-2); }
.cabeca-ficha { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.cabeca-ficha .selo { margin-top: 8px; }

.numeros {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 24px;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}
.numero { padding: 16px 20px; border-left: 1px solid var(--linha); }
.numero:first-child { border-left: 0; }
.numero dt { color: var(--texto-3); font-size: 13px; }
.numero dd { margin-top: 2px; font-size: 26px; font-weight: 650; line-height: 1.2; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.numero small { display: block; margin-top: 2px; color: var(--texto-3); font-size: 12px; }
.numero--problema dd { color: var(--vermelho-texto); }

/* Lista */
.lista {
  overflow: hidden;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}
.lista-cabeca, .linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px 112px 112px 76px;
  align-items: center;
  column-gap: 16px;
  padding: 0 20px;
}
.lista-cabeca {
  height: 38px;
  color: var(--texto-3);
  background: var(--superficie-2);
  border-bottom: 1px solid var(--linha);
  font-size: 12px;
  font-weight: 500;
}
.linha {
  min-height: 68px;
  padding-top: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--linha);
  transition: background 120ms ease;
}
.lista li:last-child .linha { border-bottom: 0; }
.linha:hover { background: var(--superficie-2); }
.linha-nome { min-width: 0; }
.linha-nome strong { display: block; font-weight: 550; }
.linha-nome span {
  display: block;
  overflow: hidden;
  color: var(--texto-3);
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.campo { min-width: 0; font-size: 14px; color: var(--texto-2); }
.campo-rotulo { display: none; }
.campo small { display: block; color: var(--texto-3); font-size: 12px; }

/* Ficha */
.voltar { display: inline-block; margin-bottom: 16px; color: var(--texto-3); font-size: 14px; }
.voltar:hover { color: var(--texto); }

.secoes {
  position: sticky;
  top: var(--topo);
  z-index: 5;
  display: flex;
  gap: 4px;
  margin: 0 -24px 16px;
  padding: 8px 24px;
  overflow-x: auto;
  background: var(--fundo);
  scrollbar-width: none;
}
.secoes a {
  flex: none;
  padding: 5px 12px;
  color: var(--texto-2);
  border-radius: var(--raio-menor);
  font-size: 14px;
  font-weight: 500;
}
.secoes a:hover { color: var(--texto); background: var(--superficie-2); }

.bloco {
  margin-bottom: 16px;
  padding: 20px;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}
.bloco > h2 { margin-bottom: 14px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.bloco-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.bloco-cabeca h2 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }

.descricao { max-width: 72ch; color: var(--texto-2); }
.dados {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px 24px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--linha);
}
.dados dt { color: var(--texto-3); font-size: 13px; }
.dados dd { margin-top: 2px; font-weight: 500; }
.dados small { display: block; color: var(--texto-3); font-size: 13px; font-weight: 400; }

.nota { color: var(--texto-3); font-size: 13px; }
.bloco .nota { margin-top: 12px; }
.bloco-cabeca .nota { margin-top: 0; }
.vazio { color: var(--texto-3); }

.faixa {
  margin-bottom: 16px;
  padding: 10px 14px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-menor);
  font-size: 14px;
}
.faixa--erro { color: var(--vermelho-texto); background: var(--erro-fundo); border-color: var(--erro-linha); }
.faixa--aviso { color: var(--amarelo-texto); background: var(--aviso-fundo); border-color: var(--aviso-linha); }

/* Linha do tempo */
.rodadas { position: relative; }
.rodada { position: relative; padding: 0 0 18px 22px; }
.rodada:last-child { padding-bottom: 0; }
.rodada::before {
  content: '';
  position: absolute;
  top: 18px;
  bottom: -4px;
  left: 3.5px;
  width: 1px;
  background: var(--linha-forte);
}
.rodada:last-child::before { display: none; }
.rodada .ponto { position: absolute; top: 7px; left: 0; }
.rodada-topo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.rodada-topo .tempo, .rodada-duracao { color: var(--texto-3); font-size: 13px; }
.corpo {
  margin: 8px 0 0;
  padding: 10px 12px;
  overflow-x: auto;
  color: var(--texto-2);
  background: var(--superficie-2);
  border-radius: var(--raio-menor);
  font-size: 12.5px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.corpo-longo { margin-top: 6px; }
.corpo-longo summary { color: var(--texto-3); font-size: 13px; cursor: pointer; overflow-wrap: anywhere; }

/* Destino */
.destino { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.destino span { color: var(--texto-3); font-size: 13px; }
.destino code { overflow-wrap: anywhere; }
.destino-lista { margin-top: 12px; border-top: 1px solid var(--linha); }
.destino-lista li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--linha);
  font-size: 14px;
}
.destino-lista li:last-child { border-bottom: 0; padding-bottom: 0; }
.destino-lista code { overflow-wrap: anywhere; }
.destino-lista span { color: var(--texto-2); }

/* Prévia */
.tabela { border-top: 1px solid var(--linha); }
.tabela:last-of-type { padding-bottom: 0; }
.tabela > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
  padding: 12px 0;
  cursor: pointer;
  list-style: none;
}
.tabela > summary::-webkit-details-marker { display: none; }
.tabela > summary::before {
  content: '';
  flex: none;
  align-self: center;
  width: 6px;
  height: 6px;
  margin: 0 4px 0 2px;
  border-right: 1.5px solid var(--texto-3);
  border-bottom: 1.5px solid var(--texto-3);
  transform: rotate(-45deg);
  transition: transform 120ms ease;
}
.tabela[open] > summary::before { transform: rotate(45deg); }
.tabela-nome { font-weight: 600; }
.tabela-meta { color: var(--texto-3); font-size: 13px; }
.caminho { margin-bottom: 10px; color: var(--texto-3); font-size: 13px; overflow-wrap: anywhere; }

.colunas { margin-bottom: 10px; }
.colunas summary { color: var(--texto-2); font-size: 13px; cursor: pointer; }
.colunas ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 4px 16px;
  margin-top: 8px;
  font-size: 13px;
}
.colunas li { display: flex; justify-content: space-between; gap: 8px; min-width: 0; }
.colunas code { overflow-wrap: anywhere; }
.colunas span { flex: none; color: var(--texto-3); }

.rolagem {
  max-height: 360px;
  margin-bottom: 14px;
  overflow: auto;
  border: 1px solid var(--linha);
  border-radius: var(--raio-menor);
  -webkit-overflow-scrolling: touch;
}
table { min-width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
th, td {
  max-width: 260px;
  padding: 7px 12px;
  overflow: hidden;
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-bottom: 1px solid var(--linha);
}
th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: var(--texto-2);
  background: var(--superficie-2);
  font-weight: 550;
}
tbody tr:last-child td { border-bottom: 0; }
.nulo { color: var(--texto-3); font-style: italic; }

/* Login */
.tela-entrada {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px 16px;
}
.entrada {
  width: 100%;
  max-width: 380px;
  padding: 32px;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: 16px;
  box-shadow: var(--sombra-alta);
}
.entrada-marca { margin-bottom: 24px; }
.entrada-marca strong { display: block; font-size: 22px; font-weight: 650; letter-spacing: -0.02em; }
.entrada-marca span { color: var(--texto-3); }
.entrada label { display: block; margin-bottom: 14px; color: var(--texto-2); font-size: 14px; font-weight: 500; }
.entrada input {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 9px 12px;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-menor);
  font: inherit;
  font-size: 16px;
}
.entrada input:focus { outline: 2px solid var(--destaque); outline-offset: -1px; border-color: transparent; }
.entrada .botao { margin-top: 6px; }

@media (max-width: 760px) {
  .topo-dentro { padding: 0 16px; }
  .conteudo { padding: 20px 16px 48px; }
  .cabeca h1 { font-size: 22px; }

  .numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .numero { padding: 14px 16px; }
  .numero:nth-child(odd) { border-left: 0; }
  .numero:nth-child(n + 3) { border-top: 1px solid var(--linha); }

  .lista-cabeca { display: none; }
  .linha {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 12px;
    padding: 14px 16px;
  }
  .linha-nome { grid-column: 1 / 3; }
  .linha-nome span { white-space: normal; }
  .linha-status { align-self: start; justify-self: end; }
  .campo-rotulo { display: block; color: var(--texto-3); font-size: 12px; }

  .secoes { margin: 0 -16px 12px; padding: 8px 16px; }
  .bloco { padding: 16px; }
  .destino-lista li { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .bloco-cabeca { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}