/* ============================================================
   Colinha de votação — Simone 400
   HTML/CSS/JS puro, sem dependência de framework.

   Este site é UMA peça só: a colinha. Por decisão do cliente ele
   não tem header, menu nem rodapé — o que está na tela é o
   layout do modelo do designer e nada mais.

   ------------------------------------------------------------
   POR QUE A ARTE É DESENHADA EM 1080px E DEPOIS ESCALADA
   ------------------------------------------------------------
   A colinha é diagramada SEMPRE com 1080px de largura e só
   depois encolhida com transform: scale() para caber na tela.
   Isso resolve três coisas de uma vez:

   1. O que aparece na tela é, pixel a pixel, a imagem que o
      usuário vai salvar (a exportação acontece a 1080px, que é
      a diagramação real, sem reflow nenhum).
   2. As medidas aqui são as do modelo do designer divididas por
      dois (o modelo veio com 2161x3840), então dá para conferir
      qualquer valor contra o arquivo original.
   3. No iPhone, o Safari dá zoom sozinho quando o campo focado
      tem fonte menor que 16px. Como o transform não muda o
      font-size computado (o nome do candidato é desenhado com
      34px e só PARECE menor), o zoom automático não dispara.
   ============================================================ */

/* ===========================================================
   DESIGN TOKENS
   -----------------------------------------------------------
   As três cores da peça foram amostradas do PRÓPRIO modelo.png,
   não dos tokens do tema: a arte usa um azul um fio mais claro
   (#006BFE) que o --stb-blue (#005EFF) do site oficial, e o
   bege/pink também têm valores próprios. Como aqui a página
   INTEIRA é a arte, quem manda é o modelo.
   =========================================================== */
:root {
  --azul: #006bfe;
  --bege: #dcd0b2;
  --pink: #ff0051;
  --preto: #000000;

  /* Fundo da página, fora da colinha. Grafite do tema. */
  --fundo: #272b38;
  --branco: #ffffff;

  --fonte-corpo: "obviously", "Helvetica Neue", Arial, sans-serif;
  --fonte-display: "rama-gothic-e", "Arial Narrow", Arial, sans-serif;
  --fonte-display-med: "rama-gothic-m", "Arial Narrow", Arial, sans-serif;
  /* Corte largo da mesma família, usado nos nomes próprios — é o
     mesmo tratamento da faixa "Por São Paulo e pelo Brasil" do
     site oficial. */
  --fonte-corpo-wide: "obviously-wide", "Helvetica Neue", Arial, sans-serif;

  /* ---------------------------------------------------------
     CORREÇÃO ÓPTICA (não mexer sem medir)
     A caixa alta da Obviously não fica no meio da linha: o
     ascendente da fonte (1,18em) é muito maior que o
     descendente (0,22em), e sobra tinta em cima. A conta
     (asc - desc - caixa-alta) / 2 dá 0,105em, que é o quanto o
     texto precisa subir para ficar centrado como no modelo. O
     valor entra como padding-bottom (que empurra para cima
     metade de si mesmo), daí o dobro.
     --------------------------------------------------------- */
  --otica: 0.21em;
}

* {
  box-sizing: border-box;
}

/* O azul da peça cobre a página inteira, em qualquer largura: acima
   de 1080px ele preenche o que sobra dos dois lados da colinha, e no
   celular cobre a área de "borracha" que o iOS mostra quando o dedo
   puxa a página além do fim. É o mesmo azul de dentro da peça, e não
   um tom aproximado — qualquer diferença viraria uma emenda visível
   na altura das faixas. */
body {
  margin: 0;
  background-color: var(--azul);
  color: var(--branco);
  font-family: var(--fonte-corpo);
  -webkit-text-size-adjust: 100%;
}

/* A colinha preenche 100% da largura da tela até 1080px e para de
   crescer aí. No celular ela é full-bleed, de borda a borda; no
   monitor grande ela estaciona no tamanho em que foi DESENHADA.
   -----------------------------------------------------------------
   É este teto que limita o tamanho de texto e imagem na tela, do
   mesmo jeito que o clamp() das fontes e o max-width do canvas
   limitam no gerador de avatares e no de cards. Como a peça inteira
   é uma unidade escalada, travar a escala em 1 trava tudo o que está
   dentro dela de uma vez: com 1080px a faixa do cargo fica com 33px,
   os dígitos com 87px, o endereço com 68px, a foto da Simone com
   283px e o logo "Vote" com 250px — exatamente os valores do modelo
   do designer, e nunca mais que isso, em nenhuma tela.
   ----------------------------------------------------------------- */
.pagina {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0;
}

/* Título da página: existe para leitor de tela e buscador, não
   para a tela (a peça já se explica sozinha). */
.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ===========================================================
   A COLINHA
   -----------------------------------------------------------
   Largura FIXA de 1080px; o JS calcula a escala e aplica o
   transform. A .moldura reserva a altura já escalada, senão a
   página ficaria com um buraco do tamanho da peça inteira.
   =========================================================== */
/* O recorte serve para um caso só: abaixo de 1080px a caixa de
   layout da colinha (que é sempre 1080px, o transform não encolhe
   layout) passa da largura da tela e criaria rolagem horizontal.
   Acima de 1080px ele não pode existir, senão cortaria a sangria das
   faixas — e ali não há o que cortar, a caixa cabe inteira. */
.moldura {
  width: 100%;
}
@media (max-width: 1080px) {
  .moldura {
    overflow: hidden;
  }
}
.colinha {
  width: 1080px;
  transform-origin: top left;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 145px 0 52px;
  background-color: var(--azul);
  font-family: var(--fonte-corpo);
  line-height: 1;
}

/* Durante a exportação a peça sai do fluxo, volta à escala 1:1 e
   perde o botão — é assim que a imagem gerada fica com a
   diagramação exata do modelo. Tudo acontece dentro de uma mesma
   tarefa do JS, então a tela nunca chega a mostrar este estado. */
.colinha.exportando {
  position: fixed;
  top: 0;
  left: -20000px;
}
.colinha.exportando .acao {
  display: none;
}

/* ---------- Logo "Vote" ---------- */
.vote {
  display: block;
  width: 248px;
  height: auto;
}

/* ===========================================================
   Um cargo = faixa bege com o nome + fileira de caixas de dígito
   =========================================================== */
.cargo {
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Cada respiro vertical da peça é um valor medido no modelo do
   designer (2161x3840) dividido por dois. Estão todos declarados
   um a um, e não numa regra genérica, justamente para poderem ser
   conferidos linha a linha contra o arquivo original. */
.cargo--fed { margin-top: 48px; }
.cargo--est { margin-top: 16px; }
.cargo--sen { margin-top: 33px; }
.cargo--gov { margin-top: 18px; }
.cargo--pres { margin-top: 17px; }

/* ---------- Faixa bege com "DEP. FED. FULANO" ----------
   A largura mínima é a da faixa do modelo (476px); a partir daí
   ela CRESCE junto com o nome digitado, que é o que o cliente
   pediu. O teto é 1000px: acima disso o app.js reduz o corpo da
   fonte em vez de deixar a faixa vazar da peça. */
.faixa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 476px;
  max-width: 1000px;
  height: 36px;
  padding: 0 20px var(--otica);
  background-color: var(--bege);
  color: var(--pink);
  /* 500, pelo mesmo motivo dos dígitos: a haste do rótulo no modelo
     mede 0,216 da altura de caixa alta, e o 800 dava 0,404. */
  font-weight: 500;
  font-size: calc(33px * var(--ajuste, 1));
  line-height: 1;
  white-space: nowrap;
}

/* ---------- Campo do nome, que cresce com o que é digitado ----------
   Truque do inline-grid: o ::after carrega o mesmo texto do input
   (via data-valor, alimentado pelo app.js) e é ele quem dá a
   largura da célula; o input ocupa a mesma célula com 100%. Sem
   isso o input teria largura fixa e a faixa não acompanharia o
   nome. */
.auto {
  display: inline-grid;
  max-width: 100%;
}
/* O size="1" no HTML não é decoração: sem ele o <input> pede a
   largura padrão de 20 caracteres na hora de medir a coluna do
   grid, e a faixa nasceria larga mesmo com um nome curto. */
.auto::after,
.auto .nome {
  grid-area: 1 / 1;
  width: 100%;
  min-width: 0;
  font: inherit;
  letter-spacing: inherit;
  white-space: pre;
  text-align: center;
}
.auto::after {
  content: attr(data-valor);
  visibility: hidden;
  height: 0;
}
.nome {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  appearance: none;
  border-radius: 0;
}
.nome::placeholder {
  color: rgba(255, 0, 77, 0.42);
  opacity: 1;
}
.nome:focus {
  outline: none;
}
.nome:focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: 2px;
}

/* ---------- Caixas de dígito ----------
   Três tamanhos, todos medidos no modelo: as caixas de deputado
   (77x93) são maiores que as de senador/governador/presidente
   (72x88), e o 400 da Simone é o maior de todos (77x95). O raio
   é sempre ~25% da largura da caixa. */
.numeros {
  --caixa-l: 72px;
  --caixa-a: 88px;
  display: flex;
  justify-content: center;
  gap: 13px;
  margin-top: 10px;
}
.numeros--g {
  --caixa-l: 77px;
  --caixa-a: 93px;
  gap: 14px;
  margin-top: 11px;
}
.cargo--est .numeros {
  margin-top: 15px;
}
.numeros--400 {
  --caixa-l: 77px;
  --caixa-a: 95px;
  gap: 14px;
  margin-top: 21px;
}

.digito {
  width: var(--caixa-l);
  height: var(--caixa-a);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: calc(var(--caixa-l) * 0.247);
  background-color: var(--bege);
  color: var(--pink);
  font-family: var(--fonte-corpo);
  /* 500: no modelo do designer a haste do "0" mede 0,208 da altura
     de caixa alta, e é o peso 500 da Obviously que chega perto
     (0,192). O 800 dá 0,378, quase o dobro, e era o que deixava os
     números pesados demais. Mesma conta do rótulo, acima. */
  font-weight: 500;
  font-size: calc(var(--caixa-a) * 0.94);
  line-height: 1;
  text-align: center;
  appearance: none;
  padding-bottom: var(--otica);
}
/* O 400 da Simone é texto fixo, não campo: precisa do flex para
   centralizar (o input faz isso sozinho). */
span.digito {
  display: flex;
  align-items: center;
  justify-content: center;
}
input.digito:focus {
  outline: none;
  background-color: var(--branco);
}
input.digito:focus-visible {
  outline: 3px solid var(--branco);
  outline-offset: 2px;
}

/* ===========================================================
   Bloco da Simone: faixa bege + faixa pink + foto por cima
   -----------------------------------------------------------
   As duas faixas são absolutas dentro do bloco porque a foto
   passa POR CIMA delas e sangra para fora do bloco pelo topo.
   A ordem no HTML (faixas primeiro, foto por último) é o que
   define a ordem de empilhamento, tanto na tela quanto no
   desenho da imagem exportada.
   =========================================================== */
.simone {
  position: relative;
  width: 100%;
  height: 294px;
  margin-top: 9px;
}
.simone__bege,
.simone__pink {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
}
.simone__bege {
  top: 192px;
  height: 58px;
  /* Os recuos não são iguais porque no modelo não são: "SIMONE"
     começa em 195px e "TEBET" termina a 218px da borda direita. */
  padding: 0 217px var(--otica) 195px;
  justify-content: space-between;
  background-color: var(--bege);
  color: var(--pink);
  font-family: var(--fonte-corpo-wide);
  font-weight: 700;
  font-size: 42px;
}
.simone__pink {
  top: 250px;
  height: 44px;
  padding-bottom: var(--otica);
  justify-content: center;
  background-color: var(--pink);
  color: var(--bege);
  font-weight: 700;
  font-size: 29px;
}
/* O tracking do CSS entra DEPOIS da última letra também, o que
   empurraria a linha para a esquerda numa caixa centralizada; a
   margem negativa devolve esse espaço. */
.simone__pink span {
  letter-spacing: 0.34em;
  margin-right: -0.34em;
}
.simone__foto {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 283px;
  height: auto;
}

/* ===========================================================
   SANGRIA DAS FAIXAS — tratamento SÓ DE TELA
   -----------------------------------------------------------
   Na tela as três faixas (bege da Simone, pink do "SENADORA SP"
   e bege do "FAÇA O SEU") atravessam a janela inteira, mesmo com
   a peça parada em 1080px. Na IMAGEM EXPORTADA elas continuam do
   tamanho exato da peça, como no modelo do designer.

   As duas coisas convivem porque a sangria é desenhada em
   pseudo-elementos, e o pintor do app.js percorre só elementos e
   nós de texto de verdade — ::before e ::after são invisíveis
   para ele. Não há nada a desligar na hora de exportar.

   Alargar a própria faixa não serviria: "SIMONE" e "TEBET" são
   posicionados pelas bordas dela e sairiam correndo para os
   cantos da tela. O --sangra vem do app.js, em coordenadas da
   peça, e vale 0 sempre que a colinha já ocupa a tela toda.
   =========================================================== */
.simone__bege::before,
.simone__bege::after,
.simone__pink::before,
.simone__pink::after,
.slogan::before,
.slogan::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--sangra, 0px);
  /* inherit mantém as três faixas em sincronia com a cor delas. */
  background-color: inherit;
}
.simone__bege::before,
.simone__pink::before,
.slogan::before {
  right: 100%;
}
.simone__bege::after,
.simone__pink::after,
.slogan::after {
  left: 100%;
}

/* Na exportação a peça volta a ser exatamente o modelo. O --sangra
   é estilo em linha no <html>, e esta regra o sombreia dentro da
   colinha — cinto e suspensório, já que o pintor ignora
   pseudo-elementos de qualquer jeito. */
.colinha.exportando {
  --sangra: 0px;
}

/* ===========================================================
   Rodapé da peça (faz parte da arte, não é rodapé de site)
   =========================================================== */
/* Sem display:flex de propósito: num contêiner flex os espaços
   entre <strong> e o texto solto viram itens em branco e somem,
   e a frase sairia "FAÇAO SEU,SANTINHO". */
.slogan {
  position: relative;
  width: 100%;
  height: 64px;
  margin-top: 56px;
  padding-bottom: var(--otica);
  background-color: var(--bege);
  color: var(--pink);
  font-weight: 400;
  font-size: 38px;
  /* A linha ocupa a caixa de conteúdo inteira (altura menos o
     padding da correção óptica), que é o que sobe o texto. */
  line-height: calc(64px - var(--otica));
  text-align: center;
}
/* O corte WIDE nos trechos em negrito é o que o modelo usa — é o
   mesmo tratamento que o site oficial dá aos nomes próprios na
   faixa "Por São Paulo e pelo Brasil". */
.slogan strong {
  font-family: var(--fonte-corpo-wide);
  font-weight: 700;
}

/* Rama Gothic M, e não o -e que o resto da campanha usa nos
   títulos: medindo o modelo, a largura por altura de caixa alta
   do endereço bate com o corte M (10,5) e não com o E (14,3). */
.url {
  margin: 55px 0 0;
  color: var(--bege);
  font-family: var(--fonte-display-med);
  font-weight: 700;
  font-size: 68px;
  line-height: 1;
  text-align: center;
}

.legal {
  margin: 71px 0 0;
  display: flex;
  flex-direction: column;
  color: var(--preto);
  font-weight: 800;
  font-size: 13.5px;
  line-height: 1.5;
  text-align: center;
}

/* ===========================================================
   Botão — linguagem do .dc-btn-solid do tema: canto reto, Rama
   Gothic em caixa alta, hover rosa e a sombra difusa e contida
   que o cliente pediu (sem o deslocamento que virava "carimbo").
   Sobre o azul o botão é grafite com texto branco, como nas
   seções azuis do gerador de avatares.
   =========================================================== */
.acao {
  margin-top: 52px;
  /* O botão não conta na diagramação da peça: some na exportação.
     A margem de baixo é negativa para que, com ele na tela, o
     respiro até a faixa "FAÇA O SEU" continue parecendo o do
     modelo em vez de somar as duas margens. */
  margin-bottom: -10px;
}
.salvar,
.enviar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin: 0;
  padding: 0.64em 1.27em 0.55em;
  border: 0.09em solid transparent;
  border-radius: 0;
  background-color: var(--fundo);
  color: var(--branco);
  font-family: var(--fonte-display-med);
  font-weight: 700;
  /* O botão não é arte: ele não entra na imagem, então não precisa
     crescer junto com a peça. O --contra (1/escala, vindo do
     app.js) transforma os 22px num tamanho FIXO DE TELA, e o min()
     com 44px impede que ele fique desproporcional no celular, onde
     a peça é pequena. Na prática: 22px na tela de 540px para cima,
     e proporcional abaixo disso. */
  font-size: min(44px, calc(22px * var(--contra, 1)));
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: 0 0.36em 0.82em rgba(0, 0, 0, 0.28);
  transition:
    background-color 0.28s ease,
    color 0.28s ease,
    box-shadow 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.salvar:hover,
.enviar:hover,
.salvar:focus-visible,
.enviar:focus-visible {
  background-color: var(--pink);
  color: var(--branco);
  transform: translateY(-0.14em);
  box-shadow: 0 0.64em 1.18em rgba(0, 0, 0, 0.32);
}
.salvar:focus-visible,
.enviar:focus-visible {
  outline: 0.09em solid var(--branco);
  outline-offset: 0.14em;
}
.salvar:active,
.enviar:active {
  transform: translateY(0.05em);
  box-shadow: 0 0.23em 0.5em rgba(0, 0, 0, 0.26);
}

.is-hidden {
  display: none !important;
}

/* ---------- Aviso de file:// ---------- */
.aviso-file {
  position: relative;
  z-index: 10;
  padding: 14px 20px;
  background-color: var(--pink);
  color: var(--branco);
  font-family: var(--fonte-corpo);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
}