/* ════════════════════════════════════════════════════════════════════════
   Candidatura — cards de vaga e ficha.
   Só token: paleta, raio e tipografia vêm de perfil.css e painel.css.
   ════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────── Cards de vaga ─────────────────────────────── */

/* Três vagas, três colunas, e a queda é direto para uma só.
   Passar por duas colunas deixaria a terceira sozinha embaixo, com o dobro
   da largura das outras — pior que empilhar. O ponto de virada é 64rem
   porque abaixo disso três cards de 18rem já não cabem sem espremer a
   linha de texto. */
.vagas-grade {
  display: grid; gap: var(--space-6);
  grid-template-columns: 1fr;
}

@media (min-width: 64rem) {
  .vagas-grade { grid-template-columns: repeat(3, 1fr); }
}

/* ── A cor de cada vaga ──────────────────────────────────────────────────
   Uma variável por card, lida do atributo data-vaga. Tudo que é colorido
   aqui embaixo aponta para ela, então trocar a cor de uma vaga é trocar
   uma linha. A cor é a do braço a que a vaga pertence, a mesma régua que
   o painel usa: loja online em ocre, administrativo em sálvia, estúdio em
   terracota.

   Fallback em terracota para vaga nova que ainda não tenha cor: sem ele o
   card nasceria sem a barra do topo, e a falta pareceria bug de layout. */
.card-vaga { --acento-vaga: var(--terracota); }
.card-vaga[data-vaga="expedicao-estoque"]            { --acento-vaga: var(--ocre); }
.card-vaga[data-vaga="analista-administrativo-pleno"] { --acento-vaga: var(--verde-salvia); }
.card-vaga[data-vaga="designer-senior"]              { --acento-vaga: var(--terracota); }

.card-vaga {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: var(--gutter-table-row);
  border: 1px solid color-mix(in srgb, var(--acento-vaga) 26%, var(--cream-200));
  border-radius: var(--raio); padding: var(--space-8);
  box-shadow: var(--sombra-papel);
  /* Tinta de 6% sobre a superfície do cartão: o suficiente para as três se
     distinguirem de relance, longe de virar cartaz colorido. */
  background:
    linear-gradient(color-mix(in srgb, var(--acento-vaga) 6%, transparent),
                    color-mix(in srgb, var(--acento-vaga) 6%, transparent)),
    var(--cream-50);
  transition: border-color var(--motion-fast) var(--ease-in-out),
              transform var(--motion-base) var(--ease-out),
              box-shadow var(--motion-base) var(--ease-out);
}

.card-vaga::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 4px;
  background: var(--acento-vaga);
}

/* O código da vaga no alto herda a cor; é o segundo sinal, para quem não
   distingue a barra de 4px. Cor nunca é o único sinal: o nome da vaga,
   escrito por extenso, continua sendo o que identifica o card. */
.card-vaga .codigo-tinta { color: var(--acento-vaga); }

@media (hover: hover) {
  .card-vaga:hover {
    border-color: var(--acento-vaga); transform: translateY(-3px);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--ink-900) 10%, transparent),
                0 16px 36px color-mix(in srgb, var(--ink-900) 22%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-vaga { transition: border-color var(--motion-fast) var(--ease-in-out); }
  .card-vaga:hover { transform: none; }
}

/* Grotesca em caixa alta, a mesma de "VAGAS ABERTAS" logo acima: IBM Plex
   Sans em 700. O nome da vaga e o rótulo da seção passam a falar a mesma
   língua, e a serifada fica para o display da capa, que é onde ela pesa.

   Dois ajustes que a troca exigiu, e que não são cópia do rótulo:
   o corpo cai de 28px para no máximo 22px, porque caixa alta ocupa mais
   largura e "ANALISTA ADMINISTRATIVO-FINANCEIRO PLENO" precisa caber em
   coluna de terço de tela; e o espacejamento fica em 0.06em, abaixo dos
   0.12em do rótulo, porque tracking calibrado para 16px abre demais em 22. */
.card-vaga h3 {
  font-family: var(--sans); font-size: clamp(1.125rem, 1.6vw, 1.375rem); font-weight: 700;
  line-height: 1.24; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-900);
  margin: var(--space-1) 0 0; text-wrap: balance;
}

.card-vaga .resumo {
  margin: 0 0 var(--space-2); font-size: .9375rem; color: var(--ink-700); line-height: 1.62;
}

.ficha-vaga {
  margin: auto 0 0; padding-top: var(--space-4); border-top: 1px solid var(--cream-200);
  display: grid; gap: var(--space-2);
}
.ficha-vaga > div { display: flex; gap: var(--gutter-inline); align-items: baseline; }

.ficha-vaga dt {
  font-family: var(--mono); font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-500); font-weight: 600; flex: 0 0 4.5rem;
}

.ficha-vaga dd {
  margin: 0; font-family: var(--mono); font-size: var(--text-xs);
  color: var(--ink-900); font-weight: 600; font-variant-numeric: tabular-nums;
}

.card-vaga button { margin-top: var(--space-3); width: 100%; }

/* ─────────────────── Janela de ciência da vaga ───────────────────────── */

.janela-vaga {
  width: min(58rem, calc(100% - 2rem)); max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  padding: 0; border: 1px solid var(--ink-900); border-radius: var(--raio);
  background: var(--cream-100); color: var(--ink-900); overflow: auto;
  box-shadow: var(--sombra-flutuante);
}

.janela-vaga::backdrop {
  background: color-mix(in srgb, var(--ink-900) 76%, transparent);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}

.janela-vaga-conteudo { padding: clamp(1.5rem, 4vw, 3.5rem); }
.janela-vaga-conteudo header {
  position: relative; padding: 0 0 var(--space-8); border-bottom: 3px solid var(--ink-900);
}
.janela-vaga-conteudo header::after {
  content: ''; position: absolute; left: 0; bottom: -8px; width: 5rem; height: 3px;
  background: var(--terracota);
}
/* O nome da vaga é o mesmo objeto nos três lugares onde aparece — card,
   janela de ciência e cabeça da ficha —, então usa a mesma letra nos três.
   Ver a vaga virar serifada ao abrir a janela dava a impressão de ter
   chegado a outra página. */
.janela-vaga-conteudo h2,
.ficha-cabeca h2 {
  font-family: var(--sans); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  line-height: 1.16; text-wrap: balance;
}

.janela-vaga-conteudo h2 {
  max-width: 42rem; margin: var(--space-2) 0 var(--space-3);
  border: 0; padding: 0; font-size: clamp(1.5rem, 3.4vw, 2.25rem);
}
.janela-vaga-conteudo h2:focus { outline: none; }
.janela-vaga-conteudo .resumo { max-width: 44rem; margin-bottom: 0; font-size: 1.05rem; }

.janela-vaga-grade {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-8); margin-top: var(--space-6);
}
.janela-vaga-secao {
  margin: 0; padding: var(--space-6) 0;
  border-bottom: 1px solid var(--cream-200);
}
.janela-vaga-secao.larga { grid-column: 1 / -1; }
.janela-vaga-conteudo h3 {
  margin: 0 0 var(--space-3); font-family: var(--sans); font-size: var(--text-xs);
  font-weight: 700; line-height: 1.2; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-900);
}
.janela-vaga-secao .lista-limpa { margin-top: 0; }
.janela-vaga-secao .lista-limpa li { font-size: .9375rem; }

.aceite-vaga {
  display: grid; grid-template-columns: auto 1fr; gap: var(--gutter-inline);
  align-items: start; margin-top: var(--space-8);
  padding: var(--space-5) var(--gutter-card-inner); border: 2px solid var(--ink-900);
  border-left-width: 6px; background: var(--cream-50);
  font-size: .9375rem; font-weight: 700; line-height: 1.5; cursor: pointer;
}
.aceite-vaga input {
  width: var(--space-5); height: var(--space-5); margin-top: 2px;
  accent-color: var(--ink-900);
}

.acoes-janela-vaga {
  display: flex; justify-content: space-between; gap: var(--gutter-table-col);
  flex-wrap: wrap; margin-top: var(--space-5);
}
.acoes-janela-vaga button:disabled { cursor: not-allowed; opacity: .45; }

/* ──────────────────────────── Ficha ────────────────────────────────────── */

.ficha-cabeca {
  padding-bottom: var(--gutter-card-inner);
  border-bottom: 2px solid var(--ink-900);
  margin-bottom: var(--gutter-section);
}
.ficha-cabeca h2 { margin: var(--space-2) 0; border: 0; padding: 0; }
.ficha-cabeca .resumo { margin: 0; color: var(--ink-700); }

.ficha-secao {
  margin: var(--gutter-section) 0 var(--gutter-table-col);
  padding-top: var(--space-2); border-top: 3px solid var(--ink-900);
}
.ficha-secao h3 {
  font-size: clamp(1.4rem, 3vw, 1.75rem); margin-top: var(--space-3);
}
.ficha-secao:first-of-type { margin-top: 0; }

.campo { margin-bottom: var(--gutter-form-row); }

.campo > label {
  display: block; font-family: var(--sans); font-size: .9375rem;
  font-weight: 700; color: var(--ink-900); margin-bottom: var(--space-1);
}

.campo .obrig { color: var(--vermelho-papoula); font-weight: 700; }

.campo .ajuda {
  margin: 0 0 var(--space-2); font-size: var(--text-xs); color: var(--ink-500);
  line-height: 1.5; max-width: 40rem;
}

.campo input[type="text"], .campo input[type="email"], .campo input[type="tel"],
.campo input[type="url"], .campo select, .campo textarea {
  width: 100%; font-family: var(--sans); font-size: var(--text-base);
  padding: var(--gutter-table-row) var(--gutter-table-col);
  border: 1px solid var(--borda-controle); border-radius: var(--raio);
  background: var(--cream-50); color: var(--ink-900);
  transition: border-color var(--motion-fast) var(--ease-in-out);
}

.campo textarea { resize: vertical; line-height: 1.5; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: 2px solid var(--ink-900); outline-offset: 1px; border-color: var(--ink-900);
}

.grupo-referencia { display: grid; gap: var(--space-2); }

/* Aceite: caixa antes do rótulo, alinhados no topo. */
.campo-check {
  display: grid; grid-template-columns: auto 1fr; gap: var(--gutter-inline);
  align-items: start;
}
.campo-check input { width: var(--space-5); height: var(--space-5); margin-top: 2px; }
.campo-check > label { font-weight: 400; margin: 0; }
.campo-check .ajuda { grid-column: 2; }
.campo-check .erro-campo { grid-column: 2; }

.simnao { display: flex; gap: var(--gutter-table-col); margin-bottom: var(--space-2); }

.simnao label {
  display: flex; align-items: center; gap: var(--gutter-inline);
  padding: var(--gutter-table-row) var(--gutter-table-col);
  border: 1px solid var(--borda-controle); border-radius: var(--raio);
  background: var(--cream-50); font-size: var(--text-sm); cursor: pointer;
  transition: border-color var(--motion-fast) var(--ease-in-out),
              background var(--motion-fast) var(--ease-in-out);
}

/* Mesma régua da escala do questionário: verde no toque, verde cheio no
   escolhido. Sim e não usam o mesmo verde de propósito — a cor diz "esta é
   a sua resposta", e nunca "esta é a resposta que a gente queria". */
@media (hover: hover) {
  .simnao label:hover {
    border-color: var(--verde-resposta);
    background: color-mix(in srgb, var(--verde-resposta) 16%, var(--cream-50));
  }
}
.simnao label:has(input:checked) {
  border-color: var(--verde-resposta); background: var(--verde-resposta);
  color: var(--sobre-verde); font-weight: 600;
}
.simnao input { accent-color: var(--sobre-verde); }

/* Pergunta eliminatória, no topo da ficha. */
.corte {
  border-left: 3px solid var(--ink-900); padding-left: var(--gutter-card-inner);
  margin-bottom: var(--gutter-section);
}
.corte .pergunta {
  font-family: var(--serif); font-size: var(--text-lg); color: var(--ink-900);
  margin: 0 0 var(--gutter-table-row);
}
.corte .recusa {
  margin: var(--gutter-table-row) 0 0; padding: var(--gutter-table-col);
  border-left: 3px solid var(--mostarda); background: var(--cream-50);
  font-size: var(--text-sm); color: var(--ink-700);
}

/* Erro: cor na borda, texto em tinta. Mesma regra do resto da folha. */
.campo.invalido input, .campo.invalido select, .campo.invalido textarea {
  border-color: var(--vermelho-papoula); border-width: 2px;
}
.erro-campo {
  margin: var(--space-1) 0 0; font-size: var(--text-xs); color: var(--ink-900);
  font-weight: 600;
}
.erro-campo::before {
  content: ''; display: inline-block; width: var(--space-2); height: var(--space-2);
  background: var(--vermelho-papoula); margin-right: var(--gutter-inline);
}

/* ─────────────────────────── Fim da jornada ────────────────────────────── */

.tela-fim { text-align: center; padding: var(--gutter-section) 0; }
.tela-fim h2 { border: 0; padding: 0; }
.tela-fim .prosa { max-width: 34rem; margin: 0 auto var(--gutter-card-inner); }
.tela-fim .acoes { display: flex; gap: var(--gutter-table-col); justify-content: center; flex-wrap: wrap; }

@media (max-width: 40rem) {
  .simnao { flex-direction: column; }
  .ficha-vaga dt { flex-basis: 4rem; }
  .corte { padding-left: var(--gutter-table-col); }
  .card-vaga { padding: var(--gutter-card-inner); }
  .janela-vaga { width: calc(100% - 1rem); max-height: calc(100dvh - 1rem); }
  .janela-vaga-conteudo { padding: var(--gutter-card-inner); }
  .janela-vaga-grade { grid-template-columns: 1fr; gap: 0; }
  .janela-vaga-secao.larga { grid-column: auto; }
  .acoes-janela-vaga { flex-direction: column-reverse; }
  .acoes-janela-vaga button { width: 100%; }
}

/* ───────────────── Pretensão em três números ───────────────────────────
   Mínimo, justo e ideal lado a lado. Pedir um número só empurra todo mundo
   para o meio; pedir três devolve a margem que o candidato perderia por
   responder antes de ouvir a faixa. */

.grupo-pretensao {
  display: grid; gap: var(--gutter-table-col);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.grupo-pretensao > div { display: flex; flex-direction: column; gap: var(--space-1); }

.grupo-pretensao label {
  font-family: var(--mono); font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-900); font-weight: 700;
}

.grupo-pretensao .ajuda { margin: 0 0 var(--space-1); min-height: 2.4em; }
.grupo-pretensao input { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ───────────────────── Barra de modo admin ─────────────────────────────
   Deliberadamente diferente do resto: quem está aqui precisa saber que
   está numa pré-visualização, não numa candidatura de verdade. */

.barra-admin {
  display: flex; align-items: center; gap: var(--gutter-table-col); flex-wrap: wrap;
  padding: var(--gutter-table-col);
  border: 1px dashed var(--mostarda); border-radius: var(--raio);
  background: var(--cream-50); margin-bottom: var(--gutter-section);
}

.barra-admin .txt { font-size: var(--text-sm); color: var(--ink-700); flex: 1 1 16rem; }

.barra-admin label {
  display: flex; align-items: center; gap: var(--gutter-inline);
  font-family: var(--mono); font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-500);
}

.barra-admin select {
  font-family: var(--sans); font-size: var(--text-sm); text-transform: none;
  letter-spacing: normal; padding: var(--space-1) var(--gutter-inline);
  border: 1px solid var(--borda-controle); border-radius: var(--raio);
  background: var(--cream-100); color: var(--ink-900);
}

/* Atalho para o painel de quem conduz. Fica aqui porque é daqui que a
   pessoa sai: conferiu o teste por dentro, agora vai olhar as inscrições. */
.barra-admin .ir-painel {
  font-family: var(--mono); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-900); text-decoration: none;
  border: 2px solid var(--ink-900); padding: var(--space-1) var(--space-3);
}
.barra-admin .ir-painel:hover { background: var(--ink-900); color: var(--cream-50); }

/* Aviso de inscrição fechada, no alto da lista de vagas. Fica visível sem
   gritar: quem chega precisa entender em uma linha que a página está no ar
   mas ainda não recebe, e continuar lendo as vagas se quiser. */
.aviso-inscricao {
  margin: 0 0 var(--space-6);
  padding: var(--gutter-table-row) var(--gutter-card-inner);
  border: 1px solid var(--mostarda);
  border-left: 4px solid var(--mostarda);
  border-radius: var(--raio);
  background: color-mix(in srgb, var(--mostarda) 10%, var(--cream-50));
  color: var(--ink-900); font-size: var(--text-sm); line-height: 1.55;
}