/* ============================================================
   COLINHA DO PROFESSOR ISRAEL 4004 — a casa (fontes, tokens, base)
   ------------------------------------------------------------
   A ferramenta é a mesma da /colinha da Dayse (../public/js/colinha.js,
   docs/98); o que muda é a roupa. A IDV vem do site do professor
   (professorisrael4004.com.br) e da pasta de identidade visual da campanha:
   marinho #091242, o azul do logo #2b389d e o amarelo #ffe600. Tusker
   Grotesk nos títulos e números, Montserrat no texto.

   Os tokens têm o nome do que SÃO (regra 3 do CLAUDE.md do repositório):
   o petróleo da Dayse virou `--marinho-*` e a turquesa virou `--azul-*`,
   e não valores novos com nomes velhos.
   ============================================================ */

@font-face{font-family:'Tusker Grotesk';font-style:normal;font-weight:400 900;font-display:swap;
  src:url('../fonts/TuskerGrotesk-6700Bold.otf') format('opentype')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fonts/Montserrat-variable.woff2') format('woff2')}

:root{
  /* marinho: a família do fundo e da tinta de destaque */
  --marinho-900:#091242;    /* o navy do logo e do site */
  --marinho-800:#14206A;
  --marinho-700:#2B389D;    /* o azul do "ISRAEL" no logo */
  --marinho-200:color-mix(in srgb,var(--marinho-700) 30%,#fff);
  --marinho-100:color-mix(in srgb,var(--marinho-700) 11%,#fff);
  --marinho-900-rgb:9,18,66;
  /* azul: o acento secundário (o turquesa da Dayse fazia este papel) */
  --azul-500:#4372AD;       /* o --blue do site dele */
  --azul-400:#4372AD;       /* borda e foco sobre claro */
  --azul-300:#B9C6F5;       /* texto miúdo sobre o marinho */
  --amarelo-500:#FFE600;
  --realce:var(--amarelo-500);
  --realce-forte:#F2D600;
  --realce-ink:var(--marinho-900);

  --tinta:#12213B;          /* o --ink do site dele */
  --tinta-rgb:18,33,59;
  --tinta-60:#4F5D7C;       /* o --ink-soft */
  --papel:#F6F3EA;          /* o --paper */
  --branco:#FFFFFF;

  --erro-500:#D7263D; --erro-ink:#A3142A;
  --aviso-ink:#8F5E00;
  --c-whatsapp:#25D366;
  --verde-acao:color-mix(in srgb,var(--c-whatsapp) 62%,var(--marinho-900));

  /* a urna imitada: cor do objeto, não da campanha */
  --urna-corpo:#2A2A28; --urna-teclado:#1B1B1A; --urna-tecla:#0E0E0E; --urna-tecla-tx:#F5F5F5;
  --urna-visor:#EFEFEA; --urna-tinta:#111111; --urna-foto:#D9D9D3; --urna-selo:#8F8F8A;
  --urna-branco:#F7F7F2; --urna-branco-borda:#C9C9C3; --urna-corrige:#E8712A; --urna-confirma:#23A04E;

  --font-titulo:'Tusker Grotesk','Arial Narrow',system-ui,sans-serif;
  --font-texto:'Montserrat',system-ui,sans-serif;

  --tx-0:.72rem; --tx-1:.8rem; --tx-2:.88rem; --tx-4:clamp(1rem,1.6vw,1.12rem); --tx-7:clamp(1.6rem,5vw,2.1rem);
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:40px;
  --raio-md:20px; --raio-pill:999px;
  --sombra-card:0 6px 24px rgba(var(--tinta-rgb),.08);
  --sombra-hover:0 16px 40px rgba(var(--tinta-rgb),.18);
  --sombra-pop:0 16px 44px rgba(var(--marinho-900-rgb),.3);
  --t-rapida:.15s; --t-media:.2s;
  --ease-mola:cubic-bezier(.34,1.56,.64,1);
  --z-menu:200; --z-toast:1400;
  --topo-h:64px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papel);color:var(--tinta);font:500 1rem/1.55 var(--font-texto);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
h1,h2{margin:0;font-family:var(--font-titulo);font-weight:700;line-height:1;letter-spacing:.01em}
button,input,select{font:inherit}
a{color:inherit}
:focus-visible{outline:2px solid var(--azul-400);outline-offset:2px}

.container{width:100%;max-width:1120px;margin-inline:auto;padding-inline:16px}

/* ---- o topo: a faixa marinho com o logo, e o fio amarelo da campanha ---- */
.topo{position:sticky;top:0;z-index:50;background:var(--marinho-900);border-bottom:4px solid var(--realce)}
.topo .container{height:var(--topo-h);display:flex;align-items:center;justify-content:space-between;gap:16px}
.topo-logo{display:block;height:46px;width:auto}
.topo-link{color:var(--branco);font:600 var(--tx-2)/1 var(--font-texto);text-decoration:none;padding:10px 0;white-space:nowrap}
.topo-link:hover{color:var(--realce)}

/* ---- a seção da ferramenta ---- */
.col-sec{padding:clamp(28px,6vw,56px) 0 clamp(40px,7vw,68px)}
.section-head{text-align:center;margin-bottom:var(--sp-6)}
.section-title{font-size:clamp(3rem,13vw,4.6rem);text-transform:uppercase;color:var(--marinho-900);font-weight:700;letter-spacing:.005em}
.section-sub{color:var(--tinta-60);margin:var(--sp-2) 0 0;font-size:1.02rem}
.col-aviso-js{text-align:center;padding:16px;border:1px solid var(--realce);border-radius:14px;background:var(--branco)}

/* ---- botões (o mesmo .btn da casa da Dayse) ---- */
.btn{display:inline-flex;align-items:center;gap:.5em;justify-content:center;border:0;cursor:pointer;border-radius:var(--raio-pill);
  font-weight:700;letter-spacing:.02em;padding:.7em 1.2em;font-size:.92rem;transition:transform .18s,box-shadow .18s,background .18s}
.btn-lg{padding:.85em 1.6em;font-size:1.05rem}
.btn-cta{background:var(--realce);color:var(--realce-ink)}
.btn-cta:hover{background:var(--realce-forte);transform:translateY(-2px);box-shadow:var(--sombra-hover)}
.ico-traco{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn-ico{width:20px;height:20px;fill:currentColor}

/* ---- o convite no fim: conhecer o professor ---- */
.convite{background:var(--marinho-900);color:var(--branco);padding:clamp(36px,7vw,60px) 0;text-align:center}
.convite h2{font-size:clamp(2.4rem,9vw,3.6rem);text-transform:uppercase}
.convite h2 b{color:var(--realce);font-weight:700}
.convite p{max-width:520px;margin:12px auto 0;color:var(--azul-300)}
.convite-bts{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:24px}
.btn-contorno{background:none;color:var(--branco);box-shadow:inset 0 0 0 2px rgba(255,255,255,.55);text-decoration:none}
.btn-contorno:hover{box-shadow:inset 0 0 0 2px var(--branco);transform:translateY(-2px)}
.convite .btn-cta{text-decoration:none}

/* ---- rodapé: a identificação obrigatória da propaganda ---- */
.rodape{background:var(--marinho-900);color:var(--azul-300);border-top:1px solid rgba(255,255,255,.12);padding:28px 0 calc(28px + env(safe-area-inset-bottom));font-size:.8rem;line-height:1.55}
.rodape .container{display:grid;gap:12px;justify-items:center;text-align:center}
.rodape-logo{height:56px;width:auto}
.rodape-legal{color:var(--branco);font-weight:700;letter-spacing:.01em;max-width:640px}
.rodape-links{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center}
.rodape-links a{color:var(--branco);text-decoration:underline;text-underline-offset:3px;padding:6px 0}
.rodape-links a:hover{color:var(--realce)}

/* ============================================================
   A COLINHA — portada de ../public/css/styles.css (docs/98), com os
   tokens renomeados. Ajustes desta casa no fim do arquivo.
   ============================================================ */
.col-kicker{font:600 var(--tx-1)/1 var(--font-titulo);letter-spacing:.18em;text-transform:uppercase;
  color:var(--marinho-700);margin-bottom:var(--sp-2)}
.col-app{max-width:600px;margin-inline:auto;scroll-margin-top:calc(var(--header-h) + var(--azulejo-h) + 12px)}
.col-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.col-app .ico-traco{flex:none}

@keyframes colCela{0%{transform:scale(.6) translateY(4px)}55%{transform:scale(1.1)}to{transform:none}}
@keyframes colCursor{50%{border-color:var(--marinho-200)}}
@keyframes colDobra{0%{opacity:0;transform:perspective(1200px) rotateX(-80deg) scaleY(.35)}46%{opacity:1;transform:perspective(1200px) rotateX(12deg) scaleY(1.04)}74%{transform:perspective(1200px) rotateX(-4deg)}to{transform:none}}
@keyframes colSobe{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes colTreme{0%,to{transform:none}20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
@keyframes colPisca{to{visibility:hidden}}
@keyframes colSelo{0%{transform:scale(.4) rotate(-12deg);opacity:0}60%{transform:scale(1.08) rotate(3deg);opacity:1}to{transform:none}}

/* ---- progresso e seções ---- */
.col-progresso{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;margin-bottom:var(--sp-2)}
.col-progresso span{height:6px;border-radius:9px;background:var(--marinho-100);overflow:hidden;position:relative}
.col-progresso span::after{content:"";position:absolute;inset:0;background:var(--marinho-700);transform:scaleX(0);
  transform-origin:left;transition:transform .38s var(--ease-mola)}
.col-progresso span.ok::after{transform:scaleX(1)}
.col-progresso span.fixo::after{background:var(--realce);transform:scaleX(1)}
.col-secao{display:flex;align-items:center;gap:var(--sp-3);margin:var(--sp-6) 0 var(--sp-3);
  font:600 var(--tx-1)/1 var(--font-titulo);letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-60)}
.col-secao::after{content:"";flex:1;height:1px;background:rgba(var(--tinta-rgb),.12)}

/* ---- o cartão de cada cargo ---- */
.col-cargos{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-3)}
.col-cargo{background:var(--branco);border:1px solid rgba(var(--tinta-rgb),.12);border-radius:var(--raio-md);
  padding:var(--sp-4);position:relative;box-shadow:var(--sombra-card);animation:colSobe .45s var(--ease-mola) both}
.col-cargo.entrou{animation:colDobra .62s ease-out both}
.col-cargo.erro .col-celas{animation:colTreme .38s ease-out}
.col-cargo-linha{display:flex;align-items:center;gap:10px}
.col-cargo-tit{flex:1;min-width:0;text-align:left;background:none;border:0;padding:0;cursor:pointer;color:inherit;font:inherit}
.col-cargo-tit b{display:block;font:600 1.05rem/1.2 var(--font-titulo);text-transform:uppercase;letter-spacing:.02em;color:var(--marinho-800)}
.col-cargo-tit small{display:block;margin-top:4px;font-size:var(--tx-2);color:var(--tinta-60)}
.col-celas{position:relative;display:flex;gap:5px;flex:none;cursor:text;border-radius:10px}
.col-celas-vis{display:contents}
.col-cela{width:30px;height:42px;border:1.5px dashed var(--azul-400);border-radius:9px;display:grid;place-items:center;
  font:700 1.4rem/1 var(--font-titulo);color:var(--tinta);transition:border-color var(--t-rapida),background var(--t-rapida)}
.col-cela.cheia{border-style:solid;border-color:var(--marinho-200);background:var(--papel)}
.col-cela.pop{animation:colCela .32s ease-out}
.col-celas:focus-within .col-cela.atual{border-style:solid;border-color:var(--marinho-700);animation:colCursor 1s steps(1) infinite}
.col-celas:focus-within{outline:2px solid var(--azul-400);outline-offset:3px}
.col-celas-in{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;padding:0;margin:0;font-size:16px;caret-color:transparent;cursor:text}
.col-lupa{flex:none;width:44px;height:44px;border-radius:13px;border:1px solid rgba(var(--tinta-rgb),.12);
  background:var(--papel);color:var(--marinho-700);display:grid;place-items:center;cursor:pointer;transition:transform var(--t-rapida)}
.col-lupa:active{transform:scale(.92)}
.col-cargo-msg{margin-top:10px;font-size:var(--tx-2);color:var(--erro-ink);font-weight:600}

/* cargo preenchido, e o mesmo desenho na lista da busca */
.col-escolha,.col-cand{width:100%;display:grid;grid-template-columns:58px minmax(0,1fr) 52px;gap:12px;align-items:center;
  text-align:center;color:inherit;font:inherit;cursor:pointer}
.col-escolha{background:none;border:0;padding:0}
.col-meio{min-width:0}
.col-foto{position:relative;width:58px;height:76px;border-radius:11px;overflow:hidden;background:var(--marinho-100);
  display:grid;place-items:center;font:700 1.05rem var(--font-titulo);color:var(--marinho-700)}
.col-foto::before{content:attr(data-ini)}
.col-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--marinho-100)}
.col-rot{display:block;font-size:var(--tx-0);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--tinta-60);
  margin-bottom:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.col-tiles{display:inline-flex;gap:5px;justify-content:center}
.col-tile{width:30px;height:40px;border:1.5px solid var(--marinho-200);border-radius:9px;background:var(--papel);
  display:grid;place-items:center;font:700 1.4rem/1 var(--font-titulo);color:var(--tinta)}
.entrou .col-tile{animation:colCela .34s ease-out both}
.col-tile.vazio{border-style:dashed;border-color:var(--azul-400);background:none}
.col-tile.apagado{color:var(--tinta-60)}
.col-tecla-branco{display:inline-grid;place-items:center;height:40px;padding:0 16px;border-radius:8px;
  background:var(--urna-branco);color:var(--urna-tinta);font:700 .95rem var(--font-titulo);letter-spacing:.08em;
  box-shadow:0 3px 0 var(--urna-branco-borda),inset 0 0 0 1px var(--urna-branco-borda)}
.col-fio{display:block;height:1px;margin:8px auto 0;width:80%;background:linear-gradient(90deg,transparent,rgba(var(--tinta-rgb),.16),transparent)}
.col-nome{display:block;margin-top:7px;font:600 .98rem/1.2 var(--font-titulo);letter-spacing:.02em;color:var(--tinta);overflow-wrap:anywhere}
/* A SIGLA EM OSWALD, numa linha: em Campton, "DEMOCRATA" quebrava em
   "DEMOCRAT / A" (vistoria de 01/10/2026). A condensada cabe; a mais longa
   (SOLIDARIEDADE) desce um degrau. */
.col-partido small{display:block;margin-top:6px;font:600 .72rem/1.1 var(--font-titulo);color:var(--tinta-60);letter-spacing:.02em;white-space:nowrap}
.col-partido small.longa{font-size:.6rem;letter-spacing:0}
.col-selo-p{width:48px;height:48px;margin:0 auto;border-radius:13px;background:var(--marinho-100);color:var(--marinho-800);
  display:grid;place-items:center;font:700 1.15rem var(--font-titulo)}
/* a linha de cima do cartão preenchido: o cargo, e o que dá para fazer com ele */
.col-cargo-cab{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);margin:-6px -6px 8px 0}
.col-cargo-rot{min-width:0;font:600 var(--tx-1)/1.2 var(--font-titulo);letter-spacing:.06em;text-transform:uppercase;color:var(--marinho-700)}
.col-cargo-bts{display:flex;gap:4px;flex:none}
.col-mini-bt{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 7px;border:0;border-radius:var(--raio-pill);
  background:none;color:var(--tinta-60);font:600 .82rem var(--font-texto);cursor:pointer}
.col-mini-bt:hover,.col-mini-bt:focus-visible{background:var(--marinho-100);color:var(--marinho-800)}
.col-mini-bt[data-limpar]:hover,.col-mini-bt[data-limpar]:focus-visible{background:color-mix(in srgb,var(--erro-500) 10%,var(--branco));color:var(--erro-ink)}

/* DEPUTADA DISTRITAL: fixa e em destaque. É o único cartão no petróleo da casa,
   com o 40222 no âmbar — a mesma dupla do hero e do botão "Apoie". */
.col-cargo.fixo{background:var(--marinho-800);border:0;color:var(--branco);padding:18px 18px 16px 24px;overflow:hidden}
.col-cargo.fixo::before{content:"";position:absolute;left:0;top:0;bottom:0;width:7px;background:var(--realce)}
.col-fixo-topo{display:flex;align-items:center;justify-content:space-between;gap:8px}
.col-fixo-rot{font:600 var(--tx-1)/1.2 var(--font-titulo);letter-spacing:.1em;text-transform:uppercase;color:var(--azul-300)}
.col-cadeado{display:inline-flex;align-items:center;gap:5px;background:var(--realce);color:var(--tinta);
  font:600 var(--tx-0)/1 var(--font-titulo);letter-spacing:.12em;text-transform:uppercase;padding:6px 9px;border-radius:var(--raio-pill);
  animation:colSelo .6s .5s var(--ease-mola) both}
.col-fixo-corpo{display:flex;align-items:center;gap:14px;margin-top:14px}
.col-fixo-foto{width:68px;height:90px;border-radius:12px;object-fit:cover;flex:none;border:2px solid var(--realce)}
.col-fixo-nome{display:block;font:700 1.5rem/1.05 var(--font-titulo);letter-spacing:.02em}
.col-fixo-part{display:block;margin-top:5px;font-size:var(--tx-2);color:rgba(255,255,255,.86)}
.fixo .col-tiles{margin-top:16px;gap:8px;display:flex;justify-content:flex-start}
.fixo .col-tile{width:52px;height:66px;border-radius:13px;background:var(--realce);border-color:var(--realce);color:var(--tinta);font-size:2.3rem}
.fixo .col-tile:nth-child(1){animation:colCela .4s .15s ease-out both}
.fixo .col-tile:nth-child(2){animation:colCela .4s .22s ease-out both}
.fixo .col-tile:nth-child(3){animation:colCela .4s .29s ease-out both}
.fixo .col-tile:nth-child(4){animation:colCela .4s .36s ease-out both}
.fixo .col-tile:nth-child(5){animation:colCela .4s .43s ease-out both}
.col-fixo-nota{margin-top:14px;font-size:var(--tx-2);color:rgba(255,255,255,.9)}

/* ---- ações ---- */
.col-acoes{display:grid;gap:var(--sp-3);margin-top:var(--sp-6)}
.col-duas{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
.col-bt-largo{width:100%}
/* o botão secundário da ferramenta: o mesmo .btn da casa, em contorno */
.col-bt{background:var(--branco);color:var(--marinho-800);box-shadow:inset 0 0 0 1.5px var(--marinho-200);min-height:48px}
.col-bt:hover{box-shadow:inset 0 0 0 1.5px var(--azul-400)}
.col-bt:disabled,.col-app .btn:disabled{opacity:.45;cursor:not-allowed}
.col-bt-perigo{color:var(--erro-ink);box-shadow:inset 0 0 0 1.5px var(--erro-ink)}
.col-app .btn span[data-ic]{display:inline-flex}
.col-linha-link{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--branco);color:inherit;font:inherit;cursor:pointer;
  border:1px solid rgba(var(--tinta-rgb),.12);border-radius:var(--raio-md);padding:var(--sp-4);transition:border-color var(--t-rapida),transform var(--t-rapida)}
.col-linha-link:hover{border-color:var(--azul-400)}
.col-linha-link:active{transform:scale(.985)}
.col-linha-link b{display:block;font:600 1.02rem var(--font-titulo);text-transform:uppercase;letter-spacing:.02em;color:var(--marinho-800)}
.col-linha-link small{display:block;color:var(--tinta-60);font-size:var(--tx-2);margin-top:3px;line-height:1.35}
.col-seta{margin-left:auto;color:var(--tinta-60);display:flex}
.col-ic{width:44px;height:44px;border-radius:12px;background:var(--marinho-100);color:var(--marinho-700);display:grid;place-items:center;flex:none}

.col-rodape{margin-top:var(--sp-8);padding-top:var(--sp-4);border-top:1px solid rgba(var(--tinta-rgb),.12);
  font-size:.8rem;line-height:1.5;color:var(--tinta-60);display:grid;gap:var(--sp-2)}
.col-selo-oficial{justify-self:start;display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--marinho-800);
  border:1px solid var(--marinho-200);border-radius:var(--raio-pill);padding:4px 11px}
.col-selo-oficial i{width:6px;height:6px;border-radius:50%;background:var(--azul-500)}

/* ---- as vistas internas (Passar cola, Minhas colinhas, Simulador) ---- */
.col-vista{animation:colSobe .35s var(--ease-mola) both}
.col-vista-topo{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;margin-bottom:var(--sp-4)}
.col-vista-topo h2{grid-column:2;text-align:center;font-size:var(--tx-7);text-transform:uppercase;color:var(--marinho-800);outline:none}
.col-fechar{width:44px;height:44px;border-radius:50%;border:0;background:var(--marinho-100);color:var(--marinho-800);display:grid;place-items:center;cursor:pointer}
.col-previa{background:var(--branco);border:1px solid rgba(var(--tinta-rgb),.12);border-radius:var(--raio-md);padding:var(--sp-4);display:flex;justify-content:center}
.col-previa canvas{display:block;width:100%;max-width:330px;height:auto;border-radius:10px}
.col-previa.stories canvas{max-width:240px}
.col-previa + .col-bt-zap{margin-top:var(--sp-4)}
.col-grupo{margin-top:var(--sp-4)}
.col-grupo > span{display:block;font:600 var(--tx-1)/1 var(--font-titulo);letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-60);margin-bottom:var(--sp-2)}
.col-seg{display:grid;grid-template-columns:1fr 1fr;background:var(--branco);border:1px solid rgba(var(--tinta-rgb),.12);border-radius:14px;padding:4px;gap:4px}
.col-seg label{position:relative}
.col-seg input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.col-seg span{display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:10px;font-weight:600;color:var(--tinta-60);
  transition:background var(--t-media),color var(--t-media)}
.col-seg input:checked + span{background:var(--marinho-700);color:var(--branco)}
.col-seg input:focus-visible + span{outline:2px solid var(--azul-400);outline-offset:2px}
.col-alterna{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:var(--sp-3);background:var(--branco);
  border:1px solid rgba(var(--tinta-rgb),.12);border-radius:14px;padding:12px 14px;font-weight:600;cursor:pointer}
.col-alterna input{appearance:none;width:46px;height:28px;border-radius:99px;background:var(--marinho-200);position:relative;cursor:pointer;
  transition:background var(--t-media);flex:none;margin:0}
.col-alterna input::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--branco);
  transition:transform var(--t-media) var(--ease-mola)}
.col-alterna input:checked{background:var(--marinho-700)}
.col-alterna input:checked::after{transform:translateX(18px)}
.col-saidas{display:grid;gap:var(--sp-3);margin-top:var(--sp-5)}
.col-nota{font-size:var(--tx-2);color:var(--tinta-60);line-height:1.45}
.col-nota--grande{font-size:var(--tx-4);color:var(--tinta)}
.col-centro{text-align:center;margin-top:var(--sp-3)}
#col-sim-intro > .col-nota:last-child{margin-top:var(--sp-4)}
.col-link-manual{width:100%;height:46px;border-radius:12px;border:1px solid var(--marinho-200);background:var(--branco);padding:0 12px;font:.85rem var(--font-texto)}
.col-salvas{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-3)}
.col-salva{background:var(--branco);border:1px solid rgba(var(--tinta-rgb),.12);border-radius:var(--raio-md);padding:var(--sp-4);animation:colSobe .4s var(--ease-mola) both}
.col-salva-nome{display:block;font:600 1.1rem var(--font-titulo);color:var(--marinho-800);overflow-wrap:anywhere}
.col-salva-data{display:block;font-size:.8rem;color:var(--tinta-60);margin-top:3px}
.col-salva-nums{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.col-salva-nums span{font:700 .85rem/1 var(--font-titulo);letter-spacing:.04em;padding:6px 7px;border-radius:7px;border:1px solid var(--marinho-200);background:var(--papel)}
.col-salva-nums span.fixo{background:var(--realce);color:var(--tinta);border-color:var(--realce)}
.col-salva-nums span.vazio{border-style:dashed;border-color:var(--azul-400);color:var(--tinta-60);background:none}
.col-salva-acoes,.col-renomear{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:14px}
.col-renomear input{flex:1 1 150px;min-width:0;height:44px;border-radius:12px;border:1.5px solid var(--marinho-700);background:var(--branco);padding:0 12px;font-size:16px}
.col-aviso{border:1px solid var(--realce);background:color-mix(in srgb,var(--realce) 12%,var(--branco));border-radius:14px;padding:12px 14px;font-size:var(--tx-2);margin-bottom:14px}
.col-vazio-bloco{border:1.5px dashed var(--azul-400);border-radius:var(--raio-md);padding:30px 18px;text-align:center;color:var(--tinta-60);display:grid;gap:var(--sp-4)}

/* ---- a gaveta de busca. Acima do cabeçalho (z 50) e do WhatsApp flutuante
   (z 80): é uma folha modal, e nada do site pode ficar por cima dela. ---- */
html.col-gaveta-aberta{overflow:hidden}
.col-gaveta-fundo{position:fixed;inset:0;z-index:var(--z-menu);background:rgba(var(--marinho-900-rgb),.6);opacity:0;transition:opacity .38s ease}
.col-gaveta-fundo.aberta{opacity:1}
.col-gaveta{position:fixed;left:0;right:0;bottom:0;z-index:calc(var(--z-menu) + 1);margin:0 auto;max-width:600px;height:94dvh;
  background:var(--papel);border-radius:24px 24px 0 0;display:flex;flex-direction:column;transform:translateY(102%);
  transition:transform .5s var(--ease-mola);overflow:hidden;box-shadow:var(--sombra-pop)}
.col-gaveta.aberta{transform:none}
.col-gaveta-alca{width:40px;height:5px;border-radius:9px;background:var(--marinho-200);margin:8px auto 0;flex:none}
.col-gaveta-topo{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;padding:8px 14px 6px;flex:none}
.col-gaveta-topo b{text-align:center;font:600 1.15rem var(--font-titulo);text-transform:uppercase;color:var(--marinho-800)}
.col-busca{margin:8px 14px 0;position:relative;flex:none;display:block}
.col-busca > span[data-ic]{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--tinta-60);pointer-events:none;display:flex}
.col-busca input{width:100%;height:52px;border-radius:16px;border:1px solid rgba(var(--tinta-rgb),.16);background:var(--branco);padding:0 14px 0 44px;font-size:16px;outline:none}
.col-busca input:focus{border-color:var(--marinho-700)}
.col-busca input::placeholder{color:var(--tinta-60)}
.col-filtros{display:flex;gap:8px;padding:10px 14px 0;flex:none;overflow-x:auto;scrollbar-width:none}
.col-chip{flex:none;height:44px;border-radius:13px;border:1px solid rgba(var(--tinta-rgb),.16);background:var(--branco);color:var(--marinho-800);
  padding:0 14px;display:inline-flex;align-items:center;gap:7px;font:600 .9rem var(--font-texto);position:relative;cursor:pointer}
.col-chip select{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer;font-size:16px}
.col-chip.ativo{border-color:var(--marinho-700);box-shadow:inset 0 0 0 1px var(--marinho-700)}
.col-conta{display:flex;justify-content:space-between;gap:8px;padding:12px 16px 8px;font:600 var(--tx-0)/1 var(--font-titulo);letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinta-60);flex:none}
.col-lista{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:2px 14px 14px;overscroll-behavior:contain}
.col-lista ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.col-cand{background:var(--branco);border:1px solid rgba(var(--tinta-rgb),.12);border-radius:18px;padding:12px;transition:border-color var(--t-rapida),transform var(--t-rapida)}
.col-cand:hover{border-color:var(--azul-400)}
.col-cand:active{transform:scale(.985)}
.col-cand.anima{animation:colSobe .4s var(--ease-mola) both}
.col-cand:disabled{opacity:.42;cursor:not-allowed}
.col-cand.escolhido{border-color:var(--marinho-700);box-shadow:inset 0 0 0 1px var(--marinho-700)}
.col-etiqueta{display:inline-block;margin-top:6px;font:600 var(--tx-0)/1 var(--font-titulo);letter-spacing:.08em;text-transform:uppercase;
  padding:4px 7px;border-radius:6px;background:var(--marinho-100);color:var(--marinho-800)}
.col-etiqueta--sua{background:var(--realce);color:var(--tinta)}
.col-etiqueta.alerta{background:color-mix(in srgb,var(--erro-500) 10%,var(--branco));color:var(--erro-ink)}
.col-nada{padding:40px 12px;text-align:center;color:var(--tinta-60)}
/* FLEX, e não `grid repeat(auto-fit,minmax(0,1fr))`: com o "Limpar" ocupando a
   linha toda, o auto-fit criava colunas de largura zero e os três botões se
   empilhavam esmagados num canto (medido na vistoria de 01/10/2026). */
.col-gaveta-base{flex:none;border-top:1px solid rgba(var(--tinta-rgb),.12);padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  display:flex;flex-wrap:wrap;gap:8px;background:var(--papel)}
.col-gaveta-base .col-base-bt{flex:1 1 0;min-width:0}
.col-base-bt{min-height:58px;border-radius:14px;border:1px solid rgba(var(--tinta-rgb),.14);background:var(--branco);color:var(--marinho-800);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font:600 .8rem var(--font-texto);padding:6px}
.col-mini{display:flex;gap:3px}
.col-mini i{width:13px;height:17px;border:1.3px dashed var(--azul-400);border-radius:4px;font:700 .7rem/15px var(--font-titulo);font-style:normal;text-align:center;color:var(--tinta-60)}
.col-mini-branco{font:700 .62rem/1 var(--font-titulo);background:var(--urna-branco);color:var(--urna-tinta);padding:4px 8px;border-radius:4px;
  letter-spacing:.06em;box-shadow:inset 0 0 0 1px var(--urna-branco-borda)}
.col-limpar-cargo{flex:1 0 100%;display:inline-flex;align-items:center;justify-content:center;gap:6px;background:none;
  border:1.5px solid var(--marinho-200);border-radius:var(--raio-pill);color:var(--erro-ink);min-height:44px;
  font:600 .92rem var(--font-texto);cursor:pointer}

/* a ficha do candidato desliza por cima da lista, dentro da gaveta */
.col-ficha{position:absolute;inset:0;background:var(--papel);z-index:3;display:flex;flex-direction:column;transform:translateX(104%);transition:transform .45s var(--ease-mola)}
.col-ficha.aberta{transform:none}
.col-ficha-topo{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;padding:14px 14px 4px}
.col-ficha-topo > span{text-align:center;font:600 var(--tx-0)/1.4 var(--font-titulo);letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-60)}
.col-ficha-corpo{flex:1;overflow-y:auto;padding:14px 16px 20px}
.col-ficha-cab{display:grid;grid-template-columns:104px minmax(0,1fr) 56px;gap:14px;align-items:start}
.col-ficha-cab .col-foto{width:104px;height:136px;border-radius:16px;font-size:1.6rem}
.col-ficha-nome{display:block;font:700 1.45rem/1.1 var(--font-titulo);color:var(--marinho-800);overflow-wrap:anywhere}
.col-ficha-info{margin-top:8px;font-size:var(--tx-2);color:var(--tinta-60);display:grid;gap:3px}
.col-ficha-sit{margin-top:8px;font-size:var(--tx-2);display:flex;align-items:center;gap:6px}
.col-ficha-sit i{width:8px;height:8px;border-radius:50%;background:var(--verde-acao);flex:none}
.col-ficha-sit.alerta i{background:var(--erro-500)}
.col-ficha .col-tiles{margin-top:22px;gap:8px}
.col-ficha .col-tile{width:48px;height:62px;border-radius:12px;font-size:2.1rem}
.col-ficha .col-bt-largo{margin-top:22px}
.col-ficha-fonte{margin-top:22px;font-size:.78rem;color:var(--tinta-60);line-height:1.6}

/* ---- o simulador: a urna de verdade, com as cores dela (tokens --urna-*) ---- */
.col-sim-cola{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center;background:var(--realce);color:var(--tinta);
  border-radius:14px;padding:10px 14px;font-weight:600;font-size:var(--tx-2);margin-bottom:12px}
.col-sim-cola b{font:700 1.15rem var(--font-titulo)}
.col-urna{background:var(--urna-corpo);border-radius:16px;padding:12px;display:grid;gap:12px}
.col-visor{background:var(--urna-visor);color:var(--urna-tinta);font-family:Arial,Helvetica,sans-serif;border:6px solid var(--urna-tinta);border-radius:4px;
  min-height:300px;padding:10px 12px;display:flex;flex-direction:column;line-height:1.3}
.col-v-topo{font-size:12px;font-weight:700;min-height:16px}
.col-v-cargo{text-align:center;font-size:22px;font-weight:700;margin-top:6px}
.col-v-vaga{text-align:center;font-size:13px;margin-bottom:6px;min-height:16px}
.col-v-corpo{flex:1;display:flex;gap:10px}
.col-v-dados{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.col-v-num{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px}
.col-v-cxs{display:inline-flex;gap:4px}
.col-v-cx{width:30px;height:40px;border:1.5px solid var(--urna-tinta);background:var(--branco);display:grid;place-items:center;font:700 26px Arial,Helvetica,sans-serif}
.col-v-cx.atual{animation:colPisca 1s steps(2,start) infinite}
.col-v-linha{font-size:14px;overflow-wrap:anywhere}
.col-v-linha b{font-size:16px}
.col-v-grande{font-size:21px;font-weight:700}
.col-v-pisca{animation:colPisca 1.1s steps(2,start) infinite}
.col-v-foto{flex:none;width:80px;text-align:center;font-size:11px}
.col-v-quadro{position:relative;width:80px;height:104px;border:1.5px solid var(--urna-tinta);background:var(--urna-foto);display:grid;place-items:center;font-size:26px;font-weight:700;overflow:hidden}
.col-v-quadro::before{content:attr(data-ini)}
.col-v-quadro img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.col-v-rodape{border-top:1.5px solid var(--urna-tinta);margin-top:10px;padding-top:6px;font-size:12px;line-height:1.35}
.col-v-fim{flex:1;display:grid;place-items:center;font-size:96px;font-weight:700;letter-spacing:.04em}
.col-v-votou{text-align:right;font-size:14px;font-weight:700;color:var(--tinta-60)}
.col-teclado-caixa{background:var(--urna-teclado);border-radius:10px;padding:12px}
.col-teclado-selo{font:600 .62rem/1 var(--font-titulo);letter-spacing:.16em;color:var(--urna-selo);text-align:center;margin-bottom:10px}
.col-teclado{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.col-tecla{border:0;border-radius:5px;background:var(--urna-tecla);color:var(--urna-tecla-tx);font:700 26px Arial,Helvetica,sans-serif;min-height:54px;cursor:pointer;
  box-shadow:0 3px 0 var(--urna-tinta);touch-action:manipulation;transition:transform .08s,box-shadow .08s}
.col-tecla:active,.col-tecla.apertada{transform:translateY(3px);box-shadow:none;filter:brightness(1.3)}
.col-tecla.zero{grid-column:2}
.col-teclas-acao{display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:8px;margin-top:12px;align-items:end}
.col-teclas-acao .col-tecla{font-size:13px;color:var(--urna-tinta);letter-spacing:.02em}
.col-tecla.t-branco{background:var(--urna-branco)}
.col-tecla.t-corrige{background:var(--urna-corrige)}
.col-tecla.t-confirma{background:var(--urna-confirma);min-height:68px}
.col-sim-msg{min-height:22px;margin-top:10px;font-size:var(--tx-2);font-weight:600;color:var(--aviso-ink)}
.col-resumo{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:6px}
.col-resumo li{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;background:var(--branco);border:1px solid rgba(var(--tinta-rgb),.12);
  border-radius:12px;padding:10px 12px;font-size:var(--tx-2)}
.col-resumo b{font-family:var(--font-titulo)}
@media (min-width:760px){.col-urna{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);padding:16px}}
@media (max-width:370px){
  .col-escolha,.col-cand{grid-template-columns:50px minmax(0,1fr) 44px;gap:8px}
  .col-foto{width:50px;height:66px;border-radius:9px}
  .col-selo-p{width:42px;height:42px;font-size:1rem;border-radius:11px}
  .col-tile{width:26px;height:36px;font-size:1.2rem;border-radius:8px}
  .col-tiles{gap:4px}
  .col-cela{width:27px;height:38px;font-size:1.2rem}
  .fixo .col-tile{width:46px;height:60px;font-size:2rem}
  .col-ficha-cab{grid-template-columns:86px minmax(0,1fr) 48px}
  .col-ficha-cab .col-foto{width:86px;height:114px}
}

/* o aviso que aparece e some. Acima de tudo, como o toast da casa. */
.col-toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));z-index:var(--z-toast);transform:translate(-50%,24px);
  width:min(92vw,440px);background:var(--marinho-900);color:var(--branco);padding:13px 16px;border-radius:14px;font-size:var(--tx-2);font-weight:600;
  opacity:0;pointer-events:none;transition:opacity var(--t-media),transform .38s var(--ease-mola);box-shadow:var(--sombra-pop)}
.col-toast.ver{opacity:1;transform:translate(-50%,0)}
.col-toast.erro{background:var(--erro-ink)}
/* com botão (o "Desfazer"): passa a receber toque, e o texto e o botão dividem a linha */
.col-toast.com-acao{pointer-events:auto;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.col-toast-bt{flex:none;min-height:44px;padding:0 14px;border:0;border-radius:var(--raio-pill);background:var(--realce);color:var(--tinta);
  font:600 .9rem var(--font-titulo);text-transform:uppercase;letter-spacing:.04em;cursor:pointer}
@media (prefers-reduced-motion:reduce){
  .col-app *,.col-app *::before,.col-app *::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* ---- a cola de bolso impressa. Só na /colinha: a regra é presa ao
   data-page, senão imprimir qualquer outra página do site sairia em branco. */
#col-impressao{display:none}
@media print{
  body > *:not(#col-impressao){display:none !important}
  body #col-impressao{display:block}
  body{background:var(--branco) !important}
}
.col-imp-aviso{font:11px Arial,Helvetica,sans-serif;color:var(--tinta-60);text-align:center;margin-bottom:4mm}
.col-imp-folha{display:flex;gap:8mm;justify-content:center;flex-wrap:wrap}
.col-imp-cola{width:82mm;border:1px dashed var(--urna-tinta);border-radius:3mm;padding:3.5mm;font-family:var(--font-texto);color:var(--urna-tinta);
  -webkit-print-color-adjust:exact;print-color-adjust:exact;break-inside:avoid;line-height:1.25}
.col-imp-cab{display:flex;justify-content:space-between;align-items:baseline;gap:2mm;padding-bottom:2mm;border-bottom:.4mm solid var(--urna-tinta)}
.col-imp-cab b{font:700 12pt var(--font-titulo);text-transform:uppercase;white-space:nowrap}
.col-imp-cab span{font-size:7pt;text-align:right}
.col-imp-linha{display:flex;align-items:center;gap:2mm;padding:1.8mm 1mm;border-bottom:.25mm solid var(--urna-branco-borda)}
.col-imp-linha.fixo{background:var(--realce);border-radius:2mm;border-bottom:0;margin:1mm 0}
.col-imp-ord{font:700 9pt var(--font-titulo);width:4mm}
.col-imp-txt{flex:1;min-width:0}
.col-imp-txt b{display:block;font-size:7.5pt;text-transform:uppercase;letter-spacing:.04em}
.col-imp-txt span{display:block;font-size:7pt}
.col-imp-nums{display:flex;gap:.8mm}
.col-imp-dig{width:5.2mm;height:6.8mm;border:.3mm solid var(--urna-tinta);border-radius:1mm;background:var(--branco);display:grid;place-items:center;font:700 12pt var(--font-titulo)}
.col-imp-linha.fixo .col-imp-dig{background:var(--tinta);color:var(--realce);border-color:var(--tinta)}
.col-imp-rod{margin-top:2mm;font-size:6pt;line-height:1.35}
.col-imp-rod b{font-size:6.5pt}

/* ---- O WHATSAPP DA COLINHA (01/10/2026, docs/98 §7). O verde é o
   `--verde-acao` do compartilhar dos cartões, UM degrau abaixo: ele foi
   medido para ÍCONE branco (3:1), e com TEXTO branco dá 3,98:1. Com 18% de
   tinta, 5,03:1; o hover desce mais, 5,79:1. ---- */
.col-bt-zap{background:color-mix(in srgb,var(--verde-acao) 82%,var(--tinta));color:var(--branco);text-decoration:none}
.col-bt-zap:hover,.col-bt-zap:focus-visible{background:color-mix(in srgb,var(--verde-acao) 72%,var(--tinta));
  transform:translateY(-2px);box-shadow:var(--sombra-hover)}
.col-bt-zap .btn-ico{width:22px;height:22px}


/* ---- OS RECOMENDADOS da colinha: Israel e Leila (docs/98 §10). O destaque
   é o mesmo da Dayse (o `.fixo`), e duas coisas dizem que não é a mesma
   coisa: o selo "Recomendado" no lugar do cadeado, e o botão Retirar. A
   faixa da esquerda é turquesa: o âmbar é do 40222. ---- */
.col-cargo.recomendado::before{background:var(--azul-500)}
.col-cadeado--rec{background:var(--azul-300);color:var(--marinho-900)}
.col-foto--fixo{width:68px;height:90px;border-radius:12px;border:2px solid var(--azul-300);flex:none;
  background:rgba(255,255,255,.1);color:var(--azul-300);font-size:1.3rem}
.col-foto--fixo img{background:rgba(255,255,255,.1)}
.col-rec-pe{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-top:14px;flex-wrap:wrap}
.col-rec-pe .col-fixo-nota{margin:0;flex:1 1 160px}
.col-retirar{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border:1.5px solid rgba(255,255,255,.5);
  border-radius:var(--raio-pill);background:none;color:var(--branco);font:600 .88rem var(--font-texto);cursor:pointer}
.col-retirar:hover,.col-retirar:focus-visible{background:rgba(255,255,255,.12);border-color:var(--branco)}

/* ============================================================
   AJUSTES DESTA CASA (o que difere da colinha da Dayse)
   ============================================================ */
/* sem a faixa de azulejo nem o cabeçalho da Dayse: a régua é o topo marinho */
.col-app{scroll-margin-top:calc(var(--topo-h) + 16px)}
.col-kicker{color:var(--marinho-700)}
/* O CARTÃO FIXO É O 4004: marinho com o fio amarelo, como o logo sobre o
   fundo escuro. Amarelo sobre o marinho-900 dá 14,08:1 (calculado dos tokens). */
.col-cargo.fixo{background:var(--marinho-900)}
.col-fixo-rot{color:var(--realce)}
.col-cadeado{color:var(--marinho-900)}
.fixo .col-tile{color:var(--marinho-900)}
.col-fixo-nome{font-size:1.9rem;letter-spacing:.01em}
/* A Tusker é bem mais condensada que a Oswald da Dayse: no mesmo tamanho o
   nome ocupa ~60% da largura e fica miúdo. Um degrau acima nos títulos. */
.col-cargo-tit b,.col-linha-link b{font-size:1.3rem;letter-spacing:.03em}
.col-nome{font-size:1.2rem;letter-spacing:.03em}
.col-gaveta-topo b{font-size:1.45rem}
.col-ficha-nome{font-size:1.8rem}
.col-salva-nome{font-size:1.35rem}
.col-vista-topo h2{font-size:clamp(2rem,7vw,2.4rem)}