/* base.css — tokens de cor, reset e componentes sem namespace.
   Os componentes da página (.a4, .fl-*) ficam em layout.css. */

:root{
  --surface-1:#fcfcfb; --surface-2:#fff; --surface-3:#eae8e0; --line:#e4e3df;
  --text-primary:#2a2a28; --text-secondary:#54534c; --text-muted:#83817a;
  --brand-lime:#c3d968; --brand-green:#6b9c5a; --brand-dark:#385a31;
  --warning:#c9861f; --critical:#b3452e;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* Quem configurou o sistema para menos animação recebe salto direto, sem rolagem */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms !important}
}
body{
  margin:0; background:var(--surface-2); color:var(--text-primary);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* TABELA DE BOLSAS — §2, dentro do bloco de CTA */
table.bolsa-compact{width:100%; border-collapse:collapse; font-size:11px}
table.bolsa-compact th{text-align:left; color:var(--text-muted); font-weight:600; padding:1px 10px 4px 0; border-bottom:1px solid var(--brand-dark)}
table.bolsa-compact td{padding:3px 10px 3px 0; border-bottom:1px solid var(--line)}
table.bolsa-compact td.num{text-align:right; font-variant-numeric:tabular-nums; font-weight:600; color:var(--text-secondary)}

/* Cidades clicáveis dentro da tabela de distribuição */
.clickable{cursor:pointer; transition:color .12s}
.clickable:hover{color:var(--brand-green); text-decoration:underline}

/* TABELA DE DISTRIBUIÇÃO — §4, um bloco por edital, linhas expansíveis */
/* Sem cap próprio: a tabela acompanha a largura da coluna, que o .a4 já limita em
   794px − 64px de padding = 730px. Antes eram 680px fixos, o que deixava a tabela
   recuada em relação à barra do §2 e ao cabeçalho — duas larguras de conteúdo na mesma
   página. Alinhar as duas ainda devolveu 50px à coluna do nome (−34px de altura). */
.dist-block{margin:0 auto}
.dist-block + .dist-block{margin-top:28px}
/* Título do bloco = o próprio controle de abrir/fechar. A seta fica à esquerda, no mesmo
   vocabulário das linhas, mas maior: aqui ela comanda a seção inteira. */
.dist-edital-title{
  display:flex; align-items:baseline; gap:8px; cursor:pointer; list-style:none;
  font-size:13px; font-weight:800; color:var(--brand-dark); text-transform:uppercase; letter-spacing:.03em;
  margin:0 0 10px; padding-bottom:6px; border-bottom:2px solid var(--brand-lime);
}
.dist-edital-title::-webkit-details-marker{display:none}
.dist-edital-title::before{
  content:'▸'; font-size:15px; line-height:1; color:var(--brand-green);
  transition:transform .15s; flex:0 0 auto;
}
.dist-block[open] > .dist-edital-title::before{transform:rotate(90deg)}
.dist-edital-title:hover{color:var(--brand-green)}
/* Empurrada para a direita: fechado, o título ainda diz quanta vaga há lá dentro. */
.dist-edital-count{
  margin-left:auto; font-size:11px; font-weight:700; color:var(--text-muted);
  letter-spacing:.02em; white-space:nowrap;
}
.dist-table{margin:0 auto}
.dist-header{
  padding:0 4px 8px; margin-bottom:2px; border-bottom:2px solid var(--brand-dark);
  font-size:11px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.02em;
}
.dist-header .dist-col-sort{cursor:pointer; user-select:none; text-align:left; white-space:nowrap}
.dist-header .dist-col-sort:nth-child(2){text-align:right}
.dist-header .dist-col-sort:hover{color:var(--brand-green)}
.dist-header .dist-col-sort.active{color:var(--brand-dark)}
.dist-row{border-bottom:1px solid var(--line); padding:0 8px; margin:0 -8px; border-radius:6px}
.dist-row:nth-of-type(even){background:rgba(234,232,224,.55)}
/* A tabela é o corpo da página — 46 linhas — então cada pixel por linha vira
   muita rolagem. Daí o respiro curto, a fonte menor e o nome sem negrito:
   o único peso forte da linha é a contagem de vagas, que é o que se procura. */
.dist-row summary{
  list-style:none; cursor:pointer; padding:6px 4px; font-size:12.5px; line-height:1.35;
}
.dist-row summary::-webkit-details-marker{display:none}
/* A seta do accordion NÃO tem coluna própria: ela é absoluta, dentro do recuo
   que .dist-row já reserva (padding 8px + margin -8px). O glifo mede 9px — uma
   coluna só para ele custava 26px de largura por linha, o que no celular vira
   nome quebrando em mais linhas.
   Duas colunas só: o que identifica a vaga (subprojeto, perfil, nome, nível quando
   falta, nº de cidades) é texto corrido numa célula, e a contagem de vagas — o número
   que se procura — é a única coluna fixa. Colunas fixas reservam a largura do maior
   valor em TODAS as linhas; como texto, cada linha usa só o que precisa. */
.dist-row-grid{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 12px; align-items:baseline;
  position:relative;
}
/* A seta é a única pista de que a linha abre, então precisa de presença. Ela cabe no
   recuo que .dist-row já reserva (padding 8px + margin -8px, mais os 4px do summary);
   ao mexer no tamanho, conferir que o glifo não invade o texto nem vaza da linha. */
.dist-row .dist-row-grid::before{
  content:'▸'; color:var(--brand-green); font-size:15px; line-height:1.15;
  position:absolute; left:-12px; top:0; transition:transform .15s;
}
.dist-row[open] .dist-row-grid::before{transform:rotate(90deg)}
.dist-row .perfil-name{font-weight:500; color:var(--text-primary)}
/* Referência do edital (S… · P…): abre a linha, então precisa se distinguir do nome
   sem competir com ele — daí cinza, e o rótulo por extenso só no title. */
.dist-row .perfil-ref{font-weight:700; color:var(--text-muted); font-variant-numeric:tabular-nums; white-space:nowrap; cursor:help}
/* Nível (quando o nome não o diz) e nº de cidades: peso de metadado, no fim da linha */
.dist-row .perfil-meta{font-size:10.5px; font-weight:700; color:var(--text-muted); text-transform:uppercase; white-space:nowrap}
/* Sem o ponto, "DOUTORADO 1 CIDADE" lê como um bloco só. Medido: não custa altura. */
.dist-row .perfil-meta::before{content:'· '; color:var(--line)}
.dist-sub-nome{
  margin:0 0 8px; padding:0 4px 0 22px; font-size:11px; line-height:1.4;
  color:var(--text-muted); text-transform:none;
}
.dist-row .perfil-count{font-variant-numeric:tabular-nums; font-weight:800; color:var(--brand-dark); text-align:right; white-space:nowrap}
.dist-cidades{padding:0 4px 12px 22px; display:flex; flex-wrap:wrap; gap:6px 16px}
.dist-cidade{font-size:12px; color:var(--text-secondary)}
.dist-cidade b{color:var(--text-primary); font-variant-numeric:tabular-nums; font-weight:700}

@media (min-width:640px){
  /* Largura fixa (e não `auto`) na coluna de vagas porque cabeçalho e linhas são grids
     independentes: com `auto` cada um dimensionaria por conta e as duas desalinhariam.
     Os 58px vêm da medição de "26 vagas" (54px) mais uma folga curta. Ao mexer na fonte
     da tabela, remedir: sobra aqui vira rolagem lá embaixo. */
  .dist-row-grid{grid-template-columns:1fr 58px; gap:14px 12px}
}

/* BOTÕES DE EDITAL — §2, links para o edital no site da FAPESQ */
.pill{
  display:inline-block; padding:11px 26px; border-radius:24px; font-size:14px; font-weight:800;
  border:2px solid var(--brand-dark); color:var(--brand-dark); background:transparent; margin: 10px;
}
.pill.solid{background:var(--brand-dark); color:#fff; border-color:var(--brand-dark);
  display: inline-block;
  text-decoration: none;
  transition: background-color 0.3s ease, transform 0.2s ease;
}
.pill.solid:hover{
  opacity: 0.85;
  transform: translateY(-2px);
  cursor: pointer;
}
/* Segunda linha do botão: para quem aquele edital serve */
.pill-sub{
  display:block; font-size:11px; font-weight:600; letter-spacing:.02em;
  text-transform:uppercase; opacity:.8; margin-top:1px;
}