@font-face { font-family: Poppins; font-style: normal; font-weight: 600; font-display: swap; src: url(fontes/poppins-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 700; font-display: swap; src: url(fontes/poppins-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 800; font-display: swap; src: url(fontes/poppins-latin-800-normal.woff2) format('woff2'); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 900; font-display: swap; src: url(fontes/poppins-latin-900-normal.woff2) format('woff2'); }
@font-face { font-family: Poppins; font-style: italic; font-weight: 800; font-display: swap; src: url(fontes/poppins-latin-800-italic.woff2) format('woff2'); }
@font-face { font-family: Poppins; font-style: italic; font-weight: 900; font-display: swap; src: url(fontes/poppins-latin-900-italic.woff2) format('woff2'); }

:root {
  --azul: #0b63b6;
  --azul-escuro: #0a3f86;
  --azul-texto: #1557a6;
  --amarelo: #ffd400;
  --verde: #14763c;
  --verde-whats: #1fa855;
  --fundo: #eef3fa;
  --cartao: #ffffff;
  --texto: #14233d;
  --texto-suave: #55627a;
  --borda: #d9e2ef;
  --sombra: 0 1px 2px rgba(10, 40, 90, .06), 0 8px 24px rgba(10, 40, 90, .08);
  --raio: 18px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: Poppins, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
}
button { font: inherit; color: inherit; }
svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
svg.cheio { fill: currentColor; stroke: none; }
a { color: var(--azul-texto); }

/* Topo */
.topo {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(160deg, #0d72c9 0%, var(--azul) 45%, var(--azul-escuro) 100%);
  padding: 20px 16px 28px;
}
.topo__faixas {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(118deg, transparent 0 84%, rgba(255, 212, 0, .95) 84% 87%, transparent 87%),
    linear-gradient(118deg, transparent 0 88.5%, rgba(31, 166, 74, .95) 88.5% 91.5%, transparent 91.5%);
  opacity: .85;
}
.topo__conteudo { position: relative; max-width: 1120px; margin: 0 auto; }
.topo__marca { display: flex; align-items: center; gap: 10px; }
.selo { width: 40px; height: 40px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, .2); }
.topo__pill {
  font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25);
  padding: 4px 10px; border-radius: 999px;
}
.topo__titulo { margin: 18px 0 6px; font-size: clamp(30px, 8vw, 48px); line-height: 1.05; font-weight: 900; letter-spacing: -.01em; }
.topo__texto { margin: 0; max-width: 34em; font-size: 15px; opacity: .95; }
.destaque {
  display: flex; align-items: center; gap: 14px;
  margin-top: 18px; padding: 12px 16px 12px 12px; max-width: 420px;
  background: rgba(4, 30, 75, .35); border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--raio); backdrop-filter: blur(4px);
}
.destaque__foto { width: 64px; height: 89px; object-fit: cover; border-radius: 12px; border: 3px solid var(--amarelo); background: #cfdcef; }
.destaque__texto { display: flex; flex-direction: column; min-width: 0; }
.destaque__cargo { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .9; }
.destaque__nome { font-size: 20px; font-weight: 900; line-height: 1.15; }
.destaque__numero { font-size: 42px; font-weight: 900; line-height: 1; color: var(--amarelo); text-shadow: 0 3px 0 rgba(0, 0, 0, .18); }

/* Blocos */
.principal { max-width: 1120px; margin: 0 auto; padding: 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.bloco { min-width: 0; background: var(--cartao); border-radius: var(--raio); box-shadow: var(--sombra); padding: 20px 16px; }
.bloco__cabeca { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.bloco__titulo { margin: 0; font-size: 22px; line-height: 1.15; font-weight: 900; color: var(--azul-escuro); text-transform: uppercase; letter-spacing: -.01em; }
.bloco__texto { margin: 6px 0 0; font-size: 14px; color: var(--texto-suave); }
.etiqueta {
  display: inline-block; margin-bottom: 6px; padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--azul-texto); background: #e4eefb;
}

/* Lista de vagas */
.vagas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.vaga { border: 1px solid var(--borda); border-radius: 14px; background: #fff; }
.vaga--esqueleto { height: 86px; background: linear-gradient(90deg, #f1f5fb 25%, #e6edf7 50%, #f1f5fb 75%); background-size: 200% 100%; animation: brilho 1.2s infinite linear; }
@keyframes brilho { to { background-position: -200% 0; } }
.vaga__linha {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  background: none; border: 0; border-radius: 14px; text-align: left; cursor: pointer;
  min-height: 86px;
}
button.vaga__linha:hover { background: #f6f9fe; }
button.vaga__linha:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.vaga--fixa { background: #f7f9fd; }
.vaga--destaque { border: 2px solid var(--amarelo); background: #fffbe6; }
.vaga--livre { border: 2px solid var(--azul); box-shadow: 0 0 0 4px #dbe8f8; }
.vaga--livre.vaga--ok { border-color: var(--verde-whats); box-shadow: none; }
.vaga--fixa:not(.vaga--destaque) .vaga__selo { color: var(--azul-texto); background: #e4eefb; }
.foto {
  width: 48px; height: 67px; flex: none; border-radius: 10px; object-fit: cover; object-position: top;
  background: #e4ebf5; display: grid; place-items: center; color: #9aaac2;
}
.foto svg { width: 26px; height: 26px; }
.vaga__info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vaga__cargo { font-size: 13px; font-weight: 900; color: var(--azul-escuro); text-transform: uppercase; letter-spacing: .02em; }
.vaga__nome { font-size: 15px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.vaga__num { font-size: 15px; font-weight: 900; color: var(--azul-texto); }
.vaga__num small { font-size: 12px; font-weight: 700; color: var(--texto-suave); margin-left: 4px; }
.vaga__vazio { font-size: 14px; color: var(--texto-suave); }
.vaga__acao {
  flex: none; display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; font-weight: 800; color: #fff; background: var(--azul);
  padding: 8px 12px; border-radius: 10px;
}
.vaga--ok .vaga__acao { color: var(--azul-texto); background: #e4eefb; }
.vaga__selo {
  flex: none; display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 800; color: #6b5200; background: var(--amarelo);
  padding: 6px 10px; border-radius: 999px;
}
.vaga__selo svg { width: 14px; height: 14px; }
.tag {
  align-self: flex-start; margin-top: 3px; font-size: 11px; font-weight: 800; text-transform: uppercase;
  color: #8a4b00; background: #fff1d6; padding: 1px 8px; border-radius: 999px;
}

/* Botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 18px; border-radius: 14px; border: 0;
  font-size: 15px; font-weight: 800; cursor: pointer; text-decoration: none;
  transition: transform .08s ease, filter .15s ease;
}
.btn:active { transform: scale(.98); }
.btn:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.btn--principal { background: var(--amarelo); color: #1d2a00; box-shadow: 0 2px 0 #d9b400; }
.btn--whats { background: var(--verde-whats); color: #fff; box-shadow: 0 2px 0 #16803f; }
.btn--secundario { background: #e4eefb; color: var(--azul-texto); }
.btn--texto { margin-top: 12px; min-height: 40px; padding: 8px 6px; background: none; color: var(--texto-suave); font-weight: 700; font-size: 14px; }
.btn[disabled] { opacity: .6; cursor: progress; }
.btn-icone {
  width: 44px; height: 44px; display: grid; place-items: center; flex: none;
  border: 0; border-radius: 12px; background: #eef3fa; cursor: pointer;
}

/* Prévia */
.previa__quadro {
  margin: 0 auto; max-width: 400px; aspect-ratio: 1080 / 2080;
  border-radius: 16px; overflow: hidden; background: var(--azul);
  box-shadow: 0 10px 30px rgba(10, 50, 110, .25);
}
.previa__quadro img { display: block; width: 100%; height: 100%; }
.previa__quadro.carregando { background: linear-gradient(90deg, #0b63b6 25%, #1574cc 50%, #0b63b6 75%); background-size: 200% 100%; animation: brilho 1.2s infinite linear; }
.previa__quadro.carregando img { visibility: hidden; }
.previa__dica { text-align: center; font-size: 13px; color: var(--texto-suave); margin: 10px 0 0; }

/* Ações: barra fixa no celular */
.acoes {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .96); border-top: 1px solid var(--borda);
  box-shadow: 0 -6px 20px rgba(10, 40, 90, .1); backdrop-filter: blur(6px);
}
.acoes .btn { padding: 12px 10px; font-size: 14px; }
#imprimir { display: none; }

.aviso {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; padding: 12px 14px;
  border-radius: 14px; background: #fff7d6; color: #5a4600; font-size: 14px;
}
.aviso p { margin: 0; }
.aviso svg { margin-top: 1px; color: #b08900; }

.rodape { max-width: 1120px; margin: 0 auto; padding: 8px 16px 24px; font-size: 12px; color: var(--texto-suave); }
.rodape p { margin: 0 0 8px; }
.rodape__legal { font-weight: 700; color: var(--texto); }

/* Seletor de candidato */
.seletor {
  position: fixed; inset: 0; z-index: 50;
  padding: 0; border: 0; margin: auto auto 0; width: 100%; max-width: 640px;
  max-height: 92vh; height: 92vh; border-radius: 22px 22px 0 0;
  display: none; flex-direction: column; background: #fff; color: var(--texto);
  box-shadow: 0 -10px 40px rgba(0, 0, 0, .25);
}
.seletor[open] { display: flex; animation: subir .2s ease-out; }
.seletor::backdrop { background: rgba(6, 22, 50, .55); }
@keyframes subir { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
.seletor__cabeca { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 16px 10px; }
.seletor__sub { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--azul-texto); }
.seletor__titulo { margin: 2px 0 0; font-size: 22px; font-weight: 900; color: var(--azul-escuro); text-transform: uppercase; line-height: 1.1; }
.busca {
  display: flex; align-items: center; gap: 8px; margin: 0 16px; padding: 0 12px;
  border: 2px solid var(--borda); border-radius: 14px; background: #f7f9fd;
}
.busca:focus-within { border-color: var(--azul); background: #fff; }
.busca svg { color: var(--texto-suave); }
.busca input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 16px; padding: 12px 0; color: var(--texto); }
.seletor__status { margin: 8px 16px 4px; font-size: 12px; color: var(--texto-suave); min-height: 1em; }
.resultados { list-style: none; margin: 0; padding: 4px 12px 12px; overflow-y: auto; flex: 1; overscroll-behavior: contain; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-content: start; }
.cand {
  width: 100%; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 12px;
  align-items: center; padding: 8px 10px; text-align: left; cursor: pointer;
  background: #fff; border: 1px solid var(--borda); border-radius: 14px;
}
.cand:hover { border-color: #9cbbe6; background: #f6f9fe; }
.cand:focus-visible { outline: 3px solid var(--azul); outline-offset: 1px; }
.cand .foto { grid-row: 1 / 3; }
.cand__nome { font-size: 14px; font-weight: 800; line-height: 1.2; text-transform: uppercase; }
.cand__meta { grid-column: 2; font-size: 12px; color: var(--texto-suave); font-weight: 700; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cand__num { grid-row: 1 / 3; grid-column: 3; font-size: 22px; font-weight: 900; color: var(--azul-texto); }
.cand--escolhido { border: 2px solid var(--verde-whats); background: #effaf3; }
.cand[disabled] { opacity: .45; cursor: not-allowed; }
.cand .tag { margin: 0; }
.mais { height: 1px; }
.seletor__pe { padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--borda); }
.seletor__pe .btn { width: 100%; }

.aviso-flutuante {
  position: fixed; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom)); z-index: 40;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 12px;
  background: #14233d; color: #fff; font-size: 14px; font-weight: 700; text-align: center;
  transition: opacity .2s ease, transform .2s ease;
}
.aviso-flutuante.visivel { opacity: 1; transform: translate(-50%, 0); }
.sem-js { position: fixed; inset: auto 0 0; margin: 0; padding: 16px; background: #fff3c4; text-align: center; font-weight: 700; }

/* Telas grandes: duas colunas, prévia fixa ao lado */
@media (min-width: 900px) {
  body { padding-bottom: 0; }
  .topo { padding: 28px 24px 36px; }
  .topo__conteudo { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "marca destaque" "titulo destaque" "texto destaque"; column-gap: 32px; align-items: end; }
  .topo__marca { grid-area: marca; }
  .topo__titulo { grid-area: titulo; }
  .topo__texto { grid-area: texto; }
  .destaque { grid-area: destaque; margin: 0; }
  .principal { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: start; padding: 24px; gap: 24px; }
  .bloco { padding: 24px; }
  .previa { position: sticky; top: 16px; }
  .previa__quadro { max-width: 340px; }
  .acoes { position: static; grid-template-columns: 1fr 1fr; margin-top: 16px; padding: 0; background: none; border: 0; box-shadow: none; backdrop-filter: none; }
  #imprimir { display: inline-flex; grid-column: 1 / -1; }
  .previa__dica { display: none; }
  .seletor { margin: auto; height: min(760px, 88vh); border-radius: 22px; }
  .aviso-flutuante { bottom: 24px; }
}

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

/* Impressão: só a colinha, ocupando a página */
@media print {
  @page { margin: 8mm; }
  body { background: #fff; padding: 0; }
  .topo, .escolhas, .bloco__cabeca, .previa__dica, .acoes, .aviso, .rodape, .seletor, .aviso-flutuante { display: none !important; }
  .principal, .bloco { display: block; padding: 0; margin: 0; box-shadow: none; background: none; }
  .previa__quadro { max-width: none; width: auto; height: calc(100vh - 16mm); aspect-ratio: 1080 / 2080; box-shadow: none; border-radius: 0; }
  .previa__quadro img { width: auto; height: 100%; margin: 0 auto; }
}