/* Paleta e tipografia da identidade do Leo (docs/13_DESIGN_SYSTEM.md do
   monorepo), mas SEM nenhum arquivo de marca: so tokens e system-ui. E o que
   mantem este repo publicavel sem fork da identidade. */
:root {
  --laranja: #FD6F2F; --laranja-claro: #FFD6C2;
  --vinho: #491821;   --vinho-escuro: #2E0E15;
  --preto: #24221C;   --creme: #DDD9D3; --creme-claro: #EDEAE4;
  --bege: #D8C4A7;    --branco: #FFFFFF; --cinza: #5A5349;
  --verde: #143D1E;   --verde-claro: #CBE3CF;
  --vermelho: #8C1D1D;
  --linha: #D5CFC5;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--creme-claro); color: var(--preto);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
h1, h2 { margin: 0; font-weight: 600; }
a { color: #8C3A1C; }

.faixa {
  background: var(--vinho); color: var(--creme);
  padding: 14px 24px; display: flex; flex-wrap: wrap; gap: 14px;
  align-items: baseline; justify-content: space-between;
}
.marca strong { font-size: 20px; letter-spacing: .14em; }
.marca span { font-size: 12px; color: var(--bege); margin-left: 10px; }
.fonte { font-size: 12px; color: var(--bege); }

main { display: flex; flex-wrap: wrap; align-items: flex-start; }
aside {
  flex: 1 1 300px; max-width: 380px; background: var(--creme);
  padding: 22px 20px; display: flex; flex-direction: column; gap: 22px;
  align-self: stretch;
}
aside section { display: flex; flex-direction: column; gap: 8px; }
aside h2 {
  font-size: 11px; letter-spacing: .16em; color: #8C3A1C; text-transform: uppercase;
}
label { font-size: 13px; font-weight: 500; margin-top: 4px; }
input, select {
  padding: 10px 11px; font: inherit; font-size: 15px; border: 1.5px solid var(--vinho);
  border-radius: 6px; background: var(--branco); color: var(--preto); width: 100%;
}
.nota { margin: 2px 0 0; font-size: 12px; line-height: 1.45; color: var(--cinza); }

.degraus, .tipos { display: flex; flex-wrap: wrap; gap: 7px; }
.degraus button, .tipos button {
  padding: 9px 14px; font: inherit; font-size: 14px; font-weight: 500;
  border: 1.5px solid #B9B2A8; border-radius: 20px; background: var(--branco);
  color: var(--preto); cursor: pointer; min-height: 44px;
}
.degraus button[aria-pressed="true"], .tipos button[aria-pressed="true"] {
  background: var(--vinho); border-color: var(--vinho); color: var(--creme-claro);
}

.conteudo { flex: 999 1 520px; min-width: 0; padding: 22px 26px; display: flex; flex-direction: column; gap: 18px; }
.cabeca { display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline; justify-content: space-between; }
.cabeca h1 { font-size: 21px; }
.placar { font-size: 13px; color: var(--cinza); }
.placar b { color: var(--preto); }

.medido { background: var(--vinho); color: var(--creme-claro); border-radius: 10px; padding: 18px 20px; }
.medido .rot { font-size: 10.5px; letter-spacing: .16em; color: var(--bege); }
.medido h2 { font-size: 19px; margin: 8px 0 12px; }
.medido .numeros { display: flex; flex-wrap: wrap; gap: 26px; }
.medido .n { font-size: 26px; font-weight: 700; color: var(--laranja-claro); }
.medido .d { font-size: 12px; color: var(--bege); line-height: 1.4; }
.medido p { font-size: 12.5px; color: var(--bege); border-top: 1px solid #6B3A42; margin: 14px 0 0; padding-top: 10px; }

.trava { background: var(--vermelho); color: #fff; border-radius: 10px; padding: 18px 20px; }
.trava h2 { font-size: 19px; margin-bottom: 7px; }
.trava p { margin: 0; font-size: 14px; line-height: 1.5; }
.trava .lei { font-size: 12px; opacity: .85; margin-top: 8px; }

.lista { display: flex; flex-direction: column; gap: 10px; }
.item {
  background: var(--branco); border: 1px solid var(--linha);
  border-left: 4px solid var(--linha); border-radius: 9px; padding: 14px 16px;
}
.item.liberado { border-left-color: #2E7D32; }
.item.restrito { border-left-color: var(--laranja); }
.item.proibido { border-left-color: var(--vermelho); }
.item .topo { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; justify-content: space-between; }
.item .nome { font-size: 16px; font-weight: 600; }
.item .dist { font-size: 13px; font-weight: 600; color: #8C3A1C; white-space: nowrap; }
.item .end { font-size: 13px; color: var(--cinza); margin-top: 2px; }
.selo {
  display: inline-block; padding: 3px 10px; border-radius: 20px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
}
.selo.liberado { background: var(--verde-claro); color: var(--verde); }
.selo.restrito { background: var(--laranja-claro); color: var(--vinho-escuro); }
.selo.proibido { background: var(--vermelho); color: #fff; }
.tag { display: inline-block; padding: 3px 9px; border-radius: 20px; font-size: 11.5px; background: var(--creme-claro); color: var(--preto); }
.porque { margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: #3E3A33; }
.porque .lei { color: #8C3A1C; }

.cuidados { background: var(--creme); border-radius: 9px; padding: 16px 18px; }
.cuidados h2 { font-size: 11px; letter-spacing: .14em; color: #8C3A1C; margin-bottom: 8px; }
.cuidados li { font-size: 13px; line-height: 1.55; margin-bottom: 7px; }
.cuidados .lei { color: #8C3A1C; font-size: 12px; }

.rodape-nota { font-size: 12.5px; line-height: 1.55; color: var(--cinza); border-top: 1px solid var(--linha); padding-top: 14px; }
.escondido { display: none; }
.vazio { padding: 26px; text-align: center; color: var(--cinza); background: var(--branco); border: 1px dashed var(--linha); border-radius: 9px; }

footer {
  background: var(--vinho-escuro); color: var(--bege);
  padding: 16px 24px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  font-size: 12px; margin-top: 20px;
}
footer strong { color: var(--creme-claro); letter-spacing: .1em; font-size: 13px; }
.ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--laranja); display: inline-block; }
#selo-minuta { color: var(--laranja-claro); }

@media (max-width: 760px) {
  aside { max-width: none; }
  .conteudo { padding: 18px 16px; }
}

/* --- páginas estreitas (agenda compartilhada, criar) --- */
body.estreito main.unica { display: block; max-width: 560px; margin: 0 auto; }
body.estreito .conteudo { padding: 20px 16px; }
button.grande {
  width: 100%; padding: 15px; margin-top: 10px; font: inherit; font-size: 16px;
  font-weight: 600; border: none; border-radius: 8px; cursor: pointer;
  background: var(--laranja); color: var(--vinho-escuro); min-height: 48px;
}
button.grande.fora { background: transparent; color: var(--vinho); border: 1.5px solid var(--vinho); }
button.grande:disabled { opacity: .5; cursor: wait; }
.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.par { display: flex; gap: 12px; }
.par .campo { flex: 1; }
.caixa-link {
  background: var(--vinho); color: var(--creme-claro); border-radius: 10px;
  padding: 18px 20px; margin-bottom: 14px; word-break: break-all;
}
.caixa-link code {
  display: block; background: var(--vinho-escuro); padding: 10px 12px;
  border-radius: 6px; font-size: 13px; margin: 8px 0;
}

/* --- tabela da cobertura --- */
table { border-collapse: collapse; width: 100%; background: var(--branco);
  border: 1px solid var(--linha); border-radius: 9px; overflow: hidden; }
th, td { text-align: left; padding: 9px 12px; font-size: 13.5px; }
th { font-size: 10.5px; letter-spacing: .1em; color: #8C3A1C;
  border-bottom: 1.5px solid #B9B2A8; background: var(--creme); }
td { border-bottom: 1px solid var(--creme-claro); }
tr:last-child td { border-bottom: 0; }
main.unica { display: block; max-width: 980px; margin: 0 auto; }


/* --- o mapa --- */
/* `width: 100%` e `min-width: 0` nao sao decoracao: o Leaflet mede o
   container no `invalidateSize`, e um div sem largura explicita dentro de um
   flex column estoura a coluna e cobre a barra lateral inteira. */
#mapa {
  width: 100%; min-width: 0; max-width: 100%;
  height: 420px; border-radius: 10px; border: 1px solid var(--linha);
  background: var(--creme); z-index: 0; overflow: hidden;
}
#mapa.escondido { display: none; }
.leaflet-container { font: inherit; border-radius: 10px; }
.leaflet-popup-content-wrapper { border-radius: 8px; }
.leaflet-popup-content { margin: 12px 14px; }
#legenda-mapa { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
#legenda-mapa b { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
#legenda-mapa i {
  width: 11px; height: 11px; border-radius: 50%; display: inline-block;
  border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.15);
}
@media (max-width: 760px) { #mapa { height: 320px; } }


/* ------------------------------------------------- leitura de urna (1o turno)
   O saldo e o numero que impede a lista de mandar gente reforcar o outro lado,
   e por isso ele e o maior da ficha — nao a pilha de ausentes, que e sempre o
   numero mais chamativo e o mais facil de ler errado. */
.urna-ficha {
  margin-top: 12px;
  border: 1px solid var(--linha);
  border-radius: 8px;
  padding: 11px 13px;
  background: var(--branco);
}
.urna-ficha .saldo {
  font-size: 23px;
  font-weight: 700;
  line-height: 1.1;
}
.urna-ficha .saldo.bom { color: var(--verde); }
.urna-ficha .saldo.ruim { color: var(--vermelho); }
.urna-ficha .saldo-rot {
  font-size: 11.5px;
  color: var(--cinza);
  margin-bottom: 7px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.urna-ficha .pilhas {
  display: flex;
  gap: 16px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--linha);
}
.urna-ficha .pilhas div { flex: 1 1 0; }
.urna-ficha .pilhas .n { font-size: 16px; font-weight: 600; }
.urna-ficha .pilhas .d { font-size: 11px; line-height: 1.35; color: var(--cinza); }
.urna-ficha .alerta {
  margin-top: 10px;
  padding: 9px 11px;
  border-radius: 6px;
  background: #FFE1D6;
  font-size: 12px;
  line-height: 1.45;
  color: #5A1A0A;
}
.urna-ficha .alerta.cinza { background: var(--creme-claro); color: var(--cinza); }
#ordem-fora:empty { display: none; }

/* O "o que pode" da trava. Destacado de proposito: a tela que so diz "nao"
   deixa um vazio, e quem esta na rua preenche sozinho — foi assim que
   "levar gente pra votar" virou conselho oficial da ferramenta. */
.trava .pode {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.14);
}

/* Falha de carregamento, nas duas paginas que leem dado direto. Vermelho
   porque e erro, mas com texto legivel: o estado vazio delas era uma div em
   branco, e div em branco se le como "ainda carregando". */
.falhou {
  border-left: 4px solid var(--vermelho);
  background: #FFE1D6;
  color: #5A1A0A;
  border-radius: 7px;
  padding: 14px 16px;
  line-height: 1.5;
}

/* A regional na ficha do local. Nao e enfeite: e ela que diz em QUE grupo de
   WhatsApp avisar, e e a pergunta que a coordenacao faz depois de escolher o
   ponto. */
.medido .reg-selo {
  display: inline-block;
  margin: 2px 0 10px;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  font-size: 12.5px;
  font-weight: 500;
}