/* =====================================================================
   URNA — folha base da cabine e do portal (secoes 28, 29, 30)
   Regras cobradas em lint (28.8):
     - nenhuma cor literal aqui: tudo via var(--cor-*) de tema.css;
     - nenhuma animacao infinita; transicao de estado <= 200 ms;
     - alvo minimo 48px; foco visivel 3px; sem hover como unico canal.
   ===================================================================== */

/* ---- fontes auto-hospedadas (28.7): Inter (corpo) e IBM Plex Mono (destaque) ---- */
/* UrnaSans = Inter */
@font-face { font-family:"UrnaSans"; src:url("../fontes/urna-sans-400-latin.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; }
@font-face { font-family:"UrnaSans"; src:url("../fontes/urna-sans-400-latin-ext.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:"UrnaSans"; src:url("../fontes/urna-sans-600-latin.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; }
@font-face { font-family:"UrnaSans"; src:url("../fontes/urna-sans-600-latin-ext.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:"UrnaSans"; src:url("../fontes/urna-sans-700-latin.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; }
@font-face { font-family:"UrnaSans"; src:url("../fontes/urna-sans-700-latin-ext.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF; }
/* UrnaPixel = IBM Plex Mono (numeros, marca, hashes) */
@font-face { font-family:"UrnaPixel"; src:url("../fontes/urna-pixel-latin.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; }
@font-face { font-family:"UrnaPixel"; src:url("../fontes/urna-pixel-latin-ext.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:"UrnaPixel"; src:url("../fontes/urna-pixel-600-latin.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; }
@font-face { font-family:"UrnaPixel"; src:url("../fontes/urna-pixel-600-latin-ext.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF; }

/* ---- base ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html {
  font-size: calc(var(--fonte-base) * var(--escala));
  -webkit-text-size-adjust: 100%;
  background: var(--cor-fundo);
  color: var(--cor-texto);
}
body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--fonte-corpo);
  font-size: 1rem;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
}
img, svg, canvas { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: var(--cor-info); }
h1, h2, h3 { line-height: 1.2; margin: 0; }
p { margin: 0; }
.oculto-visual {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.icone { width: 1.25em; height: 1.25em; fill: currentColor; flex: none; }

/* foco visivel (29.5) */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--largura-foco) solid var(--cor-foco);
  outline-offset: 3px;
}
.pular-conteudo {
  position: absolute; left: var(--espaco-3); top: -100px;
  padding: var(--espaco-2) var(--espaco-3);
  background: var(--cor-superficie); color: var(--cor-texto);
  border: 2px solid var(--cor-texto); border-radius: var(--raio); z-index: 100;
}
.pular-conteudo:focus { top: var(--espaco-3); }

/* ---- cabecalho e marca ---------------------------------------------- */
.cabecalho {
  background: var(--cor-cabecalho);
  color: var(--cor-cabecalho-texto);
  border-bottom: 4px solid var(--cor-marca);
  display: flex; align-items: stretch; justify-content: space-between;
  min-height: 4.25rem;
  padding-left: var(--espaco-3);
}
.marca {
  display: flex; align-items: center; gap: var(--espaco-2);
  text-decoration: none; color: inherit;
  font-weight: 800; font-size: 1.6rem; letter-spacing: -0.02em;
  min-height: var(--alvo-min);
}
.marca .icone-urna { width: 2.4rem; height: 2.4rem; }
.marca .destaque { color: var(--cor-marca); }

/* abas (desktop) — icone em cima, rotulo embaixo; a ativa "desce" da barra */
.nav-abas { display: none; }
@media (min-width: 900px) {
  .nav-abas { display: flex; align-items: stretch; }
  .nav-abas ul { display: flex; list-style: none; margin: 0; padding: 0; }
  .aba {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; min-width: 8.5rem; min-height: 100%; padding: var(--espaco-2) var(--espaco-3);
    color: inherit; text-decoration: none; font-weight: 700; font-size: 0.85rem;
    border-left: 1px solid var(--cor-borda);
    position: relative;
  }
  .aba .icone { width: 1.6rem; height: 1.6rem; }
  .aba[aria-current="page"] {
    background: var(--cor-marca); color: var(--cor-marca-texto);
    border-radius: 0 0 var(--raio) var(--raio);
    margin-bottom: -6px; padding-bottom: 14px;
  }
  .aba:hover, .aba:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
}

/* gaveta (mobile) */
.botao-menu {
  display: flex; align-items: center; gap: var(--espaco-2);
  background: transparent; border: 0; color: inherit; cursor: pointer;
  min-width: var(--alvo-min); min-height: var(--alvo-min); padding: 0 var(--espaco-3);
  font-weight: 700;
}
.botao-menu .icone { width: 1.7rem; height: 1.7rem; }
@media (min-width: 900px) { .botao-menu { display: none; } }
.gaveta {
  position: fixed; inset: 0; z-index: 50;
  background: var(--cor-cabecalho); color: var(--cor-cabecalho-texto);
  padding: var(--espaco-4) var(--espaco-3);
  display: none; flex-direction: column; gap: var(--espaco-3);
  overflow: auto;
}
.gaveta[data-aberta="1"] { display: flex; }
.gaveta ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--espaco-2); }
.gaveta .item {
  display: flex; align-items: center; gap: var(--espaco-4);
  min-height: 4.5rem; padding: 0 var(--espaco-4);
  border-radius: var(--raio); text-decoration: none; color: inherit;
  font-weight: 700; letter-spacing: 0.08em; font-size: 1.05rem;
  background: color-mix(in srgb, var(--cor-cabecalho-texto) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--cor-cabecalho-texto) 12%, transparent);
}
.gaveta .item .icone { width: 2rem; height: 2rem; }
.gaveta .item[aria-current="page"] { background: var(--cor-marca); color: var(--cor-marca-texto); border-color: var(--cor-marca); }
.gaveta .fechar { align-self: flex-end; }
@media (min-width: 900px) { .gaveta { display: none !important; } }

/* ---- tela da urna (o painel central dos prints) ---------------------- */
.palco {
  flex: 1; display: grid; grid-template-columns: 1fr;
  align-content: start; justify-items: center;
  padding: var(--espaco-4) var(--espaco-3) var(--espaco-5);
  gap: var(--espaco-4);
  width: 100%; max-width: 72rem; margin: 0 auto;
}
@media (min-width: 900px) {
  .palco { grid-template-columns: 3rem 1fr 3rem; align-items: center; }
  .palco > .tela-urna { grid-column: 2; grid-row: 1; }
  .palco > .barra-adaptacao { grid-column: 2; grid-row: 2; }
  .palco > .furos:first-child { grid-column: 1; grid-row: 1; }
  .palco > .furos:last-child { grid-column: 3; grid-row: 1; }
}
.furos {
  display: none; width: 3rem; align-self: center;
  grid-template-columns: repeat(3, 8px); gap: 12px; justify-content: center;
}
.furos span { width: 8px; height: 8px; border-radius: 50%; background: var(--cor-borda); }
@media (min-width: 900px) { .furos { display: grid; } }

.tela-urna {
  width: 100%;
  background: var(--cor-tela); color: var(--cor-tela-texto);
  border: 3px solid var(--cor-cabecalho);
  border-radius: calc(var(--raio) + 4px);
  box-shadow: 0 0 0 10px var(--cor-superficie), 0 0 0 11px var(--cor-borda);
  padding: clamp(1.5rem, 4vw, 3rem);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--espaco-4); text-align: center;
  min-height: 24rem;
  position: relative; overflow: hidden;
  box-shadow: 0 0 0 14px var(--cor-superficie), 0 0 0 15px var(--cor-borda), inset 0 0 0 4px color-mix(in srgb, var(--cor-tela-texto) 6%, transparent);
  background-image: repeating-linear-gradient(0deg, transparent 0 3px, color-mix(in srgb, var(--cor-tela-texto) 4%, transparent) 3px 4px);
}
.tela-urna > * { position: relative; }
/* desktop: a urna 3D ocupa o lugar da marca d'agua, a direita, como no print;
   texto e botao ficam centralizados na tela. mobile: tudo empilhado ao centro. */
@media (min-width: 900px) {
  .tela-urna--vitrine {
    aspect-ratio: 16 / 10; min-height: 0;
    display: grid; grid-template-columns: 1fr minmax(16rem, 34%);
    grid-template-rows: 1fr auto auto 1fr; align-items: center; justify-items: center;
    column-gap: var(--espaco-4); padding: clamp(1.5rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3.5rem);
  }
  .tela-urna--vitrine .urna-3d { grid-column: 2; grid-row: 1 / -1; width: 100%; max-width: 22rem; aspect-ratio: 1; opacity: 0.92; }
  .tela-urna--vitrine .titulo-pixel { grid-column: 1; grid-row: 2; font-size: clamp(1.4rem, 3.4vw, 2.6rem); max-width: none; }
  .tela-urna--vitrine .subtitulo { grid-column: 1; grid-row: 3; }
  .tela-urna--vitrine .botao--primario { grid-column: 1; grid-row: 4; align-self: start; width: min(100%, 34rem); }
  .tela-urna--vitrine .faixa-aviso { grid-column: 1 / -1; grid-row: 4; align-self: end; }
}
.titulo-pixel {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.1rem, 3.2vw, 2.4rem);
  line-height: 1.5; letter-spacing: 0.02em; text-transform: uppercase;
  max-width: 24ch;
}
.subtitulo { font-size: 1.05rem; color: var(--cor-texto-apoio); max-width: 40ch; }
.urna-3d {
  width: min(100%, 26rem); aspect-ratio: 4 / 3; margin: 0 auto;
}
.urna-3d canvas { width: 100%; height: 100%; }
.urna-3d .urna-estatica { width: 100%; height: 100%; }

/* ---- botoes ---------------------------------------------------------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--espaco-2);
  min-height: var(--alvo-min); min-width: var(--alvo-min);
  padding: var(--espaco-2) var(--espaco-4);
  border-radius: var(--raio); border: 2px solid var(--cor-texto);
  background: var(--cor-superficie); color: var(--cor-texto);
  font-weight: 700; text-decoration: none; cursor: pointer;
  transition: background-color var(--duracao-transicao), color var(--duracao-transicao), transform var(--duracao-transicao);
}
.botao:active { transform: translateY(1px); }
.botao--primario {
  background: var(--cor-marca); color: var(--cor-marca-texto); border-color: var(--cor-marca);
  font-family: var(--fonte-titulo); text-transform: uppercase; letter-spacing: 0.06em;
  font-size: clamp(0.95rem, 2.2vw, 1.6rem);
  padding: var(--espaco-3) var(--espaco-5);
  width: min(100%, 30rem);
}
.botao--primario:hover, .botao--primario:focus-visible { background: var(--cor-marca-escura); border-color: var(--cor-marca-escura); }
.botao--primario .icone { width: 1.6em; height: 1.6em; }
.botao--secundario { background: transparent; }
.botao[aria-pressed="true"] { background: var(--cor-texto); color: var(--cor-fundo); border-color: var(--cor-texto); }
.botao--largo { width: 100%; }

/* ---- barra de adaptacao (29.3) — mesmo lugar em toda tela ----------- */
.barra-adaptacao {
  width: 100%;
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--espaco-2);
  padding: var(--espaco-2) 0;
}
.barra-adaptacao .botao { font-weight: 700; font-size: 0.95rem; padding: var(--espaco-2) var(--espaco-3); }

/* ---- rodape ---------------------------------------------------------- */
.rodape {
  display: flex; align-items: center; justify-content: center; gap: var(--espaco-5);
  padding: var(--espaco-4) var(--espaco-3);
  color: var(--cor-texto-apoio); font-weight: 600; letter-spacing: 0.35em; text-transform: uppercase; font-size: 0.85rem;
}
.rodape .furos { display: grid; width: auto; }
.rodape p { margin: 0; }
.rodape a { color: inherit; letter-spacing: 0; text-transform: none; }

/* ---- transicao entre acoes (tema_transicoes) ------------------------- */
.transicao {
  position: fixed; inset: 0; z-index: 90;
  display: none; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--cor-cabecalho) 88%, transparent);
  padding: var(--espaco-3);
}
.transicao[data-visivel="1"] { display: flex; }
.transicao__cartao {
  width: min(100%, 32rem);
  background: var(--cor-tela); color: var(--cor-tela-texto);
  border: 3px solid var(--cor-cabecalho); border-radius: calc(var(--raio) + 4px);
  box-shadow: 0 0 0 8px var(--cor-superficie);
  padding: var(--espaco-5) var(--espaco-4);
  display: flex; flex-direction: column; align-items: center; gap: var(--espaco-3); text-align: center;
}
.transicao__imagem { width: 9rem; height: 9rem; }
.transicao__imagem img, .transicao__imagem svg { width: 100%; height: 100%; object-fit: contain; }
.transicao__titulo { font-family: var(--fonte-titulo); font-size: 1.1rem; text-transform: uppercase; line-height: 1.5; }
.transicao__texto { color: var(--cor-texto-apoio); font-size: 1rem; }
.transicao__progresso {
  width: 100%; height: 10px; border-radius: 999px; overflow: hidden;
  background: var(--cor-borda); position: relative;
}
.transicao__progresso > span { display: block; height: 100%; width: 0; background: var(--cor-marca); }

/* ---- cabine: modo foco e tela cheia (30.1) --------------------------- */
[data-cabine="ativa"] .cabecalho, [data-cabine="ativa"] .rodape, [data-cabine="ativa"] .nav-abas { display: none; }
[data-cabine="ativa"] .palco { max-width: none; min-height: 100dvh; align-content: center; }
.faixa-aviso {
  display: none; align-items: center; justify-content: center; gap: var(--espaco-3); flex-wrap: wrap;
  width: 100%; padding: var(--espaco-2) var(--espaco-3);
  background: var(--cor-superficie); color: var(--cor-texto);
  border: 2px solid var(--cor-atencao); border-radius: var(--raio); font-weight: 600;
}
.faixa-aviso[data-visivel="1"] { display: flex; }
.progresso-fluxo { font-weight: 700; color: var(--cor-texto-apoio); }

/* tela FIM (30.2 item 6) */
.fim { display: none; }
.fim[data-visivel="1"] { display: flex; }
.fim .titulo-pixel { font-size: clamp(2rem, 6vw, 4rem); letter-spacing: 0.3em; }
.codigo-conferencia {
  font-family: var(--fonte-titulo); font-size: clamp(0.9rem, 2.2vw, 1.3rem);
  padding: var(--espaco-3); border: 2px dashed var(--cor-texto); border-radius: var(--raio);
  background: var(--cor-superficie); color: var(--cor-texto); user-select: all;
}
.aviso-comprovante { max-width: 44ch; font-weight: 600; }

/* ---- impressao (30.6.2a) --------------------------------------------- */
@media print {
  body > *:not(.aviso-impressao) { display: none !important; }
  .aviso-impressao { display: block !important; padding: 2cm; font-size: 18pt; }
  [data-imprimivel="1"] { display: block !important; }
}
.aviso-impressao { display: none; }

/* ---- painel de perda de foco / captura (30.6.2b, 30.9) --------------- */
.painel-captura {
  position: fixed; inset: 0; z-index: 95; display: none;
  align-items: center; justify-content: center;
  background: var(--cor-cabecalho); color: var(--cor-cabecalho-texto); padding: var(--espaco-3);
}
.painel-captura[data-visivel="1"] { display: flex; }
.painel-captura__cartao {
  width: min(100%, 34rem); background: var(--cor-superficie); color: var(--cor-texto);
  border-radius: var(--raio); padding: var(--espaco-5) var(--espaco-4);
  display: flex; flex-direction: column; align-items: center; gap: var(--espaco-3); text-align: center;
}
.painel-captura__cartao .icone { width: 3rem; height: 3rem; color: var(--cor-marca); }

/* ---- dialogo de ajuda (nativo) ---------------------------------------- */
.ajuda-dialogo {
  width: min(100% - 2rem, 34rem); border: 3px solid var(--cor-cabecalho); border-radius: var(--raio);
  background: var(--cor-superficie); color: var(--cor-texto); padding: var(--espaco-5) var(--espaco-4);
  text-align: center;
}
.ajuda-dialogo[open] { display: flex; flex-direction: column; align-items: center; gap: var(--espaco-3); }
.ajuda-dialogo::backdrop { background: color-mix(in srgb, var(--cor-cabecalho) 75%, transparent); }

/* ---- movimento reduzido (28.8b, 29.3) -------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
}

.sprite-icones { position: absolute; width: 0; height: 0; overflow: hidden; }

.passos { text-align: left; max-width: 60ch; padding-left: 1.5em; display: grid; gap: var(--espaco-3); font-size: 1.05rem; }
.passos li::marker { font-family: var(--fonte-titulo); color: var(--cor-marca); }

.formulario-eleitor { width: min(100%, 28rem); display: grid; gap: var(--espaco-3); text-align: left; }
.cartao-lista { width: min(100%, 40rem); text-align: left; background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio); padding: var(--espaco-3); }
.cartao-lista h2 { font-size: 1.1rem; margin-bottom: var(--espaco-2); }
.cartao-lista ul { margin: 0; padding-left: 1.2em; display: grid; gap: var(--espaco-2); }

/* ---- fluxo de voto (30.2) ---- */
.opcoes { width: min(100%, 36rem); display: grid; gap: var(--espaco-2); }
.opcao { display: flex; align-items: center; gap: var(--espaco-3); min-height: 4rem; padding: var(--espaco-2) var(--espaco-3); border: 2px solid var(--cor-texto); border-radius: var(--raio); background: var(--cor-superficie); color: var(--cor-texto); font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.opcao[aria-pressed="true"] { background: var(--cor-marca); color: var(--cor-marca-texto); border-color: var(--cor-marca); }
.opcao[aria-pressed="true"]::after { content: "✓ escolhido"; margin-left: auto; font-family: var(--fonte-titulo); font-size: 0.8rem; }
.opcao__numero { font-family: var(--fonte-titulo); font-size: 1.2rem; min-width: 3ch; }
.opcao--branco { justify-content: center; border-style: dashed; }
.acoes-cabine { display: flex; flex-wrap: wrap; gap: var(--espaco-3); justify-content: center; width: 100%; }
.revisao { list-style: none; padding: 0; margin: 0; width: min(100%, 40rem); display: grid; gap: var(--espaco-2); text-align: left; }
.revisao li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espaco-2); padding: var(--espaco-2) var(--espaco-3); background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio); }
.revisao li .botao { margin-left: auto; }
#erro-cabine { display: none; }
#erro-cabine[data-visivel="1"] { display: flex; }

/* ---- tela de voto no padrao da urna eletronica (30.2 tela 2) ---- */
.tela-urna--voto { display: grid; grid-template-columns: 1fr; gap: var(--espaco-4); align-items: stretch; text-align: left; }
@media (min-width: 900px) { .tela-urna--voto { grid-template-columns: 1.4fr 1fr; } }
.visor { display: grid; gap: var(--espaco-3); align-content: start; }
.visor__cargo { font-family: var(--fonte-titulo); font-size: clamp(1rem, 2.2vw, 1.5rem); text-transform: uppercase; line-height: 1.5; }
.visor__digitos { display: flex; gap: var(--espaco-2); }
.visor__digitos span { width: 3.2rem; height: 4rem; border: 3px solid var(--cor-tela-texto); border-radius: var(--raio); display: grid; place-items: center; font-family: var(--fonte-titulo); font-size: 1.8rem; background: var(--cor-superficie); }
.visor__digitos span.ativo { border-color: var(--cor-marca); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor-marca) 40%, transparent); }
.visor__candidato { display: flex; gap: var(--espaco-3); align-items: center; min-height: 9rem; }
.visor__foto { width: 8rem; height: 9rem; flex: none; background: var(--cor-superficie); border: 2px solid var(--cor-borda); border-radius: var(--raio); overflow: hidden; display: grid; place-items: center; color: var(--cor-texto-apoio); font-size: 0.8rem; text-align: center; }
.visor__foto img { width: 100%; height: 100%; object-fit: cover; }
.visor__numero { font-family: var(--fonte-titulo); font-size: 1.4rem; }
.visor__nome { font-size: 1.5rem; font-weight: 800; line-height: 1.2; }
.visor__aviso { font-family: var(--fonte-titulo); font-size: 0.95rem; color: var(--cor-erro); text-transform: uppercase; }
.visor__escolhidos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--espaco-2); }
.visor__escolhidos li { padding: var(--espaco-1) var(--espaco-2); border: 2px solid var(--cor-sucesso); border-radius: var(--raio); font-weight: 700; background: var(--cor-superficie); }
.teclado { background: var(--cor-cabecalho); color: var(--cor-cabecalho-texto); border-radius: calc(var(--raio) + 4px); padding: var(--espaco-3); display: grid; gap: var(--espaco-3); align-content: start; }
.teclado__numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--espaco-2); }
.tecla { min-height: 3.6rem; border: 0; border-radius: var(--raio); background: var(--cor-superficie); color: var(--cor-texto); font-family: var(--fonte-titulo); font-size: 1.3rem; cursor: pointer; box-shadow: 0 3px 0 var(--cor-borda); }
.tecla:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--cor-borda); }
.tecla--zero { grid-column: 2; }
.teclado__acoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--espaco-2); }
.tecla--branco { background: var(--cor-superficie); }
.tecla--corrige { background: var(--cor-marca); color: var(--cor-marca-texto); }
.tecla--confirma { background: var(--cor-sucesso); color: var(--cor-cabecalho-texto); }
.teclado__acoes .tecla { font-size: 0.85rem; min-height: 4rem; }
.tela-urna--voto .opcoes { grid-column: 1 / -1; }

.hash { font-family: "Courier New", monospace; font-size: 0.8rem; word-break: break-all; background: var(--cor-superficie); padding: 0 var(--espaco-1); border-radius: 3px; }
.cartao-lista ul li { margin-bottom: var(--espaco-2); }

/* ---- modo mesa: terminal pareado (9.2) ---- */
.modo-mesa .barra-adaptacao { position: fixed; bottom: 0; left: 0; right: 0; }
#tela-espera .titulo-pixel { font-size: clamp(1.6rem, 4vw, 3rem); }
#tela-contingencia { color: var(--cor-erro); }
#conf-dados li, #intro-candidatos li { justify-content: flex-start; }

/* ===================================================================== */
/* Bloco B — skin "atual": experiência de votação (papel de parede,      */
/* pop-up de boas-vindas, tela de conclusão). Escopo [data-skin=atual].  */
/* O visual "legado" (sem estas regras) permanece como estava.           */
/* ===================================================================== */

/* --- papel de parede animado na tela inicial --- */
.parede-animada { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
[data-skin="atual"] .tela-entrada-b { position: relative; }
[data-skin="atual"] .parede-animada.tem-logo::before {
  content: ""; position: absolute; inset: -20%;
  background: var(--logo-parede) center/38% no-repeat;
  opacity: 0.06; filter: grayscale(1);
  animation: parede-flutua 6s ease-out both;
}
[data-skin="atual"] .parede-animada::after {
  content: ""; position: absolute; width: 60vmax; height: 60vmax; right: -20vmax; bottom: -25vmax;
  background: radial-gradient(circle, color-mix(in srgb, var(--cor-marca) 16%, transparent), transparent 68%);
  border-radius: 50%; animation: parede-pulsa 5s ease-out both;
}
[data-skin="atual"] .tela-entrada-b > *:not(.parede-animada) { position: relative; z-index: 1; }
@keyframes parede-flutua { from { transform: translateY(-2%) scale(1); opacity: 0; } to { transform: translateY(2%) scale(1.04); opacity: .06; } }
@keyframes parede-pulsa { from { transform: scale(.9); opacity: 0; } to { transform: scale(1.1); opacity: 1; } }

/* --- pop-up de boas-vindas --- */
.dlg-boasvindas { border: 0; border-radius: var(--raio); padding: 0; background: transparent; max-width: min(92vw, 40rem); }
.dlg-boasvindas::backdrop { background: color-mix(in srgb, var(--cor-cabecalho) 62%, transparent); backdrop-filter: blur(4px); }
.bv-cartao { background: var(--cor-superficie); border-radius: var(--raio); border-top: 6px solid var(--cor-marca); padding: clamp(1.5rem, 4vw, 2.75rem); display: grid; gap: var(--espaco-3); text-align: center; box-shadow: 0 20px 60px color-mix(in srgb, var(--cor-cabecalho) 30%, transparent); animation: bv-entra .28s ease; }
.bv-logo { max-width: 160px; max-height: 74px; margin: 0 auto; object-fit: contain; }
.bv-texto { color: var(--cor-texto-apoio); font-size: 1.1rem; line-height: 1.6; }
.dlg-boasvindas .botao--primario { justify-self: center; min-width: 16rem; }
@keyframes bv-entra { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }

/* --- tela de conclusão --- */
[data-skin="atual"] .fim-b { display: none; gap: var(--espaco-3); text-align: center; align-content: center; }
[data-skin="atual"] .fim-b[data-visivel="1"] { display: grid; }
[data-skin="atual"] .fim-logo { max-width: 150px; max-height: 66px; margin: 0 auto var(--espaco-2); object-fit: contain; }
[data-skin="atual"] .fim-b .titulo-pixel { font-size: clamp(1.8rem, 5vw, 3rem); letter-spacing: .12em; color: var(--cor-marca); }
.fim-dados { display: grid; gap: var(--espaco-2); max-width: 30rem; margin: var(--espaco-2) auto 0; text-align: left; }
.fim-dados > div { display: grid; gap: 2px; padding: var(--espaco-2) var(--espaco-3); background: var(--cor-fundo); border-radius: var(--raio); }
.fim-dados dt { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--cor-texto-apoio); }
.fim-dados dd { margin: 0; font-weight: 800; font-size: 1.05rem; }
.fim-dados .codigo-conferencia { font-family: var(--fonte-titulo); letter-spacing: .12em; color: var(--cor-marca); word-break: break-all; }
.fim-email { color: var(--cor-texto-apoio); }

@media (prefers-reduced-motion: reduce) {
  [data-skin="atual"] .parede-animada.tem-logo::before,
  [data-skin="atual"] .parede-animada::after,
  .bv-cartao { animation: none; }
}