/* ============================================================
   Paleta da campanha Rui Jorge 15345 — azul marinho, verde e branco
   --azul      : verde da marca (nome mantido para não quebrar o resto do CSS)
   --azul-fundo: verde escurecido, usado em texto sobre fundo branco
   ============================================================ */
:root{
  --azul-claro:#35C97E;   /* verde claro, para brilhos */
  --azul:      #00A65A;   /* verde da marca */
  --azul-fundo:#00804A;   /* verde escuro, legível sobre branco */
  --navy:      #0B2447;   /* azul marinho */
  --gelo:      #EAF2EE;
  --amarelo:   #35C97E;
  --branco:    #FFFFFF;
  --raio:      18px;
  --sombra:    0 14px 40px rgba(4,14,45,.42);
}

*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }

body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--navy);
  background:#EEF3F8;
  min-height:100vh;
  display:flex; justify-content:center;
  overflow-x:hidden;
}

.wrap{ width:100%; max-width:520px; background:#EEF3F8; min-height:100vh; }

/* -------------------- cabeçalho -------------------- */
.hero{
  position:relative; overflow:hidden; padding:30px 20px 26px; text-align:center;
  background:
    radial-gradient(700px 400px at 80% -12%, rgba(0,166,90,.45), transparent 60%),
    radial-gradient(560px 340px at 6% 112%, rgba(53,201,126,.20), transparent 60%),
    linear-gradient(155deg,#123A6B 0%, #0E2C54 50%, #081A33 100%);
}
.hero .coracao{
  position:absolute; top:-16%; left:50%; transform:translateX(-50%);
  width:330px; opacity:.12; pointer-events:none;
}
.hero img.logo{ width:min(290px,78%); height:auto; display:block; margin:0 auto; position:relative; }

h1{
  position:relative; margin-top:20px; color:var(--branco);
  font-size:1.5rem; font-weight:800; letter-spacing:-.4px; line-height:1.2;
  text-transform:uppercase;
}
.sub{
  position:relative; margin-top:10px; color:rgba(227,245,253,.85);
  font-size:.92rem; line-height:1.5;
}

/* -------------------- formulário -------------------- */
.form{ padding:18px 16px 8px; }

.campo{
  background:var(--branco); border-radius:var(--raio); padding:14px 15px; margin-bottom:12px;
  box-shadow:0 2px 10px rgba(9,30,81,.07);
  transition:background .18s, box-shadow .18s;
}
.campo .rotulo{
  font-size:.74rem; font-weight:800; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--navy); margin-bottom:9px;
}
.campo .rotulo .opcional{
  margin-left:8px; padding:2px 7px; border-radius:5px;
  background:#EDF3FB; color:#7C8DA8;
  font-size:.62rem; font-weight:700; letter-spacing:.8px; text-transform:lowercase;
}
.campo.ok .rotulo .opcional{ background:rgba(255,255,255,.22); color:rgba(255,255,255,.92); }

/* campo preenchido ou fixo */
.campo.ok, .campo.fixo{
  background:linear-gradient(120deg,var(--azul) 0%, #00804A 100%);
  box-shadow:0 8px 22px rgba(0,166,90,.30);
}
.campo.ok .rotulo, .campo.fixo .rotulo{ color:rgba(255,255,255,.9); }

.campo.fixo{ background:linear-gradient(120deg,var(--navy) 0%, #00804A 100%); }

/* busca */
.busca{
  width:100%; padding:13px 15px; border-radius:12px;
  border:1.5px solid #D6E2F2; background:var(--branco);
  font-family:inherit; font-size:1rem; color:var(--navy); outline:none;
  transition:border-color .16s;
}
.busca::placeholder{ color:#9DB0CA; }
.busca:focus{ border-color:var(--azul); }

/* lista de sugestões */
.sugestoes{
  margin-top:8px; max-height:290px; overflow-y:auto;
  border-radius:12px; background:var(--branco); border:1px solid #E1EAF6;
}
.sugestoes:empty{ display:none; }
.sug{
  display:flex; align-items:center; gap:12px; width:100%; padding:10px 12px;
  background:none; border:0; border-bottom:1px solid #F0F5FB; cursor:pointer;
  font-family:inherit; text-align:left;
}
.sug:last-child{ border-bottom:0; }
.sug:hover, .sug.ativa{ background:#EAF7F0; }
.sug img, .sug .tile{
  width:44px; height:44px; border-radius:8px; object-fit:cover; flex-shrink:0;
  background:#DCE7F5;
}

/* quadrinho de voto branco / nulo */
.tile{
  display:grid; place-items:center;
  border:1.5px solid #C3D2E6; background:var(--branco);
  color:#8FA2BD; font-size:1.05rem; font-weight:700;
}
.tile.nulo{ background:#E6EDF7; }
.sug.especial .t{ color:#6B7F9E; }
.sug .t{ font-weight:700; font-size:.94rem; color:var(--azul-fundo); line-height:1.25; }
.sug .s{ font-size:.8rem; color:#6B7F9E; margin-top:2px; }

/* candidato escolhido */
.escolhido{ display:flex; align-items:center; gap:13px; }
.escolhido img, .escolhido .tile{
  width:56px; height:56px; border-radius:10px; object-fit:cover; flex-shrink:0;
  background:#DCE7F5; border:2px solid rgba(255,255,255,.55);
}
.escolhido .tile{ font-size:1.3rem; }
.escolhido .txt{ flex:1; min-width:0; }
.escolhido .nome{
  font-weight:800; font-size:1rem; color:var(--branco); line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.escolhido .meta{ font-size:.84rem; color:rgba(227,245,253,.9); margin-top:3px; }
.escolhido .trocar{
  width:34px; height:34px; border-radius:50%; flex-shrink:0; cursor:pointer;
  background:rgba(255,255,255,.2); border:0; color:var(--branco);
  display:grid; place-items:center; transition:background .16s;
}
.escolhido .trocar:hover{ background:rgba(255,255,255,.35); }

/* -------------------- formato e botões -------------------- */
.formatos{ display:flex; gap:10px; margin:18px 0 12px; }
.formatos button{
  flex:1; padding:13px; border-radius:12px; cursor:pointer; font-family:inherit;
  font-size:.9rem; font-weight:800; letter-spacing:.4px;
  background:var(--branco); border:1.5px solid #D6E2F2; color:#6B7F9E;
  transition:all .16s;
}
.formatos button.ativo{
  background:var(--azul); border-color:var(--azul); color:var(--branco);
  box-shadow:0 6px 18px rgba(0,166,90,.32);
}

.btn{
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%; padding:16px; border-radius:14px; margin-bottom:11px;
  font-family:inherit; font-size:1rem; font-weight:800; cursor:pointer;
  border:1.5px solid transparent; transition:transform .14s, filter .14s, background .16s;
}
.btn:active{ transform:scale(.985); }
.btn svg{ width:19px; height:19px; fill:currentColor; }

.btn-primario{
  background:linear-gradient(120deg,var(--azul-claro),var(--azul));
  color:var(--branco); box-shadow:0 10px 28px rgba(0,166,90,.38);
}
.btn-primario:hover{ filter:brightness(1.07); }
.btn-primario[disabled]{
  background:#C9D6E8; color:#8A9BB4; box-shadow:none; cursor:not-allowed;
}
.btn-secundario{ background:var(--branco); color:var(--navy); border-color:#D6E2F2; }
.btn-secundario:hover{ background:#F3F8F5; }
.btn-fantasma{ background:transparent; color:#6B7F9E; border-color:#D6E2F2; }
.btn-fantasma:hover{ background:rgba(255,255,255,.7); }

.faltando{
  text-align:center; font-size:.83rem; color:#6B7F9E; margin:-4px 0 12px; line-height:1.5;
}

/* -------------------- resultado -------------------- */
.tela{ display:none; }
.tela.on{ display:block; animation:entra .3s ease; }
@keyframes entra{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }

.resultado{ padding:18px 16px 8px; }
.resultado img{ width:100%; border-radius:var(--raio); display:block; box-shadow:var(--sombra); }

.passos{
  margin-top:18px; padding:15px 17px; border-radius:14px; background:var(--branco);
  box-shadow:0 2px 10px rgba(9,30,81,.07);
}
.passos .rotulo{
  font-size:.72rem; font-weight:800; letter-spacing:1.6px; text-transform:uppercase;
  color:#6B7F9E; margin-bottom:9px;
}
.passos ol{ padding-left:18px; }
.passos li{ font-size:.88rem; line-height:1.6; color:#33455F; margin-bottom:3px; }

/* -------------------- rodapé -------------------- */
.rodape{
  text-align:center; padding:26px 20px 34px; margin-top:12px;
  background:var(--navy); color:rgba(227,245,253,.55); font-size:.76rem; line-height:1.8;
}
.rodape a{ color:rgba(227,245,253,.85); }
.rodape .fonte{ margin-top:8px; font-size:.7rem; opacity:.75; }

.aviso{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,22px);
  background:var(--navy); color:var(--branco); font-weight:700; font-size:.88rem;
  padding:12px 22px; border-radius:999px; box-shadow:var(--sombra);
  opacity:0; pointer-events:none; transition:opacity .22s, transform .22s; z-index:60;
}
.aviso.on{ opacity:1; transform:translate(-50%,0); }

.carregando{
  position:fixed; inset:0; background:rgba(9,30,81,.72); backdrop-filter:blur(3px);
  display:none; place-content:center; justify-items:center; z-index:70;
}
.carregando.on{ display:grid; }
.carregando .roda{
  width:44px; height:44px; border-radius:50%;
  border:4px solid rgba(255,255,255,.25); border-top-color:var(--azul-claro);
  animation:gira .8s linear infinite;
}
@keyframes gira{ to{ transform:rotate(360deg);} }

canvas#tela{ display:none; }

@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } }

/* -------------------- orientação de voto -------------------- */
.orientacao{
  margin:0 16px 4px; padding:15px 17px; border-radius:16px;
  background:linear-gradient(120deg,var(--navy) 0%, #00804A 100%);
  color:var(--branco); box-shadow:0 8px 22px rgba(11,36,71,.25);
}
.orientacao .t{
  font-size:.72rem; font-weight:800; letter-spacing:1.6px; text-transform:uppercase;
  color:#9FE8C4; margin-bottom:7px;
}
.orientacao .d{ font-size:.92rem; line-height:1.55; color:rgba(255,255,255,.95); }
.orientacao b{ color:var(--branco); }
.orientacao .numero{
  display:inline-block; margin-top:9px; padding:7px 14px; border-radius:10px;
  background:var(--branco); color:var(--navy);
  font-size:1.18rem; font-weight:900; letter-spacing:3px;
}

/* -------------------- retrato do candidato no topo -------------------- */
.hero{ padding-bottom:0; }
.hero .retrato{
  display:block; width:min(250px,62%); height:auto;
  margin:16px auto -2px; position:relative;
  filter:drop-shadow(0 14px 26px rgba(0,0,0,.35));
}