/* VotaIPB — estilos. Sem dependências externas (roda offline na rede da igreja).
   Cores em tokens; cada cor de texto tem contraste ≥ 4,5:1 sobre o fundo em que é usada,
   nos dois temas. "Preenchimento" (fundo de botão) e "texto" são tokens separados. */
:root {
  color-scheme: light dark;
  --fundo: #f6f5f1;
  --papel: #ffffff;
  --papel-2: #f1efe9;      /* segundo plano: cabeçalho de tabela, áreas de apoio */
  --tinta: #1d2329;
  --suave: #5c6670;
  --linha: #d9d6cc;
  --marca: #14532d;        /* preenchimento: topo, botões */
  --marca-tinta: #ffffff;  /* texto sobre --marca */
  --marca-texto: #14532d;  /* links e botões contornados sobre o papel */
  --perigo: #b42318;
  --perigo-texto: #b42318;
  --ok: #166534;
  --ok-texto: #166534;
  --atencao: #b45309;
  --foco: #2563eb;
  --branco-urna: #ffffff;
  --corrige: #e8790c;
  --confirma: #15803d;
  --visor: #e9efe6;
  --raio: 10px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--tinta);
  background: var(--fundo);
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}
/* Tema: o tema.js põe data-tema="claro|escuro" no <html> (botão em todas as
   telas). Sem JavaScript, vale o tema do sistema. */
:root[data-tema="claro"] { color-scheme: light; }
:root[data-tema="escuro"] {
  color-scheme: dark;
  --fundo: #15191d; --papel: #1e2328; --papel-2: #252b31; --tinta: #e8eaed; --suave: #a3acb5; --linha: #343b42;
    --marca: #1f6f43; --marca-texto: #6fcf97; --perigo-texto: #f97066; --ok-texto: #4ade80; --atencao: #f0a050;
    --foco: #7aa7ff; --visor: #23302a; --branco-urna: #f2f2f2;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema]) {
    color-scheme: dark;
    --fundo: #15191d; --papel: #1e2328; --papel-2: #252b31; --tinta: #e8eaed; --suave: #a3acb5; --linha: #343b42;
    --marca: #1f6f43; --marca-texto: #6fcf97; --perigo-texto: #f97066; --ok-texto: #4ade80; --atencao: #f0a050;
    --foco: #7aa7ff; --visor: #23302a; --branco-urna: #f2f2f2;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); }
a { color: var(--marca-texto); text-underline-offset: .18em; }
code { font-size: .9em; }
::selection { background: color-mix(in srgb, var(--confirma) 30%, transparent); }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: 4px; }
[tabindex="-1"]:focus { outline: none; }

.topo { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .75rem 1rem;
  background: var(--marca); color: var(--marca-tinta); flex-wrap: wrap; }
.topo a, .topo .link { color: var(--marca-tinta); }
.topo :focus-visible { outline-color: #fff; }
.marca { font-weight: 800; text-decoration: none; font-size: 1.15rem; letter-spacing: .02em; }
.topo nav { display: flex; gap: 1rem; align-items: center; }
.topo form { margin: 0; }

.alternar-tema { font: inherit; font-size: .9rem; display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  background: transparent; color: inherit; border: 1px solid color-mix(in srgb, currentColor 45%, transparent); border-radius: 99px;
  padding: .25rem .7rem; min-height: 2rem; white-space: nowrap; }
.alternar-tema:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.icone-tema { width: 1rem; height: 1rem; flex: none; background: currentColor;
  -webkit-mask: var(--icone-lua) center / contain no-repeat; mask: var(--icone-lua) center / contain no-repeat; }
.alternar-tema[data-proximo="claro"] .icone-tema { -webkit-mask-image: var(--icone-sol); mask-image: var(--icone-sol); }
:root {
  --icone-lua: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 14.5A8.5 8.5 0 0 1 9.5 4a8.5 8.5 0 1 0 10.5 10.5z'/%3E%3C/svg%3E");
  --icone-sol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.5' fill='black'/%3E%3Cpath d='M12 1.5v2.5M12 20v2.5M1.5 12h2.5M20 12h2.5M4.6 4.6l1.8 1.8M17.6 17.6l1.8 1.8M4.6 19.4l1.8-1.8M17.6 6.4l1.8-1.8'/%3E%3C/svg%3E");
}

.conteudo { max-width: 960px; margin: 0 auto; padding: 1rem; }
.conteudo.largo { max-width: 1240px; }
.sobretitulo { color: var(--suave); font-size: .9rem; font-weight: 600; margin: .5rem 0 0; }
.sobretitulo + h1 { margin-top: .1rem; }
.subtitulo { color: var(--suave); margin: -.5rem 0 1rem; }
.grade-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 0 1rem; }
.grade-2 > .cartao { margin-bottom: 0; }
.passos { padding-left: 1.3rem; margin: .5rem 0 .75rem; display: grid; gap: .3rem; }
.cadastro-na-hora.aberto { border-color: var(--ok-texto); box-shadow: inset 4px 0 0 var(--ok-texto); }
.controle-cadastro { margin: .5rem 0; }
.zona-perigo { border-color: color-mix(in srgb, var(--perigo-texto) 45%, var(--linha)); }
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.checklist li { position: relative; padding-left: 2rem; }
.checklist li::before { content: ""; position: absolute; left: 0; top: .1rem; width: 1.25rem; height: 1.25rem; border-radius: 50%;
  border: 2px solid var(--linha); box-sizing: border-box; }
.checklist li.feito::before { border: 0; background: var(--ok-texto);
  -webkit-mask: var(--icone-feito) center / contain no-repeat; mask: var(--icone-feito) center / contain no-repeat; }
:root { --icone-feito: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 0a12 12 0 1 1 0 24a12 12 0 0 1 0-24zM6.2 11.6l-1.4 1.4 5.2 5.2 9.2-9.2-1.4-1.4-7.8 7.8z'/%3E%3C/svg%3E"); }

/* ---------- Página da votação: menu lateral + conteúdo ---------- */
.area-votacao { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 2rem; align-items: start; }
.menu-votacao { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; font-size: .95rem; padding: .5rem 0 1rem; }
.menu-titulo { display: block; font-weight: 800; color: var(--tinta); text-decoration: none; padding: .25rem .75rem .75rem; line-height: 1.25; }
.menu-abas, .menu-sub, .menu-acoes { list-style: none; margin: 0; padding: 0; }
.menu-abas > li > a, .menu-grupo-titulo { display: block; padding: .45rem .75rem; border-radius: 6px; color: var(--tinta); text-decoration: none; font-weight: 600; }
.menu-grupo-titulo { color: var(--suave); font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; padding-top: 1rem; }
.menu-grupo:not(:has(li)) { display: none; }
.menu-sub a { display: flex; gap: .4rem; align-items: center; padding: .3rem .75rem .3rem 1.4rem; color: var(--suave); text-decoration: none; border-radius: 6px; font-size: .9rem; }
.menu-grupo .menu-sub a { padding-left: .75rem; }
.menu-votacao a:hover { background: var(--papel-2); color: var(--tinta); }
.menu-votacao a[aria-current="page"] { background: color-mix(in srgb, var(--marca-texto) 13%, transparent); color: var(--marca-texto); box-shadow: inset 3px 0 0 var(--marca-texto); }
.selo-aberto { margin-left: auto; font-size: .72rem; font-weight: 700; color: var(--ok-texto); border: 1px solid var(--ok-texto); border-radius: 99px; padding: 0 .4rem; }
.menu-apurado { margin-left: auto; font-size: .75rem; }
.menu-acoes { border-top: 1px solid var(--linha); margin-top: .75rem; padding-top: .5rem; }
.menu-acoes a { display: block; padding: .35rem .75rem; font-weight: 600; border-radius: 6px; text-decoration: none; }
.menu-acoes a::after { content: " ↗"; }
.cargo, #novo-cargo, #cadastro { scroll-margin-top: 4.5rem; }
/* Depois de salvar, a página volta rolada até o cargo: o aviso fica preso no
   alto da área de conteúdo para não sumir da vista. */
.area-conteudo > .aviso.flash { position: sticky; top: .5rem; z-index: 4; display: flex; gap: .75rem; align-items: flex-start;
  background: var(--papel); box-shadow: 0 4px 14px rgba(0,0,0,.14); margin: 0 0 1rem; }
.area-conteudo > .aviso.flash.ok { background: color-mix(in srgb, var(--ok-texto) 9%, var(--papel)); }
.area-conteudo > .aviso.flash.erro { background: color-mix(in srgb, var(--perigo-texto) 9%, var(--papel)); }
.fechar-aviso { margin-left: auto; flex: none; font: inherit; font-size: 1.2rem; line-height: 1; background: none; border: 0;
  color: inherit; cursor: pointer; padding: .1rem .35rem; border-radius: 4px; }
.cargo > h2 { margin-bottom: .15rem; }
.cargo > .nota { margin-top: 0; }
@media (min-width: 861px) { .area-votacao .trilha { display: none; } }
@media (max-width: 860px) {
  .area-votacao { display: block; }
  /* No celular: faixa de abas fixa no alto, rolando para o lado. */
  .menu-votacao { position: sticky; top: 0; z-index: 5; background: var(--fundo); margin: -1rem -1rem .75rem; padding: .4rem 1rem;
    border-bottom: 1px solid var(--linha); max-height: none; overflow-x: auto; overscroll-behavior-x: contain; }
  .menu-titulo, .menu-sub, .menu-grupo, .menu-acoes { display: none; }
  .menu-abas { display: flex; gap: .2rem; white-space: nowrap; }
  .menu-abas > li > a { padding: .5rem .7rem; }
  .menu-votacao a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--marca-texto); }
  .cargo, #novo-cargo, #cadastro { scroll-margin-top: 7rem; }
  .area-conteudo > .aviso.flash { top: 3.4rem; }
}
@media (max-width: 640px) {
  .tabela-membros th:nth-child(2), .tabela-membros td:nth-child(2), .tabela-membros th:nth-child(3), .tabela-membros td:nth-child(3) { display: none; }
  .cartao { overflow-x: auto; }
  .topo { padding: .6rem 1rem; gap: .5rem; }
  .topo nav { gap: .75rem; flex-wrap: wrap; }
  .topo .rotulo-tema { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .topo .alternar-tema { padding: .35rem .5rem; min-width: 2.25rem; justify-content: center; }
}
h1 { font-size: 1.6rem; margin: .5rem 0 1rem; line-height: 1.2; text-wrap: balance; }
h2 { font-size: 1.2rem; margin: 0 0 .75rem; }
h3 { font-size: 1.05rem; margin: 1.25rem 0 .5rem; }
h4 { font-size: .9rem; font-weight: 600; margin: 1.1rem 0 .4rem; color: var(--suave); }
.nota { color: var(--suave); font-size: .9rem; font-weight: normal; }
.centro { text-align: center; }
.cartao { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 1rem 1.25rem; margin: 1rem 0; }
.estreito { max-width: 420px; margin: 2rem auto; }
.destaque { max-width: 640px; margin: 3rem auto; text-align: center; }
.acoes { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }
.trilha { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: .25rem 0 .5rem; }

.pilha { display: grid; gap: .75rem; }
.linha { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; margin: .75rem 0; }
.inline { display: inline-flex; gap: .4rem; margin: 0; }
label { display: grid; gap: .25rem; font-size: .92rem; }
label.check { display: flex; gap: .6rem; align-items: flex-start; line-height: 1.4; }
label.check input[type=checkbox], label.check input[type=radio] { flex: none; width: 1.2rem; height: 1.2rem; margin: .1rem 0 0;
  accent-color: var(--confirma); }
input, select, textarea { font: inherit; padding: .5rem .6rem; border: 1px solid var(--linha); border-radius: 6px;
  background: var(--papel); color: var(--tinta); min-width: 0; }
input::placeholder, textarea::placeholder { color: var(--suave); opacity: 1; }
input[type=file] { padding: .35rem; }
input[type=file]::file-selector-button { font: inherit; font-weight: 600; border: 1px solid var(--marca-texto); color: var(--marca-texto);
  background: transparent; border-radius: 5px; padding: .3rem .7rem; margin-right: .6rem; cursor: pointer; }
.botao { font: inherit; font-weight: 600; padding: .55rem 1rem; border-radius: 6px; border: 1px solid var(--marca);
  background: var(--marca); color: var(--marca-tinta); cursor: pointer; text-decoration: none; display: inline-block;
  transition: filter .15s ease-out; }
.botao:hover { filter: brightness(1.12); }
.botao:active { filter: brightness(.92); }
.botao:disabled { opacity: .55; cursor: not-allowed; filter: none; }
.botao.secundario { background: transparent; color: var(--marca-texto); border-color: var(--marca-texto); }
.botao.secundario:hover { background: color-mix(in srgb, var(--marca-texto) 10%, transparent); filter: none; }
.botao.perigo { background: var(--perigo); border-color: var(--perigo); color: #fff; }
button.link { background: none; border: 0; padding: 0; font: inherit; color: var(--marca-texto); text-decoration: underline;
  text-underline-offset: .18em; cursor: pointer; }
.aviso { padding: .6rem .8rem; border-radius: 6px; border: 1px solid; }
.aviso.ok { border-color: var(--ok-texto); color: var(--ok-texto); background: color-mix(in srgb, var(--ok-texto) 7%, transparent); }
.aviso.erro { border-color: var(--perigo-texto); color: var(--perigo-texto); background: color-mix(in srgb, var(--perigo-texto) 7%, transparent); }
.aviso.atencao { border-color: var(--atencao); color: var(--tinta); background: color-mix(in srgb, var(--atencao) 10%, var(--papel)); }
.ok-texto { color: var(--ok-texto); font-weight: 600; }
.perigo-texto { color: var(--perigo-texto) !important; border-color: var(--perigo-texto) !important; }

table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--linha); vertical-align: middle; }
th { font-weight: 600; color: var(--suave); font-size: .85rem; }
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
.lista { padding-left: 1.2rem; }
.lista.colunas { columns: 2 16rem; }
.lista-votacoes { list-style: none; padding: 0; margin: 0; }
.lista-votacoes li { display: flex; flex-wrap: wrap; gap: .4rem .75rem; align-items: baseline; padding: .6rem 0; border-bottom: 1px solid var(--linha); }
.lista-votacoes a { font-weight: 600; font-size: 1.05rem; }
.lista-votacoes .nota { margin-left: auto; }
.eleito { color: var(--ok-texto); }
.linha-eleito { background: color-mix(in srgb, var(--ok-texto) 10%, transparent); }
.status { font-size: .78rem; font-weight: 600; padding: .1rem .55rem; border-radius: 99px; border: 1px solid var(--linha);
  color: var(--suave); white-space: nowrap; vertical-align: middle; }
.status.aberto { border-color: var(--ok-texto); color: var(--ok-texto); background: color-mix(in srgb, var(--ok-texto) 8%, transparent); }
.placar { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .75rem; margin: 1rem 0; }
.placar div { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); padding: .75rem; text-align: center; }
.placar strong { display: block; font-size: 2rem; font-variant-numeric: tabular-nums; }
.placar span { color: var(--suave); font-size: .85rem; }
.confirmar { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin: 1rem 0; }
.link-votacao { font-size: 1.1rem; word-break: break-all; }

/* Foto do candidato: redonda, tamanho fixo (a lista não pula quando a foto
   chega em rede lenta). Sem foto, uma silhueta neutra no mesmo lugar. */
.avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; display: inline-block; vertical-align: middle;
  background: var(--papel-2); border: 1px solid var(--linha); }
.avatar.vazio { background: var(--papel-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='%2394a3b8'%3E%3Ccircle cx='20' cy='15' r='7'/%3E%3Cpath d='M6 36c1.5-8 7-12 14-12s12.5 4 14 12z'/%3E%3C/g%3E%3C/svg%3E") center / 82% no-repeat; }
.avatar.grande { width: 96px; height: 96px; }
.avatar.foto-visor { width: 72px; height: 72px; border-width: 2px; }
.col-avatar { width: 52px; padding-right: 0; }
.tabela-candidatos td { padding-top: .35rem; padding-bottom: .35rem; }
.form-foto { display: inline-flex; gap: .4rem; align-items: center; }
.arquivo { display: inline-block; position: relative; cursor: pointer; color: var(--marca-texto); text-decoration: underline; text-underline-offset: .18em; }
.arquivo input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.arquivo:focus-within { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: 4px; }
.com-js .so-sem-js { display: none; }
html:not(.com-js) .arquivo input { position: static; opacity: 1; }
html:not(.com-js) .arquivo span { display: none; }
.enviando { opacity: .6; pointer-events: none; }

/* ---------- Urna ----------
   Clara por padrão, como a urna real, mesmo com o celular no modo escuro
   (data-tema-padrao="claro"). Escura só se a pessoa tocar no botão de tema;
   aí as teclas ganham borda para não sumirem no cartão escuro. */
.pagina-urna { color-scheme: light; background: #cfcabd; --caixa: #cfcabd;
  --papel: #ffffff; --papel-2: #f1efe9; --tinta: #1d2329; --suave: #4a535c; --linha: #c9c4b6; --visor: #e9efe6;
  --marca: #14532d; --marca-texto: #14532d; --perigo-texto: #b42318; --ok-texto: #166534; --atencao: #b45309;
  --foco: #2563eb; --branco-urna: #ffffff; color: var(--tinta); }
:root[data-tema="escuro"] .pagina-urna { color-scheme: dark; --caixa: #0d1012; background: var(--caixa);
  --papel: #1e2328; --papel-2: #252b31; --tinta: #e8eaed; --suave: #a3acb5; --linha: #3d454d; --visor: #22302a;
  --marca: #1f6f43; --marca-texto: #6fcf97; --perigo-texto: #f97066; --ok-texto: #4ade80; --atencao: #f0a050;
  --foco: #7aa7ff; --branco-urna: #f2f2f2; }
:root[data-tema="escuro"] .pagina-urna .tecla.num { background: #30363c; box-shadow: 0 3px 0 #000; outline: 1px solid #4a525a; }
:root[data-tema="escuro"] .pagina-urna .tela { box-shadow: 0 2px 10px rgba(0,0,0,.5); }
:root:has(.pagina-urna) { background: #cfcabd; }
:root[data-tema="escuro"]:has(.pagina-urna) { background: #0d1012; }
.urna-topo .alternar-tema { flex: none; font-size: .8rem; color: var(--tinta); }
.urna { max-width: 560px; margin: 0 auto; padding: .75rem; min-height: 100vh; }
.urna-topo { display: flex; justify-content: space-between; gap: .75rem; align-items: center; padding: .25rem .25rem .75rem; }
.urna-marca { font-weight: 800; color: var(--marca-texto); flex: none; }
.urna-titulo { color: var(--suave); margin-left: auto; font-size: .9rem; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tela { background: var(--papel); border-radius: 14px; padding: 1.25rem; box-shadow: 0 2px 6px rgba(40,35,20,.12); }
.tela h1 { font-size: 1.45rem; margin-top: 0; }
.conexao { background: #fff4e5; color: #7a4100; border: 1px solid #f0b46b; border-radius: 8px; padding: .6rem .8rem; margin: 0 0 .75rem; }
#ident { font-size: 1.6rem; text-align: center; letter-spacing: .08em; padding: .75rem; }

.cedula-cab h1 { margin-bottom: .2rem; }
.cedula-cab p { margin: 0 0 .75rem; color: var(--tinta); font-size: 1.05rem; }
.visor { background: var(--visor); border: 2px solid var(--linha); border-radius: 8px; padding: .75rem; min-height: 6rem; margin-bottom: .5rem;
  display: flex; gap: .75rem; align-items: center; justify-content: space-between; }
.visor-texto { min-width: 0; }
.visor-numero { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 2.2rem; letter-spacing: .4em; line-height: 1.1; }
.visor-nome { font-weight: 700; font-size: 1.15rem; min-height: 1.4em; }
.visor-nome.erro { color: var(--perigo-texto); }
.visor-dica { font-size: .95rem; color: var(--tinta); min-height: 1.3em; }
.visor-foto:empty { display: none; }
.escolhidos { font-weight: 600; min-height: 1.4em; margin: .25rem 0 .5rem; }
.candidatos { list-style: none; padding: 0; margin: 0 0 .75rem; display: grid; gap: .4rem; }
.candidato { width: 100%; display: flex; gap: .75rem; align-items: center; text-align: left; font: inherit; font-size: 1.1rem;
  padding: .5rem .75rem; border: 2px solid var(--linha); border-radius: 8px; background: var(--papel); color: var(--tinta); cursor: pointer; min-height: 3.5rem; }
.candidato.marcado { border-color: var(--confirma); background: color-mix(in srgb, var(--confirma) 12%, var(--papel)); font-weight: 700; }
.candidato.marcado::after { content: ""; margin-left: auto; width: 1.4rem; height: 1.4rem; flex: none; background: var(--confirma);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.candidato.digitado { border-style: dashed; border-color: var(--confirma); }
.cand-num { font-family: ui-monospace, Menlo, monospace; font-weight: 800; min-width: 2.5ch; }
.teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; max-width: 300px; margin: 0 auto .75rem; }
.tecla { font: inherit; font-weight: 800; border-radius: 6px; cursor: pointer; padding: .75rem .5rem; border: 0;
  box-shadow: 0 3px 0 rgba(0,0,0,.35); min-height: 3.2rem; font-size: 1.05rem; }
.tecla:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.35); }
.tecla:disabled { opacity: .6; }
.tecla.num { background: #222; color: #fff; font-size: 1.35rem; }
.acoes-urna { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.acoes-urna.duas { grid-template-columns: 1fr 1fr; }
.tecla.branco { background: var(--branco-urna); color: #111; border: 1px solid #8a8a8a; }
.tecla.corrige { background: var(--corrige); color: #111; }
.tecla.confirma { background: var(--confirma); color: #fff; }
.tecla.nao { background: #c0392b; color: #fff; }
.tecla.neutra { background: transparent; color: var(--tinta); border: 2px solid var(--linha); box-shadow: none; font-weight: 700; }
.tecla.grande { font-size: 1.2rem; width: 100%; }
.revisao { list-style: none; padding: 0; margin: .5rem 0 1rem; display: grid; gap: .5rem; font-size: 1.2rem; font-weight: 700; }
.revisao li { display: flex; gap: .75rem; align-items: center; padding: .5rem .75rem; border-radius: 8px; background: var(--visor); }
#rev-cargo { font-size: 1.05rem; margin: 0; }
.girando { width: 56px; height: 56px; border: 6px solid var(--linha); border-top-color: var(--confirma); border-radius: 50%;
  margin: 1rem auto; animation: girar 1s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .girando { animation: none; border-top-color: var(--linha); border-color: var(--confirma); } }
.passo { text-align: center; }
.passo-titulo { font-size: 1.45rem; font-weight: 800; margin: .5rem 0 1rem; text-wrap: balance; }
.passo-titulo.ok::before { display: inline-block; vertical-align: -.2em; margin-right: .4rem; }
.passo-titulo.ok { color: var(--ok-texto); }
.passo-titulo.erro { color: var(--perigo-texto); }
.passo-titulo.ok::before, .fim-lista li::before { content: ""; width: 1.5rem; height: 1.5rem; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.passo-texto { font-size: 1.1rem; }
.passo-proximo { background: var(--visor); border-radius: 10px; padding: .9rem 1rem; margin: 0 0 1rem; }
.passo-proximo p { margin: 0; }
#passo-proximo { font-size: 1.35rem; font-weight: 800; }
.fim { text-align: center; }
.fim-texto { font-size: 5rem; font-weight: 900; letter-spacing: .1em; margin: 1rem 0 .25rem; }
.fim-msg { font-size: 1.35rem; font-weight: 700; color: var(--ok-texto); margin: 0 0 .75rem; }
.fim-lista { list-style: none; padding: 0; margin: 0 auto 1rem; display: grid; gap: .35rem; justify-content: center; font-size: 1.1rem; }
.fim-lista li { display: flex; gap: .5rem; align-items: center; color: var(--ok-texto); }
.fim-lista li::before { width: 1.2rem; height: 1.2rem; }
.unico { margin: .5rem 0 1rem; }
.unico-foto { display: flex; justify-content: center; margin-bottom: .5rem; }
.unico-nome { font-size: 1.6rem; font-weight: 800; text-align: center; padding: 1.25rem .5rem; border: 2px solid var(--linha); border-radius: 10px; background: var(--visor); }
fieldset.opcoes { border: 1px solid var(--linha); border-radius: 6px; display: flex; gap: 1.25rem; padding: .5rem .75rem; }
[hidden] { display: none !important; }

/* ---------- QR e cartaz ---------- */
.qr-linha { display: flex; gap: 1.25rem; align-items: flex-start; flex-wrap: wrap; }
.qr { border: 1px solid var(--linha); border-radius: 8px; background: #fff; padding: 6px; }
.acoes-esq { display: flex; gap: .5rem; flex-wrap: wrap; }
.acoes-linha { white-space: nowrap; text-align: right; } /* sem display:flex: célula flex sai do layout da tabela e perde a borda */
.acoes-linha form { margin: 0; display: inline-block; }
.acoes-linha form + form { margin-left: .75rem; }

.pagina-cartaz { background: #fff; color: #111; }
.cartaz { max-width: 640px; margin: 1.5rem auto; text-align: center; padding: 1rem; }
.cartaz img { width: min(360px, 80vw); height: auto; }
.cartaz-marca { font-weight: 800; color: #14532d; letter-spacing: .05em; }
.cartaz h1 { font-size: 2rem; }
.cartaz-passos { text-align: left; display: inline-block; font-size: 1.25rem; }
.cartaz-link { font-family: ui-monospace, Menlo, monospace; word-break: break-all; }
@media print { .nao-imprimir { display: none; } .cartaz { margin: 0 auto; } }

/* ---------- Telão ----------
   Feito para projetor: tamanhos em vw, alto contraste. Tema escuro (salão
   escurecido) ou claro (templo iluminado), escolhido por quem opera. */
.pagina-telao {
  --t-fundo: #0f1a14; --t-cartao: #17271e; --t-texto: #eef3ef; --t-suave: #b9c7bd; --t-linha: #2a3d31;
  --t-destaque: #7fd1a0; --t-barra: #3d5a49; --t-barra-eleito: #3fb871; --t-corte: #ffd166; --t-erro: #f97066;
  background: var(--t-fundo); color: var(--t-texto); min-height: 100vh; color-scheme: dark;
}
:root[data-tema="claro"] .pagina-telao {
  --t-fundo: #f4f3ee; --t-cartao: #ffffff; --t-texto: #13201a; --t-suave: #4a5a50; --t-linha: #d6d3c8;
  --t-destaque: #166534; --t-barra: #b8c9bd; --t-barra-eleito: #15803d; --t-corte: #b45309; --t-erro: #b42318;
  color-scheme: light;
}
:root:has(.pagina-telao) { background: #0f1a14; }
:root[data-tema="claro"]:has(.pagina-telao) { background: #f4f3ee; }
.telao { max-width: none; padding: 2vw 3vw calc(4vw + 3.5rem); }
.telao-cab { display: flex; justify-content: space-between; gap: 3vw; align-items: flex-start; }
.telao-titulo { min-width: 0; }
.telao-cab h1 { font-size: clamp(1.8rem, 3.4vw, 3.6rem); margin: 0 0 1.2vw; }
.telao-marca { color: var(--t-destaque); font-weight: 800; margin: 0 0 .3vw; letter-spacing: .05em; font-size: clamp(1rem, 1.3vw, 1.4rem); }
.telao-placar { display: flex; gap: 3vw; flex-wrap: wrap; }
.telao-placar p { margin: 0; font-size: clamp(1rem, 1.5vw, 1.6rem); color: var(--t-suave); }
.telao-placar strong { display: block; font-size: clamp(2.2rem, 4.5vw, 5rem); line-height: 1; color: var(--t-texto); font-variant-numeric: tabular-nums; }
.telao-qr { display: grid; justify-items: center; gap: .5vw; color: var(--t-suave); flex: none; }
.telao-qr img { background: #fff; padding: .6vw; border-radius: 10px; width: clamp(160px, 17vw, 340px); height: auto; }
.telao-qr span { font-size: clamp(.9rem, 1.2vw, 1.4rem); }
.telao-cargos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(560px, 100%), 1fr)); gap: 1.6vw; margin-top: 2vw; }
.telao-cargo { background: var(--t-cartao); border: 1px solid var(--t-linha); border-radius: 14px; padding: 1.4vw 1.8vw; }
.telao-cargo header { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.telao-cargo h2 { font-size: clamp(1.5rem, 2.6vw, 2.8rem); margin: 0; }
.telao-vagas { color: var(--t-suave); font-size: clamp(1rem, 1.3vw, 1.4rem); }
.telao-status { font-size: clamp(1.05rem, 1.5vw, 1.6rem); margin: .4vw 0 1vw; color: var(--t-suave); }
.telao-status.aberto { color: var(--t-destaque); font-weight: 700; }
.progresso { height: clamp(14px, 1.6vw, 28px); background: var(--t-linha); border-radius: 99px; overflow: hidden; }
.progresso-valor { height: 100%; background: var(--t-barra-eleito); transform-origin: left; transform: scaleX(0); transition: transform .6s cubic-bezier(.16,1,.3,1); }
.progresso-texto { font-size: clamp(1.1rem, 1.7vw, 1.9rem); margin: .6vw 0 0; font-variant-numeric: tabular-nums; }
.telao-parcial { display: inline-block; background: #e8790c; color: #111; font-weight: 800; padding: .1rem .6rem; border-radius: 6px; }
.barras { list-style: none; padding: 0; margin: .5vw 0 0; display: grid; gap: .9vw; }
.barra { color: var(--t-texto); display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "rotulo votos" "trilho trilho"; gap: .35vw 1vw; align-items: center; }
.barra-rotulo { grid-area: rotulo; display: flex; align-items: center; gap: .8vw; min-width: 0; font-size: clamp(1.05rem, 1.6vw, 1.8rem); }
.barra-rotulo .avatar { width: clamp(36px, 3.2vw, 64px); height: clamp(36px, 3.2vw, 64px); border-color: var(--t-linha); }
.barra-num { font-family: ui-monospace, Menlo, monospace; font-weight: 800; color: var(--t-suave); min-width: 2.5ch; }
.barra-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra.eleito .barra-nome { font-weight: 800; color: var(--t-destaque); }
.selo-eleito { font-size: .7em; font-weight: 800; letter-spacing: .06em; color: var(--t-fundo); background: var(--t-destaque); padding: .1em .5em; border-radius: 6px; flex: none; }
.barra-votos { grid-area: votos; font-size: clamp(1.05rem, 1.6vw, 1.8rem); font-variant-numeric: tabular-nums; white-space: nowrap; }
.barra-votos span { color: var(--t-suave); font-size: .8em; }
.barra-trilho { grid-area: trilho; position: relative; height: clamp(14px, 1.5vw, 26px); background: color-mix(in srgb, var(--t-linha) 70%, transparent); border-radius: 6px; }
.barra-valor { height: 100%; background: var(--t-barra); border-radius: 6px; transform-origin: left; transform: scaleX(0); transition: transform .6s cubic-bezier(.16,1,.3,1); }
.barra-trilho { overflow: visible; }
.barra.eleito .barra-valor { background: var(--t-barra-eleito); }
.barra-corte { position: absolute; top: -5px; bottom: -5px; width: 3px; margin-left: -1.5px; background: var(--t-corte); border-radius: 2px; }
.telao-legenda { display: flex; align-items: center; gap: .5vw; color: var(--t-suave); font-size: clamp(.95rem, 1.2vw, 1.3rem); margin: 1.2vw 0 0; }
.legenda-corte { display: inline-block; width: 4px; height: 1.2em; background: var(--t-corte); border-radius: 2px; }
.telao-eleitos { font-size: clamp(1.2rem, 2vw, 2.2rem); font-weight: 800; color: var(--t-destaque); margin: 1vw 0 0; }
.telao-erro { color: var(--t-erro); border: 1px solid var(--t-erro); border-radius: 8px; padding: .6rem .8rem; margin-top: 1.5vw; font-size: 1.2rem; }
.telao-tema { display: flex; justify-content: flex-end; gap: .25rem; margin-top: 2vw; opacity: .4; transition: opacity .2s ease-out; }
.telao-tema:hover, .telao-tema:focus-within { opacity: 1; }
.telao-tema .alternar-tema { color: var(--t-texto); background: var(--t-cartao); border-color: var(--t-linha); }

/* Gaveta "Membros": alça fixa embaixo; aberta, sobe e cobre a tela. */
.gaveta-alca { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 20; font: inherit; font-weight: 700;
  font-size: clamp(1rem, 1.3vw, 1.4rem); display: flex; gap: .6em; align-items: center; cursor: pointer; white-space: nowrap;
  padding: .55em 1.4em .5em; border: 1px solid var(--t-linha); border-bottom: 0; border-radius: 14px 14px 0 0;
  background: var(--t-cartao); color: var(--t-texto); box-shadow: 0 -4px 18px rgba(0,0,0,.25); }
.gaveta-alca:hover { color: var(--t-destaque); }
.alca-resumo { color: var(--t-suave); font-weight: 600; }
.seta { width: .55em; height: .55em; border: solid currentColor; border-width: 3px 3px 0 0; transform: translateY(.15em) rotate(-45deg); flex: none; }
.seta.baixo { transform: translateY(-.15em) rotate(135deg); }
.gaveta { position: fixed; inset: 0; z-index: 30; background: var(--t-fundo); color: var(--t-texto); display: flex; flex-direction: column;
  padding: 2vw 3vw; transform: translateY(100%); visibility: hidden;
  transition: transform .4s cubic-bezier(.16,1,.3,1), visibility 0s linear .4s; }
.gaveta.aberta { transform: none; visibility: visible; transition: transform .4s cubic-bezier(.16,1,.3,1); }
.gaveta-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 2vw; }
.gaveta h2 { font-size: clamp(1.8rem, 3.4vw, 3.6rem); margin: 0; }
.gaveta-status { margin: .3vw 0 0; color: var(--t-suave); font-size: clamp(1rem, 1.4vw, 1.5rem); }
.gaveta-fechar { font: inherit; font-weight: 700; font-size: clamp(1rem, 1.3vw, 1.4rem); display: flex; gap: .6em; align-items: center; cursor: pointer;
  padding: .5em 1.1em; border-radius: 10px; border: 1px solid var(--t-linha); background: var(--t-cartao); color: var(--t-texto); flex: none; }
.gaveta-fechar:hover { color: var(--t-destaque); }
.gaveta-numeros { margin: 1.2vw 0; }
.gaveta-corpo { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 3vw; align-items: start; }
.gaveta h3 { font-size: clamp(1.1rem, 1.7vw, 1.9rem); margin: 0 0 .6vw; display: flex; flex-wrap: wrap; gap: .4em 1.2em; align-items: baseline; }
.gaveta-legenda { color: var(--t-suave); font-weight: 400; font-size: .7em; display: inline-flex; gap: .4em; align-items: center; }
.gaveta-legenda .marca-presenca + .marca-presenca { margin-left: .8em; }
.gaveta-lista { list-style: none; padding: 0; margin: 0; columns: 15rem auto; column-gap: 2.5vw; font-size: clamp(1rem, 1.35vw, 1.5rem); }
.gaveta-lista.uma-coluna { columns: auto; }
.gaveta-lista li { break-inside: avoid; display: flex; gap: .5em; align-items: center; padding: .25em 0; border-bottom: 1px solid var(--t-linha); }
.membro-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gaveta-lista li.ausente .membro-nome { color: var(--t-suave); }
.gaveta-lista li.vazio { color: var(--t-suave); border: 0; }
.marca-presenca { display: inline-block; width: .7em; height: .7em; border-radius: 50%; border: 2px solid var(--t-suave); flex: none; }
.presente > .marca-presenca, .marca-presenca.presente { background: var(--t-barra-eleito); border-color: var(--t-barra-eleito); }
.membro-situacao { color: var(--t-suave); font-size: .8em; }
.gaveta-lista li .etq { margin-left: auto; }
.etq { font-size: .68em; font-weight: 700; border: 1px solid var(--t-corte); color: var(--t-corte); border-radius: 99px; padding: 0 .5em; white-space: nowrap; }
@media (max-width: 900px) { .gaveta-corpo { grid-template-columns: 1fr; } .gaveta-cab { flex-wrap: wrap; } }
@media (prefers-reduced-motion: reduce) { .barra-valor, .progresso-valor, .gaveta, .gaveta.aberta { transition: none; } }

.quiosque-faixa { background: var(--marca); color: #fff; text-align: center; font-weight: 700; padding: .4rem; border-radius: 8px; margin-bottom: .75rem; }

/* ---------- Documentos para imprimir ---------- */
.documento { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 1.5rem 2rem; }
.doc-marca { color: var(--marca-texto); font-weight: 800; letter-spacing: .04em; margin: 0; }
.documento h2 { margin-top: 1.25rem; }
.zeresima-num { font-size: 1.3rem; }
.codigo strong { font-family: ui-monospace, Menlo, monospace; letter-spacing: .05em; }
.minuta { white-space: pre-wrap; border: 1px dashed var(--linha); padding: 1rem; border-radius: 8px; font-family: Georgia, serif; line-height: 1.6; max-width: 75ch; }
.assinaturas { display: flex; justify-content: space-around; margin-top: 4rem; }
.assinaturas span { border-top: 1px solid var(--tinta); padding-top: .3rem; min-width: 14rem; text-align: center; }
@media print {
  /* Papel é sempre branco: mesmo com o sistema no modo escuro, imprime com as cores claras. */
  :root, :root[data-tema] { color-scheme: light; --fundo: #fff; --papel: #fff; --papel-2: #f1efe9; --tinta: #000; --suave: #444; --linha: #bbb;
    --marca-texto: #14532d; --ok-texto: #166534; --perigo-texto: #b42318; --atencao: #b45309; }
  .topo, .nao-imprimir, .aviso { display: none !important; }
  body, :root { background: #fff !important; color: #000; }
  .conteudo { max-width: none; padding: 0; }
  .documento { border: 0; padding: 0; }
  .linha-eleito { background: none; font-weight: 700; }
}

.foto-mini { width: 32px; height: 32px; object-fit: cover; border-radius: 50%; vertical-align: middle; margin-right: .4rem; }
.etiqueta { font-size: .75rem; border: 1px solid var(--atencao); color: var(--atencao); border-radius: 99px; padding: 0 .45rem; margin-left: .3rem; white-space: nowrap; }

/* =================== Rodada 5: fluxo guiado, cargos, janelas =================== */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.botao.grande { font-size: 1.05rem; padding: .75rem 1.3rem; }
.campo-largo { flex: 1 1 18rem; }
.campo-curto { width: 6.5rem; }
.cartao { padding: 1.25rem 1.5rem; }
.cartao-cab { margin: 0 0 1rem; }
.cartao-cab h2 { margin: 0 0 .3rem; display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.cartao-cab p { margin: 0; color: var(--suave); max-width: 68ch; }
.subcab { font-size: 1rem; margin: 1.25rem 0 0; padding-top: 1rem; border-top: 1px solid var(--linha); }
.vazio-cargo { color: var(--suave); background: var(--papel-2); border-radius: 8px; padding: .9rem 1rem; margin: 0 0 .75rem; }
.vazio-grande { text-align: center; padding: 2.5rem 1.5rem; }
.vazio-grande p { color: var(--suave); max-width: 52ch; margin: .5rem auto 0; }

/* Menu lateral numerado */
.menu-num { display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; font-size: .75rem; font-weight: 700;
  border: 1.5px solid currentColor; margin-right: .5rem; flex: none; vertical-align: .05em; }
.menu-abas > li > a { display: flex; align-items: center; }
.menu-grupo-titulo { display: flex; align-items: center; text-transform: none; letter-spacing: 0; font-size: .95rem; color: var(--tinta); padding-top: .45rem; }
.menu-grupo .menu-sub a { padding-left: 2.6rem; }
.menu-grupo:not(:has(li)) { display: block; }
.menu-vazio { padding: .2rem .75rem .3rem 2.6rem; color: var(--suave); font-size: .85rem; }
.menu-sep { border-top: 1px solid var(--linha); margin-top: .6rem; padding-top: .6rem; }
@media (max-width: 860px) { .menu-sep { border: 0; margin: 0; padding: 0; } .menu-num { display: none; } }

/* Próximo passo: o que fazer agora, com um único botão */
.proximo-passo { background: color-mix(in srgb, var(--marca-texto) 5%, var(--papel)); border: 1.5px solid color-mix(in srgb, var(--marca-texto) 55%, var(--linha)); border-radius: var(--raio);
  padding: 1.25rem 1.5rem 1.4rem; margin: 0 0 1.25rem; box-shadow: 0 2px 10px rgba(20,40,30,.06); }
.proximo-passo.concluido { border-color: color-mix(in srgb, var(--ok-texto) 55%, var(--linha)); background: color-mix(in srgb, var(--ok-texto) 6%, var(--papel)); }
.pp-etapa { margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--marca-texto); }
.proximo-passo h2 { font-size: 1.45rem; margin: .3rem 0 .4rem; line-height: 1.25; text-wrap: balance; }
.pp-texto { margin: 0 0 1rem; max-width: 64ch; font-size: 1.02rem; }
.pp-aviso { margin: 0 0 .75rem; padding: .5rem .75rem; border-radius: 6px; background: color-mix(in srgb, var(--atencao) 12%, var(--papel));
  border: 1px solid color-mix(in srgb, var(--atencao) 45%, transparent); font-size: .95rem; }
.pp-acao { margin: 0; display: grid; gap: .75rem; justify-items: start; }
.mais-opcoes { margin: .25rem 0 .75rem; }
.mais-opcoes summary { cursor: pointer; color: var(--marca-texto); font-weight: 600; font-size: .92rem; width: fit-content; }
.mais-opcoes[open] summary { margin-bottom: .6rem; }
.mais-opcoes > :not(summary) { margin-left: 1rem; }

/* Andamento: roteiro + link para votar */
.andamento-grade { display: grid; grid-template-columns: minmax(0, 1fr) 17.5rem; gap: 1.25rem; align-items: start; }
.andamento-grade > div > .cartao { margin-top: 0; }
@media (max-width: 1100px) { .andamento-grade { grid-template-columns: 1fr; } }
.link-votar { margin: 0; text-align: center; position: sticky; top: 1rem; }
.link-votar .qr { width: 180px; height: 180px; }
.link-votar .link-votacao { font-size: .95rem; }
.pilha-botoes { display: grid; gap: .5rem; }
.pilha-botoes .botao { text-align: center; }
.linha-tempo { list-style: none; margin: 0; padding: 0; }
.etapa { position: relative; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: .9rem; padding-bottom: 1.25rem; }
.etapa:not(:last-child)::before { content: ""; position: absolute; left: calc(1.125rem - 1px); top: 2.4rem; bottom: .2rem; width: 2px; background: var(--linha); }
.etapa-marca { width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; font-weight: 800;
  border: 2px solid var(--linha); color: var(--suave); background: var(--papel); }
.etapa.feita .etapa-marca { background: var(--ok-texto); border-color: var(--ok-texto); color: var(--papel); }
.etapa.feita:not(:last-child)::before { background: var(--ok-texto); }
.etapa.atual .etapa-marca { border-color: var(--marca-texto); color: var(--marca-texto); box-shadow: 0 0 0 4px color-mix(in srgb, var(--marca-texto) 18%, transparent); }
.etapa-corpo h3 { margin: .35rem 0 .2rem; font-size: 1.05rem; }
.etapa-corpo p { margin: 0; color: var(--suave); }
.etapa.atual .etapa-corpo h3 { color: var(--marca-texto); }
.cargos-tempo { list-style: none; padding: 0; margin: .5rem 0 0; display: grid; gap: .5rem; }
.cargos-tempo > li { border: 1px solid var(--linha); border-radius: 8px; padding: .55rem .75rem; background: var(--papel); }
.cargos-tempo > li.fase-votando { border-color: var(--marca-texto); }
.cargos-tempo > li.fase-concluido { background: color-mix(in srgb, var(--ok-texto) 5%, var(--papel)); }
.cargo-tempo-cab { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.escs-tempo, .eleitos-tempo { margin: .25rem 0 0; font-size: .9rem; color: var(--suave); }
.eleitos-tempo { color: var(--ok-texto); font-weight: 600; }

/* Selos de fase */
.selo { font-size: .75rem; font-weight: 700; padding: .12rem .55rem; border-radius: 99px; border: 1px solid var(--linha); color: var(--suave);
  white-space: nowrap; background: var(--papel); }
.selo.fase-votando { color: var(--ok-texto); border-color: var(--ok-texto); background: color-mix(in srgb, var(--ok-texto) 10%, var(--papel)); }
.selo.fase-pronto { color: var(--marca-texto); border-color: var(--marca-texto); }
.selo.fase-sem-candidatos { color: var(--atencao); border-color: var(--atencao); }
.selo.fase-concluido { color: var(--papel); background: var(--ok-texto); border-color: var(--ok-texto); }

/* Cargos recolhidos */
.cargo-dobra { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); margin: 0 0 .75rem; scroll-margin-top: 4.5rem; }
.cargo-dobra[open] { box-shadow: 0 2px 12px rgba(20,40,30,.07); }
.cargo-dobra > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: .9rem; align-items: center;
  padding: .9rem 1.25rem; border-radius: var(--raio); }
.cargo-dobra > summary::-webkit-details-marker { display: none; }
.cargo-dobra > summary::after { content: ""; width: .55rem; height: .55rem; border: solid var(--suave); border-width: 0 2px 2px 0; transform: rotate(45deg);
  margin: 0 .2rem .25rem; transition: transform .15s ease-out; }
.cargo-dobra[open] > summary::after { transform: rotate(-135deg); margin-bottom: -.1rem; }
.cargo-dobra > summary:hover { background: var(--papel-2); }
.cargo-ordem { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--papel-2); color: var(--tinta); }
.cargo-titulo { display: grid; gap: .1rem; min-width: 0; }
.cargo-titulo strong { font-size: 1.1rem; }
.cargo-corpo { padding: .25rem 1.25rem 1.25rem; border-top: 1px solid var(--linha); }
.cargo-corpo .tabela-candidatos { margin-top: .5rem; }
.form-candidato { margin: 1rem 0 0; padding: 1rem; border-radius: 8px; background: var(--papel-2); }
.form-candidato .linha { margin: 0 0 .5rem; }
.form-candidato .mais-opcoes { margin-bottom: 0; }
.com-js .campo-excecao:not(.visivel) { display: none; }
.campo-excecao { display: grid; gap: .5rem; margin: .25rem 0 .75rem; }
.campo-excecao .pp-aviso { margin: 0; }
.cargo-rodape { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; justify-content: space-between; margin-top: 1rem; }
.cargo-rodape .linha, .cargo-rodape p { margin: 0; }
@media (max-width: 640px) { .cargo-dobra > summary { grid-template-columns: auto minmax(0, 1fr) auto; } .cargo-dobra > summary .selo { grid-column: 2; justify-self: start; } .cargo-dobra > summary::after { grid-row: 1; grid-column: 3; } }

/* Menu ⋯ das linhas */
.col-menu { width: 2.75rem; text-align: right; }
.menu-linha { position: relative; display: inline-block; }
.menu-linha > summary { list-style: none; cursor: pointer; width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: 6px;
  font-size: 1.3rem; line-height: 1; color: var(--suave); }
.menu-linha > summary::-webkit-details-marker { display: none; }
.menu-linha > summary:hover, .menu-linha[open] > summary { background: var(--papel-2); color: var(--tinta); }
.menu-linha-itens { position: absolute; right: 0; top: calc(100% + 4px); z-index: 10; min-width: 12rem; display: grid; gap: .1rem; text-align: left;
  background: var(--papel); border: 1px solid var(--linha); border-radius: 8px; padding: .35rem; box-shadow: 0 8px 24px rgba(0,0,0,.16); }
.menu-linha-itens form { margin: 0; }
.menu-linha-itens .link, .menu-linha-itens .arquivo { display: block; width: 100%; text-align: left; padding: .45rem .6rem; border-radius: 5px; text-decoration: none; }
.menu-linha-itens .link:hover, .menu-linha-itens .arquivo:hover { background: var(--papel-2); }

/* Botão flutuante (+) */
.fab { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 15; display: inline-flex; align-items: center; gap: .5rem; text-decoration: none;
  background: var(--marca); color: var(--marca-tinta); border-radius: 99px; padding: .8rem 1.3rem .8rem 1rem; font-weight: 700;
  box-shadow: 0 6px 20px rgba(0,0,0,.25); transition: transform .15s ease-out, filter .15s ease-out; }
.fab:hover { filter: brightness(1.12); transform: translateY(-1px); }
.fab-mais { font-size: 1.6rem; line-height: 1; font-weight: 400; }
.area-conteudo:has(.fab) { padding-bottom: 5rem; }
@media (max-width: 640px) { .fab { right: 1rem; bottom: 1rem; padding: .9rem; } .fab-rotulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } }

/* Janelas */
dialog.modal { border: 0; padding: 0; border-radius: 14px; width: min(40rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem);
  background: var(--papel); color: var(--tinta); box-shadow: 0 20px 60px rgba(0,0,0,.35); }
dialog.modal::backdrop { background: rgba(10, 20, 15, .55); }
dialog.modal[open]:not(:modal) { position: fixed; inset: 0; margin: auto; z-index: 50; } /* sem JavaScript */
.modal-corpo { padding: 1.25rem 1.5rem 1.5rem; display: grid; gap: 1rem; }
.modal-cab { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.modal-cab h2 { margin: 0; font-size: 1.3rem; }
.fechar-modal { font-size: 1.6rem; line-height: 1; text-decoration: none; color: var(--suave); width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: 6px; }
.fechar-modal:hover { background: var(--papel-2); color: var(--tinta); }
.modal-acoes { display: flex; justify-content: flex-end; gap: .75rem; flex-wrap: wrap; padding-top: .25rem; }
.modal-corpo .linha { margin: 0; }
.grade-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: .75rem 1rem; }
.grade-form .largo { grid-column: 1 / -1; }
.escolha-cartoes { border: 0; padding: 0; margin: 0; display: grid; gap: .5rem; }
.escolha-cartoes legend { font-size: .92rem; margin-bottom: .4rem; padding: 0; }
.cartao-opcao, .opcao { display: flex; gap: .75rem; align-items: flex-start; padding: .75rem .9rem; border: 1.5px solid var(--linha); border-radius: 10px;
  cursor: pointer; font-size: 1rem; }
.cartao-opcao span, .opcao span { display: grid; gap: .15rem; }
.cartao-opcao input, .opcao input { flex: none; width: 1.15rem; height: 1.15rem; margin: .2rem 0 0; accent-color: var(--confirma); }
.cartao-opcao:has(input:checked), .opcao:has(input:checked) { border-color: var(--marca-texto); background: color-mix(in srgb, var(--marca-texto) 7%, var(--papel)); }
.cartao-opcao:hover, .opcao:hover { border-color: color-mix(in srgb, var(--marca-texto) 55%, var(--linha)); }

/* Ajuda e exemplos */
.ajuda { background: var(--papel-2); border-radius: 8px; padding: .8rem 1rem; margin: 1rem 0 0; font-size: .95rem; }
.ajuda summary { cursor: pointer; font-weight: 700; color: var(--marca-texto); }
.ajuda[open] summary { margin-bottom: .6rem; }
.ajuda p { margin: 0 0 .5rem; }
.ajuda ul { margin: .5rem 0 0; padding-left: 1.2rem; display: grid; gap: .3rem; }
.ajuda.aberta { border: 1px solid var(--linha); }
.tabela-rolavel { overflow-x: auto; margin: .25rem 0 .5rem; }
table.exemplo { font-family: ui-monospace, Menlo, monospace; font-size: .8rem; background: var(--papel); border: 1px solid var(--linha); white-space: nowrap; }
table.exemplo th { color: var(--marca-texto); font-size: .8rem; }
.passos { gap: .45rem; }

/* Situação dos membros */
.situacao { font-size: .85rem; padding: .05rem .5rem; border-radius: 99px; background: var(--papel-2); white-space: nowrap; }
.situacao.sit-comungante { color: var(--ok-texto); background: color-mix(in srgb, var(--ok-texto) 10%, var(--papel)); }
.etiqueta.perigo { border-color: var(--perigo-texto); color: var(--perigo-texto); }
.tabela-membros tr:target { background: color-mix(in srgb, var(--marca-texto) 10%, transparent); }
.tabela-membros tr { scroll-margin-top: 5rem; }

/* Cédula: quem está identificado neste aparelho */
.quem { display: flex; justify-content: space-between; align-items: center; gap: .75rem; background: var(--papel); border-radius: 10px;
  padding: .55rem .9rem; margin: 0 0 .75rem; font-size: 1rem; box-shadow: 0 1px 3px rgba(40,35,20,.1); }
.quem-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quem .link { font-weight: 700; flex: none; padding: .35rem .6rem; }