/* A confirmação do voto (js/componentes/voto.js): no lugar dos botões, o pedido, o voto grande na cor dele (e o de
   antes, riscado, na troca), o que está sendo votado, o "Voltar" e o "Confirmar", este cheio na cor do voto. As cores
   são as do painel eletrônico; num cartão escuro, as dele. */

.voto-confirmar {
  --cor-do-voto: var(--cor-acao);
  --cor-sobre-o-voto: var(--cor-sobre-acao);

  display: grid;
  gap: var(--espaco-2);
  padding: var(--espaco-4);
  text-align: center;
  color: var(--cor-texto);
  background: color-mix(in srgb, var(--cor-do-voto) 9%, var(--cor-superficie, transparent));
  border: 1px solid color-mix(in srgb, var(--cor-do-voto) 55%, transparent);
  border-radius: var(--raio-3);
}

.voto-confirmar--sim { --cor-do-voto: var(--cor-voto-sim); --cor-sobre-o-voto: #fff; }
.voto-confirmar--nao { --cor-do-voto: var(--cor-voto-nao); --cor-sobre-o-voto: #fff; }
.voto-confirmar--abstencao { --cor-do-voto: var(--cor-voto-abstencao); }

/* No tema escuro e nos painéis escuros, as cores do voto são as claras: o texto do confirmar fica escuro. */
:root[data-tema="escuro"] .voto-confirmar,
.cartao-jogo--escuro .voto-confirmar,
.tablet--na-sala .voto-confirmar {
  --cor-sobre-o-voto: var(--cor-inverso-fundo);
}

@media (prefers-reduced-motion: no-preference) {
  .voto-confirmar {
    animation: voto-confirmar-entra var(--duracao-3) var(--curva-saida);
  }
}

.voto-confirmar--parado {
  animation: none;
}

@keyframes voto-confirmar-entra {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

.voto-confirmar__titulo {
  margin: 0;
  font-size: var(--texto-xs);
  font-weight: 600;
  letter-spacing: var(--tracado-rotulo);
  text-transform: uppercase;
  color: var(--cor-texto-secundario);
}

.voto-confirmar__escolha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-2);
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--cor-do-voto);
}

.voto-confirmar--outro .voto-confirmar__escolha {
  color: var(--cor-texto);
}

.voto-confirmar__escolha .icone {
  width: 26px;
  height: 26px;
}

/* Na troca, o voto de antes, riscado, e a seta. */
.voto-confirmar__antes {
  font-size: var(--texto-lg);
  font-weight: 600;
  color: var(--cor-texto-suave);
}

.voto-confirmar__antes + .icone {
  width: 18px;
  height: 18px;
  color: var(--cor-texto-suave);
}

.voto-confirmar__alvo {
  margin: 0;
  font-size: var(--texto-xs);
  color: var(--cor-texto-secundario);
}

.voto-confirmar__botoes {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--espaco-2);
  margin-top: var(--espaco-2);
}

.voto-confirmar__voltar,
.voto-confirmar__confirmar {
  min-height: 48px;
  font-weight: 650;
}

.voto-confirmar__confirmar {
  color: var(--cor-sobre-o-voto);
  background: var(--cor-do-voto);
  border-color: var(--cor-do-voto);
}

.voto-confirmar__confirmar:hover:not(:disabled) {
  background: color-mix(in srgb, var(--cor-do-voto) 86%, var(--cor-texto));
}

.voto-confirmar__confirmar:focus-visible {
  outline: 2px solid var(--cor-do-voto);
  outline-offset: 3px;
}

.voto-confirmar__confirmar:disabled {
  cursor: progress;
  opacity: 0.8;
}

.voto-confirmar__erro {
  margin: var(--espaco-1) 0 0;
  font-size: var(--texto-sm);
  color: var(--cor-erro);
}

@media (max-width: 600px) {
  .voto-confirmar__botoes {
    grid-template-columns: minmax(0, 1fr);
  }

  .voto-confirmar__confirmar {
    order: -1;
  }
}

/* Os botões do voto saem enquanto a confirmação está aberta (o grupo leva o hidden). */
[data-confirmar-voto] [hidden] {
  display: none;
}