/* O quiz pós-envio (spec 2026-10-05, C), no desenho dos prints do usuário (05/10/2026).
   Compartilhado: a página pública e a ficha de teste do painel. Tokens dos dois lados
   (`--marca`, `--linha`, `--tinta`, `--suave-texto`, `--fundo`, `--perigo`, `--papel`);
   `--dourado`/`--ok`/`--marca-clara` só existem no painel, por isso as reservas.
   ⚠️ Cor só por variável. Texto NUNCA em dourado (2,72:1 sobre branco): o dourado só pinta
   bolinha. As cores de nível também servem à ficha (`candidaturas.css`). */
:root {
  --perfil-azul: var(--marca);
  --perfil-cinza-claro: var(--fundo);
  --perfil-nivel-basico: var(--dourado, #d09030);
  --perfil-nivel-intermediario: var(--marca-clara, #2f6fde);
  --perfil-nivel-avancado: #66b56a;
  --perfil-nivel-fluente: var(--ok, #2e7d32);
  --perfil-vazio: var(--suave, #6b7280);
  /* Borda de controle não-texto: ≥ 3:1 sobre branco (WCAG 1.4.11). `--linha` dá ~1,2:1. */
  --perfil-borda-controle: var(--suave, #6b7280);
  /* Salvar/Cancelar na cor da vaga, como o "Tudo pronto" (`.botao-principal`). */
  --perfil-acao: var(--destaque, var(--marca));
}

.perfil-cartao { border-top: 1px solid var(--linha); margin-top: 22px; padding-top: 18px; text-align: left; }
.perfil-titulo { color: var(--marca); font-size: 19px; line-height: 1.3; margin: 0 0 8px; }
.perfil-titulo:focus, .perfil-bloco-titulo:focus { outline: 0; }
.perfil-texto { color: var(--tinta); margin: 0 0 10px; }
.perfil-consentimento { color: var(--suave-texto); font-size: 13px; margin: 0 0 16px; }
.perfil-fim { color: var(--marca); font-weight: 600; text-align: center; }
.perfil-botoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.perfil-botoes .botao { min-height: 48px; }
.perfil-erro-geral { color: var(--perigo); margin: 12px 0 0; }
.perfil-erro-geral:empty { display: none; }
.perfil-retentar { margin-left: 10px; }
/* Texto só para leitor de tela (o nível por extenso ao lado das bolinhas). */
.perfil-sr { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; }

/* ── bloco: título, "Possui …? *" e os rádios Sim/Não ───────────────────────────────────── */
.perfil-bloco { margin-top: 26px; }
.perfil-bloco h3 { color: var(--tinta); font-size: 22px; font-weight: 500; margin: 0 0 12px; }
.perfil-pergunta { border: 0; margin: 0; min-width: 0; padding: 0; }
.perfil-pergunta-texto { color: var(--tinta); display: flex; gap: 4px; padding: 0; }
.perfil-radios { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 8px; }
.perfil-radio { align-items: center; color: var(--tinta); cursor: pointer; display: inline-flex; gap: 8px; min-height: 40px; }
.perfil-radio input { accent-color: var(--perfil-azul); cursor: pointer; height: 20px; margin: 0; width: 20px; }
.perfil-quando-sim[hidden], .perfil-adicionar[hidden], .perfil-modal .campo[hidden] { display: none; }
.perfil-lista { display: grid; gap: 12px; margin: 16px 0 12px; }

/* ── a barra "Adicionar …" com o ⊕ à direita ─────────────────────────────────────────── */
.perfil-adicionar { align-items: center; background: var(--perfil-cinza-claro); border: 1.5px solid var(--linha); border-radius: 14px; color: var(--perfil-azul); cursor: pointer; display: flex; font: inherit; font-size: 17px; font-weight: 700; justify-content: space-between; min-height: 64px; padding: 14px 20px; text-align: left; width: 100%; }
.perfil-adicionar:hover { border-color: var(--perfil-azul); }
.perfil-adicionar:focus-visible { outline: 3px solid var(--marca); outline-offset: 2px; }
.perfil-adicionar-icone { display: inline-flex; flex: none; }

/* ── cards ──────────────────────────────────────────────────────────────────────────── */
.perfil-card { background: var(--papel, #fff); border: 1px solid var(--linha); border-radius: 16px; overflow-wrap: anywhere; padding: 20px 22px; }
.perfil-card-topo { align-items: flex-start; display: flex; gap: 10px; justify-content: space-between; }
.perfil-card-titulos { min-width: 0; }
.perfil-card-cargo { color: var(--tinta); display: block; font-size: 18px; font-weight: 700; letter-spacing: .01em; text-transform: uppercase; }
.perfil-card-idioma-nome { color: var(--tinta); display: block; font-size: 18px; font-weight: 700; }
.perfil-card-empresa { color: var(--tinta); margin-top: 4px; }
.perfil-card-info { display: flex; flex-direction: column; gap: 2px; margin-top: 16px; }
.perfil-card-rotulo { color: var(--suave-texto); font-size: 14px; }
.perfil-card-valor { color: var(--tinta); font-size: 16px; }
.perfil-card-atividades .perfil-card-valor { white-space: pre-line; }
.perfil-card-acoes { display: flex; flex: none; gap: 2px; }
.perfil-icone { align-items: center; background: none; border: 1px solid transparent; border-radius: 8px; color: var(--perfil-azul); cursor: pointer; display: inline-flex; height: 40px; justify-content: center; padding: 0; width: 40px; }
.perfil-icone:hover { background: var(--fundo); border-color: var(--linha); }
.perfil-excluir:hover { color: var(--perigo); }
.perfil-icone:focus-visible { outline: 3px solid var(--marca); outline-offset: 1px; }

/* Card de idioma: 4 colunas (2×2 no celular), cada uma com o rótulo e as bolinhas. */
.perfil-nivel-colunas { display: grid; gap: 14px 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 18px; }
.perfil-nivel-coluna { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.perfil-nivel-rotulo { color: var(--tinta); font-size: 15px; }
.perfil-bolinhas { display: inline-flex; flex: none; gap: 3px; }
/* Vazia = ANEL (fundo branco, borda); cheia = disco sólido. Forma diferente, não só cor:
   o dourado do Básico contra o cinza dá ~1,9:1. */
.perfil-bolinha { background: var(--papel, #fff); border: 2px solid var(--perfil-vazio); border-radius: 50%; box-sizing: border-box; display: inline-block; height: 16px; width: 16px; }
.perfil-cor-basico .perfil-bolinha.cheia { background: var(--perfil-nivel-basico); border-color: var(--perfil-nivel-basico); }
.perfil-cor-intermediario .perfil-bolinha.cheia { background: var(--perfil-nivel-intermediario); border-color: var(--perfil-nivel-intermediario); }
.perfil-cor-avancado .perfil-bolinha.cheia { background: var(--perfil-nivel-avancado); border-color: var(--perfil-nivel-avancado); }
.perfil-cor-fluente .perfil-bolinha.cheia { background: var(--perfil-nivel-fluente); border-color: var(--perfil-nivel-fluente); }

/* ── "Emprego Atual": rótulo em cima, interruptor embaixo ───────────────────────────── */
.perfil-interruptor { align-items: flex-start; cursor: pointer; display: flex; flex-direction: column; gap: 10px; margin: 0 0 18px; }
.perfil-interruptor-rotulo { color: var(--tinta); font-weight: 700; }
.perfil-interruptor input { appearance: none; -webkit-appearance: none; background: var(--papel, #fff); border: 1.5px solid var(--perfil-borda-controle); border-radius: 999px; cursor: pointer; flex: none; height: 26px; margin: 0; position: relative; width: 48px; }
.perfil-interruptor input::before { background: var(--perfil-vazio); border-radius: 50%; content: ""; height: 18px; left: 3px; position: absolute; top: 2.5px; transition: left .15s; width: 18px; }
.perfil-interruptor input:checked { background: var(--perfil-azul); border-color: var(--perfil-azul); }
.perfil-interruptor input:checked::before { background: var(--papel, #fff); left: 24px; }
.perfil-interruptor input:focus-visible { outline: 3px solid var(--marca); outline-offset: 2px; }

/* ── o modal ────────────────────────────────────────────────────────────────────────── */
.perfil-modal { border: 0; border-radius: 16px; margin: auto; max-height: calc(100vh - 32px); padding: 0; width: min(600px, calc(100vw - 32px)); }
.perfil-modal::backdrop { background: color-mix(in srgb, var(--tinta) 45%, transparent); }
.perfil-modal-caixa { padding: 22px 22px 20px; }
.perfil-modal-topo { align-items: flex-start; display: flex; gap: 12px; justify-content: space-between; margin: 0 0 22px; }
.perfil-modal-titulo { color: var(--tinta); font-size: 22px; font-weight: 500; margin: 0; }
.perfil-modal-titulo:focus { outline: 0; }
.perfil-modal-fechar { align-items: center; background: none; border: 0; border-radius: 8px; color: var(--suave-texto); cursor: pointer; display: inline-flex; flex: none; height: 40px; justify-content: center; margin: -8px -8px 0 0; padding: 0; width: 40px; }
.perfil-modal-fechar:hover { background: var(--fundo); color: var(--tinta); }
.perfil-modal-fechar:focus-visible { outline: 3px solid var(--marca); outline-offset: 1px; }
.perfil-modal .campo { margin-bottom: 18px; padding: 0; }  /* alinhado ao título e ao "Emprego Atual" (o print) */
.perfil-modal .campo-rotulo { font-weight: 700; }
/* Cantos de pílula (o print). As datas seguem nos três seletores (decisão do usuário). */
.perfil-modal .campo-controle input[type="text"],
.perfil-modal .campo-controle select { border-radius: 999px; padding-left: 18px; padding-right: 18px; }
.perfil-modal .data-partes select { padding-left: 12px; padding-right: 8px; }
.perfil-modal .campo-controle textarea { border-radius: 18px; padding: 12px 18px; }
.perfil-modal-rodape { justify-content: flex-end; margin-top: 26px; }
.perfil-modal-rodape .botao { border-radius: 999px; flex: none; min-width: 112px; }
.perfil-cancelar { background: var(--papel, #fff); border-color: var(--perfil-acao); color: var(--perfil-acao); }
.perfil-salvar { background: var(--perfil-acao); border-color: var(--perfil-acao); color: var(--tinta-sobre-destaque, #fff); }
.perfil-salvar:hover { background: var(--perfil-acao); }
.perfil-confirma .perfil-botoes .botao { border-radius: 999px; }
.perfil-perigo { border-color: var(--perigo); color: var(--perigo); }

/* ── nível no modal de idioma: ícone + "Leitura Intermediário", barra de 4, Básico…Fluente ── */
.perfil-nivel-cabeca { align-items: center; color: var(--tinta); display: flex; font-size: 17px; font-weight: 700; gap: 8px; margin-bottom: 10px; }
.perfil-nivel-icone { display: inline-flex; flex: none; }
.perfil-niveis { display: grid; gap: 3px; grid-template-columns: repeat(4, 1fr); }
.perfil-nivel { background: var(--papel, #fff); border: 1px solid var(--perfil-borda-controle); border-radius: 0; cursor: pointer; height: 34px; margin: 0; padding: 0; }
.perfil-nivel:first-child { border-radius: 999px 0 0 999px; }
.perfil-nivel:last-child { border-radius: 0 999px 999px 0; }
.perfil-nivel.cheia { background: var(--perfil-azul); border-color: var(--perfil-azul); }
.perfil-nivel:hover { border-color: var(--perfil-azul); }
.perfil-nivel:focus-visible { outline: 3px solid var(--marca); outline-offset: 2px; position: relative; z-index: 1; }
.perfil-niveis-legenda { color: var(--suave-texto); display: flex; font-size: 15px; justify-content: space-between; margin-top: 6px; }

@media (max-width: 480px) {
  .perfil-nivel-colunas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .perfil-card { padding: 16px; }
  .perfil-modal { border-radius: 0; height: 100vh; height: 100dvh; max-height: none; max-width: none; width: 100vw; }
}