/* Freelancer Estúdio Crivy — scaffold visual, dados fictícios.
   Herda tokens.css do site principal. */

/* Google Fonts entrega "Encode Sans"/"JetBrains Mono"; o tokens.css do site
   pede as variantes "Variable" do fontsource. Sem os dois nomes na cadeia,
   cai tudo em system-ui. */
:root {
  --font-display: 'Encode Sans Variable', 'Encode Sans', system-ui, sans-serif;
  --font-body: 'Encode Sans Variable', 'Encode Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, monospace;
}

body { margin: 0; min-height: 100dvh; }

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--space-6); }

/* ---- Topo ---- */
.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: color-mix(in srgb, var(--color-bg) 85%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}
.topbar-inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-height: 64px;
}
.marca {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--color-text);
  white-space: nowrap;
}
.marca .ponto { color: var(--color-accent); }
.marca small {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.abas { display: flex; gap: var(--space-2); margin-left: auto; flex-wrap: wrap; }
.abas button {
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  background: none;
  border: none;
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.abas button:hover, .abas button:focus-visible { color: var(--color-text); background: var(--color-surface); }
.abas button[aria-selected="true"] { background: var(--color-surface-2); color: var(--color-text); font-weight: 600; }

.perfil-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  white-space: nowrap;
}
.avatar {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--color-accent-dim);
  color: var(--color-on-accent);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xs);
}

/* ---- Conteúdo ---- */
main { padding-block: var(--space-8) var(--space-24); }
.painel { display: none; }
.painel[data-ativo] { display: block; }

.topo { margin-bottom: var(--space-8); }
.topo h1 { font-size: var(--text-2xl); }
.topo p { color: var(--color-text-muted); margin: var(--space-2) 0 0; max-width: var(--width-prosa); }

.aviso-mock {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.aviso-mock b {
  color: var(--color-creators);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .1em;
  align-self: center;
}

/* ---- Filtros ---- */
.filtros { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); }
.filtro {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: none;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}
.filtro:hover, .filtro:focus-visible { border-color: var(--fc, var(--color-accent)); color: var(--fc, var(--color-accent)); }
.filtro[aria-pressed="true"] { border-color: var(--fc, var(--color-accent)); color: var(--fc, var(--color-accent)); }

/* ---- Vagas: lista, não grade de cards iguais ---- */
.vagas { display: grid; gap: var(--space-4); list-style: none; padding: 0; margin: 0; }
.vaga {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2) var(--space-6);
  align-items: start;
  padding: var(--space-6);
  background: color-mix(in srgb, var(--fc, var(--color-accent)) 4%, var(--color-surface));
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: border-color var(--transition), translate var(--ease-out);
}
.vaga:hover { border-color: var(--fc, var(--color-accent)); translate: 0 -3px; }
.vaga h3 { font-size: var(--text-lg); }
.vaga .descricao { color: var(--color-text-muted); font-size: var(--text-sm); grid-column: 1; max-width: 62ch; }
.vaga .meta {
  grid-column: 1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.vaga .lado {
  grid-column: 2;
  grid-row: 1 / span 3;
  display: grid;
  gap: var(--space-3);
  justify-items: end;
  text-align: right;
}
.vaga .pagamento {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  color: var(--fc, var(--color-accent));
  white-space: nowrap;
}
.frente {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.frente::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--fc, var(--color-accent));
}
.btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-6);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  text-decoration: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity var(--transition);
}
.btn:hover, .btn:focus-visible { opacity: .88; }
.btn.fantasma {
  background: none;
  color: var(--color-text);
  border: 1px solid var(--color-border-control);
}
.btn.fantasma:hover, .btn.fantasma:focus-visible { border-color: var(--color-accent-dim); color: var(--color-accent); opacity: 1; }

/* ---- Resumo (perfil / pagamentos) ---- */
.resumo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  padding: var(--space-6) 0;
  border-block: 1px solid var(--color-border);
  margin-bottom: var(--space-8);
}
.resumo div { display: grid; gap: var(--space-1); }
.resumo dt {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--color-text-muted);
}
.resumo dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.bloco { margin-bottom: var(--space-12); overflow-x: auto; }
.bloco h2 { font-size: var(--text-lg); margin-bottom: var(--space-4); }

table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
thead th {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
}
tbody td { padding: var(--space-4) var(--space-3); border-bottom: 1px solid var(--color-border); }
tbody tr:hover { background: var(--color-surface); }
.valor { font-family: var(--font-mono); white-space: nowrap; }
.num { text-align: right; }

.estado {
  display: inline-block;
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  border: 1px solid currentColor;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  white-space: nowrap;
}
.estado.pago      { color: var(--color-games); }
.estado.liberado  { color: var(--color-accent); }
.estado.retido    { color: var(--color-creators); }
.estado.analise   { color: var(--color-text-muted); }
.estado.afazer    { color: var(--color-accent); }   /* aceito: sua vez de fazer */
.estado.ajuste    { color: var(--color-design); }   /* ajuste_pedido: refazer */

/* Explicação do fluxo de pagamento — o ponto sensível da plataforma */
.fluxo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: var(--space-4);
  counter-reset: passo;
  padding: 0;
  margin: 0;
  list-style: none;
}
.fluxo li {
  display: grid;
  gap: var(--space-2);
  align-content: start;
  padding-top: var(--space-4);
  border-top: 2px solid var(--color-border);
}
.fluxo li::before {
  counter-increment: passo;
  content: "0" counter(passo);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-accent);
}
.fluxo strong { font-size: var(--text-base); }
.fluxo p { color: var(--color-text-muted); font-size: var(--text-sm); margin: 0; }

/* ---- Visão admin: outro papel, precisa parecer outro papel ---- */
.aba-admin { color: var(--color-creators) !important; }
.aba-admin[aria-selected="true"] {
  background: color-mix(in srgb, var(--color-creators) 14%, transparent) !important;
}
.badge {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  margin-left: var(--space-2);
  padding-inline: 5px;
  border-radius: var(--radius-pill);
  background: var(--color-creators);
  color: #2b1704;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
}
.cracha-admin {
  display: inline-block;
  margin-bottom: var(--space-3);
  padding: 2px var(--space-3);
  border: 1px solid var(--color-creators);
  border-radius: var(--radius-pill);
  color: var(--color-creators);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.freela { display: flex; align-items: center; gap: var(--space-3); }
.freela small { display: block; color: var(--color-text-muted); font-size: var(--text-xs); margin-top: 2px; }
.avatar.peq { width: 26px; height: 26px; font-size: 10px; flex-shrink: 0; }
/* 44px mesmo em tabela densa — alvo de toque não abre exceção para admin */
.btn.peq { min-height: 44px; padding: var(--space-1) var(--space-4); font-size: var(--text-xs); }

@media (max-width: 720px) {
  .topbar-inner { flex-wrap: wrap; padding-block: var(--space-3); min-height: auto; }
  .abas { order: 3; width: 100%; overflow-x: auto; }
  .vaga { grid-template-columns: 1fr; }
  .vaga .lado { grid-column: 1; grid-row: auto; justify-items: start; text-align: left; }
  table { font-size: var(--text-xs); }
  tbody td { padding: var(--space-3) var(--space-2); }
}

/* ---- Meu perfil ---- */

.perfil-form {
  display: grid;
  gap: var(--space-4);
  max-width: 34rem;
  /* .bloco tem overflow-x para tabela larga; num formulário isso só cria
     barra de rolagem em campo que já cabe. */
  overflow: visible;
}

.perfil-form label {
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.perfil-form input[type='text'],
.perfil-form input[type='url'],
.perfil-form textarea {
  font: inherit;
  color: var(--color-text);
  background: var(--color-bg);
  /* Contorno que identifica controle precisa dos 3:1 da WCAG 1.4.11 —
     --color-border mede 2.3:1 e o campo lê como caixa decorativa. */
  border: 1px solid var(--color-border-control);
  border-radius: var(--radius);
  padding: var(--space-3);
  min-height: 44px;
}

.perfil-form textarea {
  resize: vertical;
  line-height: var(--leading-body);
}

.perfil-form input:focus-visible,
.perfil-form textarea:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.perfil-foto-linha {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.perfil-foto {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-surface-2);
  border: 1px solid var(--color-accent-dim);
}

.perfil-foto-letra {
  display: grid;
  place-items: center;
  color: var(--color-accent);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  text-transform: uppercase;
}

/* O <input type=file> nativo não aceita estilo; o rótulo vira o botão e o
   campo fica escondido atrás dele — sem display:none, que o tiraria da
   navegação por teclado. */
.botao-arquivo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border-control);
  border-radius: var(--radius);
  color: var(--color-text);
  font-size: var(--text-sm);
  cursor: pointer;
}

.botao-arquivo:hover,
.botao-arquivo:focus-within {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.botao-arquivo input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.dica {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  margin: var(--space-2) 0 0;
}

.erro { color: var(--color-design); font-size: var(--text-sm); }
.ok   { color: var(--color-accent); font-size: var(--text-sm); }

/* Retirar candidatura não é a ação que a tela quer estimular: fica com o mesmo
   tamanho do botão cheio (o alvo de toque não muda) e peso visual menor. */
.btn-fantasma {
  background: none;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border-control);
}

.btn-fantasma:hover:not(:disabled) {
  border-color: var(--color-design);
  color: var(--color-design);
}