/* Aba "Estudo Série B" — estilo próprio, escopado em #pgEstudo, para não encostar no resto do
   app. As cores saem das variáveis do tema, como nas outras abas.

   A tela tem três camadas de leitura (regra da Didática do estudo): a manchete serve a quem tem
   10 segundos, o "o que vimos" e o uso prático a quem tem 2 minutos, e a tabela de provas a quem
   quer conferir. O CSS segue isso: manchete grande, uso prático destacado, prova em corpo menor. */

#pgEstudo .esb { display: flex; flex-direction: column; gap: 22px; padding: 18px 20px 48px; max-width: 100%; }

/* ---------------- topo ---------------- */
#pgEstudo .esb-topo h2 { margin: 0 0 4px; font-size: 22px; letter-spacing: -.015em; }
#pgEstudo .esb-sub { margin: 0 0 12px; color: var(--tinta2); font-size: 13px; max-width: 70ch; line-height: 1.5; }
#pgEstudo .esb-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* flex:none + nowrap: sem isso, em tela estreita a etiqueta encolhe e quebra o proprio texto
   ("1 em / rascunho" em duas linhas dentro da pilula). */
#pgEstudo .esb-pill {
  font-size: 11px; font-weight: 650; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--borda2); color: var(--tinta2);
  flex: none; white-space: nowrap;
}
#pgEstudo .esb-pill-val { color: var(--verde); border-color: color-mix(in srgb, var(--verde) 45%, transparent); }
#pgEstudo .esb-pill-ras { color: var(--ambar); border-color: color-mix(in srgb, var(--ambar) 45%, transparent); }
#pgEstudo .esb-pill-pen { color: var(--tinta3); }
#pgEstudo .esb-gerado { margin-left: auto; font-size: 10.5px; color: var(--tinta3); flex: none; white-space: nowrap; }

/* ---------------- seções ---------------- */
#pgEstudo .esb-secao { display: flex; flex-direction: column; gap: 10px; }
#pgEstudo .esb-secao > h3 {
  margin: 0; font-size: 15px; font-weight: 700; letter-spacing: .01em;
  display: flex; align-items: baseline; gap: 10px;
  padding-bottom: 7px; border-bottom: 1px solid var(--borda);
}
#pgEstudo .esb-conta { font-size: 10.5px; font-weight: 500; color: var(--tinta3); margin-left: auto; }
#pgEstudo .esb-nota { margin: 0; color: var(--tinta3); font-size: 12.5px; line-height: 1.55; max-width: 70ch; }

/* "O que decidimos" é a primeira coisa da tela: fica em destaque mesmo vazia. */
#pgEstudo .esb-decidimos { background: var(--fundo2); border: 1px solid var(--borda); border-radius: 12px; padding: 14px 16px; }
#pgEstudo .esb-decidimos > h3 { border-bottom-color: var(--borda2); }

/* ---------------- uma pergunta ---------------- */
#pgEstudo .esb-parte { border-left: 2px solid var(--borda2); padding: 2px 0 2px 12px; }
#pgEstudo .esb-parte.esb-pendente {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  border-left-color: var(--borda); color: var(--tinta3);
}
#pgEstudo .esb-parte.esb-rascunho { border-left-color: var(--ambar); }
#pgEstudo .esb-parte.esb-validada { border-left-color: var(--verde); }
#pgEstudo .esb-parte-topo { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }

#pgEstudo .esb-id {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  color: var(--tinta2); font-variant-numeric: tabular-nums; flex: none;
}
#pgEstudo .esb-pergunta { font-size: 12.5px; color: var(--tinta2); flex: 1 1 320px; line-height: 1.45; }
#pgEstudo .esb-pendente .esb-pergunta { color: var(--tinta3); }
#pgEstudo .esb-status { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--tinta3); flex: none; }
#pgEstudo .esb-rascunho-tag { color: var(--ambar); }
#pgEstudo .esb-validada-tag { color: var(--verde); }

/* ---------------- uma conclusão ---------------- */
#pgEstudo .esb-concl { margin: 10px 0 14px; }
#pgEstudo .esb-concl h4 {
  margin: 0 0 6px; font-size: 15.5px; font-weight: 700; line-height: 1.32;
  letter-spacing: -.01em; color: var(--tinta); max-width: 62ch;
}
#pgEstudo .esb-compacta h4 { font-size: 14px; }
#pgEstudo .esb-vimos { margin: 0 0 7px; font-size: 13px; line-height: 1.6; color: var(--tinta2); max-width: 72ch; }
#pgEstudo .esb-uso {
  margin: 0 0 7px; font-size: 13px; line-height: 1.6; max-width: 72ch;
  padding: 8px 11px; background: var(--fundo2); border-left: 2px solid var(--coral); border-radius: 0 7px 7px 0;
}
#pgEstudo .esb-uso b { color: var(--coral-cl); }
#pgEstudo .esb-premissa { margin: 0 0 7px; font-size: 12px; color: var(--tinta2); max-width: 72ch; line-height: 1.5; }
#pgEstudo .esb-premissa-vazia { color: var(--tinta3); }
#pgEstudo .esb-aberto { margin: 6px 0 0; font-size: 12px; color: var(--tinta3); max-width: 72ch; line-height: 1.5; }

#pgEstudo .esb-rodape { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
#pgEstudo .esb-selo {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  padding: 2px 8px; border-radius: 999px; border: 1px solid; cursor: help;
}
#pgEstudo .esb-selo-firme { color: var(--verde); border-color: color-mix(in srgb, var(--verde) 50%, transparent); }
#pgEstudo .esb-selo-provavel { color: var(--ambar); border-color: color-mix(in srgb, var(--ambar) 50%, transparent); }
#pgEstudo .esb-selo-indicio { color: var(--tinta3); border-color: var(--borda2); }
#pgEstudo .esb-n { font-size: 11px; color: var(--tinta3); font-variant-numeric: tabular-nums; }
#pgEstudo .esb-fonte { margin-left: auto; font-size: 10.5px; color: var(--tinta3); }

/* ---------------- provas ---------------- */
#pgEstudo .esb-provas { width: 100%; border-collapse: collapse; font-size: 12px; }
#pgEstudo .esb-provas th {
  text-align: left; padding: 6px 10px; font-size: 10px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--tinta3); border-bottom: 1px solid var(--borda);
}
#pgEstudo .esb-provas td { padding: 7px 10px; border-bottom: 1px solid var(--borda); color: var(--tinta2); vertical-align: top; }
#pgEstudo .esb-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--tinta3); }

/* As tarefas de tela não são perguntas do estudo: ficam no fim e discretas. A linha delas é
   sempre em fila — a regra de fila estava só na variante "pendente", e a tarefa feita saía com
   o texto todo colado ("E00Criar a abaFEITA EM ..."). */
#pgEstudo .esb-tarefas { opacity: .72; }
#pgEstudo .esb-tarefas .esb-parte {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
#pgEstudo .esb-tarefas > h3 { font-size: 13px; }

@media (max-width: 720px) {
  #pgEstudo .esb { padding: 14px 14px 40px; }
  #pgEstudo .esb-concl h4 { font-size: 14.5px; }
  #pgEstudo .esb-gerado { margin-left: 0; width: 100%; }
}

/* ---- gráficos (20/09) ------------------------------------------------------
   Um por conclusão, como o CLAUDE.md do estudo manda. O desenho vem do
   estudo_serieb_grafico.js, lendo o campo `grafico` de cada conclusão. */
#pgEstudo .esb-graf { margin: 14px 0 4px; padding: 0; }
#pgEstudo .esb-graf figcaption {
  font-size: 11px; letter-spacing: .02em; text-transform: uppercase;
  color: #52514e; margin-bottom: 6px;
}
#pgEstudo .esb-graf svg { display: block; overflow: visible; }
#pgEstudo .esb-graf-tabela { margin-top: 6px; }
#pgEstudo .esb-graf-tabela summary {
  font-size: 11px; color: #52514e; cursor: pointer; list-style: revert;
}
#pgEstudo .esb-graf-tabela summary:hover { color: #0b0b0b; }
#pgEstudo .esb-graf-tabela table { border-collapse: collapse; margin-top: 6px; font-size: 12px; }
#pgEstudo .esb-graf-tabela th,
#pgEstudo .esb-graf-tabela td { padding: 2px 12px 2px 0; text-align: left; font-weight: 400; }
#pgEstudo .esb-graf-tabela th { color: #52514e; }
#pgEstudo .esb-graf-tabela td { color: #0b0b0b; font-variant-numeric: tabular-nums; }

/* Escuro e o PADRAO do app, e quem o liga e desliga e o botao de tema (body.claro) — o
   style.css nao usa prefers-color-scheme em parte nenhuma. Enquanto isto aqui era um
   @media, a legenda e a tabela do grafico seguiam o sistema operacional e discordavam da
   propria pagina: app no escuro com sistema no claro deixava o texto cinza-escuro sobre
   fundo escuro. O #pgEstudo so existe dentro do app, entao o tema do app decide sozinho. */
body:not(.claro) #pgEstudo .esb-graf figcaption,
body:not(.claro) #pgEstudo .esb-graf-tabela summary,
body:not(.claro) #pgEstudo .esb-graf-tabela th { color: #c3c2b7; }
body:not(.claro) #pgEstudo .esb-graf-tabela summary:hover,
body:not(.claro) #pgEstudo .esb-graf-tabela td { color: #ffffff; }
@media print { #pgEstudo .esb-graf-tabela[open] summary { display: none; } }

/* ---- navegação (20/09) -----------------------------------------------------
   São 27 perguntas e 70 conclusões numa página só: sem índice, sem âncora e sem
   filtro, achar uma conclusão é rolar até topar. Tudo aqui é de tela — o filtro
   esconde e mostra o que já está montado, e não mexe em dado nenhum. */
#pgEstudo .esb-oculto { display: none !important; }

#pgEstudo .esb-sumario {
  margin: 14px 0 6px; padding: 10px 14px; border: 1px solid #e6e5e1; border-radius: 8px;
}
#pgEstudo .esb-sumario > summary {
  cursor: pointer; font-size: 13px; font-weight: 600; color: #52514e; list-style: revert;
}
#pgEstudo .esb-sum-bloco { margin-top: 10px; }
#pgEstudo .esb-sum-bloco h4 {
  margin: 0 0 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #52514e;
}
#pgEstudo .esb-sum-bloco ul { margin: 0; padding: 0; list-style: none; }
#pgEstudo .esb-sum-item {
  display: flex; gap: 10px; align-items: baseline; padding: 3px 6px; border-radius: 5px;
  text-decoration: none; color: inherit; font-size: 13px;
}
#pgEstudo .esb-sum-item:hover { background: #f2f1ec; }
#pgEstudo .esb-sum-id {
  flex: 0 0 34px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px;
  color: #52514e;
}
#pgEstudo .esb-sum-perg { flex: 1 1 auto; }
#pgEstudo .esb-sum-marca { flex: 0 0 auto; font-size: 11px; color: #52514e; }
#pgEstudo .esb-sum-pendente .esb-sum-perg { color: #8a8880; }
#pgEstudo .esb-sum-rascunho .esb-sum-id::after { content: ' ·'; color: #eb6834; }
#pgEstudo .esb-sum-validada .esb-sum-id::after { content: ' ·'; color: #1baf7a; }

#pgEstudo .esb-filtros {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 16px;
}
#pgEstudo .esb-busca {
  display: flex; align-items: center; gap: 6px; flex: 1 1 260px;
  border: 1px solid #e6e5e1; border-radius: 6px; padding: 4px 8px;
}
#pgEstudo .esb-busca-lupa { color: #52514e; font-size: 15px; }
#pgEstudo .esb-busca input {
  border: 0; outline: 0; background: transparent; color: inherit; font: inherit;
  font-size: 13px; width: 100%; padding: 2px 0;
}
#pgEstudo .esb-filtro-grupo { display: flex; gap: 4px; }
#pgEstudo .esb-filtro-bt {
  border: 1px solid #e6e5e1; background: transparent; color: #52514e; cursor: pointer;
  border-radius: 6px; padding: 4px 10px; font: inherit; font-size: 12px;
}
#pgEstudo .esb-filtro-bt:hover { background: #f2f1ec; }
#pgEstudo .esb-filtro-bt[aria-pressed="true"] {
  background: #0b0b0b; border-color: #0b0b0b; color: #fcfcfb;
}
#pgEstudo .esb-filtro-conta { font-size: 12px; color: #52514e; }

/* A âncora só aparece quando o ponteiro chega na conclusão: link permanente sem poluir. */
#pgEstudo .esb-ancora {
  margin-left: 8px; font-size: 12px; color: #a9a79f; text-decoration: none; opacity: 0;
  transition: opacity .12s;
}
#pgEstudo .esb-concl:hover .esb-ancora, #pgEstudo .esb-ancora:focus { opacity: 1; }
#pgEstudo .esb-concl:target { background: #fdf6e7; border-radius: 8px; }

/* ---- quem está livre e roda ---- */
#pgEstudo .esb-aviso-forte {
  border-left: 3px solid #eb6834; padding: 8px 12px; margin: 10px 0 16px;
  background: #faf3ef; font-size: 13px; line-height: 1.5;
}
#pgEstudo .esb-pos { margin: 0 0 18px; }
#pgEstudo .esb-pos h4 { margin: 0 0 6px; font-size: 14px; }
#pgEstudo .esb-pos-vazia h4 { color: #8a8880; font-weight: 500; }
#pgEstudo .esb-tab-livres { border-collapse: collapse; font-size: 13px; width: 100%; }
#pgEstudo .esb-tab-livres th {
  text-align: left; font-weight: 500; font-size: 11px; text-transform: uppercase;
  letter-spacing: .03em; color: #52514e; border-bottom: 1px solid #e6e5e1; padding: 3px 10px 3px 0;
}
#pgEstudo .esb-tab-livres td { padding: 3px 10px 3px 0; border-bottom: 1px solid #f2f1ec; }
#pgEstudo .esb-tab-livres .esb-num { text-align: right; font-variant-numeric: tabular-nums; }
#pgEstudo .esb-semdado { color: #8a8880; }
#pgEstudo .esb-flag { color: #eb6834; }

body:not(.claro) #pgEstudo .esb-sumario { border-color: #333330; }
body:not(.claro) #pgEstudo .esb-sumario > summary,
body:not(.claro) #pgEstudo .esb-sum-bloco h4,
body:not(.claro) #pgEstudo .esb-sum-id,
body:not(.claro) #pgEstudo .esb-sum-marca,
body:not(.claro) #pgEstudo .esb-filtro-conta,
body:not(.claro) #pgEstudo .esb-busca-lupa,
body:not(.claro) #pgEstudo .esb-tab-livres th { color: #c3c2b7; }
body:not(.claro) #pgEstudo .esb-sum-item:hover,
body:not(.claro) #pgEstudo .esb-filtro-bt:hover { background: #26251f; }
body:not(.claro) #pgEstudo .esb-sum-pendente .esb-sum-perg,
body:not(.claro) #pgEstudo .esb-semdado,
body:not(.claro) #pgEstudo .esb-pos-vazia h4 { color: #83817a; }
body:not(.claro) #pgEstudo .esb-busca,
body:not(.claro) #pgEstudo .esb-filtro-bt { border-color: #333330; }
body:not(.claro) #pgEstudo .esb-filtro-bt[aria-pressed="true"] {
  background: #fcfcfb; border-color: #fcfcfb; color: #0b0b0b;
}
body:not(.claro) #pgEstudo .esb-aviso-forte { background: #2a201b; }
body:not(.claro) #pgEstudo .esb-concl:target { background: #2b2519; }
body:not(.claro) #pgEstudo .esb-tab-livres th { border-bottom-color: #333330; }
body:not(.claro) #pgEstudo .esb-tab-livres td { border-bottom-color: #26251f; }

/* ---- listas abertas: jogadores livres e treinadores (20/09) ---- */
#pgEstudo .esb-lin-fraca td { opacity: .72; }
#pgEstudo .esb-ct-ok { color: #1baf7a; font-size: 11px; }
#pgEstudo .esb-ct-fraco { color: #eb6834; font-size: 11px; }
#pgEstudo .esb-sempar {
  font-size: 10px; text-transform: uppercase; letter-spacing: .03em; color: #eb6834;
  border: 1px solid #eb6834; border-radius: 3px; padding: 0 4px; margin-left: 4px;
}
#pgEstudo .esb-tab-tec { border-collapse: collapse; font-size: 13px; width: 100%; margin-top: 10px; }
#pgEstudo .esb-tab-tec th {
  text-align: left; font-weight: 500; font-size: 11px; text-transform: uppercase;
  letter-spacing: .03em; color: #52514e; border-bottom: 1px solid #e6e5e1; padding: 3px 10px 3px 0;
}
#pgEstudo .esb-tab-tec td { padding: 3px 10px 3px 0; border-bottom: 1px solid #f2f1ec; }
#pgEstudo .esb-tab-tec .esb-num { text-align: right; font-variant-numeric: tabular-nums; }
#pgEstudo .esb-tab-tec .esb-suave { color: #8a8880; }
#pgEstudo .esb-tec-ord { margin-top: 10px; }
body:not(.claro) #pgEstudo .esb-tab-tec th { color: #c3c2b7; border-bottom-color: #333330; }
body:not(.claro) #pgEstudo .esb-tab-tec td { border-bottom-color: #26251f; }
body:not(.claro) #pgEstudo .esb-tab-tec .esb-suave { color: #83817a; }
/* "a mais forte" e legenda da REGUA (qual peca pesa mais no indice do A14). A tabela do ranking
   usa a mesma classe .esb-forte para marcar quem cruza todos os criterios medidos, e sem escopo
   a legenda vazava para la — tres goleiros apareciam como "a mais forte", que nao quer dizer nada
   naquela lista. */
#pgEstudo .esb-tab-tec tr.esb-forte td { font-weight: 600; }
#pgEstudo .esb-regua .esb-tab-tec tr.esb-forte td:first-child::after {
  content: ' · a mais forte'; font-weight: 400; font-size: 11px; color: #eb6834;
}
#pgEstudo .esb-ranking .esb-tab-tec tr.esb-forte td:nth-child(5)::after {
  content: ' ✓'; color: #1baf7a;
}
#pgEstudo .esb-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
#pgEstudo .esb-roda {
  font-size: 9px; text-transform: uppercase; letter-spacing: .04em; background: #1baf7a;
  color: #04150f; border-radius: 3px; padding: 0 4px; font-weight: 700; vertical-align: middle;
}
#pgEstudo .esb-neg { color: #eb6834; }
#pgEstudo .esb-mini { font-size: 11px; max-width: 220px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
#pgEstudo .esb-ranking .esb-pos { margin-bottom: 22px; }

/* ---- por que esta confiança (20/09) ----------------------------------------
   Era o title= do selo. Tooltip não rola, não copia, some ao mover o mouse e no
   celular não abre — e o maior destes textos passa de 8 mil caracteres de prova.
   Agora é bloco que abre e fecha, no molde do "ver os números" do gráfico: mesmo
   tamanho de fonte da prova, mesma cor de resumo, e o tema do app decide a tinta
   (body.claro), nunca o sistema operacional. */
#pgEstudo .esb-motivo { margin: 8px 0 0; }
#pgEstudo .esb-motivo > summary {
  font-size: 11px; color: #52514e; cursor: pointer; list-style: revert;
}
#pgEstudo .esb-motivo > summary:hover { color: #0b0b0b; }
#pgEstudo .esb-motivo-corpo {
  margin-top: 6px; padding-left: 10px; border-left: 2px solid #e6e5e1;
  max-width: 68ch;
}
#pgEstudo .esb-motivo-corpo p {
  margin: 0 0 8px; font-size: 12px; line-height: 1.55; color: #0b0b0b;
}
#pgEstudo .esb-motivo-corpo p:last-child { margin-bottom: 0; }

body:not(.claro) #pgEstudo .esb-motivo > summary { color: #c3c2b7; }
body:not(.claro) #pgEstudo .esb-motivo > summary:hover,
body:not(.claro) #pgEstudo .esb-motivo-corpo p { color: #ffffff; }
body:not(.claro) #pgEstudo .esb-motivo-corpo { border-left-color: #3a3a36; }

/* Fechado no papel: é prova, não leitura, e aberto sozinho dobraria o PDF. */
@media print { #pgEstudo .esb-motivo { display: none; } }

/* ---- material auxiliar (R01, 20/09) ---------------------------------------
   Análise Série B e Protótipo saíram da barra de abas e viraram material deste
   estudo. Discreto de propósito: é de onde o estudo partiu, não o que ele
   conclui — quem abre a aba tem de ver a conclusão primeiro. */
#pgEstudo .esb-auxiliar {
  margin: 8px 0 0; font-size: 12px; color: #52514e;
}
#pgEstudo .esb-auxiliar a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
#pgEstudo .esb-auxiliar a:hover { color: #0b0b0b; }
body:not(.claro) #pgEstudo .esb-auxiliar { color: #c3c2b7; }
body:not(.claro) #pgEstudo .esb-auxiliar a:hover { color: #ffffff; }

/* ---- a ficha aberta em colunas (20/09) --------------------------------------
   Era um campo de texto só, cortado em dois, com o resto no tooltip. Não dava
   para comparar dois jogadores no mesmo critério — que é o que a lista serve
   para fazer — e sobrava largura à direita da tabela. */
#pgEstudo .esb-crit-cab {
  font-size: 10px; line-height: 1.25; font-weight: 600; letter-spacing: .01em;
  max-width: 92px; white-space: normal; vertical-align: bottom;
}
#pgEstudo .esb-crit { font-variant-numeric: tabular-nums; white-space: nowrap; }
#pgEstudo .esb-crit-piso { font-size: 9px; opacity: .55; font-weight: 400; }
/* Verde e vermelho só onde a ficha EXIGE. Critério medido sem piso sai neutro:
   pintar seria inventar uma exigência que a ficha não faz. */
#pgEstudo .esb-crit-ok { color: #1baf7a; }
#pgEstudo .esb-crit-fraco { color: #eb6834; }
#pgEstudo .esb-crit-neutro { color: inherit; opacity: .75; }

/* Valor de mercado nas listas (20/09). Em EURO, como o Transfermarkt publica — e por isso
   nunca somado com salário, que é em R$. Quem não tem ficha sai com traço, não com zero. */
#pgEstudo .esb-vm { font-variant-numeric: tabular-nums; white-space: nowrap; opacity: .85; }
/* Valor que veio do Wyscout, e não do Transfermarkt: as duas não são da mesma data. */
#pgEstudo .esb-vm-wy { opacity: .7; }
#pgEstudo .esb-vm-fnt { font-style: normal; font-size: 8px; opacity: .7; margin-left: 2px; }

/* ---- a página de decisões (21/09) ------------------------------------------
   Vem antes de tudo: quem decide não lê 74 conclusões. A ressalva fica DENTRO
   do bloco, não em rodapé — ela é a primeira coisa que morre num resumo, e é
   justamente o que evita a decisão errada. */
#pgEstudo .esb-decisoes { border: 1px solid var(--borda2, #e6e5e1); border-radius: 10px;
  padding: 14px 16px 6px; margin-bottom: 18px; }
#pgEstudo .esb-dec-grupo { margin-top: 14px; }
#pgEstudo .esb-dec-gnome { margin: 0 0 6px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .05em; color: #52514e; font-weight: 700; }
#pgEstudo .esb-dec { border-left: 3px solid var(--borda2, #e6e5e1); padding: 6px 0 8px 12px;
  margin-bottom: 10px; }
#pgEstudo .esb-dec-topo { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
#pgEstudo .esb-dec-topo h4 { margin: 0; font-size: 15px; line-height: 1.3; flex: 1 1 280px; }
#pgEstudo .esb-dec-id { font-size: 10px; font-weight: 700; color: #52514e;
  font-variant-numeric: tabular-nums; }
#pgEstudo .esb-dec-porque { margin: 5px 0 0; font-size: 13px; line-height: 1.5; }
#pgEstudo .esb-dec-ressalva { margin: 4px 0 0; font-size: 12px; line-height: 1.45;
  color: #52514e; }
#pgEstudo .esb-dec-ressalva b { color: #b45309; }
#pgEstudo .esb-dec-pe { margin-top: 4px; font-size: 10px; color: #7a7975; display: flex; gap: 8px; }
#pgEstudo .esb-dec-pe a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

body:not(.claro) #pgEstudo .esb-decisoes { border-color: #3a3a36; }
body:not(.claro) #pgEstudo .esb-dec { border-left-color: #3a3a36; }
body:not(.claro) #pgEstudo .esb-dec-gnome,
body:not(.claro) #pgEstudo .esb-dec-ressalva { color: #c3c2b7; }
body:not(.claro) #pgEstudo .esb-dec-ressalva b { color: #f0a640; }

/* ---- as regras de leitura e a seção de físico (21/09) -----------------------
   As duas nasceram do mesmo buraco: o aprendizado da casa vivia no CLAUDE.md,
   que é o manual de quem RODA a análise, e quem LÊ a análise nunca abriu esse
   arquivo. Sem elas na tela, a reunião seguinte repete as perguntas já
   respondidas. Estilo deliberadamente igual ao da página de decisões: é o mesmo
   tipo de conteúdo — texto da casa com o número preso à parte de origem. */
#pgEstudo .esb-atalhos { margin: 6px 0 0; font-size: 11px; color: #52514e; }
#pgEstudo .esb-atalhos a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
#pgEstudo .esb-atalhos a:hover { color: #0b0b0b; }

#pgEstudo .esb-regras, #pgEstudo .esb-fisico {
  border: 1px solid var(--borda2, #e6e5e1); border-radius: 10px;
  padding: 14px 16px 10px; margin-bottom: 18px; }

#pgEstudo .esb-regra { border-left: 3px solid var(--borda2, #e6e5e1); padding: 6px 0 8px 12px;
  margin-top: 12px; }
#pgEstudo .esb-regra-topo { display: flex; align-items: baseline; gap: 8px; }
#pgEstudo .esb-regra-topo h4 { margin: 0; font-size: 15px; line-height: 1.3; flex: 1 1 280px; }
#pgEstudo .esb-regra-n { font-size: 10px; font-weight: 700; color: #52514e;
  font-variant-numeric: tabular-nums; }
#pgEstudo .esb-regra-evita { margin: 5px 0 0; font-size: 12px; line-height: 1.45; color: #52514e; }
#pgEstudo .esb-regra-evita b { color: #b45309; }
#pgEstudo .esb-regra-conta { margin: 4px 0 0; font-size: 13px; line-height: 1.5; }

#pgEstudo .esb-fis { border-left: 3px solid var(--borda2, #e6e5e1); padding: 6px 0 8px 12px;
  margin-top: 12px; }
#pgEstudo .esb-fis-topo { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
#pgEstudo .esb-fis-topo h4 { margin: 0; font-size: 15px; line-height: 1.3; flex: 1 1 280px; }
#pgEstudo .esb-fis-texto { margin: 5px 0 0; font-size: 13px; line-height: 1.5; }
#pgEstudo .esb-fis-limites { margin-top: 16px; border-top: 1px solid var(--borda2, #e6e5e1);
  padding-top: 10px; }
#pgEstudo .esb-fis-limites h4 { margin: 0 0 6px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .05em; color: #52514e; font-weight: 700; }
#pgEstudo .esb-fis-limites p { margin: 0 0 6px; font-size: 12px; line-height: 1.45;
  color: #52514e; max-width: 74ch; }
#pgEstudo .esb-fis-limites b { color: #0b0b0b; }

body:not(.claro) #pgEstudo .esb-regras,
body:not(.claro) #pgEstudo .esb-fisico { border-color: #3a3a36; }
body:not(.claro) #pgEstudo .esb-regra,
body:not(.claro) #pgEstudo .esb-fis { border-left-color: #3a3a36; }
body:not(.claro) #pgEstudo .esb-fis-limites { border-top-color: #3a3a36; }
body:not(.claro) #pgEstudo .esb-atalhos,
body:not(.claro) #pgEstudo .esb-regra-evita,
body:not(.claro) #pgEstudo .esb-fis-limites h4,
body:not(.claro) #pgEstudo .esb-fis-limites p { color: #c3c2b7; }
body:not(.claro) #pgEstudo .esb-atalhos a:hover,
body:not(.claro) #pgEstudo .esb-fis-limites b { color: #ffffff; }
body:not(.claro) #pgEstudo .esb-regra-evita b { color: #f0a640; }

/* ---- os quatro mercados na mesma lista (21/09, 2ª rodada) -------------------
   O mercado é uma etiqueta e não uma cor de valor: nada aqui pode sugerir que
   "Exterior" é melhor ou pior que "Série B" — quem diz isso é a coluna do eixo.
   Já o teto do ajuste GANHA marca, porque ali a ordem deixou de medir mérito e
   passou a medir o limite da conversão de liga. */
#pgEstudo .esb-merc { font-size: 9.5px; font-weight: 700; letter-spacing: .02em;
  padding: 1px 5px; border-radius: 3px; white-space: nowrap;
  border: 1px solid var(--borda2, #e6e5e1); color: #52514e; }
#pgEstudo .esb-merc-b { border-color: #8a8a84; color: #2b2b28; }
#pgEstudo .esb-liga { font-size: 9.5px; color: #7a7975; white-space: nowrap; }
#pgEstudo .esb-pass { font-size: 9px; color: #7a7975; }
#pgEstudo .esb-orig { font-size: 9.5px; color: #7a7975; margin-right: 3px;
  font-variant-numeric: tabular-nums; }
#pgEstudo .esb-desc { font-size: 9.5px; color: #b45309; margin-left: 3px;
  font-variant-numeric: tabular-nums; }
#pgEstudo .esb-no-teto { position: relative; }
#pgEstudo .esb-no-teto b { text-decoration: underline dotted; text-underline-offset: 2px; }
#pgEstudo .esb-comp { display: block; font-weight: 400; font-size: 10px; color: #7a7975;
  margin-left: 0; }

body:not(.claro) #pgEstudo .esb-merc { border-color: #3a3a36; color: #c3c2b7; }
body:not(.claro) #pgEstudo .esb-merc-b { border-color: #6f6e68; color: #f2f1ec; }
body:not(.claro) #pgEstudo .esb-liga,
body:not(.claro) #pgEstudo .esb-pass,
body:not(.claro) #pgEstudo .esb-orig,
body:not(.claro) #pgEstudo .esb-comp { color: #9a9990; }
body:not(.claro) #pgEstudo .esb-desc { color: #f0a640; }

/* ---- a ressalva do painel comprometido (22/09) -----------------------------
   A marca é âmbar e não vermelha: a linha não está errada, ela é menos
   confiável — e a diferença entre as duas coisas é justamente o que o aviso
   explica. A linha inteira ganha fundo levíssimo para que a marca não dependa
   só de um símbolo pequeno. */
#pgEstudo .esb-comp-fator { color: #b45309; margin-left: 3px; font-size: 10px; cursor: help; }
#pgEstudo tr.esb-linha-comp { background: rgba(180, 83, 9, .055); }
#pgEstudo .esb-painel-aviso { border: 1px solid #d9a441; border-radius: 8px;
  padding: 10px 14px; margin: 14px 0 18px; background: rgba(180, 83, 9, .05); }
#pgEstudo .esb-painel-aviso h4 { margin: 0 0 6px; font-size: 13px; color: #92400e; }
#pgEstudo .esb-painel-aviso p { margin: 0 0 6px; font-size: 12px; line-height: 1.5;
  max-width: 82ch; }
#pgEstudo .esb-painel-lista { margin: 0 0 8px; padding-left: 18px; font-size: 11.5px;
  line-height: 1.5; color: #52514e; }
#pgEstudo .esb-painel-pe { color: #52514e; }

body:not(.claro) #pgEstudo .esb-comp-fator { color: #f0a640; }
body:not(.claro) #pgEstudo tr.esb-linha-comp { background: rgba(240, 166, 64, .07); }
body:not(.claro) #pgEstudo .esb-painel-aviso { border-color: #7a5a1e;
  background: rgba(240, 166, 64, .06); }
body:not(.claro) #pgEstudo .esb-painel-aviso h4 { color: #f0a640; }
body:not(.claro) #pgEstudo .esb-painel-lista,
body:not(.claro) #pgEstudo .esb-painel-pe { color: #c3c2b7; }

/* ---- as três listas (22/09) ------------------------------------------------
   Separadas de propósito: quem monta elenco escolhe dentro de um mercado por
   vez, e a lista única escondia que meio top-5 europeu tinha entrado na tela. */
#pgEstudo .esb-lista-bloco { margin: 22px 0 0; }
#pgEstudo .esb-lista-titulo { display: flex; align-items: baseline; gap: 8px; margin: 0 0 4px;
  font-size: 15px; padding-bottom: 5px; border-bottom: 2px solid var(--borda2, #e6e5e1); }
#pgEstudo .esb-lista-n { display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; background: #52514e; color: #fff;
  font-size: 10px; font-weight: 700; flex: none; }
#pgEstudo .esb-lista-sub { margin: 0 0 8px; font-size: 11.5px; color: #52514e;
  line-height: 1.5; max-width: 84ch; }
body:not(.claro) #pgEstudo .esb-lista-titulo { border-bottom-color: #3a3a36; }
body:not(.claro) #pgEstudo .esb-lista-n { background: #c3c2b7; color: #1a1a18; }
body:not(.claro) #pgEstudo .esb-lista-sub { color: #c3c2b7; }

/* ---- os quatro nomes que o estudo publica (22/09) --------------------------
   Borda propria porque e' a unica lista NOMINAL autorizada, e porque o aviso
   que vem com ela — nenhum sobrevive ao desconto de conversao — e' tao
   importante quanto os nomes. Sem esse contraste a secao viraria "a lista de
   alvos do estudo", que e' exatamente o que ela nao e'. */
#pgEstudo .esb-alvos { border: 1px solid var(--borda2, #e6e5e1); border-radius: 10px;
  padding: 14px 16px 10px; margin-bottom: 18px; }
body:not(.claro) #pgEstudo .esb-alvos { border-color: #3a3a36; }