/* Sistema de Votação — estilos comuns às três telas. Sem build step. */

:root {
  --tinta: #14181f;
  --tinta-fraca: #5b6472;
  --fundo: #f4f6f9;
  --papel: #ffffff;
  --borda: #d8dee7;
  --acento: #1c5fd6;
  --acento-fraco: #e7effc;
  --alerta: #b8442a;
  --alerta-fraco: #fdeee9;
  --ok: #1c7a4e;
  --ok-fraco: #e6f5ee;
  --raio: 12px;
  --sombra: 0 1px 2px rgba(20, 24, 31, .06), 0 6px 20px rgba(20, 24, 31, .05);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { line-height: 1.2; margin: 0; }
p { margin: 0; }

button {
  font: inherit;
  cursor: pointer;
  border: 1px solid var(--borda);
  background: var(--papel);
  color: var(--tinta);
  border-radius: var(--raio);
  padding: 10px 16px;
  transition: background .12s, border-color .12s;
}
button:hover:not(:disabled) { border-color: var(--tinta-fraca); }
button:disabled { opacity: .45; cursor: not-allowed; }

button.primario {
  background: var(--acento);
  border-color: var(--acento);
  color: #fff;
  font-weight: 600;
}
button.primario:hover:not(:disabled) { background: #1750b8; }

button.perigo { color: var(--alerta); border-color: #eec7bc; background: var(--alerta-fraco); }

input, select, textarea {
  font: inherit;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 10px 12px;
  width: 100%;
}
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
}

.chip {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--acento-fraco);
  color: var(--acento);
  white-space: nowrap;
}
.chip.P { background: var(--ok-fraco); color: var(--ok); }
.chip.M { background: #fff4e0; color: #8a5a10; }
.chip.G { background: var(--alerta-fraco); color: var(--alerta); }

.codigo {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 13px;
  color: var(--tinta-fraca);
  letter-spacing: .02em;
}

.cartao {
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}

.oculto { display: none !important; }
.aviso { color: var(--alerta); }
.fraco { color: var(--tinta-fraca); }

/* ===================================================== tela de login */

.login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.login form {
  width: min(380px, 100%);
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 28px;
  display: grid;
  gap: 14px;
}
.login h1 { font-size: 20px; }

/* ================================================ CÉDULA (celular) */

.cedula-topo {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--papel);
  border-bottom: 1px solid var(--borda);
  padding: 14px 16px;
}
.cedula-topo .rotulo { font-size: 13px; color: var(--tinta-fraca); }
.cedula-topo h1 { font-size: 20px; margin-top: 2px; }
.cedula-topo .sub { font-size: 13px; color: var(--tinta-fraca); margin-top: 4px; }

.cedula-corpo { padding: 16px 16px 120px; display: grid; gap: 16px; }

.topico {
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 16px;
  box-shadow: var(--sombra);
}
.topico.pendente { border-color: #f0c9a0; }
.topico h2 { font-size: 17px; margin: 6px 0 14px; font-weight: 600; }
.topico .cab { display: flex; align-items: center; gap: 8px; }

.escala { margin-top: 12px; }
.escala .rotulo {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  color: var(--tinta-fraca);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.escala .extremos { font-weight: 400; text-transform: none; letter-spacing: 0; }

.notas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.notas button {
  /* alvo de toque grande: é celular, na mão, numa sala */
  min-height: 56px;
  font-size: 20px;
  font-weight: 700;
  border-radius: 10px;
  color: var(--tinta-fraca);
}
.notas button[aria-pressed="true"] {
  background: var(--acento);
  border-color: var(--acento);
  color: #fff;
}

.barra-fixa {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--papel);
  border-top: 1px solid var(--borda);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  display: grid;
  gap: 8px;
  box-shadow: 0 -6px 20px rgba(20, 24, 31, .06);
}
.barra-fixa button { min-height: 54px; font-size: 17px; }
.barra-fixa .estado { font-size: 13px; text-align: center; color: var(--tinta-fraca); }

.espera {
  min-height: 100vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 32px;
}
.espera .caixa { max-width: 420px; display: grid; gap: 12px; }
.espera h1 { font-size: 24px; }
.espera p { color: var(--tinta-fraca); font-size: 16px; line-height: 1.5; }
.pulso {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--acento); margin: 8px auto;
  animation: pulso 1.6s ease-in-out infinite;
}
@keyframes pulso { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* alocação — rodada 2 */
.saldo {
  position: sticky; top: 0; z-index: 5;
  background: var(--papel); border-bottom: 1px solid var(--borda);
  padding: 12px 16px; text-align: center;
}
.saldo .n { font-size: 32px; font-weight: 800; line-height: 1; }
.saldo.excedeu .n { color: var(--alerta); }
.saldo.exato .n { color: var(--ok); }
.saldo .l { font-size: 12px; color: var(--tinta-fraca); text-transform: uppercase; letter-spacing: .06em; }

.pontos { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.pontos button { min-width: 56px; min-height: 52px; font-size: 22px; font-weight: 700; }
.pontos input { text-align: center; font-size: 22px; font-weight: 700; min-height: 52px; }

/* ================================================ CONSOLE (notebook) */

.console { max-width: 1100px; margin: 0 auto; padding: 24px 20px 80px; }
.console header { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.console header h1 { font-size: 22px; }
.console section { margin-bottom: 20px; padding: 20px; }
.console section > h2 {
  font-size: 13px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--tinta-fraca); margin-bottom: 14px;
}
.linha { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.linha > input, .linha > select { width: auto; flex: 1 1 220px; }

.areas { display: grid; gap: 8px; }
.area-linha {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--borda); border-radius: 10px;
}
.area-linha.aberta { border-color: var(--acento); background: var(--acento-fraco); }
.area-linha .nome { flex: 1; font-weight: 600; }
.area-linha .meta { font-size: 13px; color: var(--tinta-fraca); }

.contador { display: flex; align-items: baseline; gap: 10px; }
.contador .n { font-size: 42px; font-weight: 800; line-height: 1; }
.contador .l { color: var(--tinta-fraca); }
.contador.completo .n { color: var(--ok); }

table.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
table.tabela th, table.tabela td { padding: 8px 10px; border-bottom: 1px solid var(--borda); text-align: left; }
table.tabela th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-fraca); }
table.tabela td.num, table.tabela th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.divergente { background: var(--alerta-fraco); }

.tokens { font-family: ui-monospace, Consolas, monospace; font-size: 12px; }

/* ================================================ PAINEL (projetado) */

.painel {
  min-height: 100vh;
  padding: 40px 48px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.painel-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.painel-topo .area { font-size: 52px; font-weight: 800; letter-spacing: -.02em; }
.painel-topo .sessao { font-size: 20px; color: var(--tinta-fraca); }

.painel-contador { text-align: right; white-space: nowrap; }
.painel-contador .n { font-size: 72px; font-weight: 800; line-height: 1; }
.painel-contador.completo .n { color: var(--ok); }
.painel-contador .l { font-size: 18px; color: var(--tinta-fraca); }

.painel .lista-espera { display: grid; gap: 12px; }
.painel .lista-espera li {
  display: flex; gap: 16px; align-items: center;
  font-size: 26px; padding: 12px 20px;
  background: var(--papel); border: 1px solid var(--borda); border-radius: var(--raio);
}
.painel ul { list-style: none; margin: 0; padding: 0; }

.painel table.rank { width: 100%; border-collapse: collapse; font-size: 24px; }
.painel table.rank th {
  font-size: 15px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--tinta-fraca); text-align: left; padding: 0 14px 10px;
}
.painel table.rank td { padding: 12px 14px; border-top: 2px solid var(--borda); }
.painel table.rank td.pos { font-weight: 800; color: var(--tinta-fraca); width: 60px; }
.painel table.rank td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.painel table.rank tr.divergente td { background: var(--alerta-fraco); }
.painel .marca-divergencia {
  font-size: 15px; font-weight: 700; color: var(--alerta);
  text-transform: uppercase; letter-spacing: .05em; white-space: nowrap;
}

.quadrantes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.quadrante { background: var(--papel); border: 1px solid var(--borda); border-radius: var(--raio); padding: 18px 20px; }
.quadrante h3 { font-size: 17px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
.quadrante ul { display: grid; gap: 6px; }
.quadrante li { font-size: 19px; }
.quadrante.agora { border-color: var(--ok); }
.quadrante.agora h3 { color: var(--ok); }
.quadrante.nao h3 { color: var(--tinta-fraca); }

.rodape-painel { margin-top: auto; font-size: 16px; color: var(--tinta-fraca); }

@media (max-width: 900px) {
  .quadrantes { grid-template-columns: 1fr; }
  .painel { padding: 24px; }
  .painel-topo .area { font-size: 34px; }
}

/* ---------------- contador de confirmações na cédula (sem nota alguma) */

.contador-cedula {
  font-size: 13px;
  font-weight: 600;
  color: var(--tinta-fraca);
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: 999px;
  padding: 6px 14px;
  text-align: center;
  justify-self: center;
}
.contador-cedula.completo {
  color: var(--ok);
  background: var(--ok-fraco);
  border-color: #bfe3d0;
}

/* ---------------- resultado no celular, só depois de revelado */

.resultado-cedula { padding: 20px 16px 40px; display: grid; gap: 10px; }
.resultado-cedula h1 { font-size: 22px; }
.resultado-cedula > p { font-size: 13px; }

.linha-resultado {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 12px 14px;
  margin-top: 8px;
}
.linha-resultado.divergente { border-color: #eec7bc; background: var(--alerta-fraco); }
.linha-resultado .pos {
  font-size: 18px; font-weight: 800; color: var(--tinta-fraca);
  min-width: 24px; text-align: center;
}
.linha-resultado .meio { flex: 1; font-size: 15px; line-height: 1.3; }
.linha-resultado .valor {
  font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.linha-resultado .marca-divergencia {
  font-size: 11px; font-weight: 700; color: var(--alerta);
  text-transform: uppercase; letter-spacing: .05em; margin-top: 3px;
}

/* ---------------- QR de entrada (console e painel) */

.qr-entrada { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.qr-entrada img {
  width: 200px; height: 200px;
  border: 1px solid var(--borda); border-radius: var(--raio); background: #fff; padding: 8px;
}
.qr-entrada .info { flex: 1; min-width: 200px; display: grid; gap: 8px; }
.qr-entrada .url {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 14px; color: var(--acento); word-break: break-all;
}

.painel .qr-projetado { display: flex; gap: 40px; align-items: center; }
.painel .qr-projetado img {
  width: 340px; height: 340px; background: #fff;
  padding: 12px; border-radius: var(--raio); border: 1px solid var(--borda);
}
.painel .qr-projetado .chamada { font-size: 34px; font-weight: 700; line-height: 1.25; }
.painel .qr-projetado .passo { font-size: 22px; color: var(--tinta-fraca); margin-top: 12px; }

/* ---------------- histórico de sessões */

.historico { display: grid; gap: 8px; }
.historico .item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--borda); border-radius: 10px;
}
.historico .item.ativa { border-color: var(--acento); background: var(--acento-fraco); }
.historico .item .nome { flex: 1; font-weight: 600; }
.historico .item .meta { font-size: 13px; color: var(--tinta-fraca); }