/* ============================================================
   Votação on-line
   Display: Barlow Condensed · Texto: IBM Plex Sans · Dados: IBM Plex Mono
   ============================================================ */

:root {
  --tinta:        #16232b;
  --tinta-media:  #4c5f6a;
  --tinta-fraca:  #8798a1;
  --papel:        #ffffff;
  --papel-morno:  #f4f6f5;
  --mesa:         #1c2b33;
  --linha:        #d9e0e0;
  --sinal:        #f2b705;
  --positiva:     #1f6f4a;
  --negativa:     #a8322d;
  --neutra:       #4c5f6a;

  --borda: 3px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 24px 16px 64px;
  background: var(--mesa);
  background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,.022) 0 2px, transparent 2px 9px);
  color: var(--tinta);
  font-family: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.55;
}

/* ============================================================
   Cédula
   ============================================================ */

.cedula {
  max-width: 560px;
  margin: 0 auto;
  background: var(--papel);
  border-top: 8px solid var(--sinal);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}

.cedula__corpo { padding: 28px 26px 32px; }

.cedula__cabecalho { border-bottom: var(--borda) solid var(--tinta); padding-bottom: 18px; }

.etiqueta {
  display: block;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tinta-media);
  margin-bottom: 10px;
}

.titulo {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: clamp(34px, 10vw, 50px);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.01em;
  text-transform: uppercase;
  margin: 0 0 12px;
}

.painel__titulo { font-size: clamp(30px, 6vw, 40px); margin-bottom: 4px; }

.entidade { font-size: 14px; line-height: 1.4; color: var(--tinta-media); margin: 0 0 8px; }

.base-territorial {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  line-height: 1.6;
  color: var(--tinta-fraca);
  margin: 0;
}

.contexto {
  margin: 20px 0 0;
  padding: 14px 16px;
  background: var(--papel-morno);
  border-left: var(--borda) solid var(--sinal);
  font-size: 14.5px;
}

.prazo {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  color: var(--tinta-media);
  margin: 14px 0 0;
}

/* ============================================================
   Campos
   ============================================================ */

.campos { margin-top: 26px; }

.campo { margin-bottom: 20px; }

.campo__rotulo {
  display: block;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.campo__dica { display: block; font-size: 13px; color: var(--tinta-media); margin-bottom: 8px; }

.campo__entrada {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 2px solid var(--linha);
  border-radius: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: inherit;
  font-size: 16.5px;
}

textarea.campo__entrada { min-height: 0; line-height: 1.5; resize: vertical; }

.campo__entrada:hover { border-color: var(--tinta-fraca); }

.campo__entrada:focus {
  outline: none;
  border-color: var(--tinta);
  box-shadow: inset 0 -4px 0 var(--sinal);
}

.campo__entrada--mono { font-family: "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .06em; }
.campo__entrada--curto { width: 76px; min-height: 44px; padding: 8px 10px; }
.campo__entrada--medio { width: auto; min-width: 130px; min-height: 44px; padding: 8px 10px; font-size: 15px; }

.campo--erro .campo__entrada { border-color: var(--negativa); }

.campo__erro { display: block; margin-top: 6px; font-size: 13.5px; font-weight: 500; color: var(--negativa); }

.caixa { width: 22px; height: 22px; accent-color: var(--tinta); }

.dupla { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 18px; }

/* ============================================================
   Pergunta e opções da cédula
   ============================================================ */

.pergunta {
  border: 0;
  border-top: var(--borda) solid var(--tinta);
  margin: 30px 0 0;
  padding: 24px 0 0;
  min-width: 0;
}

.pergunta__texto {
  display: block;
  width: 100%;
  padding: 0;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: clamp(22px, 6vw, 27px);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 16px;
}

.anexo {
  display: inline-block;
  margin-bottom: 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--tinta);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--sinal);
}

.opcoes { display: grid; gap: 10px; }

.opcao { position: relative; display: block; }

.opcao__radio { position: absolute; opacity: 0; width: 1px; height: 1px; }

.opcao__area {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 62px;
  padding: 12px 18px;
  border: 2px solid var(--linha);
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease;
}

.opcao__area:hover { background: var(--papel-morno); }

.opcao__marca {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border: 2px solid var(--tinta-fraca);
  border-radius: 50%;
}

.opcao__palavra {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.1;
}

.opcao__radio:focus-visible + .opcao__area { outline: 3px solid var(--sinal); outline-offset: 2px; }

.opcao__radio:checked + .opcao__area { border-color: var(--tinta); background: var(--papel-morno); }

.opcao__radio:checked + .opcao__area .opcao__marca {
  border-color: var(--tinta);
  background: var(--tinta);
  box-shadow: inset 0 0 0 4px var(--papel);
}

.opcao--positiva .opcao__radio:checked + .opcao__area { border-color: var(--positiva); }
.opcao--positiva .opcao__radio:checked + .opcao__area .opcao__marca { border-color: var(--positiva); background: var(--positiva); }
.opcao--positiva .opcao__radio:checked + .opcao__area .opcao__palavra { color: var(--positiva); }

.opcao--negativa .opcao__radio:checked + .opcao__area { border-color: var(--negativa); }
.opcao--negativa .opcao__radio:checked + .opcao__area .opcao__marca { border-color: var(--negativa); background: var(--negativa); }
.opcao--negativa .opcao__radio:checked + .opcao__area .opcao__palavra { color: var(--negativa); }

/* ============================================================
   Botões
   ============================================================ */

.confirmar {
  width: 100%;
  min-height: 60px;
  margin-top: 26px;
  border: none;
  background: var(--tinta);
  color: var(--papel);
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}

.confirmar:hover { background: #0d1a21; }
.confirmar:focus-visible { outline: 3px solid var(--sinal); outline-offset: 3px; }

.botao-secundario {
  display: inline-block;
  padding: 10px 16px;
  border: 2px solid var(--tinta);
  background: var(--papel);
  color: var(--tinta);
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.botao-secundario:hover { background: var(--tinta); color: var(--papel); }
.botao-secundario:disabled { opacity: .35; cursor: not-allowed; }
.botao-secundario:disabled:hover { background: var(--papel); color: var(--tinta); }
.botao-secundario--curto { padding: 8px 12px; font-size: 14px; }
.botao-secundario--forte { margin-top: 16px; background: var(--tinta); color: var(--papel); }
.botao-secundario--forte:hover { background: #0d1a21; }

.botao-perigo {
  padding: 8px 12px;
  border: 2px solid var(--negativa);
  background: var(--papel);
  color: var(--negativa);
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}

.botao-perigo:hover { background: var(--negativa); color: var(--papel); }

.aviso-unico { margin: 12px 0 0; font-size: 13px; text-align: center; color: var(--tinta-media); }

/* ============================================================
   Avisos
   ============================================================ */

.alerta {
  margin: 22px 0 0;
  padding: 14px 16px;
  border-left: var(--borda) solid var(--negativa);
  background: #fbf0ef;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--negativa);
}

.alerta--atencao {
  border-left-color: var(--sinal);
  background: #fdf6e0;
  color: #6a4e00;
  font-weight: 400;
}

.aviso-ok {
  margin: 22px 0 0;
  padding: 14px 16px;
  border-left: var(--borda) solid var(--positiva);
  background: #eef6f1;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--positiva);
}

/* ============================================================
   Picote e canhoto
   ============================================================ */

.picote { position: relative; height: 0; border-top: 2px dashed var(--linha); }

.picote::before,
.picote::after {
  content: "";
  position: absolute;
  top: -11px;
  width: 20px;
  height: 20px;
  background: var(--mesa);
  border-radius: 50%;
}

.picote::before { left: -10px; }
.picote::after  { right: -10px; }

.canhoto { padding: 26px; background: var(--papel-morno); text-align: center; }

.canhoto__codigo {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: clamp(26px, 8vw, 36px);
  font-weight: 600;
  letter-spacing: .08em;
  margin: 8px 0 12px;
  word-break: break-all;
}

.canhoto__dados {
  display: grid;
  gap: 4px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12.5px;
  color: var(--tinta-media);
  text-align: left;
  max-width: 340px;
  margin: 0 auto;
}

.canhoto__dados strong { color: var(--tinta); font-weight: 600; }

/* ============================================================
   Telas de estado
   ============================================================ */

.selo {
  display: inline-block;
  padding: 6px 14px;
  border: 2px solid currentColor;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  transform: rotate(-2deg);
}

.selo--ok       { color: var(--positiva); }
.selo--bloqueio { color: var(--negativa); }
.selo--fechado  { color: var(--tinta-media); }

.estado__titulo {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: clamp(30px, 8vw, 40px);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  margin: 16px 0 10px;
}

.estado__texto { font-size: 15.5px; margin: 0 0 6px; }

.rodape {
  max-width: 900px;
  margin: 20px auto 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  line-height: 1.6;
  color: rgba(255,255,255,.45);
  text-align: center;
}

.link-claro { color: var(--sinal); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.link-discreto { color: var(--tinta-media); }

/* ============================================================
   Painel e página pública
   ============================================================ */

.painel {
  max-width: 1000px;
  margin: 0 auto;
  background: var(--papel);
  border-top: 8px solid var(--sinal);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  padding: 0 26px 34px;
}

.login { max-width: 400px; padding-top: 28px; }

.menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  margin: 0 -26px 24px;
  padding: 0 26px;
  border-bottom: 2px solid var(--linha);
  background: var(--papel-morno);
}

.menu__item {
  padding: 14px 14px 12px;
  border-bottom: 4px solid transparent;
  color: var(--tinta-media);
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
}

.menu__item:hover { color: var(--tinta); }
.menu__item--atual { color: var(--tinta); border-bottom-color: var(--sinal); }

.menu__quem {
  margin-left: auto;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  color: var(--tinta-fraca);
}

.menu__sair { color: var(--tinta-media); }

.painel__topo {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  justify-content: space-between;
  border-bottom: var(--borda) solid var(--tinta);
  padding: 12px 0 16px;
}

.painel__acoes { display: flex; flex-wrap: wrap; gap: 10px; }

.pergunta-publica {
  margin: 24px 0 0;
  padding: 16px 18px;
  background: var(--papel-morno);
  border-left: var(--borda) solid var(--sinal);
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: clamp(20px, 4vw, 25px);
  font-weight: 600;
  line-height: 1.2;
}

.pulso {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-radius: 50%;
  background: var(--positiva);
  animation: pisca 2s ease-in-out infinite;
}

@keyframes pisca { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.placar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin: 24px 0;
}

.placar__item { border: 2px solid var(--linha); padding: 16px 18px; }

.placar__numero {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: 46px;
  font-weight: 700;
  line-height: 1;
}

.placar__item--positiva .placar__numero { color: var(--positiva); }
.placar__item--negativa .placar__numero { color: var(--negativa); }
.placar__item--neutra   .placar__numero { color: var(--neutra); }

.placar__percentual {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 13px;
  color: var(--tinta-media);
}

.barra { display: flex; height: 14px; margin-bottom: 26px; background: var(--linha); }

.barra--linha { height: 8px; min-width: 90px; margin: 0; }

.barra__parte--positiva { background: var(--positiva); }
.barra__parte--negativa { background: var(--negativa); }
.barra__parte--neutra   { background: var(--neutra); }

.busca { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.busca .campo__entrada { flex: 1 1 220px; min-height: 46px; }

.bloco { margin-top: 34px; }

.bloco__titulo {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0 0 6px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--linha);
}

.bloco__ajuda { font-size: 14px; color: var(--tinta-media); margin: 0 0 16px; }

.linha-nova {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 2px dashed var(--linha);
}

.linha-nova .campo__entrada { flex: 1 1 200px; min-height: 46px; }

.em-linha { display: flex; gap: 6px; align-items: center; margin: 0; }

/* ---------- Tabelas ---------- */

.tabela-envolucro { overflow-x: auto; }

.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }

.tabela th {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 2px solid var(--tinta);
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tabela td { padding: 10px 12px; border-bottom: 1px solid var(--linha); vertical-align: middle; }

.tabela tbody tr:hover { background: var(--papel-morno); }

.tabela .num { text-align: right; }

.col-proporcao { width: 130px; }

.linha-inativa { opacity: .5; }

.mono { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 13px; white-space: nowrap; }

.marca-voto {
  display: inline-block;
  padding: 2px 10px;
  background: var(--tinta);
  color: var(--papel);
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .08em;
}

.nota { font-size: 12.5px; color: var(--tinta-fraca); }

.vazio { padding: 40px 0; text-align: center; color: var(--tinta-media); }

code {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .92em;
  padding: 1px 5px;
  background: var(--papel-morno);
}

/* ============================================================
   Acessibilidade e impressão
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, .pulso { transition: none !important; animation: none !important; }
}

@media print {
  body { background: #fff; padding: 0; }
  .cedula, .painel { box-shadow: none; }
  .picote::before, .picote::after { background: #fff; }
  .menu, .painel__acoes, .busca { display: none; }
}

@media (max-width: 560px) {
  .painel { padding: 0 16px 28px; }
  .menu { margin: 0 -16px 20px; padding: 0 16px; }
  .cedula__corpo { padding: 22px 18px 26px; }
  .canhoto { padding: 22px 18px; }
}

/* ---------- Links prontos para divulgar (painel) ---------- */

.links-prontos {
  margin-top: 22px;
  padding: 14px 16px;
  background: var(--papel-morno);
  border-left: var(--borda) solid var(--sinal);
}

.links-prontos p { margin: 2px 0; white-space: normal; word-break: break-all; }
.links-prontos a { color: var(--tinta); }

/* ---------- Marcação de IP repetido ---------- */

.etiqueta-ip {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  background: var(--sinal);
  color: #4a3800;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
}

/* ---------- Cronômetro regressivo ---------- */

.cronometro {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 16px 0 0;
  padding: 12px 16px;
  background: var(--tinta);
  color: var(--papel);
}

.cronometro__rotulo {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}

.cronometro__tempo {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: clamp(19px, 5vw, 24px);
  font-weight: 600;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}

.cronometro--urgente { background: var(--negativa); }
.cronometro--urgente .cronometro__rotulo { color: rgba(255, 255, 255, .75); }

.painel .cronometro { margin: 22px 0 0; }