/* =====================================================================
 *  Simulador de Votação — Eleições Gerais
 *  Réplica fiel da urna · Landscape-first (celular deitado)
 * ===================================================================== */

:root {
  /* Cores reais da urna eletrônica */
  --urna-corpo:      #dcdcda;   /* cinza claro do gabinete */
  --urna-corpo-esc:  #c7c8c6;
  --urna-corpo-luz:  #ececea;
  --painel-preto:    #1c1c1e;   /* painel preto do teclado e moldura da tela */
  --painel-preto2:   #101012;
  --visor-fundo:     #f7f8fa;
  --visor-borda:     #0e0e10;
  --azul-tse:        #173F5F;
  --azul-claro:      #2a6f9e;
  --texto:           #1a1a1a;
  --texto-suave:     #555;

  --btn-num:         #3a3b3e;   /* teclas numéricas escuras */
  --btn-num-txt:     #ffffff;
  --branco:          #f2f2f0;
  --branco-borda:    #b9b9b7;
  --corrige:         #ef7d10;   /* laranja */
  --confirma:        #1a9b34;   /* verde */

  --nulo:            #b3261e;
  --sombra:          0 2px 6px rgba(0,0,0,.18);
  --raio:            10px;
}

* { box-sizing: border-box; }

/* Garante que o atributo hidden sempre esconda, mesmo com display definido por classe */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
}
html { height: 100%; background: #0d2036; }

body {
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  color: var(--texto);
  background:
    radial-gradient(1200px 600px at 50% -10%, #2a6f9e33, transparent),
    linear-gradient(160deg, #0f2c44, #173F5F 55%, #0d2036);
  height: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Tarja de treinamento */
.tarja {
  background: repeating-linear-gradient(45deg, #f2c200, #f2c200 14px, #1a1a1a 14px, #1a1a1a 28px);
  color: #000;
  text-align: center;
  font-weight: 800;
  font-size: clamp(9px, 2.4vw, 12px);
  letter-spacing: .06em;
  padding: 3px 8px;
  position: relative;
  z-index: 5;
}
.tarja::after {
  content: "";
  position: absolute; inset: 3px 8px;
  background: rgba(255,255,255,.82);
  z-index: -1;
}

#app {
  flex: 1;
  display: flex;
  min-height: 0;
}

/* =====================  URNA (seção única, sempre visível)  ===================== */
.tela--urna {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
  padding: 5px clamp(8px, 2vw, 20px) 6px;
  gap: 5px;
}

/* Botão fora do equipamento (usado no aviso "gire o celular") */
.btn-secundario {
  border: 0; border-radius: 12px; cursor: pointer;
  font-weight: 700; font-size: clamp(15px, 4vw, 17px);
  padding: 14px 22px; width: 100%;
  transition: transform .06s ease, filter .15s ease;
  background: #e9edf1; color: var(--azul-tse);
}
.btn-secundario:active { transform: scale(.98); }

.progresso { padding: 2px 2px 0; }
.progresso-barra { height: 6px; background: #ffffff30; border-radius: 99px; overflow: hidden; }
.progresso-preenchido {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #4fc36b, #7ee29a);
  border-radius: 99px;
  transition: width .35s cubic-bezier(.4,0,.2,1);
}

/* Palco: centraliza o aparelho, que mantém a proporção real */
.urna-palco {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Gabinete da urna (cinza claro, proporção do aparelho real ~1,5:1) */
.urna {
  height: 100%;
  width: auto;
  max-width: 100%;
  aspect-ratio: 1.58 / 1;
  container-type: size;      /* conteúdo escala com o tamanho do aparelho (cqh/cqw) */
  container-name: urna;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(8px, 1.6vw, 16px);
  align-items: stretch;
  background: linear-gradient(158deg, var(--urna-corpo-luz), var(--urna-corpo) 45%, var(--urna-corpo-esc));
  border: 1px solid #ffffff80;
  border-radius: 14px;
  padding: clamp(9px, 1.8vw, 16px);
  box-shadow: 0 16px 44px rgba(0,0,0,.4), inset 0 1px 0 #ffffffb0, inset 0 -2px 4px #0000001a;
}

/* -------- MOLDURA PRETA DA TELA (esquerda) -------- */
.urna-tela {
  background: linear-gradient(160deg, #2a2a2c, var(--painel-preto) 40%, var(--painel-preto2));
  border-radius: 10px;
  padding: clamp(6px, 1.4vw, 12px);
  min-height: 0;
  display: flex;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.6), 0 1px 0 #ffffff70;
}

/* -------- VISOR (LCD) -------- */
.visor {
  flex: 1;
  background: var(--visor-fundo);
  border-radius: 4px;
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  box-shadow: inset 0 1px 4px rgba(0,0,0,.18);
}

/* Estados da tela (ocupam o LCD inteiro) */
.visor-descanso, .visor-votacao, .visor-fim {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.visor-votacao { padding: clamp(8px, 1.6vw, 14px); }

/* --- Estado DESCANSO: brasão + Justiça Eleitoral --- */
.visor-descanso {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1.6cqh;
  padding: clamp(8px, 2vw, 16px);
  background: radial-gradient(120% 90% at 50% 30%, #ffffff, #eef1f4);
}
.brasao-grande { width: clamp(56px, 34cqh, 150px); }
.brasao { width: 100%; height: auto; display: block; }
.je-titulo {
  font-weight: 800; letter-spacing: .06em;
  color: #16407a;
  font-size: clamp(15px, 7cqh, 26px);
}
.descanso-sub {
  color: var(--texto-suave);
  font-size: clamp(10px, 3.6cqh, 14px);
}

.btn-urna {
  margin-top: 1.5cqh;
  border: 0; border-radius: 8px; cursor: pointer;
  background: linear-gradient(180deg, #26b544, var(--confirma));
  color: #fff; font-weight: 800;
  font-size: clamp(12px, 4.6cqh, 17px);
  padding: 1.6cqh 5cqh;
  box-shadow: 0 3px 8px rgba(0,0,0,.25);
  transition: transform .06s ease, filter .15s ease;
}
.btn-urna:hover { filter: brightness(1.06); }
.btn-urna:active { transform: scale(.97); }
.btn-urna--claro { background: linear-gradient(180deg,#fff,#e7eaee); color: #16407a; }

/* --- Estado FIM: tela verde --- */
.visor-fim {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1cqh;
  padding: clamp(10px, 2.4vw, 20px);
  background: linear-gradient(180deg, #1aa236, #0f7d26);
  color: #fff;
}
.fim-check {
  width: clamp(38px, 18cqh, 78px); height: clamp(38px, 18cqh, 78px);
  border-radius: 50%; border: 3px solid #fff;
  display: grid; place-items: center;
  font-size: clamp(22px, 10cqh, 44px); font-weight: 900;
  margin-bottom: 1cqh;
}
.fim-fim { font-size: clamp(30px, 17cqh, 66px); font-weight: 900; letter-spacing: .12em; line-height: 1; }
.fim-sub { opacity: .92; font-size: clamp(11px, 4cqh, 15px); margin-bottom: 2cqh; }
.fim-acoes { display: flex; gap: 2cqh; flex-wrap: wrap; justify-content: center; }
.fim-acoes .btn-urna { padding: 1.4cqh 3.5cqh; margin-top: 0; }
.visor-topo {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.3cqh;
  font-size: clamp(8px, 2.9cqh, 12px);
  color: var(--texto-suave);
  border-bottom: 1px solid #00000018;
  padding-bottom: 1.4cqh; margin-bottom: 1.8cqh;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.visor-topo span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

.visor-corpo { flex: 1; min-height: 0; display: flex; gap: 2cqh; overflow: hidden; }
.visor-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.visor-cargo {
  font-weight: 800;
  color: var(--azul-tse);
  font-size: clamp(14px, 6cqh, 30px);
  line-height: 1.0;
  margin-bottom: 1.6cqh;
  white-space: nowrap;
}

.visor-numero-linha { display: flex; align-items: center; gap: 1.4cqh; margin-bottom: 1.8cqh; flex-wrap: wrap; }
.visor-rotulo { font-size: clamp(10px, 3.4cqh, 14px); color: var(--texto-suave); }

.digitos { display: flex; gap: 1cqh; }
.digito {
  width: clamp(18px, 6.4cqh, 36px);
  height: clamp(24px, 8.6cqh, 46px);
  border: 2px solid var(--azul-tse);
  border-radius: 5px;
  background: #fff;
  display: grid; place-items: center;
  font-size: clamp(15px, 6cqh, 28px);
  font-weight: 800;
  color: var(--azul-tse);
  font-variant-numeric: tabular-nums;
}
.digito.vazio { border-color: #c3c3c3; color: transparent; }

.visor-candidato { margin: 0; display: grid; gap: 1cqh; }
.visor-candidato .linha { display: flex; gap: 5px; font-size: clamp(11px, 4.2cqh, 16px); line-height: 1.2; }
.visor-candidato dt { color: var(--texto-suave); margin: 0; flex: none; }
.visor-candidato dd { margin: 0; font-weight: 700; }
#cand-nome { font-weight: 800; }
.linha--vice dd { font-weight: 500; color: var(--texto-suave); font-size: .92em; }

.visor-selo {
  margin-top: 2cqh;
  align-self: flex-start;
  font-weight: 900;
  letter-spacing: .04em;
  font-size: clamp(15px, 6cqh, 26px);
  padding: 0.6cqh 3cqh;
  border-radius: 6px;
}
.visor-selo.selo-nulo   { color: var(--nulo);   border: 3px solid var(--nulo);   }
.visor-selo.selo-branco { color: var(--texto);  border: 3px solid #999; background: #fff; }

/* Foto / silhueta */
.visor-foto {
  flex: none;
  width: clamp(38px, 16cqh, 82px);
  aspect-ratio: 6/7;
  background: #e7ebef;
  border: 1px solid #ccd2d8;
  border-radius: 6px;
  overflow: hidden;
  display: grid; place-items: end center;
}
.visor-foto img { width: 100%; height: 100%; object-fit: cover; }
.silhueta { width: 82%; fill: #b7c0c9; }
.visor-foto.oculta { visibility: hidden; }

.visor-instrucao {
  margin-top: 1.6cqh;
  border-top: 1px solid #00000018;
  padding-top: 1.6cqh;
  font-size: clamp(10px, 3.9cqh, 14px);
  line-height: 1.25;
  color: var(--texto);
  min-height: 0;
}
.visor-instrucao b { color: var(--azul-tse); }
.visor-instrucao .verde   { color: var(--confirma); font-weight: 800; }
.visor-instrucao .laranja { color: var(--corrige);  font-weight: 800; }

/* Marca impressa no rodapé da tela (como "DIEBOLD · JUSTIÇA ELEITORAL") */
.visor-marca-inferior {
  margin-top: 6px;
  text-align: center;
  font-size: clamp(8px, 1.9vw, 10px);
  letter-spacing: .12em;
  color: #9aa1a8;
  font-weight: 700;
}

/* -------- LADO DIREITO: marca + teclado -------- */
.urna-direita {
  display: flex;
  flex-direction: column;
  min-height: 0;
  gap: clamp(6px, 1.4vw, 12px);
}

/* Marca "JUSTIÇA ELEITORAL" impressa no corpo cinza */
.urna-marca {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.6cqh;
  color: #2c2f31;
  flex: none;
  min-width: 0;
  padding: 0 0.5cqh 1cqh;
}
.marca-brasao { width: clamp(20px, 9cqh, 40px); height: auto; color: #23262a; flex: none; }
.marca-texto {
  font-size: clamp(9px, 3.8cqh, 14px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: .04em;
  text-align: left;
  color: #23262a;
}

/* -------- TECLADO (painel preto) -------- */
.teclado {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(160deg, #2a2a2c, var(--painel-preto) 45%, var(--painel-preto2));
  border-radius: 10px;
  padding: clamp(8px, 1.8vw, 15px);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.55), 0 1px 0 #ffffff70;
}
/* Bloco de números: menor e centralizado, como na urna real (com preto em volta) */
.teclado-numeros {
  width: min(94%, 46cqh);
  margin-top: 1.5cqh;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2cqh;
}
.tecla-zero { grid-column: 2; }

.tecla-num {
  aspect-ratio: 1 / 1;         /* teclas quadradas, como na referência */
  border: 1px solid #000;
  background: linear-gradient(180deg, #55575c, var(--btn-num) 55%, #2c2d30);
  color: var(--btn-num-txt);
  font-size: clamp(13px, 6.2cqh, 26px);
  font-weight: 700;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: 0 2px 0 #191a1c, 0 3px 5px rgba(0,0,0,.4), inset 0 1px 0 #ffffff40;
  min-height: 0;
  transition: transform .05s ease, box-shadow .05s ease, filter .1s ease;
  font-variant-numeric: tabular-nums;
}
.tecla-num:hover { filter: brightness(1.12); }
.tecla-num:active {
  transform: translateY(2px);
  box-shadow: 0 0 0 #191a1c, 0 1px 2px rgba(0,0,0,.4), inset 0 1px 0 #ffffff30;
}

/* Botões de função: LINHA de largura TOTAL embaixo (BRANCO · CORRIGE · CONFIRMA) */
.teclado-funcoes {
  width: 100%;
  margin-top: auto;            /* empurra para o rodapé do painel */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6cqh;
}
.tecla-func {
  border: 1px solid #0006;
  border-radius: 5px;
  font-weight: 800;
  font-size: clamp(8px, 3.4cqh, 14px);
  letter-spacing: .01em;
  cursor: pointer;
  color: #fff;
  min-height: 0;
  padding: 2.6cqh 1cqh;
  box-shadow: 0 2px 0 rgba(0,0,0,.4), 0 3px 5px rgba(0,0,0,.35), inset 0 1px 0 #ffffff40;
  transition: transform .05s ease, box-shadow .05s ease, filter .12s ease;
}
.tecla-func:hover { filter: brightness(1.08); }
.tecla-func:active { transform: translateY(2px); box-shadow: 0 0 0 rgba(0,0,0,.4), inset 0 1px 0 #ffffff30; }
.func-branco  { background: linear-gradient(180deg,#fdfdfc,#e2e2df); color: #2a2a2a; border-color: var(--branco-borda); }
.func-corrige { background: linear-gradient(180deg,#f7912a,var(--corrige)); }
.func-confirma{ background: linear-gradient(180deg,#26b544,var(--confirma)); }
.tecla-func:disabled { filter: grayscale(.55) brightness(.82); opacity: .5; cursor: not-allowed; transform: none; }

/* Barra de apoio (extra do simulador, discreta) */
.barra-apoio {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
}
.apoio-btn {
  background: #ffffff1a;
  color: #fff;
  border: 1px solid #ffffff30;
  border-radius: 99px;
  padding: 7px 14px;
  font-size: clamp(11px, 2.8vw, 13px);
  font-weight: 600;
  cursor: pointer;
}
.apoio-btn:active { background: #ffffff33; }
.apoio-btn[aria-pressed="false"] { opacity: .55; }

/* =====================  MODAIS  ===================== */
.modal {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(0,0,0,.55);
  display: grid; place-items: center;
  padding: 16px;
  animation: fade .15s ease;
}
.modal[hidden] { display: none; }
.modal-caixa {
  background: #fff; border-radius: 16px;
  max-width: 460px; width: 100%;
  max-height: 85dvh; display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.modal-cabecalho {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; background: var(--azul-tse); color: #fff;
}
.modal-cabecalho h3 { margin: 0; font-size: 16px; }
.modal-fechar { background: #ffffff22; border: 0; color: #fff; width: 30px; height: 30px; border-radius: 8px; font-size: 15px; cursor: pointer; }
.modal-corpo { padding: 12px 16px; overflow-y: auto; display: grid; gap: 8px; }
.modal-nota { margin: 0; padding: 10px 16px 14px; font-size: 12px; color: var(--texto-suave); background: #f4f6f8; }

.ajuda-item, .resumo-item {
  display: flex; align-items: baseline; gap: 10px;
  padding: 9px 10px; border-radius: 8px; background: #f4f6f8;
  font-size: 14px;
}
.ajuda-item b, .resumo-item b { font-variant-numeric: tabular-nums; color: var(--azul-tse); font-size: 16px; }
.resumo-item .r-cargo { flex: none; width: 44%; color: var(--texto-suave); font-weight: 600; }
.resumo-item .r-voto { font-weight: 700; }
.resumo-item .r-voto.nulo { color: var(--nulo); }
.resumo-item .r-voto.branco { color: #555; }

/* =====================  GIRE O CELULAR  ===================== */
.aviso-girar {
  position: fixed; inset: 0; z-index: 60;
  background: linear-gradient(160deg, #0f2c44, #173F5F);
  color: #fff; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: 24px;
}
.aviso-girar[hidden] { display: none; }
.girar-icone { font-size: 64px; animation: gira 2.4s ease-in-out infinite; }
.aviso-girar p { font-size: clamp(15px, 4.6vw, 20px); line-height: 1.5; margin: 0; max-width: 300px; }
.aviso-girar .btn-secundario { max-width: 260px; }

@keyframes gira { 0%,100% { transform: rotate(-12deg); } 50% { transform: rotate(78deg); } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* Feedback visual de tecla pressionada (para toque/teclado) */
.tecla-num.flash, .tecla-func.flash { filter: brightness(1.35); }

/* =====================  RESPONSIVO  ===================== */

/* Retrato como fallback: o aparelho se adapta (o aviso "gire o celular" cobre a maioria dos casos) */
@media (orientation: portrait) {
  .urna { aspect-ratio: 1 / 1.15; grid-template-columns: 1fr; grid-template-rows: 1.15fr 1fr; }
  .urna-direita { flex-direction: column; }
}

/* O conteúdo escala pelo tamanho do aparelho (cqh), então quase nada precisa mudar aqui.
   Em paisagem baixa, só afinamos a moldura externa. */
@media (orientation: landscape) and (max-height: 480px) {
  .tarja { padding: 2px 8px; font-size: 10px; }
  .tarja::after { inset: 2px 8px; }
  .tela--urna { padding: 4px 8px 5px; gap: 4px; }
  .progresso-barra { height: 5px; }
  .urna { border-radius: 12px; padding: clamp(6px, 1.4vw, 12px); }
  .urna-tela { padding: clamp(5px, 1vw, 10px); }
  .visor-marca-inferior { display: none; }
  .barra-apoio { gap: 6px; }
  .apoio-btn { padding: 5px 11px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}