/*
 * Colinha do Cabo Bonadiman — visual aprovado na especificação (seção 4).
 * Fonte Inter (licença OFL) servida da própria pasta.
 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-latin-600-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-latin-700-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/inter-latin-900-normal.woff2') format('woff2');
}

:root {
  --azul: #0a4da2;
  --azul-claro: #c9ddf5;
  --azul-fundo: #dce8f7;
  --amarelo: #ffd214;
  --amarelo-borda: #e6bc00;
  --verde: #0b7a3b;
  --verde-escuro: #08602e;
  --branco: #ffffff;
  --fundo: #f3f4f6;
  --campo-fundo: #f9fafb;
  --borda: #d1d5db;
  --linha: #e5e7eb;
  --texto: #1f2937;
  --texto-rotulo: #374151;
  --texto-suave: #6b7280;
  --texto-apagado: #9ca3af;
  --erro: #b91c1c;
  --fonte: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --fonte-numero: ui-monospace, 'SF Mono', Menlo, Consolas, 'Roboto Mono', 'Liberation Mono', 'Courier New', monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 20px 10px 40px;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

h1,
p {
  margin: 0;
}

.pagina {
  max-width: 380px;
  margin: 0 auto;
}

/* ---------- Painel com os menus ---------- */

.painel {
  margin-bottom: 24px;
  padding: 20px;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.painel__titulo {
  margin-bottom: 16px;
  color: var(--azul);
  font-size: 20px;
  font-weight: 900;
  text-align: center;
}

/* "Direita" e a bandeira ficam sempre juntas na mesma linha. */
.painel__titulo-fim {
  white-space: nowrap;
}

/* Destaque verde e amarelo. Verde sobre amarelo (3,75:1) basta para o título, que é texto grande. */
.painel__destaque {
  padding: 0 6px;
  background: var(--amarelo);
  border-radius: 6px;
  color: var(--verde);
}

.bandeira {
  width: 28px;
  height: 20px;
  margin-left: 2px;
  vertical-align: -3px;
}

.campo + .campo {
  margin-top: 16px;
}

.campo__rotulo {
  display: block;
  margin-bottom: 4px;
  color: var(--texto-rotulo);
  font-size: 14px;
  font-weight: 700;
}

/* 16 px no menu evita o zoom automático do iPhone ao tocar. */
.campo__select {
  width: 100%;
  padding: 12px 40px 12px 12px;
  appearance: none;
  -webkit-appearance: none;
  background: var(--campo-fundo)
    url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")
    no-repeat right 14px center / 16px;
  border: 2px solid var(--borda);
  border-radius: 8px;
  color: var(--texto);
  font: 600 16px/1.2 var(--fonte);
  cursor: pointer;
}

.campo__select:focus {
  border-color: var(--azul);
  outline: none;
  box-shadow: 0 0 0 3px rgba(10, 77, 162, 0.2);
}

.campo__select:disabled {
  opacity: 0.6;
  cursor: wait;
}

/* ---------- Cartão da colinha (é ele que vira a imagem) ---------- */

.colinha {
  margin-bottom: 24px;
  overflow: hidden;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.colinha__cabecalho {
  padding: 16px 8px;
  background: var(--azul);
  color: var(--branco);
  text-align: center;
}

.colinha__titulo {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.colinha__subtitulo {
  margin-top: 2px;
  color: var(--amarelo);
  font-size: 14px;
  font-weight: 700;
}

.colinha__faixa {
  height: 4px;
  background: var(--amarelo);
}

.colinha__votos {
  margin: 0;
  padding: 0 16px;
  list-style: none;
}

.voto {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px dashed var(--borda);
}

.voto:last-child {
  border-bottom: 0;
}

.voto__foto {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 57px;
  height: 57px;
  background: var(--azul-fundo) center 30% / cover no-repeat;
  border: 2px solid var(--linha);
  border-radius: 50%;
  color: var(--azul);
  font-size: 18px;
  font-weight: 900;
}

.voto__foto--vazia {
  background-color: var(--linha);
  color: var(--texto-apagado);
}

.voto__info {
  flex: 1;
  min-width: 0;
}

.voto__cargo {
  margin-bottom: 4px;
  color: var(--texto-suave);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* Nome numa linha só: colinha.js diminui a fonte do nome que não couber (ColinhaCore.ajustarNome). */
.voto__nome {
  color: var(--texto);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow-wrap: anywhere;
}

.voto__nome--vazio {
  color: var(--texto-apagado);
}

/* Último recurso, quando nem a fonte mínima cabe: quebra a linha em vez de cortar o nome. */
.voto__nome--quebra {
  white-space: normal;
}

/* Número preenchido: verde sobre amarelo (3,75:1), que passa no AA por ser texto grande (19 px ou mais,
   em negrito). O padding-left maior compensa o espaço que o letter-spacing deixa depois do último dígito. */
.voto__numero {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  height: 42px;
  padding: 0 8px 0 calc(8px + 0.12em);
  background: var(--amarelo);
  border: 2px solid var(--amarelo-borda);
  border-radius: 6px;
  color: var(--verde);
  font: 900 20px/1 var(--fonte-numero);
  letter-spacing: 0.12em;
}

/* Número ainda não escolhido: caixa cinza com traços. */
.voto__numero--vazio {
  padding: 0 8px;
  background: var(--fundo);
  border-color: var(--borda);
  color: var(--texto-rotulo);
  font-size: 14px;
  letter-spacing: 0;
}

/* Linha do Cabo: faixa azul colada no cabeçalho, número em caixa verde e amarela. */
.voto--destaque {
  margin: 0 -16px;
  padding: 14px 16px;
  background: var(--azul);
  border-bottom: 0;
}

.voto--destaque .voto__foto {
  width: 62px;
  height: 62px;
  background-color: var(--amarelo);
  border-color: var(--branco);
}

.voto--destaque .voto__cargo {
  color: var(--azul-claro);
}

.voto--destaque .voto__nome {
  color: var(--branco);
  font-size: 18px;
  font-weight: 900;
}

.voto--destaque .voto__numero {
  min-width: 84px;
  height: 46px;
  font-size: 22px;
}

/* Texto legal exigido: fica pequeno e discreto, mas legível. */
.colinha__rodape {
  padding: 8px 16px;
  background: var(--fundo);
  border-top: 1px solid var(--linha);
  color: var(--texto-suave);
  font-size: 10px;
  line-height: 1.4;
  text-align: center;
}

/* Telas estreitas (boa parte dos Android tem 360 px): foto, número e espaços menores, para os
   nomes quebrarem só entre palavras. A imagem gerada não muda: ela é capturada com 380 px. */
@media (max-width: 374px) {
  .colinha__votos {
    padding: 0 12px;
  }

  .voto {
    gap: 8px;
  }

  .voto--destaque {
    margin: 0 -12px;
    padding: 14px 12px;
  }

  .voto__foto {
    width: 46px;
    height: 46px;
    font-size: 15px;
  }

  .voto--destaque .voto__foto {
    width: 52px;
    height: 52px;
  }

  .voto__nome {
    font-size: 15px;
  }

  .voto--destaque .voto__nome {
    font-size: 16px;
  }

  .voto__numero {
    min-width: 64px;
    height: 38px;
    padding: 0 6px 0 calc(6px + 0.12em);
    font-size: 19px; /* 19 px em negrito ainda é texto grande: o verde sobre amarelo segue no AA */
    letter-spacing: 0.12em;
  }

  .voto__numero--vazio {
    padding: 0 6px;
    font-size: 13px;
    letter-spacing: 0;
  }

  .voto--destaque .voto__numero {
    min-width: 76px;
    height: 42px;
    font-size: 20px;
  }
}

/* ---------- Botões e mensagens ---------- */

.acoes {
  display: grid;
  gap: 12px;
}

/* 19 px em negrito conta como "texto grande": o amarelo sobre o verde (3,75:1) passa no mínimo AA (3:1). */
.botao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px;
  border-radius: 12px;
  font: 900 19px/1 var(--fonte);
  cursor: pointer;
}

.botao[hidden] {
  display: none;
}

.botao svg {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.botao--baixar {
  background: var(--verde);
  border: 2px solid var(--verde-escuro);
  color: var(--amarelo);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.botao--compartilhar {
  background: var(--branco);
  border: 2px solid var(--azul);
  color: var(--azul);
}

.botao:focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: 2px;
}

.botao:disabled {
  opacity: 0.7;
  cursor: wait;
}

.status {
  color: var(--azul);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

.status:empty {
  display: none;
}

.status--erro {
  color: var(--erro);
}

.aviso {
  color: var(--texto-suave);
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
}