/* ==========================================================================
   CONVOQUE — telas internas
   Depende de tokens.css, base.css e home.css (navbar, cartão, rodapé).
   ========================================================================== */

/* ── avisos flutuantes ──────────────────────────────────────────────────── */
.avisos {
  position: fixed; z-index: 200;
  top: var(--e-4); left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: var(--e-2);
  width: min(92vw, 30rem); pointer-events: none;
}
.aviso {
  padding: var(--e-3) var(--e-4); border-radius: var(--r-md);
  font-size: var(--t-sm); font-weight: var(--peso-medio);
  box-shadow: var(--sombra-3); background: var(--superficie-alta);
  border: 1px solid var(--borda); color: var(--texto);
  transition: opacity .25s, transform .25s;
}
.aviso-ok    { background: var(--ok-suave);    color: var(--ok-texto);    border-color: var(--ok); }
.aviso-erro  { background: var(--erro-suave);  color: var(--erro-texto);  border-color: var(--erro); }
.aviso-aviso { background: var(--aviso-suave); color: var(--aviso-texto); border-color: var(--aviso); }

/* ── formulários ────────────────────────────────────────────────────────── */
.form-caixa {
  width: min(100%, 27rem); margin-inline: auto;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--r-xl); padding: var(--e-8);
  box-shadow: var(--sombra-2);
}
.form-caixa h1 { font-size: var(--t-xl); margin-bottom: var(--e-2); }
.form-caixa .sub { color: var(--texto-suave); font-size: var(--t-sm); margin-bottom: var(--e-6); }

.campo-form { display: flex; flex-direction: column; gap: var(--e-2); margin-bottom: var(--e-4); }
.campo-form label { font-size: var(--t-sm); font-weight: var(--peso-semi); }
.campo-form .dica { font-size: var(--t-xs); color: var(--texto-suave); font-weight: var(--peso-normal); }
.campo-form input, .campo-form select, .campo-form textarea {
  min-height: var(--alvo-toque); padding: var(--e-3) var(--e-4);
  border: 1.5px solid var(--borda-controle); border-radius: var(--r-md);
  background: var(--superficie); color: var(--texto); font-size: var(--t-md);
  width: 100%; transition: border-color var(--transicao), box-shadow var(--transicao);
}
.campo-form textarea { min-height: 7rem; resize: vertical; line-height: var(--lh-corpo); }
.campo-form input:focus, .campo-form select:focus, .campo-form textarea:focus {
  outline: none; border-color: var(--foco); box-shadow: var(--anel);
}
.campo-form input[aria-invalid='true'] { border-color: var(--erro); }
.campo-erro { font-size: var(--t-xs); color: var(--erro-texto); }

/* Campo de arquivo: o <input type=file> do navegador é feio e não dá para
   estilizar. A saída é escondê-lo e transformar o <label> no botão. */
.arquivo {
  position: relative; display: flex; flex-direction: column; gap: var(--e-2);
  padding: var(--e-5); border: 2px dashed var(--borda-forte);
  border-radius: var(--r-lg); text-align: center; cursor: pointer;
  transition: border-color var(--transicao), background var(--transicao);
}
.arquivo:hover, .arquivo.sobre { border-color: var(--primaria); background: var(--primaria-suave); }
.arquivo input[type='file'] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.arquivo-icone { color: var(--primaria); margin-inline: auto; }
.arquivo-titulo { font-weight: var(--peso-semi); font-size: var(--t-sm); }
.arquivo-dica { font-size: var(--t-xs); color: var(--texto-suave); }
.arquivo.tem { border-style: solid; border-color: var(--ok); background: var(--ok-suave); }
.arquivo.tem .arquivo-icone { color: var(--ok); }

.previa-foto {
  width: 84px; height: 84px; border-radius: var(--r-full);
  object-fit: cover; margin-inline: auto; border: 3px solid var(--superficie);
  box-shadow: var(--sombra-2);
}

.form-caixa .btn { width: 100%; margin-top: var(--e-2); }
.form-rodape { margin-top: var(--e-5); text-align: center; font-size: var(--t-sm); color: var(--texto-suave); }

/* ── ficha do candidato ─────────────────────────────────────────────────── */
.ficha { display: grid; gap: var(--e-6); align-items: start; }
@media (min-width: 900px) { .ficha { grid-template-columns: 1fr 22rem; gap: var(--e-8); } }

.ficha-topo {
  display: flex; gap: var(--e-5); align-items: center; flex-wrap: wrap;
  padding: var(--e-6); border-radius: var(--r-xl); color: var(--ard-0);
  background: linear-gradient(135deg, var(--roxo-700), var(--roxo-500));
  box-shadow: var(--sombra-marca);
}
.ficha-foto {
  width: 96px; height: 96px; border-radius: var(--r-full); object-fit: cover;
  border: 3px solid color-mix(in srgb, var(--ard-0) 72%, transparent); flex: 0 0 auto;
}
.ficha-foto-vazia {
  width: 96px; height: 96px; border-radius: var(--r-full); flex: 0 0 auto;
  display: grid; place-items: center; font-size: var(--t-xl); font-weight: var(--peso-forte);
  background: color-mix(in srgb, var(--ard-0) 18%, transparent);
  border: 3px solid color-mix(in srgb, var(--ard-0) 40%, transparent);
}
.ficha-nome { font-size: var(--t-2xl); font-weight: var(--peso-extra); line-height: 1.1; }
.ficha-local { color: var(--roxo-100); font-size: var(--t-md); margin-top: var(--e-1); }
.ficha-obs { color: var(--roxo-200); font-size: var(--t-xs); margin-top: var(--e-2); }

.bloco-ficha {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--r-lg); padding: var(--e-6); margin-top: var(--e-5);
}
.bloco-ficha h2 {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--ls-caixa);
  color: var(--texto-suave); margin-bottom: var(--e-3);
}
.bloco-ficha p { white-space: pre-line; line-height: var(--lh-largo); }

/* ── o paywall ──────────────────────────────────────────────────────────── */
.portao {
  position: sticky; top: calc(68px + var(--e-4));
  background: var(--superficie); border: 2px solid var(--primaria);
  border-radius: var(--r-xl); padding: var(--e-6);
  box-shadow: var(--sombra-3); display: grid; gap: var(--e-4);
}
.portao-topo { display: flex; align-items: center; gap: var(--e-3); }
.portao-icone {
  width: 42px; height: 42px; border-radius: var(--r-md); display: grid; place-items: center;
  background: var(--primaria-suave); color: var(--primaria-texto); flex: 0 0 auto;
}
.portao.aberto { border-color: var(--ok); }
.portao.aberto .portao-icone { background: var(--ok-suave); color: var(--ok-texto); }
.portao h3 { font-size: var(--t-lg); }
/* Caixa fria de aviso curto. Nasceu dentro do paywall, mas /planos e /suporte
   já usavam a mesma classe solta — e sem estilo. Vale para as duas. */
.custo {
  padding: var(--e-3); border-radius: var(--r-md); background: var(--fundo-3);
  font-size: var(--t-sm); color: var(--texto-suave); text-align: center;
}
.custo b, .custo strong { color: var(--texto); }

.contato-linha {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-3) var(--e-4); border-radius: var(--r-md);
  background: var(--fundo-3); text-decoration: none; color: var(--texto);
  transition: background var(--transicao);
}
.contato-linha:hover { background: var(--primaria-suave); }
.contato-linha svg { flex: 0 0 auto; color: var(--primaria); }
.contato-linha .rotulo { font-size: var(--t-xs); color: var(--texto-suave); display: block; }
.contato-linha .valor { font-weight: var(--peso-semi); font-size: var(--t-sm); }
.contato-linha.preferido { border: 1.5px solid var(--ok); background: var(--ok-suave); }
.contato-linha.preferido .rotulo { color: var(--ok-texto); }

/* ── painel ─────────────────────────────────────────────────────────────── */
.painel-topo { display: grid; gap: var(--e-4); margin-bottom: var(--e-8); }
@media (min-width: 760px) { .painel-topo { grid-template-columns: repeat(4, 1fr); } }
.medidor {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--r-lg); padding: var(--e-5);
}
.medidor b {
  display: block; font-size: var(--t-2xl); font-weight: var(--peso-extra);
  line-height: 1.05; font-variant-numeric: tabular-nums;
}
.medidor span {
  font-size: var(--t-xs); color: var(--texto-suave);
  text-transform: uppercase; letter-spacing: var(--ls-caixa);
}
.barra { height: 6px; border-radius: var(--r-full); background: var(--fundo-3); margin-top: var(--e-3); overflow: hidden; }
.barra i { display: block; height: 100%; background: var(--primaria); border-radius: var(--r-full); }
.barra.cheia i { background: var(--aviso); }

.abas { display: flex; gap: var(--e-1); border-bottom: 1px solid var(--borda); margin-bottom: var(--e-6); flex-wrap: wrap; }
.aba {
  padding: var(--e-3) var(--e-4); border: 0; background: transparent;
  color: var(--texto-suave); font-size: var(--t-sm); font-weight: var(--peso-semi);
  cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.aba[aria-selected='true'] { color: var(--primaria-texto); border-bottom-color: var(--primaria); }

/* ── páginas de texto (termos, privacidade) ─────────────────────────────── */
.texto-legal { max-width: var(--largura-texto); margin-inline: auto; }
.texto-legal h2 { font-size: var(--t-xl); margin-top: var(--e-10); margin-bottom: var(--e-3); }
.texto-legal h3 { font-size: var(--t-lg); margin-top: var(--e-6); margin-bottom: var(--e-2); }
.texto-legal p, .texto-legal li { line-height: var(--lh-largo); color: var(--texto-suave); }
.texto-legal ul, .texto-legal ol { padding-left: var(--e-5); display: grid; gap: var(--e-2); margin-block: var(--e-3); }
.texto-legal strong { color: var(--texto); }
.texto-legal .destaque {
  border-left: 3px solid var(--primaria); background: var(--primaria-suave);
  padding: var(--e-4) var(--e-5); border-radius: 0 var(--r-md) var(--r-md) 0;
  margin-block: var(--e-5);
}
.texto-legal .destaque p { color: var(--texto); margin: 0; }

/* ── passos do cadastro ─────────────────────────────────────────────────── */
.progresso { display: flex; gap: var(--e-2); margin-bottom: var(--e-6); }
.progresso i {
  flex: 1; height: 4px; border-radius: var(--r-full); background: var(--borda);
  transition: background var(--transicao);
}
.progresso i.feito { background: var(--ok); }
.progresso i.atual { background: var(--primaria); }

.cv-link { text-decoration: none; color: inherit; display: flex; flex-direction: column; }

/* ── estado vazio genérico ──────────────────────────────────────────────── */
.vazio-caixa {
  text-align: center; padding: var(--e-16) var(--e-4); color: var(--texto-suave);
  border: 1px dashed var(--borda-forte); border-radius: var(--r-lg);
}
.vazio-caixa h3 { color: var(--texto); margin-bottom: var(--e-2); }

/* ── entrar com Google / Facebook ────────────────────────────────────────── */
/* O botão social é deliberadamente NEUTRO: fundo da superfície, borda
   discreta, só o logotipo colorido. As diretrizes de marca do Google e da
   Meta proíbem recolorir os logotipos deles, e um botão azul-Facebook ao lado
   do roxo da casa briga com a identidade da página. */
.ou-separador {
  display: flex; align-items: center; gap: var(--e-3);
  margin: var(--e-5) 0; color: var(--texto-suave); font-size: var(--t-sm);
}
.ou-separador::before, .ou-separador::after {
  content: ''; flex: 1; height: 1px; background: var(--borda);
}

.btn-social {
  display: flex; align-items: center; justify-content: center; gap: var(--e-3);
  width: 100%; margin-bottom: var(--e-3);
  background: var(--superficie); color: var(--texto);
  border: 1.5px solid var(--borda-controle);
  font-weight: var(--peso-medio); text-decoration: none;
}
.btn-social:hover { border-color: var(--primaria); background: var(--fundo-2) }
.btn-social svg { flex: none }

/* ── selo de disponibilidade no cartão ───────────────────────────────────── */
/* Fica ACIMA da linha do cadeado, porque é informação que muda a decisão de
   gastar ou não o crédito — e portanto precisa ser lida antes dela. */
.selo-disp {
  display: inline-block; margin-bottom: var(--e-2);
  font-size: var(--t-xs); font-weight: var(--peso-semi);
  padding: .18em .7em; border-radius: var(--r-full);
  line-height: 1.5;
}
.selo-aberto { background: var(--marca-fraca); color: var(--primaria); }
/* Âmbar, não vermelho: perfil antigo não é perfil ruim — é perfil a conferir. */
.selo-velho  { background: var(--aviso-fraco, #fdf3e3); color: var(--aviso, #8a6100); }

/* ── disponibilidade do candidato (/meus-dados) ──────────────────────────── */
.caixa-disp {
  border: 1px solid var(--borda); border-radius: var(--r-md);
  padding: var(--e-5); margin-bottom: var(--e-6); background: var(--superficie);
}
/* Quando uma empresa alegou que a pessoa já está empregada, a caixa ganha
   destaque — é a única coisa na tela que precisa de resposta. */
.caixa-disp.perguntando { border-color: var(--acento); border-width: 2px; }
.aviso-disp {
  background: var(--fundo-2); border-radius: var(--r-sm);
  padding: var(--e-3); margin: 0 0 var(--e-4);
  font-size: var(--t-sm); line-height: var(--lh-largo);
}
.opcao-disp {
  display: flex; gap: var(--e-3); align-items: flex-start; cursor: pointer;
  border: 1.5px solid var(--borda-controle); border-radius: var(--r-sm);
  padding: var(--e-3) var(--e-4); margin-bottom: var(--e-2);
  font-size: var(--t-sm); line-height: var(--lh-largo);
  transition: border-color var(--transicao), background var(--transicao);
}
.opcao-disp:hover { border-color: var(--primaria); }
.opcao-disp.escolhida { border-color: var(--primaria); background: var(--marca-fraca); }
.opcao-disp input { margin-top: .3em; width: 1.05rem; height: 1.05rem; flex: none;
                    accent-color: var(--primaria); }