/* =====================================================================
   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) ---------------------------------- */
@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+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, 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+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "UrnaSans";
  src: url("../fontes/urna-sans-latin.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "UrnaSans";
  src: url("../fontes/urna-sans-latin-ext.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- base ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
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); }