:root {
  --cor-fundo: #0d1117;
  --cor-cartao: #161b22;
  --cor-borda: #2a2f3a;
  --cor-texto: #e6edf3;
  --cor-texto-fraco: #8b949e;
  --cor-primaria: #c9a227;
  --cor-verde: #2ea043;
  --cor-laranja: #d29922;
  --cor-vermelho: #da3633;
  --cor-azul: #388bfd;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  padding-bottom: 2rem;
}
html, body {
  height: 100%;
}
.tela-centralizada {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  box-sizing: border-box;
}

.tela-centralizada .cartao {
  width: 100%;
  max-width: 380px;
}


.topo {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem;
  background: linear-gradient(90deg, #1c2333, #0d1117);
  border-bottom: 1px solid var(--cor-borda);
}

.topo img.escudo { height: 40px; width: 40px; object-fit: contain; }
.topo h1 { font-size: 1.1rem; margin: 0; flex: 1; }
.topo a { color: var(--cor-texto-fraco); text-decoration: none; font-size: .85rem; }

.container { padding: 1rem; max-width: 720px; margin: 0 auto; }

.cartao {
  background: var(--cor-cartao);
  border: 1px solid var(--cor-borda);
  border-radius: 10px;
  padding: 1rem;
  margin-bottom: 1rem;
}

label { display: block; font-size: .85rem; color: var(--cor-texto-fraco); margin-bottom: .3rem; margin-top: .8rem; }

input, select, button {
  width: 100%;
  padding: .7rem;
  border-radius: 8px;
  border: 1px solid var(--cor-borda);
  background: #0d1117;
  color: var(--cor-texto);
  font-size: 1rem;
}

button, .botao {
  background: var(--cor-primaria);
  color: #1a1300;
  font-weight: 600;
  border: none;
  cursor: pointer;
  margin-top: 1rem;
  text-align: center;
  text-decoration: none;
  display: block;
}

button.secundario, .botao.secundario {
  background: transparent;
  color: var(--cor-texto);
  border: 1px solid var(--cor-borda);
}

.erro { color: var(--cor-vermelho); font-size: .9rem; margin-top: .5rem; }

.cards-resumo { display: flex; gap: .75rem; }
.cards-resumo .cartao { flex: 1; text-align: center; }
.cards-resumo .valor { font-size: 2rem; font-weight: 700; }
.cards-resumo .valor.alerta { color: var(--cor-vermelho); }

table.indicadores { width: 100%; border-collapse: collapse; font-size: .85rem; }
table.indicadores th, table.indicadores td {
  padding: .5rem .4rem;
  border-bottom: 1px solid var(--cor-borda);
  text-align: left;
  white-space: nowrap;
}
table.indicadores { display: block; overflow-x: auto; }

.badge { padding: .15rem .5rem; border-radius: 999px; font-size: .78rem; font-weight: 600; display: inline-block; }
.badge-verde { background: rgba(46,160,67,.2); color: var(--cor-verde); }
.badge-laranja { background: rgba(210,153,34,.2); color: var(--cor-laranja); }
.badge-vermelho { background: rgba(218,54,51,.2); color: var(--cor-vermelho); }
.badge-azul { background: rgba(56,139,253,.2); color: var(--cor-azul); }
.badge-cinza { background: rgba(139,148,158,.2); color: var(--cor-texto-fraco); }

.barra-grafico { display: flex; align-items: flex-end; gap: 6px; height: 160px; padding-top: 1rem; }
.barra-grafico .col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.barra-grafico .barra { width: 100%; border-radius: 4px 4px 0 0; }
.barra-grafico .rotulo { font-size: .65rem; color: var(--cor-texto-fraco); margin-top: .3rem; writing-mode: vertical-rl; text-orientation: mixed; max-height: 60px; }

.lista-equipes .item {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem; border-bottom: 1px solid var(--cor-borda);
}
.lista-equipes .item img { height: 32px; width: 32px; object-fit: contain; }
.lista-equipes .item .nome { flex: 1; }
.lista-equipes .item a { color: var(--cor-texto-fraco); font-size: .85rem; text-decoration: none; }

.spinner { display: none; text-align: center; padding: 1rem; color: var(--cor-texto-fraco); }
.spinner.ativo { display: block; }