/* Simulando 2027 — "Álbum 2027". Tokens e base copiados de design/mockups/estilo.css. */

:root {
  --papel: #EEF0E9;
  --figurinha: #FCFDFB;
  --garrafa: #123524;
  --canarinho: #FFCF2E;
  --grafite: #56655C;

  /* Tinta: todo texto comum (nomes, valores, títulos, números). Neutra e fixa, não muda com o clube. */
  --tinta: #17201B;
  --linha: color-mix(in srgb, var(--tinta) 14%, transparent);

  /* Clube: só a moldura (faixa do topo, faixa do nome na figurinha, cabeçalho de página, botão principal,
     detalhes). Neutro aqui; js/ui/tema.js troca pelas cores do clube escolhido. */
  --clube: var(--garrafa);
  --clube-sobre: var(--figurinha);
  --clube-destaque: var(--canarinho);
  --clube-tinta: var(--garrafa);
  --camisa: linear-gradient(180deg, #1F8A4C 0 72%, var(--canarinho) 72% 100%);

  /* Estados: fixos, iguais em todo clube, sempre com texto ou ícone (nunca só a cor). */
  --st-vendido: #C0262D;
  --st-vendido-fundo: #FBE9E9;
  --st-emprestado: #2340B8;
  --st-emprestado-fundo: #E8ECFA;
  --st-chegou: #1C7A43;
  --st-chegou-fundo: #E5F3EA;
  --st-dispensado: #56655C;
  --st-dispensado-fundo: #ECEEEA;
  --st-alerta: #8A5A00;
  --st-alerta-marca: #E9A400;
  --st-alerta-fundo: #FFF4D6;
  --st-negativo: #C0262D;
  --st-ok: #1C7A43;

  /* Nomes antigos da paleta: o vermelho e o verde são os dos estados; o azul-caneta é o link e o foco. */
  --carimbo: var(--st-vendido);
  --gramado: var(--st-chegou);
  --caneta: var(--st-emprestado);

  --fonte: "Archivo", system-ui, sans-serif;

  --t-12: 0.75rem;
  --t-14: 0.875rem;
  --t-16: 1rem;
  --t-20: 1.25rem;
  --t-25: 1.5625rem;
  --t-31: 1.9375rem;
  --t-39: 2.4375rem;
  --t-61: 3.8125rem;

  /* Forma: hierarquia física. Só a figurinha é "levantada" (canto de 7 px e a sombra de papel). */
  --raio-fig: 7px;
  --raio-botao: 8px;
  --raio-painel: 2px;
  --raio-folha: 14px;
  --sombra-papel: 0 1px 0 rgba(0, 0, 0, 0.08), 0 2px 6px -3px rgba(0, 0, 0, 0.25);

  /* Respiro lateral do #app; as faixas de ponta a ponta (topo, barra, pôster) usam o negativo dele. */
  --pad: 16px;
}

* { box-sizing: border-box; }

html { background: var(--papel); }

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: var(--t-16);
  font-stretch: 100%;
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
}

/* Contêiner fluido: a largura do celular, e no computador até 1160 px. As telas de formulário (e as de uma coluna
   só: simular, pausa) ficam numa coluna de ~600 px centrada. */
#app {
  max-width: 1160px;
  min-height: 100vh;
  margin: 0 auto;
  padding: var(--pad);
  overflow-x: hidden;
  overflow-x: clip; /* clip não cria contêiner de rolagem: o topo e a barra do álbum ficam sticky */
}
#app:is([data-route="inicio"], [data-route="clube"], [data-route="temporada"], [data-route="busca"],
  [data-route="leilao"], [data-route="simular"], [data-route="pausa"], [data-route="saidas"]) {
  max-width: calc(600px + 2 * var(--pad));
}
/* A escalação: uma coluna de 480 px; no computador, o campo e o banco lado a lado (até 960 px) */
#app[data-route="escalacao"] { max-width: calc(480px + 2 * var(--pad)); }
@media (min-width: 1024px) {
  #app[data-route="escalacao"] { max-width: calc(960px + 2 * var(--pad)); }
}
@media (min-width: 1024px) {
  :root { --pad: 32px; }
}
/* A tela final: o pôster e o que vem abaixo dele numa coluna de leitura (900 px), sem esticar texto e gráfico */
#app[data-route="poster"] { max-width: calc(900px + 2 * var(--pad)); }

h1, h2, h3 { font-stretch: 62%; font-weight: 900; line-height: 1.05; margin: 0 0 12px; }
h1 { font-size: var(--t-39); color: var(--clube-tinta); }
h2 { font-size: var(--t-25); }

button { font: inherit; color: inherit; cursor: pointer; }
a { color: var(--caneta); }
/* Foco do teclado: azul-caneta no papel; nas superfícies do clube, a cor do texto sobre o clube. */
:focus-visible { outline: 3px solid var(--caneta); outline-offset: 2px; }
:is(.topo, .cab-clube, .simula, .poster) :focus-visible { outline-color: var(--clube-sobre); }

.num { font-variant-numeric: tabular-nums; }
.largo { font-stretch: 118%; }
.estreito { font-stretch: 62%; }

/* Botão principal: fundo do clube, texto sobre o clube. Secundário: contorno de tinta. */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px;
  border: 0; border-radius: var(--raio-botao);
  background: var(--clube); color: var(--clube-sobre);
  font-weight: 800; font-size: var(--t-16);
}
.botao:active { transform: scale(0.98); }
.botao--linha { background: transparent; color: var(--tinta); box-shadow: inset 0 0 0 2px var(--tinta); }
.botao--escuro { background: var(--clube); color: var(--clube-sobre); }

.carregando, .erro { text-align: center; color: var(--grafite); padding: 48px 0; }
.aviso {
  background: var(--figurinha); border-left: 4px solid var(--tinta);
  border-radius: var(--raio-painel); padding: 10px 12px; margin: 0 0 12px; font-size: var(--t-14); line-height: 1.4;
}
.aviso--ok { border-left-color: var(--st-ok); background: var(--st-chegou-fundo); }
.aviso--alerta { border-left-color: var(--st-alerta-marca); background: var(--st-alerta-fundo); color: var(--st-alerta); font-weight: 600; }

.rodape { margin-top: 32px; padding-top: 12px; border-top: 1px solid var(--linha); }
.rodape p { margin: 0; font-size: var(--t-12); line-height: 1.4; color: var(--grafite); overflow-wrap: anywhere; }

/* ---------- Telas 1-3: início, clube, temporada ---------- */
.botao--grande { min-height: 56px; font-size: var(--t-20); }
.botao--bloco { width: 100%; }

.inicio { padding: 28px 0 8px; }
/* A capa: três figurinhas de verdade, soltas em leque, como saem do pacotinho. */
.capa { display: flex; justify-content: center; margin: 0 0 30px; padding: 12px 0 6px; }
.capa .fig { width: 31%; max-width: 132px; flex: none; }
.capa .fig:nth-child(1) { transform: rotate(-7deg) translate(14px, 10px); }
.capa .fig:nth-child(2) { z-index: 1; transform: translateY(-6px); }
.capa .fig:nth-child(3) { transform: rotate(6deg) translate(-14px, 12px); }
.inicio__titulo { font-size: var(--t-61); background: var(--canarinho); display: inline; padding: 0 8px 0 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.inicio__sub { margin: 20px 0 28px; font-size: var(--t-20); line-height: 1.35; color: var(--grafite); }
.inicio__acoes { display: grid; gap: 12px; }

.voltar { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 4px; font-weight: 700; text-decoration: none; }
.meu-jogo { margin: 0 0 14px; }
.meu-jogo .botao { text-decoration: none; }

.escudo {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
}
.escudo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.escudo--sem { background: var(--clube); color: var(--clube-sobre); }
.escudo--sem::before { content: attr(data-ini); font-stretch: 100%; font-weight: 800; font-size: var(--t-14); }
.escudo--grande { width: 64px; height: 64px; }
.escudo--grande.escudo--sem::before { font-size: var(--t-20); }

.abas { display: flex; gap: 22px; margin: 0 0 14px; border-bottom: 1px solid var(--linha); }
.aba {
  display: flex; align-items: center; min-height: 44px; margin-bottom: -1px;
  border-bottom: 4px solid transparent; color: var(--grafite);
  font-stretch: 62%; font-weight: 900; font-size: var(--t-25); text-decoration: none;
}
.aba[aria-selected="true"] { color: var(--tinta); border-bottom-color: var(--tinta); }

.legenda { display: flex; justify-content: flex-end; gap: 0; margin: 0 12px 2px; font-size: var(--t-12); color: var(--grafite); }
.legenda span:first-child { width: 48px; text-align: right; }
.legenda span:last-child { width: 84px; text-align: right; }
.legenda-linha { margin: 0; color: var(--grafite); font-weight: 700; }

/* Lista de clubes: linhas no papel, cada uma com um retalho da camisa na borda. */
.clube-lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linha); }
.clube-lista li { border-bottom: 1px solid var(--linha); }
.clube-linha {
  display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 8px 12px 8px 2px;
  text-decoration: none; color: var(--tinta);
}
.clube-linha:active { background: color-mix(in srgb, var(--figurinha) 70%, transparent); }
.clube-linha__camisa { flex: none; width: 24px; height: 34px; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--linha); }
.clube-linha__nome { flex: 1; min-width: 0; font-stretch: 62%; font-weight: 800; font-size: var(--t-20); line-height: 1.05; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clube-linha__nivel { width: 48px; text-align: right; font-stretch: 122%; font-weight: 900; font-size: var(--t-20); }
.clube-linha__caixa { width: 84px; text-align: right; font-size: var(--t-14); font-weight: 700; color: var(--grafite); white-space: nowrap; }

.cab-clube {
  position: relative; display: flex; align-items: center; gap: 14px;
  margin: 4px calc(-1 * var(--pad)) 18px; padding: 16px var(--pad) 28px;
  background: var(--clube); color: var(--clube-sobre);
}
.cab-clube::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: var(--camisa); }
.cab-clube .escudo { padding: 8px; background: var(--figurinha); }
.cab-clube h1 { margin: 0; font-size: var(--t-31); color: inherit; }
.cab-clube .legenda-linha { color: inherit; opacity: 0.75; }
.config { display: grid; gap: 14px; }
.config fieldset { margin: 0; padding: 12px 0 4px; border: 0; border-top: 1px solid var(--linha); }
.config legend { float: left; width: 100%; padding: 0; margin: 0 0 2px; font-stretch: 62%; font-weight: 900; font-size: var(--t-20); }
.config legend + * { clear: both; }
.opcao { display: flex; align-items: center; gap: 12px; min-height: 48px; cursor: pointer; }
.opcao[hidden] { display: none; }
.opcao input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--tinta); }
.opcao input:disabled + span { color: var(--grafite); }
.opcao--patro { align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--linha); }
.opcao--patro input { margin-top: 2px; }
.opcao--patro small { display: block; margin-top: 2px; color: var(--grafite); font-size: var(--t-14); line-height: 1.4; overflow-wrap: anywhere; }

.caixa { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px; }
.caixa .botao { margin-left: auto; min-height: 40px; }
.caixa-campo { display: grid; gap: 4px; padding-bottom: 8px; }
.caixa-campo[hidden] { display: none; }
.caixa-campo input { width: 100%; max-width: 100%; box-sizing: border-box; min-height: 48px; padding: 0 12px; font: inherit; border: 2px solid var(--tinta); border-radius: 0; background: transparent; color: var(--tinta); }
.caixa { margin: 6px 0 0; }
.caixa strong { font-size: var(--t-25); }

/* ---------- Task 3: álbum (figurinha, carimbos, vaga, folha, contadores, feed) ---------- */
/* Portado de design/mockups/estilo.css. As cores que o mockup tinha fora da paleta
   (#C9D1C5, #5E6B63, #4A564F) viraram mistura de tokens ou o grafite. */

/* Figurinha */
.fig {
  position: relative;
  display: block; width: 100%; min-width: 0;
  padding: 4px; border: 0;
  background: var(--figurinha); color: var(--tinta);
  border-radius: var(--raio-fig);
  box-shadow: var(--sombra-papel);
  text-align: left;
}
button.fig:active { transform: scale(0.97); }
.fig__foto {
  position: relative; display: block;
  aspect-ratio: 3 / 3.35;
  border-radius: 4px 4px 0 0; overflow: hidden;
  background: color-mix(in srgb, var(--grafite) 30%, var(--papel));
}
.fig__foto > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; display: block; }
.fig__foto > img.fig__sil { object-fit: contain; object-position: 50% 100%; padding: 22% 16% 0; opacity: 0.5; }
.fig__escudo {
  position: absolute; left: 4px; top: 4px;
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; padding: 3px;
  background: var(--figurinha);
  box-shadow: 0 0 0 1px var(--linha);
}
.fig__escudo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.fig__escudo.escudo--sem { background: var(--clube); color: var(--clube-sobre); padding: 0; }
.fig__escudo.escudo--sem::before { content: attr(data-ini); font-weight: 800; font-size: 0.5625rem; }
.fig__ovr {
  position: absolute; right: 0; top: 0;
  background: var(--canarinho); color: var(--tinta);
  font-stretch: 118%; font-weight: 900; font-size: var(--t-20); line-height: 1;
  padding: 5px 6px 6px 7px;
  border-radius: 0 4px 0 7px;
  font-variant-numeric: tabular-nums;
}
/* A faixa do nome: a moldura do clube na figurinha */
.fig__faixa { display: block; background: var(--clube); color: var(--clube-sobre); padding: 5px 6px 6px; }
.fig__nome {
  display: block;
  font-stretch: 62%; font-weight: 800; font-size: var(--t-16); line-height: 1.05;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fig__base {
  display: flex; justify-content: space-between; align-items: baseline; gap: 3px;
  padding: 5px 1px 2px;
  font-size: var(--t-12); line-height: 1; font-stretch: 80%;
  white-space: nowrap;
}
.fig__base > span:first-child { flex: none; }
.fig__pos { font-weight: 800; }
.fig__idade { color: var(--grafite); margin-left: 2px; font-variant-numeric: tabular-nums; }
.fig__valor { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 700; font-stretch: 75%; font-variant-numeric: tabular-nums; }

/* Estados */
.fig--chegou .fig__faixa { background: var(--st-chegou); color: var(--figurinha); }
.fig__tag {
  position: absolute; left: 0; bottom: 0; max-width: 100%;
  background: var(--st-chegou); color: var(--figurinha);
  font-weight: 800; font-size: var(--t-12); font-stretch: 85%; line-height: 1.2;
  padding: 3px 7px 3px 6px;
  border-radius: 0 6px 0 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fig__tag--de {
  background: var(--st-emprestado); font-stretch: 75%;
  white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  /* o overflow corta na borda do padding: com padding vertical, o topo de uma 3ª linha aparecia embaixo. O respiro
     vertical vira borda da cor do fundo (a borda não mostra conteúdo) e a altura fica em 2 linhas exatas */
  padding-block: 0; border-block: 3px solid var(--st-emprestado);
  max-height: calc(2 * 1.2em + 6px);
}
.fig--saiu .fig__foto > img { filter: grayscale(1) contrast(0.9); opacity: 0.75; }
.fig--saiu .fig__faixa { background: var(--st-dispensado); color: var(--figurinha); }
.fig--emprestado .fig__faixa { background: var(--st-emprestado); color: var(--figurinha); }

/* Carimbo: o único elemento "barulhento" da UI. Caixa alta só aqui. */
.carimbo {
  position: absolute; left: 50%; top: 42%;
  transform: translate(-50%, -50%) rotate(-13deg);
  border: 2.5px solid currentColor;
  box-shadow: inset 0 0 0 2px var(--figurinha), inset 0 0 0 3.5px currentColor;
  border-radius: 5px;
  padding: 5px 8px 4px;
  font-stretch: 125%; font-weight: 900; font-size: var(--t-14); letter-spacing: 0.04em;
  line-height: 1; text-transform: uppercase; white-space: nowrap;
  background: rgba(252, 253, 251, 0.9);
  pointer-events: none;
}
.carimbo--vendido { color: var(--st-vendido); }
.carimbo--emprestado { color: var(--st-emprestado); font-size: var(--t-12); font-stretch: 80%; letter-spacing: 0.02em; }
.carimbo--dispensado { color: var(--st-dispensado); font-size: var(--t-12); font-stretch: 80%; letter-spacing: 0.02em; }
.carimbo--batida { animation: batida 380ms cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes batida {
  0% { transform: translate(-50%, -50%) rotate(-13deg) scale(2.4); opacity: 0; }
  100% { transform: translate(-50%, -50%) rotate(-13deg) scale(1); opacity: 1; }
}

/* Vaga vazia do álbum = botão de contratar */
.vaga {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 100%; min-width: 0; padding: 10px 6px;
  border: 2px dashed color-mix(in srgb, var(--tinta) 32%, transparent); border-radius: var(--raio-fig);
  background: transparent; color: var(--tinta); text-decoration: none;
  font-weight: 800; font-size: var(--t-14);
  text-align: center; line-height: 1.15;
}
.vaga:active { transform: scale(0.97); }
.vaga img { width: 44%; opacity: 0.28; }
.vaga small { display: block; font-weight: 500; color: var(--grafite); font-size: var(--t-12); }

/* Tela de elenco */
.album { display: flex; flex-direction: column; min-height: calc(100vh - 2 * var(--pad)); }
.album > .rodape { margin-top: auto; padding-top: 12px; }
/* Capa do álbum: a faixa com o desenho da camisa e o bloco na cor do clube. */
.topo {
  position: sticky; top: 0; z-index: 2;
  margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) 0; padding: 14px var(--pad) 24px;
  background: var(--clube); color: var(--clube-sobre);
}
/* A barra da camisa fecha a capa embaixo, encostada no papel, onde o desenho aparece inteiro. */
.topo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: var(--camisa); }
.topo .voltar { color: inherit; }
.topo__clube { display: flex; align-items: center; gap: 12px; }
.topo__escudo { width: 44px; height: 44px; padding: 5px; background: var(--figurinha); }
.topo__id { min-width: 0; flex: 1; }
.topo__nome { font-size: var(--t-25); line-height: 0.95; margin: 0; color: inherit; overflow-wrap: anywhere; }
.topo__serie { font-size: var(--t-14); font-weight: 600; opacity: 0.8; margin-top: 3px; }
.topo__caixa { flex: none; text-align: right; }
.topo__caixa > span { display: block; font-size: var(--t-14); opacity: 0.8; }
.topo__caixa strong { display: block; font-stretch: 118%; font-weight: 800; font-size: var(--t-20); line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.topo__caixa--neg strong { display: inline-block; margin-top: 2px; padding: 0 5px; border-radius: var(--raio-painel); background: var(--figurinha); color: var(--st-negativo); }
.topo__caixa .sem-limite { display: inline-block; margin-top: 2px; padding: 1px 6px; border-radius: 999px; background: var(--figurinha); color: var(--tinta); font-size: var(--t-12); font-weight: 700; }

.placar { display: flex; margin: 12px 0 0; padding-top: 9px; border-top: 1px solid color-mix(in srgb, var(--clube-sobre) 22%, transparent); font-size: var(--t-14); }
.placar span { flex: 1; }
.placar span + span { padding-left: 12px; border-left: 1px solid color-mix(in srgb, var(--clube-sobre) 22%, transparent); }
.placar strong { margin-right: 3px; font-stretch: 118%; font-weight: 900; font-size: var(--t-20); font-variant-numeric: tabular-nums; }
.topo__desafio { margin: 8px 0 0; font-size: var(--t-14); line-height: 1.3; }
.topo__desafio strong { font-weight: 800; }

.secao { padding: 22px 0 4px; }
.secao__cab { margin: 0 0 10px; font-size: var(--t-25); line-height: 1; }
.secao--fechada .secao__cab { margin-bottom: 0; }
/* o cabeçalho simples (o Banco da escalação): título e contagem, sem barra */
div.secao__cab { display: flex; align-items: baseline; gap: 8px; font-size: inherit; }
div.secao__cab h2 { font-size: var(--t-25); line-height: 1; margin: 0; }
div.secao__cab span { font-weight: 700; color: var(--grafite); font-size: var(--t-14); font-variant-numeric: tabular-nums; }
/* A barra de cada posição: a aba de página do álbum (faixa do clube à esquerda, título condensado, contagem, seta
   e um fio embaixo). Toca para minimizar ou abrir. */
.secao__barra {
  position: relative;
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 8px 4px 8px 18px;
  border: 0; border-bottom: 1px solid var(--linha); border-radius: 0; background: transparent; color: var(--tinta);
  font: inherit; text-align: left; cursor: pointer;
}
.secao__barra::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 6px; background: var(--clube);
}
.secao__barra:hover { background: color-mix(in srgb, var(--tinta) 4%, transparent); }
.secao__barra:focus-visible { outline: 3px solid var(--caneta); outline-offset: 2px; }
.secao__titulo { font-size: var(--t-25); line-height: 1; color: var(--tinta); }
.secao__n { font-stretch: 100%; font-weight: 700; color: var(--grafite); font-size: var(--t-14); font-variant-numeric: tabular-nums; }
.secao__seta {
  margin-left: auto; width: 32px; height: 32px; color: var(--tinta);
  display: grid; place-items: center;
}
.secao__seta::before {
  content: ""; width: 9px; height: 9px; margin-top: 4px;
  border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor;
  transform: rotate(-135deg); transition: transform 160ms ease, margin 160ms ease;
}
.secao--fechada .secao__seta::before { transform: rotate(45deg); margin-top: -4px; }
@media (prefers-reduced-motion: reduce) { .secao__seta::before { transition: none; } }
.secao__vazia { margin: 0; font-size: var(--t-14); color: var(--grafite); }
/* Celular: 2 figurinhas por linha, com o nome e o valor legíveis; telas largas: mais por linha (mínimo 150 px) */
.grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; align-items: stretch; }
@media (min-width: 640px) {
  .grade { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px 14px; }
}
.grade .fig__ovr { font-size: var(--t-25); padding: 6px 7px 7px 8px; }
.grade .fig__escudo { width: 32px; height: 32px; left: 5px; top: 5px; }
.grade .fig__faixa { padding: 6px 7px 7px; }
.grade .fig__nome { font-size: var(--t-20); }
.grade .fig__base { padding: 7px 2px 3px; font-size: var(--t-14); font-stretch: 100%; }
.grade .fig__idade { margin-left: 4px; }
.grade .fig__valor { font-stretch: 100%; }
.grade .fig__tag { font-size: var(--t-14); }
.grade .vaga { font-size: var(--t-16); }
.grade .vaga small { font-size: var(--t-14); }

.noticias { padding: 22px 0 0; }
.noticias h2 { font-size: var(--t-25); line-height: 1; margin: 0 0 10px; }
.ano { padding: 22px 0 0; }
.ano h2 { font-size: var(--t-25); line-height: 1; margin: 0 0 10px; }
.ano__lista { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; margin: 0; padding: 4px 0; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); font-size: var(--t-14); }
.ano__lista dt { color: var(--grafite); min-width: 0; }
.ano__lista dt small { display: block; font-size: var(--t-14); line-height: 1.35; overflow-wrap: anywhere; }
.ano__lista dd { margin: 0; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ano__lista dt.ano__total { color: var(--tinta); font-weight: 800; }
.ano__lista dd.ano__total { font-stretch: 118%; font-weight: 800; font-size: var(--t-20); line-height: 1.1; }
.ano__lista dd.ano__total--neg { color: var(--st-negativo); }
.ano__alerta { margin: 10px 0 0; padding: 8px 10px 8px 12px; border-radius: var(--raio-painel); background: var(--st-alerta-fundo); color: var(--st-alerta); font-size: var(--t-14); font-weight: 700; line-height: 1.4; border-left: 4px solid var(--st-alerta-marca); }
.ano__patro { margin: 10px 0 0; font-size: var(--t-14); line-height: 1.35; color: var(--grafite); overflow-wrap: anywhere; }
.num--neg { color: var(--st-negativo); }
.feed { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linha); }
.feed li {
  padding: 10px 2px;
  border-bottom: 1px solid var(--linha);
  font-size: var(--t-14); line-height: 1.3; overflow-wrap: anywhere;
}
.feed--vazio { margin: 0; font-size: var(--t-14); color: var(--grafite); }

.barra {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; align-items: center; gap: 8px;
  margin: 20px calc(-1 * var(--pad)) calc(-1 * var(--pad)); padding: 10px var(--pad) 14px;
  background: var(--papel);
  border-top: 1px solid var(--linha);
}
.barra__conta { flex: none; font-size: var(--t-14); line-height: 1.15; color: var(--grafite); }
.barra__conta strong { display: block; font-stretch: 118%; font-weight: 900; font-size: var(--t-20); color: var(--tinta); font-variant-numeric: tabular-nums; }
.barra .botao { flex: 1; min-width: 0; padding: 0 10px; text-decoration: none; }
.barra .botao--principal { flex: 1.25; }
/* No computador os botões da barra não esticam por 1100 px: ficam à direita, com a contagem à esquerda */
@media (min-width: 768px) {
  .barra:not(.barra--escala) .botao { flex: 0 1 240px; }
  .barra:not(.barra--escala) .botao--principal { flex: 0 1 300px; }
  .barra:not(.barra--escala) .barra__conta { margin-right: auto; }
}
/* Com pendência, a barra diz qual (o botão segue ativo: a escalação também bloqueia e explica) */
.barra__pend { display: block; margin-top: 2px; color: var(--st-alerta); font-weight: 700; }
.barra__conta--alerta .barra__pend::before {
  content: ""; display: inline-block; width: 0; height: 0; margin-right: 5px; vertical-align: -1px;
  border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 11px solid var(--st-alerta-marca);
}

/* Leitor de tela apenas */
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Etapas da temporada: uma sequência compacta, a atual sublinhada em tinta, as feitas com visto */
.etapas { margin: 12px 0 0; min-width: 0; }
.etapas__lista {
  display: flex; gap: 2px; margin: 0; padding: 0 0 2px; list-style: none;
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
  border-bottom: 1px solid var(--linha);
}
.etapas__lista::-webkit-scrollbar { display: none; }
.etapas__item {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  min-height: 36px; padding: 0 8px; margin-bottom: -3px;
  border-bottom: 3px solid transparent;
  font-size: var(--t-14); font-weight: 600; color: var(--grafite); white-space: nowrap;
}
.etapas__item:first-child { padding-left: 0; }
.etapas__item + .etapas__item::before {
  content: ""; width: 10px; height: 1.5px; margin-right: 6px; background: color-mix(in srgb, var(--tinta) 30%, transparent);
}
.etapas__item--atual { color: var(--tinta); font-weight: 800; border-bottom-color: var(--tinta); }
.etapas__visto {
  width: 10px; height: 6px; margin: -3px 1px 0 0;
  border-left: 2.5px solid var(--st-ok); border-bottom: 2.5px solid var(--st-ok); transform: rotate(-45deg);
}
.etapas__frase { margin: 8px 0 0; font-size: var(--t-14); line-height: 1.4; color: var(--grafite); }

/* Pendências do elenco: a contagem sempre; o alerta com frase e ação, ou o visto de pronto */
.pend { margin: 16px 0 0; }
.pend__conta { margin: 0 0 8px; font-size: var(--t-14); line-height: 1.4; color: var(--grafite); font-variant-numeric: tabular-nums; }
.pend__icone { flex: none; width: 24px; height: 24px; }
.pend__ok { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--t-16); font-weight: 700; color: var(--tinta); }
.pend__alerta { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px; font-size: var(--t-16); }
.pend__itens { flex: 1; min-width: 0; margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.pend__itens p { margin: 0 0 8px; color: var(--tinta); font-weight: 600; line-height: 1.4; }
.pend__acao { min-height: 44px; padding: 0 14px; text-decoration: none; font-size: var(--t-14); background: var(--figurinha); }

/* Álbum | Lista e a ordem da Lista */
.vista { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 18px 0 0; scroll-margin-top: 150px; }
.vista__botoes { display: inline-flex; }
.vista__botao {
  min-height: 44px; min-width: 88px; padding: 0 16px;
  border: 2px solid var(--tinta); background: transparent; color: var(--tinta);
  font-weight: 700; font-size: var(--t-16);
}
.vista__botao:first-child { border-radius: var(--raio-botao) 0 0 var(--raio-botao); }
.vista__botao + .vista__botao { margin-left: -2px; border-radius: 0 var(--raio-botao) var(--raio-botao) 0; }
.vista__botao[aria-pressed="true"] { background: var(--tinta); color: var(--figurinha); }
.vista__botao:focus-visible { position: relative; z-index: 1; }
.vista__ordem { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-14); font-weight: 600; color: var(--grafite); }
.vista__ordem select {
  min-height: 44px; padding: 0 10px; font: inherit; font-size: var(--t-16); font-weight: 700; color: var(--tinta);
  border: 2px solid var(--tinta); border-radius: var(--raio-botao); background: var(--figurinha);
}

/* A Lista: linhas compactas para comparar força, nome, posição, idade e valor (o mesmo toque abre a folha) */
.lista-el { list-style: none; margin: 0; padding: 0; }
.lista-el > li { border-bottom: 1px solid var(--linha); }
.linha-el {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  width: 100%; min-height: 60px; padding: 8px 4px 8px 0;
  border: 0; border-radius: 0; background: transparent; color: var(--tinta); text-align: left; font: inherit;
}
button.linha-el:hover { background: color-mix(in srgb, var(--tinta) 4%, transparent); }
.linha-el__ovr {
  display: grid; place-items: center; height: 40px; border-radius: 4px;
  background: var(--canarinho); color: var(--tinta);
  font-stretch: 118%; font-weight: 900; font-size: var(--t-20); font-variant-numeric: tabular-nums;
}
.linha-el__corpo { min-width: 0; display: grid; gap: 3px; }
.linha-el__nome { font-stretch: 62%; font-weight: 800; font-size: var(--t-20); line-height: 1.05; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha-el__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: var(--t-14); color: var(--grafite); font-variant-numeric: tabular-nums; }
.linha-el__pos { font-weight: 800; color: var(--tinta); }
.linha-el__valor { font-size: var(--t-16); font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.linha-el--saiu .linha-el__ovr { background: color-mix(in srgb, var(--grafite) 22%, var(--papel)); color: var(--grafite); }
.linha-el--saiu .linha-el__nome, .linha-el--saiu .linha-el__valor { color: var(--grafite); }
.linha-el__vaga {
  display: flex; align-items: center; min-height: 48px; padding: 0 4px;
  font-weight: 800; font-size: var(--t-14); color: var(--tinta); text-decoration: none;
}
.linha-el__vaga:hover { text-decoration: underline; }
/* Estado em texto, com a cor fixa do estado */
.est { display: inline-block; padding: 1px 6px; border-radius: var(--raio-painel); font-size: var(--t-14); font-weight: 700; line-height: 1.3; }
.est--vendido { color: var(--st-vendido); background: var(--st-vendido-fundo); }
.est--emprestado { color: var(--st-emprestado); background: var(--st-emprestado-fundo); }
.est--chegou { color: var(--st-chegou); background: var(--st-chegou-fundo); }
.est--dispensado { color: var(--st-dispensado); background: var(--st-dispensado-fundo); }

/* O corpo do álbum: no celular tudo empilha (pendências, vista, seções, o ano, notícias) e a barra fica embaixo;
   no computador, as seções à esquerda e um painel fixo à direita com o ano, as pendências, as notícias e a ação. */
.album__corpo { min-width: 0; }
.album__principal { min-width: 0; }
.pend--lado, .album__acao { display: none; }
@media (min-width: 1024px) {
  .album > .topo { position: relative; }
  .album__corpo { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 36px; align-items: start; }
  .album__lado {
    position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto;
    margin-top: 16px; padding: 16px; background: var(--figurinha); border-radius: var(--raio-painel);
  }
  .pend--celular { display: none; }
  .pend--lado { display: block; margin: 0 0 18px; }
  .album__lado .ano { padding-top: 0; }
  .album__lado .noticias { padding-top: 18px; }
  .album__lado .ano h2, .album__lado .noticias h2 { font-size: var(--t-20); }
  /* a próxima etapa abre o painel: à vista sem rolar */
  .album__acao { display: block; margin: 0 0 16px; padding: 0 0 16px; border-bottom: 1px solid var(--linha); }
  .album__acao .botao { text-decoration: none; }
  .album > .barra { display: none; }
}

/* Folha de ações (toque na figurinha) */
.travado, .travado body { overflow: hidden; }
.folha-fundo { position: fixed; inset: 0; z-index: 10; background: color-mix(in srgb, var(--tinta) 45%, transparent); }
.folha {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 11;
  max-width: 600px; max-height: 92vh; margin: 0 auto; overflow-y: auto;
  padding: 10px 16px 20px;
  background: var(--figurinha);
  border-radius: var(--raio-folha) var(--raio-folha) 0 0;
}
.folha--entra { animation: sobe 220ms ease-out both; }
@keyframes sobe { from { transform: translateY(100%); } to { transform: none; } }
.folha:focus { outline: none; }
.folha__alca { width: 40px; height: 4px; border-radius: 2px; background: var(--linha); margin: 0 auto 14px; }
.folha__topo { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; align-items: start; }
.folha__titulo { font-size: var(--t-31); line-height: 0.95; margin: 2px 0 6px; overflow-wrap: anywhere; }
.folha__sub { font-size: var(--t-14); color: var(--grafite); margin: 0 0 10px; line-height: 1.35; }
.ficha { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; font-size: var(--t-14); margin: 0; }
.ficha dt { color: var(--grafite); }
.ficha dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.folha .aviso { margin: 16px 0 0; }
.acoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.acao {
  display: flex; align-items: center; gap: 10px;
  min-height: 60px; padding: 10px 12px;
  border: 0; border-radius: var(--raio-botao);
  background: var(--papel);
  font-weight: 800; font-size: var(--t-16); text-align: left; line-height: 1.1;
}
.acao:active { transform: scale(0.98); }
.acao small { display: block; font-weight: 500; font-size: var(--t-14); line-height: 1.25; color: var(--grafite); margin-top: 2px; }
.acao__icone { width: 40px; height: 40px; flex: none; }
.acao--perigo { color: var(--st-vendido); }
.confirma { margin-top: 18px; }
.confirma > p { margin: 0 0 14px; font-size: var(--t-16); line-height: 1.35; font-weight: 600; }
.folha__botoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.botao--perigo { background: var(--st-vendido); color: var(--figurinha); box-shadow: none; }

.oferta {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 4px 10px; align-items: center;
  margin-top: 18px; padding: 12px;
  background: var(--papel); border-radius: var(--raio-painel);
  box-shadow: inset 0 0 0 2px var(--tinta);
}

.oferta > .escudo { grid-row: span 2; }
.oferta__clube { font-weight: 800; font-size: var(--t-16); line-height: 1.1; overflow-wrap: anywhere; }
.oferta__pais { font-size: var(--t-12); color: var(--grafite); }
.oferta__taxa { grid-row: span 2; text-align: right; font-size: var(--t-12); color: var(--grafite); }
.oferta__taxa strong { display: block; font-stretch: 118%; font-weight: 900; font-size: var(--t-20); color: var(--tinta); line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.oferta .folha__botoes { grid-column: 1 / -1; margin-top: 10px; }

/* ---------- Task 4: busca no mercado e folha de negociação ---------- */
.busca { display: flex; flex-direction: column; min-height: calc(100vh - 2 * var(--pad)); }
.busca > .rodape { margin-top: auto; }
.topo--busca { padding-bottom: 20px; } /* 12 px da faixa da camisa + 8: o caixa não fica sob a faixa */
.topo--busca .voltar { margin: -6px 0 0; }
.topo--busca .topo__nome { font-size: var(--t-31); flex: 1; min-width: 0; }

.filtros { margin: 12px 0 8px; border-block: 1px solid var(--linha); }
.filtros__botao {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 2px;
  border: 0; background: transparent; text-align: left; font-weight: 800;
}
.filtros__n {
  display: inline-block; min-width: 22px; margin-left: 8px; padding: 1px 6px; border-radius: 999px;
  background: var(--canarinho); font-stretch: 118%; font-size: var(--t-14); text-align: center; font-variant-numeric: tabular-nums;
}
.filtros__resumo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; font-size: var(--t-14); color: var(--grafite); }
.filtros__corpo { display: grid; gap: 12px; padding: 4px 2px 16px; }
.filtros__corpo[hidden] { display: none; }
.campo-f { display: grid; gap: 4px; margin: 0; min-width: 0; font-size: var(--t-14); }
.campo-f > span, .campo-f label > span { font-weight: 700; color: var(--grafite); font-size: var(--t-12); }
.campo-f input, .campo-f select, .contra input {
  width: 100%; min-height: 44px; padding: 0 10px; border: 0; border-radius: 8px;
  background: var(--papel); color: var(--tinta); font: inherit; font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 0 2px var(--linha);
}
.campo-f--duo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.campo-f--duo label { display: grid; gap: 4px; min-width: 0; }
.chips, .contra__atalhos { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  min-width: 48px; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--raio-botao);
  background: var(--papel); font-weight: 800; font-size: var(--t-14); box-shadow: inset 0 0 0 2px var(--linha);
}
.chip[aria-pressed="true"] { background: var(--clube); color: var(--clube-sobre); box-shadow: none; }
.contra__atalhos .chip { flex: 1; }
.botao:disabled { opacity: 0.45; cursor: default; }

.busca__conta { margin: 8px 0; font-size: var(--t-14); color: var(--grafite); }
.busca__vazio { padding: 24px 0; text-align: center; }
.busca__lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linha); }
.busca__lista > li { border-bottom: 1px solid var(--linha); }
.busca__mais { margin-top: 12px; }
.linha-busca {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 66px; padding: 6px 4px;
  border: 0; border-radius: 0; background: transparent; color: var(--tinta); text-align: left;
}
.linha-busca:active { background: color-mix(in srgb, var(--figurinha) 70%, transparent); }
.linha-busca--fechada { opacity: 0.6; }
.mini {
  position: relative; flex: none; width: 48px; height: 54px; overflow: hidden; border-radius: 4px;
  background: color-mix(in srgb, var(--grafite) 30%, var(--papel));
}
.mini > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; display: block; }
.mini > img.fig__sil { object-fit: contain; object-position: 50% 100%; padding: 14% 8% 0; opacity: 0.5; }
.mini__ovr {
  position: absolute; right: 0; top: 0; padding: 2px 4px 3px 5px; border-radius: 0 0 0 6px;
  background: var(--canarinho); font-stretch: 118%; font-weight: 900; font-size: var(--t-14); line-height: 1; font-variant-numeric: tabular-nums;
}
.linha-busca__corpo { flex: 1; min-width: 0; display: grid; gap: 2px; }
.linha-busca__nome { font-stretch: 62%; font-weight: 800; font-size: var(--t-20); line-height: 1.05; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha-busca__sub { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--t-12); color: var(--grafite); }
.linha-busca__clube { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha-busca__pos { flex: none; font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums; }
.escudo--mini { width: 18px; height: 18px; }
.escudo--mini.escudo--sem::before { font-size: 0.5rem; }
.linha-busca__tags { display: flex; flex-wrap: wrap; gap: 4px; }
.etiqueta { padding: 1px 6px; border-radius: var(--raio-painel); background: var(--st-chegou-fundo); color: var(--st-chegou); font-weight: 700; font-size: var(--t-12); line-height: 1.3; }
.etiqueta--porta { background: var(--st-vendido-fundo); color: var(--st-vendido); }
.linha-busca__valor { flex: none; max-width: 84px; font-stretch: 85%; font-weight: 800; font-size: var(--t-14); text-align: right; font-variant-numeric: tabular-nums; }

/* Negociação */
.neg__cab { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; align-items: center; }
.neg__foto { position: relative; display: block; width: 76px; height: 86px; overflow: hidden; border-radius: 6px; background: color-mix(in srgb, var(--grafite) 30%, var(--papel)); }
.neg__foto > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; display: block; }
.neg__foto > img.fig__sil { object-fit: contain; object-position: 50% 100%; padding: 14% 8% 0; opacity: 0.5; }
.neg__ovr { position: absolute; right: 0; top: 0; padding: 3px 6px 4px 7px; border-radius: 0 0 0 7px; background: var(--canarinho); font-stretch: 118%; font-weight: 900; font-size: var(--t-20); line-height: 1; font-variant-numeric: tabular-nums; }
.neg__quem .folha__titulo { font-size: var(--t-25); margin: 0 0 4px; }
.neg__clube { display: flex; align-items: center; gap: 8px; margin: 0 0 2px; font-weight: 700; font-size: var(--t-14); }
.neg__clube .escudo { width: 24px; height: 24px; }
.neg__clube .escudo--sem::before { font-size: 0.625rem; }
.neg__quem .folha__sub { margin: 0; }
.abas--neg { gap: 18px; margin: 14px 0 12px; }
.abas--neg .aba { padding: 0; border-width: 0 0 4px; background: none; font-size: var(--t-20); line-height: 1.1; }
.abas--neg .aba:disabled { opacity: 0.5; }
.neg__pedido { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 12px; padding: 12px 14px; border-radius: var(--raio-painel); background: var(--papel); box-shadow: inset 0 0 0 2px var(--tinta); }
.neg__pedido > span:first-child { font-size: var(--t-12); color: var(--grafite); }
.neg__pedido strong { grid-row: 2; grid-column: 1 / -1; font-stretch: 122%; font-weight: 900; font-size: var(--t-31); line-height: 1.1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.neg__tent { grid-row: 1; grid-column: 2; padding: 3px 10px; border-radius: 999px; background: var(--clube); color: var(--clube-sobre); font-weight: 800; font-size: var(--t-14); }
.neg__tent--zero { background: var(--st-negativo); color: var(--figurinha); }
.neg__valor { grid-column: 1 / -1; font-size: var(--t-14); color: var(--grafite); font-variant-numeric: tabular-nums; }

/* O livro-caixa da contratação: o dinheiro de agora (painel cheio) e a previsão de dezembro (fio tracejado) */
.impacto { display: grid; gap: 8px; margin-top: 14px; font-size: var(--t-14); line-height: 1.35; }
.impacto p { margin: 0; font-size: var(--t-14); line-height: 1.35; font-weight: 500; }
.impacto__bloco { padding: 10px 12px; border-radius: var(--raio-painel); background: var(--papel); }
.impacto__bloco--previsao { background: transparent; border: 2px dashed var(--linha); }
.impacto .impacto__rotulo { margin: 0 0 6px; font-weight: 800; color: var(--tinta); }
.impacto .impacto__bloco--previsao .impacto__rotulo { color: var(--grafite); }
.impacto__lista { display: grid; grid-template-columns: minmax(7em, 1fr) minmax(0, max-content); gap: 4px 12px; margin: 0; }
.impacto__lista dt { color: var(--grafite); }
.impacto__lista dd { margin: 0; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.impacto__lista .impacto__total { font-weight: 800; font-size: var(--t-16); }
.impacto__n { white-space: nowrap; }
.impacto__seta { color: var(--grafite); font-weight: 500; }
.impacto__mais { color: var(--grafite); font-weight: 500; white-space: nowrap; }
.impacto .impacto__nota { margin: 6px 0 0; color: var(--grafite); }
.impacto .impacto__alerta {
  display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 12px;
  border-left: 4px solid var(--st-alerta-marca); border-radius: var(--raio-painel); background: var(--st-alerta-fundo);
  color: var(--st-alerta); font-weight: 700; font-variant-numeric: tabular-nums;
}
.impacto__icone { flex: none; width: 20px; height: 20px; }
.neg__meta { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin: 12px 0 0; }
.neg__motivos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.neg__motivos li { padding: 2px 8px; border-radius: 4px; background: var(--papel); font-weight: 700; font-size: var(--t-12); box-shadow: inset 0 0 0 1px var(--linha); }
.neg__motivos .neg__nenhum { color: var(--grafite); font-weight: 500; }
.folha > .folha__botoes { margin-top: 14px; }
.contra { display: grid; gap: 10px; margin-top: 14px; }
.contra__valor { display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; gap: 8px; align-items: stretch; }
.contra__passo { min-height: 64px; border: 0; border-radius: var(--raio-botao); background: var(--papel); font-weight: 900; font-size: var(--t-31); box-shadow: inset 0 0 0 2px var(--tinta); }
.contra__passo:active { transform: scale(0.96); }
.contra__campo { display: grid; justify-items: center; align-content: center; gap: 2px; padding: 4px 6px; border-radius: var(--raio-botao); background: var(--papel); box-shadow: inset 0 0 0 2px var(--linha); }
.contra__num { font-stretch: 122%; font-weight: 900; font-size: var(--t-25); line-height: 1; font-variant-numeric: tabular-nums; }
.contra__pct, .contra__un { font-size: var(--t-12); color: var(--grafite); }
.contra__campo input { min-height: 36px; margin-top: 2px; text-align: center; font-weight: 700; }
.neg__desistir { margin-top: 10px; }
.chegou { display: flex; justify-content: center; padding: 18px 0 10px; }
.carimbo--chegou { position: static; transform: rotate(-9deg); color: var(--st-chegou); font-size: var(--t-25); padding: 8px 16px 7px; }
.carimbo--chegou.carimbo--batida { animation-name: batida-solta; }
@keyframes batida-solta {
  0% { transform: rotate(-9deg) scale(2.4); opacity: 0; }
  100% { transform: rotate(-9deg) scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Task 5: leilão (porta do mockup "Leilão") ---------- */
.leilao__nav { display: flex; justify-content: space-between; align-items: center; font-size: var(--t-14); }
.leilao__nav .voltar { margin: 0; }
.tentativa { display: flex; gap: 4px; align-items: center; color: var(--grafite); font-weight: 600; }
.tentativa i { width: 18px; height: 6px; border-radius: 3px; background: var(--linha); }
.tentativa i.usada { background: var(--tinta); }
.leilao__jogador { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 14px; padding-top: 8px; align-items: end; }
.leilao__titulo { margin: 0 0 8px; font-size: var(--t-39); line-height: 0.9; overflow-wrap: anywhere; outline: none; }
.leilao .aviso { margin: 14px 0 0; }

.pedido { margin-top: 18px; background: var(--figurinha); border-radius: var(--raio-painel); padding: 12px 14px 14px; }
.pedido__linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pedido__centro { min-width: 0; text-align: center; }
.pedido__rotulo { font-size: var(--t-14); color: var(--grafite); }
.pedido__valor { font-stretch: 118%; font-weight: 900; font-size: var(--t-31); font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; }
.pedido__pct { margin-top: 4px; font-size: var(--t-12); color: var(--grafite); font-variant-numeric: tabular-nums; }
.passo { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--papel); font-size: var(--t-20); font-weight: 800; color: var(--tinta); box-shadow: inset 0 0 0 2px var(--tinta); }
.passo:active { transform: scale(0.94); }
.atalhos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.atalhos .chip { flex: 1 1 auto; min-width: 0; padding: 0 10px; font-size: var(--t-12); }
.pedido__campo { display: grid; grid-template-columns: 1fr 110px; align-items: center; gap: 10px; margin-top: 10px; font-size: var(--t-12); color: var(--grafite); }
.pedido__campo input { min-height: 44px; width: 100%; padding: 0 10px; border: 0; border-radius: 8px; background: var(--papel); box-shadow: inset 0 0 0 2px var(--linha); font: inherit; font-size: var(--t-16); font-weight: 700; text-align: center; color: var(--tinta); font-variant-numeric: tabular-nums; }
.pedido--fixo .pedido__valor { font-size: var(--t-25); }
.leilao__abrir { margin-top: 14px; }

.lances { padding-top: 20px; }
.lances__cab { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.lances__cab h2 { margin: 0; line-height: 1; }
.aguardando { font-size: var(--t-12); color: var(--grafite); display: flex; align-items: center; gap: 6px; }
.aguardando::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--st-ok); animation: pulso 1.2s ease-in-out infinite; }
.aguardando--fim::before { display: none; }
@keyframes pulso { 50% { opacity: 0.25; } }
.lance { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; background: var(--figurinha); border-radius: var(--raio-painel); padding: 10px 12px; margin-bottom: 8px; animation: lance-entra 220ms ease-out both; }
@keyframes lance-entra { from { opacity: 0; transform: translateY(8px); } }
.lance > .escudo { grid-row: span 2; }
.lance__clube { font-weight: 800; font-size: var(--t-16); line-height: 1.1; overflow-wrap: anywhere; }
.lance__pais { font-size: var(--t-12); color: var(--grafite); }
.lance__valor { font-stretch: 118%; font-weight: 900; font-size: var(--t-20); text-align: right; font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; }
.lance__dif { font-size: var(--t-12); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.lance__dif--mais { color: var(--st-ok); }
.lance__dif--menos { color: var(--st-negativo); }
/* régua: o lance contra o preço pedido (o risco vermelho é o pedido) */
.regua { grid-column: 1 / -1; position: relative; height: 6px; border-radius: 3px; background: var(--papel); margin-top: 6px; }
.regua i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--tinta); }
.regua::after { content: ""; position: absolute; left: 80%; top: -3px; bottom: -3px; width: 2px; background: var(--st-vendido); }
.lance--melhor { box-shadow: inset 0 0 0 2px var(--tinta); }
.lance--melhor .regua i { background: var(--st-ok); }
.lance__aceitar { grid-column: 1 / -1; margin-top: 8px; }
.leilao__fim { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 8px; }
.leilao__fim:empty { display: none; }
.leilao__fim .botao { flex: 1 1 140px; text-decoration: none; }
.leilao__msg { margin: 18px 0 0; padding: 14px; border-radius: var(--raio-painel); background: var(--figurinha); font-weight: 700; font-size: var(--t-16); line-height: 1.35; }
.recado { display: none; margin-top: 14px; padding: 12px 14px; border-left: 4px solid var(--st-ok); border-radius: var(--raio-painel); background: var(--st-chegou-fundo); color: var(--tinta); font-weight: 700; font-size: var(--t-14); line-height: 1.4; }
.leilao--vendido .recado { display: block; }
.leilao--vendido .lances, .leilao--vendido .leilao__fim, .leilao--vendido .pedido { display: none; }

/* o carimbo VENDIDO batendo na figurinha: 1,6 para 1, com leve rotação (a única animação de destaque) */
.carimbo--venda { font-size: var(--t-16); animation: batida-venda 400ms cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes batida-venda {
  0% { transform: translate(-50%, -50%) rotate(-22deg) scale(1.6); opacity: 0; }
  100% { transform: translate(-50%, -50%) rotate(-13deg) scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .carimbo--venda, .lance, .aguardando::before { animation: none; }
}

/* ---------- Task 6: escalação (campinho do pôster + banco) ---------- */
.escala { display: flex; flex-direction: column; min-height: calc(100vh - 2 * var(--pad)); }
.escala > .rodape { margin-top: auto; }
.escala__topo { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.escala__topo h1 { margin: 0; font-size: var(--t-31); }
.escala > .etapas { margin: 0 0 14px; }
.formacoes { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; margin-bottom: 10px; }
.formacoes--mais { grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0 0 10px; }
.formacoes--mais[hidden] { display: none; }
.escala__acoes { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; margin-bottom: 10px; }
.escala__acoes .botao { min-width: 0; padding-inline: 8px; font-size: var(--t-14); }
.escala__seta { margin-left: 6px; }
.campinho__dica { margin: 12px 0 8px; font-size: var(--t-14); line-height: 1.4; color: var(--grafite); }
.campinho__dica strong { display: block; margin-top: 2px; font-size: var(--t-16); color: var(--tinta); }
.formacoes .chip { min-width: 0; padding: 0 2px; font-stretch: 100%; font-size: var(--t-14); }

.campinho {
  position: relative; aspect-ratio: 1 / 1.32; border-radius: 10px;
  background:
    repeating-linear-gradient(180deg, rgba(252, 253, 251, 0.035) 0 12.5%, transparent 12.5% 25%),
    #18432E;
  border: 1.5px solid rgba(252, 253, 251, 0.22);
}
.campinho::before { /* grande área */
  content: ""; position: absolute; left: 26%; right: 26%; bottom: 0; height: 15%;
  border: 1.5px solid rgba(252, 253, 251, 0.22); border-bottom: 0; pointer-events: none;
}
.campinho::after { /* linha do meio */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12%;
  border-bottom: 1.5px solid rgba(252, 253, 251, 0.22); pointer-events: none;
}
.slot {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  width: 72px; min-height: 66px; padding: 0; border: 0; background: none; color: var(--figurinha); text-align: center;
}
.slot:active .slot__foto { transform: scale(0.94); }
.slot:not([data-slot="0"]) { touch-action: none; cursor: grab; }
.slot--arrastando { z-index: 5; cursor: grabbing; }
.slot--arrastando .slot__foto { transform: scale(1.12); box-shadow: 0 0 0 3px var(--canarinho); }
.slot:focus-visible { outline-color: var(--canarinho); }
.slot__foto {
  position: relative; display: block; width: 44px; height: 44px; border-radius: 50%; overflow: hidden;
  background: color-mix(in srgb, var(--grafite) 45%, var(--papel));
  box-shadow: 0 0 0 2.5px var(--figurinha);
}
.slot__foto > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; display: block; }
.slot__foto > img.fig__sil { object-fit: contain; object-position: 50% 100%; padding: 14% 8% 0; opacity: 0.55; }
.slot--fora .slot__foto { box-shadow: 0 0 0 3px var(--st-alerta-marca); }
.slot--vazio .slot__foto { background: transparent; box-shadow: none; border: 2px dashed rgba(252, 253, 251, 0.7); display: grid; place-items: center; }
.slot__mais { font-weight: 900; font-size: var(--t-25); line-height: 1; }
.slot__ovr {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  min-width: 26px; padding: 1px 4px 2px; border-radius: 6px 6px 0 0; text-align: center;
  background: var(--canarinho); color: var(--tinta);
  font-stretch: 118%; font-weight: 900; font-size: var(--t-12); line-height: 1.1; font-variant-numeric: tabular-nums;
}
.slot__nome {
  max-width: 100%; margin-top: 3px; font-stretch: 62%; font-weight: 800; font-size: var(--t-14); line-height: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px color-mix(in srgb, var(--tinta) 80%, transparent);
}
.slot__pos { font-size: 0.6875rem; font-weight: 800; line-height: 1; opacity: 0.8; }
.slot__pos--fora {
  display: inline-flex; align-items: center; gap: 3px; margin-top: 1px; padding: 2px 5px; border-radius: 4px; opacity: 1;
  background: var(--st-alerta-fundo); color: var(--st-alerta); font-variant-numeric: tabular-nums;
}
.slot__pos--fora::before, .fora__lista li::before { /* o triângulo de alerta: a cor nunca vem sozinha */
  content: ""; flex: none; width: 0; height: 0;
  border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid var(--st-alerta-marca);
}
.fora { margin-top: 10px; }
.fora__lista {
  list-style: none; margin: 0 0 8px; padding: 10px 12px; display: grid; gap: 8px;
  border-left: 4px solid var(--st-alerta-marca); border-radius: var(--raio-painel); background: var(--st-alerta-fundo);
  color: var(--st-alerta); font-size: var(--t-14); line-height: 1.4; font-weight: 600; font-variant-numeric: tabular-nums;
}
.fora__lista li { display: block; }
.fora__lista li::before { display: inline-block; margin-right: 6px; vertical-align: 0; }
.fora__lista strong { color: var(--tinta); }
.fora__forca { white-space: nowrap; }
.fora__motivo { display: block; margin-top: 2px; color: var(--tinta); font-weight: 500; }
.fora__regra { margin: 0; font-size: var(--t-14); line-height: 1.4; color: var(--grafite); }
.etiqueta--alerta { background: var(--st-alerta-fundo); color: var(--st-alerta); font-variant-numeric: tabular-nums; }

.banco { padding-top: 22px; }
@media (min-width: 1024px) {
  .escala__corpo { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: 0 40px; align-items: start; }
  .escala__corpo > .banco { padding-top: 0; }
  .escala > .etapas { max-width: 720px; }
  .barra.barra--escala { align-items: flex-end; }
  .barra.barra--escala .barra__erros { align-self: stretch; }
  .barra.barra--escala .botao { flex: none; width: 360px; }
}
.banco__dica { margin: -4px 0 10px; font-size: var(--t-14); line-height: 1.35; color: var(--grafite); }
.banco__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.reserva {
  display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 6px 6px 6px 10px;
  border-radius: var(--raio-painel); background: var(--figurinha);
}
.reserva__n { flex: none; width: 18px; font-stretch: 118%; font-weight: 900; font-size: var(--t-14); color: var(--grafite); text-align: right; }
.reserva__corpo { flex: 1; min-width: 0; display: grid; gap: 2px; }
.reserva__setas { flex: none; display: flex; gap: 4px; }
.seta {
  width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--papel);
  font-weight: 900; font-size: var(--t-20); line-height: 1; color: var(--tinta); box-shadow: inset 0 0 0 2px var(--tinta);
}
.seta:active { transform: scale(0.94); }
.seta:disabled { opacity: 0.3; cursor: default; }

.barra--escala { flex-direction: column; align-items: stretch; gap: 8px; }
/* as pendências da escalação: alerta (texto âmbar escuro, marca âmbar, fundo claro) */
.barra__erros { list-style: none; margin: 0; padding: 8px 10px; border-left: 4px solid var(--st-alerta-marca); border-radius: var(--raio-painel); background: var(--st-alerta-fundo); color: var(--st-alerta); font-size: var(--t-14); line-height: 1.35; font-weight: 600; }

.barra__erros li + li { margin-top: 3px; }

.folha--lista { display: flex; flex-direction: column; max-height: 88vh; }
.pick__cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pick__cab .folha__titulo { margin-bottom: 4px; }
.pick__fechar { flex: none; min-height: 44px; padding: 0 14px; }
.folha--lista .busca__lista { overflow-y: auto; padding: 2px 2px 8px; }
.pick__rende { flex: none; min-width: 52px; text-align: right; font-size: var(--t-12); color: var(--grafite); line-height: 1.1; }
.pick__rende strong { display: block; font-stretch: 118%; font-weight: 900; font-size: var(--t-20); color: var(--tinta); font-variant-numeric: tabular-nums; }
.linha-busca[aria-current="true"] { box-shadow: inset 0 0 0 2px var(--tinta); }
.etiqueta--neutra { background: var(--papel); color: var(--tinta); box-shadow: inset 0 0 0 1px var(--linha); }

/* ---------- Task 7: simular e o pôster do fim do ano (mockup "Dashboard final") ---------- */
.simula, .pagina-poster { margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) 0; }
.simula [hidden] { display: none !important; }

/* Simular: a tabela andando, no verde do pôster */
.simula {
  display: flex; flex-direction: column; min-height: 100vh;
  padding: 22px 18px 24px;
  background: var(--clube); color: var(--clube-sobre);
}
.simula__cab { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; }
.simula__escudo { width: 56px; height: 56px; padding: 6px; background: var(--figurinha); }
.simula__escudo.escudo--sem { color: var(--tinta); }
.simula__rotulo { margin: 0; font-stretch: 62%; font-weight: 800; font-size: var(--t-20); line-height: 1; opacity: 0.85; }
.simula__ano { margin: 2px 0 0; font-stretch: 125%; font-weight: 900; font-size: var(--t-61); line-height: 0.85; color: var(--clube-destaque); font-variant-numeric: tabular-nums; }
.simula__status { margin: 18px 0 0; font-size: var(--t-14); line-height: 1.35; opacity: 0.75; }
.simula__placar { margin-top: 14px; }
.simula__rodada { margin: 0; display: flex; align-items: baseline; gap: 2px; }
.simula__n { font-stretch: 125%; font-weight: 900; font-size: var(--t-61); line-height: 0.9; min-width: 2ch; }
.simula__de { font-stretch: 118%; font-weight: 800; font-size: var(--t-20); opacity: 0.75; }
.simula__liga { margin: 4px 0 0; font-size: var(--t-14); font-weight: 700; opacity: 0.75; }
.simula__regua { margin: 12px 0 14px; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--clube-sobre) 16%, transparent); overflow: hidden; }
.simula__regua i { display: block; height: 100%; width: 0; background: var(--clube-destaque); transition: width 120ms linear; }
.tabela { list-style: none; margin: 0; padding: 0; }
.tabela__cab, .tabela__linha {
  display: grid; grid-template-columns: 24px 22px minmax(0, 1fr) 26px 34px 34px; gap: 8px; align-items: center;
}
.tabela__cab { padding: 0 8px 6px; font-size: var(--t-12); font-weight: 700; opacity: 0.6; }
.tabela__cab span:nth-child(n+3) { text-align: right; }
.tabela__cab span:nth-child(2) { grid-column: 2 / 4; text-align: left; }
.tabela__linha { min-height: 40px; padding: 0 8px; border-top: 1px solid color-mix(in srgb, var(--clube-sobre) 12%, transparent); font-size: var(--t-14); }
.tabela__pos { font-stretch: 118%; font-weight: 900; text-align: right; opacity: 0.75; }
.escudo--tabela { width: 22px; height: 22px; padding: 2px; background: var(--figurinha); }
.escudo--tabela.escudo--sem { color: var(--tinta); }
.escudo--tabela.escudo--sem::before { font-size: 0.5rem; }
.tabela__nome { font-stretch: 62%; font-weight: 800; font-size: var(--t-20); line-height: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabela__n { text-align: right; opacity: 0.8; }
.tabela__pts { font-stretch: 118%; font-weight: 900; font-size: var(--t-16); text-align: right; }
.tabela__linha--voce { border-radius: var(--raio-painel); box-shadow: inset 3px 0 0 var(--clube-destaque); background: color-mix(in srgb, var(--clube-sobre) 8%, transparent); }
.tabela__linha--voce .tabela__nome, .tabela__linha--voce .tabela__pts { color: var(--clube-destaque); }
.tabela__corte { padding: 0 8px; line-height: 1.4; text-align: center; opacity: 0.6; }
.simula .botao { background: transparent; color: var(--clube-sobre); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--clube-sobre) 70%, transparent); }
.simula__placar { margin-bottom: 24px; }
.tabela { min-height: 302px; } /* 6 linhas + "…" + a sua: o botão Pular não anda */
.simula__pular, .simula__voltar { margin-top: auto; }

/* Simular: os placares da semifinal e da final do estadual, e a faixa com o seu último jogo em cada copa */
.simula__jogos { list-style: none; margin: 10px 0 0; padding: 0 8px; font-size: var(--t-14); font-weight: 700; line-height: 1.5; }
.faixa { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.faixa__linha {
  display: grid; gap: 1px; padding: 6px 10px; border-radius: var(--raio-painel);
  background: color-mix(in srgb, var(--clube-sobre) 8%, transparent); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--clube-sobre) 30%, transparent);
}
.faixa__linha[data-v="v"] { box-shadow: inset 3px 0 0 var(--st-ok); }
.faixa__linha[data-v="d"] { box-shadow: inset 3px 0 0 var(--clube-destaque); }
.faixa__rotulo { font-size: var(--t-12); font-weight: 700; opacity: 0.7; }
.faixa__placar { font-size: var(--t-14); font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Pausa do meio do ano (#/pausa): a tabela da 19ª rodada no verde da tela Simular; as propostas no papel */
.pagina-pausa { margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) 0; }
.pagina-pausa > .simula { margin: 0; min-height: 0; padding-bottom: 18px; }
.simula__ano--pausa { font-stretch: 80%; font-size: var(--t-39); line-height: 0.95; overflow-wrap: anywhere; }
.pausa__resumo { margin: 6px 0 0; font-weight: 800; font-size: var(--t-16); line-height: 1.3; color: var(--clube-destaque); }
.simula--pausa .simula__liga { margin: 16px 0 10px; }
.simula--pausa .tabela { min-height: 0; }
.copa { margin-top: 22px; padding-top: 14px; border-top: 2px solid color-mix(in srgb, var(--clube-sobre) 18%, transparent); }
.simula--pausa .copa__nome { margin: 0; font-size: var(--t-16); opacity: 1; }
.copa__resumo { margin: 4px 0 0; font-weight: 800; font-size: var(--t-14); line-height: 1.35; opacity: 0.85; }
.copa__resumo--bem { color: var(--clube-destaque); opacity: 1; }
.copa__jogos { list-style: none; margin: 8px 0 0; padding: 0; font-size: var(--t-14); line-height: 1.5; }
.copa__jogos span { font-weight: 800; }
.copa .tabela__cab { margin-top: 10px; }
.pausa { padding: 22px var(--pad) 0; }
.pausa > .etapas { margin: 0 0 24px; }
.pausa h2 { margin: 0 0 4px; line-height: 1; }
.pausa__lista { list-style: none; margin: 0; padding: 0; }
.pausa__lista .oferta { margin-top: 12px; }
.pausa__lista .oferta__pais { font-size: var(--t-14); line-height: 1.3; overflow-wrap: anywhere; }
.pausa__lista .oferta__pais strong { color: var(--tinta); }
.pausa .secao__vazia { margin-top: 10px; }
.oferta--resolvida { box-shadow: inset 0 0 0 2px var(--linha); }
.oferta__estado { grid-column: 1 / -1; margin: 8px 0 0; font-weight: 800; font-size: var(--t-14); }
.oferta__estado:focus { outline: none; }
.oferta__estado--vendido { color: var(--st-vendido); }
.oferta__estado--recusada, .oferta__estado--indisponivel { color: var(--grafite); }
.pausa__botoes { display: grid; gap: 10px; }
/* As decisões da pausa logo abaixo do resumo; a campanha (tabela e copas) vem depois, de novo nas cores do clube */
.pausa--decisoes { padding-bottom: 22px; }
.pausa__atalho {
  display: block; width: 100%; min-height: 44px; margin: 10px 0 0; padding: 0; border: 0; background: transparent;
  color: var(--caneta); font: inherit; font-size: var(--t-14); font-weight: 700; text-align: center; cursor: pointer;
}
.pausa__atalho:hover { text-decoration: underline; }
.pausa__atalho--vazio { display: grid; place-items: center; color: var(--grafite); font-weight: 500; cursor: default; }
.pagina-pausa > .simula--campanha { padding-top: 18px; }
.simula--campanha .simula__liga { margin-top: 0; }
#propostas-titulo:focus { outline: none; }
#propostas-titulo:focus-visible { outline: 3px solid var(--caneta); outline-offset: 4px; }
.aviso--janela { margin-top: 14px; line-height: 1.35; }
.aviso--janela a { font-weight: 800; white-space: nowrap; }

/* Pôster: cabe em ~390×820. No computador mantém a composição compacta (~420 px), centrado. */
.poster {
  position: relative; overflow: hidden;
  max-width: 420px; margin: 0 auto;
  padding: 30px 18px 16px;
  background: var(--clube); color: var(--clube-sobre);
}
.poster::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px; background: var(--camisa); }
.poster__cab { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 0 12px; align-items: end; }
.poster__escudo { grid-row: 1 / 3; align-self: center; }
.poster__formacao { grid-column: 2 / 4; align-self: start; }
.poster__escudo { width: 64px; height: 64px; padding: 7px; background: var(--figurinha); }
.poster__escudo.escudo--sem { color: var(--tinta); }
.poster__clube { margin: 0; color: inherit; font-stretch: 62%; font-weight: 900; font-size: var(--t-39); line-height: 0.9; }
.poster__clube--m { font-size: var(--t-31); }
.poster__clube--p { font-size: var(--t-25); }
.poster__formacao { margin-top: 4px; font-size: var(--t-14); opacity: 0.75; }
.poster__titulos { align-self: start; margin-top: 2px; }
.poster__titulos .carimbo { position: static; display: inline-block; transform: rotate(-9deg); font-size: var(--t-16); }
.carimbo--titulo { color: var(--clube-destaque); background: transparent; box-shadow: inset 0 0 0 2px var(--clube), inset 0 0 0 3.5px currentColor; }
.carimbo--titulo.carimbo--batida { animation-name: batida-solta; }
.poster__titulos .carimbo--sem { color: color-mix(in srgb, var(--grafite) 45%, var(--figurinha)); font-size: var(--t-14); font-stretch: 100%; }
.poster__ano {
  margin: 12px 0 0 -4px;
  font-stretch: 125%; font-weight: 900; font-size: 6.1rem; line-height: 0.8; letter-spacing: -0.02em;
  color: var(--clube-destaque); font-variant-numeric: tabular-nums;
}

/* A manchete: o resultado no Brasileirão em letra grande; o ano fica como selo da edição */
.poster__manchete { position: relative; margin: 16px 0 0; }
.poster__edicao {
  display: inline-block; margin: 0 0 6px; padding: 3px 8px 4px; border-radius: 3px;
  box-shadow: inset 0 0 0 1.5px currentColor; color: var(--clube-destaque);
  font-stretch: 118%; font-weight: 900; font-size: var(--t-12); line-height: 1; font-variant-numeric: tabular-nums;
}
.poster__resultado {
  margin: 0; font-stretch: 62%; font-weight: 900; font-size: 3.6rem; line-height: 0.88; letter-spacing: -0.01em;
  color: var(--clube-destaque); text-wrap: balance;
}
.poster__resultado--longo { font-size: var(--t-39); }
.poster__liga { margin: 6px 0 0; font-weight: 700; font-size: var(--t-14); opacity: 0.8; }

.comps { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid color-mix(in srgb, var(--clube-sobre) 16%, transparent); }
.comp {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 5px 0; border-bottom: 1px solid color-mix(in srgb, var(--clube-sobre) 16%, transparent);
}
/* Troféu: o mesmo desenho, colado no álbum (ganhou) ou só a vaga tracejada com a sombra dele (não ganhou). */
.taca { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1.5px dashed rgba(252, 253, 251, 0.4); }
.taca img { width: 24px; height: 24px; filter: brightness(0) invert(1); opacity: 0.35; }
.taca--ganhou { border: 0; background: var(--figurinha); box-shadow: 0 0 0 2px var(--clube-destaque); }
.taca--ganhou img { filter: none; opacity: 1; }
.comp__nome { min-width: 0; font-weight: 700; font-size: var(--t-16); line-height: 1.1; }
.comp__nome small { display: block; margin-top: 2px; font-weight: 500; font-size: var(--t-12); opacity: 0.65; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comp__res { font-stretch: 112%; font-weight: 900; font-size: var(--t-20); line-height: 1; text-align: right; }
.comp__res--longo { max-width: 128px; font-stretch: 100%; font-size: var(--t-16); line-height: 1.05; }
.comp--ganhou .comp__res { color: var(--clube-destaque); }

.destaques { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.destaque { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 8px; align-items: center; }
.destaque__foto {
  display: block; aspect-ratio: 3 / 3.6; overflow: hidden; border-radius: 5px; border: 2px solid var(--figurinha);
  background: color-mix(in srgb, var(--grafite) 45%, var(--papel));
}
.destaque__foto > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; display: block; }
.destaque__foto > img.fig__sil { object-fit: contain; object-position: 50% 100%; padding: 14% 8% 0; opacity: 0.55; }
.destaque__rotulo { font-size: var(--t-12); line-height: 1.2; opacity: 0.7; }
.destaque__nome { margin: 2px 0; font-stretch: 62%; font-weight: 800; font-size: var(--t-20); line-height: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.destaque__num { font-stretch: 118%; font-weight: 900; font-size: var(--t-16); color: var(--clube-destaque); }
/* O mesmo jogador artilheiro e melhor nota: um destaque só, na largura toda, com foto maior */
.destaque--grande { grid-column: 1 / -1; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; }
.destaque--grande .destaque__nome { font-size: var(--t-31); }
.destaque--grande .destaque__num { font-size: var(--t-20); }

.campinho--poster { margin-top: 14px; aspect-ratio: 1 / 0.6; }
.titular {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: 76px; text-align: center;
}
.titular__nome {
  max-width: 100%; font-stretch: 62%; font-weight: 800; font-size: var(--t-14); line-height: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px color-mix(in srgb, var(--tinta) 80%, transparent);
}
.nota {
  display: inline-block; min-width: 38px; padding: 4px 6px; border-radius: 6px; text-align: center;
  font-stretch: 112%; font-weight: 900; font-size: var(--t-14); line-height: 1; font-variant-numeric: tabular-nums;
}
.nota--top { background: var(--canarinho); color: var(--tinta); }
.nota--boa { background: var(--gramado); color: var(--figurinha); }
.nota--ok { background: rgba(252, 253, 251, 0.16); color: var(--figurinha); }
.nota--ruim { background: var(--carimbo); color: var(--figurinha); }

.mercado { display: grid; grid-template-columns: 0.8fr 1fr 1.35fr; gap: 8px; margin-top: 14px; }
.mercado > div { min-width: 0; padding-top: 6px; border-top: 3px solid var(--cor); font-size: var(--t-12); }
.mercado__chegou { --cor: var(--st-chegou); }
.mercado__saiu { --cor: var(--st-vendido); }
.mercado__saldo { --cor: var(--clube-destaque); }
.mercado strong { display: block; font-weight: 900; font-size: var(--t-20); line-height: 1.1; white-space: nowrap; }
.mercado small {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  margin-top: 2px; font-size: var(--t-12); line-height: 1.3; opacity: 0.7;
}
.poster__assina { display: flex; justify-content: space-between; margin-top: 16px; font-size: var(--t-12); opacity: 0.55; }

/* Abaixo da dobra */
.depois { padding: 18px var(--pad) 0; }
.depois__botoes { display: grid; gap: 10px; }
.depois__botoes .botao { width: 100%; }
@media (min-width: 768px) {
  .depois__botoes { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
}
/* Tabelas e chaves (pôster e pausa): classificação completa e mata-mata, no papel */
.chaves { margin-top: 26px; }
.chaves h2 { margin: 0 0 10px; font-size: var(--t-25); line-height: 1; }
.chaves__bloco { padding-top: 4px; padding-bottom: 4px; }
.chaves__bloco:not(.chaves__bloco--fechado) { padding-bottom: 12px; }
.cartela .chaves__cab { display: block; margin: 0; }
/* dentro da cartela, a barra não leva a aba do clube nem o fio: a cartela já separa */
.chaves__barra { min-height: 48px; padding: 4px 0; border-bottom: 0; background: transparent; box-shadow: none; border-radius: 0; }
.chaves__barra::before { display: none; }
.chaves__barra:hover { background: transparent; }
.cartela .chaves__nome { font-size: var(--t-20); font-weight: 800; line-height: 1.2; color: var(--tinta); }
.chaves__bloco--fechado .secao__seta::before { transform: rotate(45deg); margin-top: -4px; }
.classif { width: 100%; border-collapse: collapse; font-size: var(--t-14); font-variant-numeric: tabular-nums; }
.classif th, .classif td { padding: 4px 0; border-top: 1px solid var(--linha); text-align: right; }
.classif thead th { border-top: 0; font-size: var(--t-12); font-weight: 700; color: var(--grafite); }
.classif th:nth-child(2) { text-align: left; }
.classif td:first-child, .classif thead th:first-child { width: 26px; padding-right: 8px; text-align: right; color: var(--grafite); box-shadow: inset 3px 0 0 transparent; }
.classif td:nth-child(n+3), .classif thead th:nth-child(n+3) { width: 34px; }
.classif tbody th { font-weight: 400; min-width: 0; }
.classif__clube { display: flex; align-items: center; gap: 6px; min-width: 0; }
.classif__clube > span:last-child { font-stretch: 62%; font-weight: 800; font-size: var(--t-16); line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 52vw; }
.classif__pts { font-weight: 800; }
.classif--topo td:first-child { box-shadow: inset 3px 0 0 var(--gramado); color: var(--tinta); }
.classif--fundo td:first-child { box-shadow: inset 3px 0 0 var(--carimbo); color: var(--tinta); }
.classif--voce { background: var(--papel); }
.classif--voce th, .classif--voce td { font-weight: 800; }
.classif--voce .classif__clube > span:last-child { color: var(--clube-tinta); }
.classif__legenda { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 0; font-size: var(--t-12); color: var(--grafite); }
.classif__zona::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 2px; vertical-align: -1px; }
.classif__zona--topo::before { background: var(--gramado); }
.classif__zona--fundo::before { background: var(--carimbo); }
.chave { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.confronto { display: grid; gap: 2px; padding: 6px 8px; border-radius: var(--raio-painel); background: var(--papel); min-width: 0; }
.confronto--voce { box-shadow: inset 0 0 0 2px var(--tinta); }
.confronto__lado { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 6px; align-items: center; color: var(--grafite); }
.confronto__lado--passou { color: var(--tinta); }
.confronto__nome { font-stretch: 62%; font-weight: 700; font-size: var(--t-16); line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.confronto__lado--passou .confronto__nome, .confronto__lado--passou .confronto__gols { font-weight: 900; }
.confronto__gols { font-size: var(--t-14); font-weight: 700; }
.confronto__penaltis { font-size: var(--t-12); color: var(--grafite); }
.pausa .chaves { margin-top: 30px; }

.cartela { margin-bottom: 10px; padding: 12px 14px; border-radius: var(--raio-painel); background: var(--figurinha); }
.cartela--ganhou { position: relative; box-shadow: inset 4px 0 0 var(--canarinho), inset 0 0 0 2px var(--canarinho); }
/* Competição ganha: a taça grande no canto, com o carimbo de campeão. */
.cartela--ganhou h3 { min-height: 64px; padding-right: 84px; }
.cartela--ganhou dl { padding-right: 84px; }
.cartela__taca { position: absolute; right: 10px; top: 10px; display: grid; justify-items: center; gap: 4px; width: 74px; margin: 0; }
.cartela__taca img { width: 62px; height: 62px; padding: 6px; border-radius: 50%; background: var(--canarinho); }
.cartela__taca span {
  padding: 2px 6px 3px; border: 2px solid var(--carimbo); border-radius: 4px; transform: rotate(-6deg);
  color: var(--carimbo); font-stretch: 112%; font-weight: 900; font-size: var(--t-12); line-height: 1;
}
.cartela h3 { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; margin: 0 0 8px; font-stretch: 100%; font-size: var(--t-16); font-weight: 800; }
.cartela h3 span { font-weight: 700; font-size: var(--t-14); color: var(--grafite); }
.cartela dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; margin: 0; font-size: var(--t-14); }
.cartela dt { color: var(--grafite); }
.cartela dt small { display: block; font-size: var(--t-12); line-height: 1.3; }
.cartela dd { margin: 0; font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.cartela dd .escudo { vertical-align: -4px; margin-right: 6px; }
.cartela__clube { margin-left: 2px; font-weight: 500; font-size: var(--t-12); color: var(--grafite); }
.cartela__sub { margin: 10px 0 4px; font-size: var(--t-14); font-weight: 800; }
.cartela__vazio { margin: 0; font-size: var(--t-14); color: var(--grafite); }
.cartela .nota--ok { background: var(--papel); color: var(--tinta); }
.selecao { margin-top: 8px; border-top: 1px solid var(--linha); }
.selecao summary { display: flex; align-items: center; min-height: 44px; font-weight: 700; font-size: var(--t-14); color: var(--caneta); cursor: pointer; }
.selecao__lista { list-style: none; margin: 0; padding: 0 0 4px; display: grid; gap: 6px; font-size: var(--t-14); }
.selecao__lista li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.selecao__pos { font-weight: 800; font-size: var(--t-12); color: var(--grafite); }
.selecao__nome { min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.elenco-tab { width: 100%; border-collapse: collapse; font-size: var(--t-14); font-variant-numeric: tabular-nums; }
.elenco-tab th, .elenco-tab td { padding: 5px 0; border-top: 1px solid var(--linha); text-align: right; }
.elenco-tab thead th { border-top: 0; font-size: var(--t-12); font-weight: 700; color: var(--grafite); }
.elenco-tab th:first-child { text-align: left; }
.elenco-tab td { width: 30px; }
.elenco-tab td:last-child { width: 52px; }
.elenco-tab tbody th { font-weight: 400; }
.elenco-tab__nome { font-stretch: 62%; font-weight: 800; font-size: var(--t-16); overflow-wrap: anywhere; }
.elenco-tab__pos { margin-left: 6px; font-size: var(--t-12); font-weight: 700; color: var(--grafite); }
.movimento { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--t-14); }
.movimento span { color: var(--grafite); }
.sem-quebra { white-space: nowrap; }
.cartela .movimento + dl, .cartela .cartela__vazio + dl { margin-top: 10px; }
.mundo { margin: 6px 0 0; font-size: var(--t-14); line-height: 1.5; color: var(--grafite); }
.mundo strong { color: var(--tinta); }

/* ---------- Tela final: Na TV ---------- */
.depois__botoes { margin-top: 30px; }
.imprensa h2, .numeros h2 { margin: 6px 0 12px; font-size: var(--t-31); line-height: 1; }
.tv { margin: 0 0 14px; padding: 14px 16px 16px; }
.tv__selo { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 10px; }
.tv__programa { font-stretch: 62%; font-weight: 900; font-size: var(--t-16); line-height: 1; }
.tv__quem { font-size: var(--t-12); font-weight: 600; }
.tv__manchete { margin: 0 0 10px; line-height: 1.02; }
.tv__texto { margin: 0; font-size: var(--t-14); line-height: 1.45; }

/* Donos da Pelota: gráfico de TV aberta, barulhento de propósito. */
.tv--donos { background: #141414; color: #FCFDFB; border-bottom: 5px solid var(--carimbo); }
.tv--donos .tv__programa { padding: 5px 9px 6px; background: var(--canarinho); color: #141414; transform: skewX(-10deg); }
.tv--donos .tv__quem { color: var(--canarinho); }
.tv--donos .tv__manchete { font-size: var(--t-31); }
.tv--donos .tv__texto { opacity: 0.88; }

/* Globe Sporting: o comentário de estúdio, sóbrio, com a nota. */
.tv--globe { background: var(--figurinha); border-top: 4px solid var(--caneta); }
.tv--globe .tv__programa { color: var(--caneta); }
.tv--globe .tv__quem { color: var(--grafite); }
.tv__linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: start; }
.tv--globe .tv__manchete { font-stretch: 100%; font-weight: 800; font-size: var(--t-20); }
.tv__nota { display: grid; justify-items: center; margin: 0; }
.tv__nota strong { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: var(--caneta); color: var(--figurinha); font-stretch: 112%; font-weight: 900; font-size: var(--t-25); }
.tv__nota span { margin-top: 3px; font-size: var(--t-12); color: var(--grafite); }

/* ---------- Tela final: os números ---------- */
.numeros { margin-top: 26px; }
.resumo-ano__pos { margin: 0 0 10px; }
.resumo-ano__pos strong { font-stretch: 125%; font-weight: 900; font-size: var(--t-61); line-height: 0.85; letter-spacing: -0.02em; }
.resumo-ano__pos span { font-weight: 700; font-size: var(--t-16); }
.vedb { display: flex; gap: 2px; height: 30px; }
.vedb__seg { display: flex; align-items: center; gap: 4px; min-width: 34px; padding: 0 8px; color: #FFFFFF; font-weight: 700; font-size: var(--t-14); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vedb__seg:first-child { border-radius: 4px 0 0 4px; }
.vedb__seg:last-child { border-radius: 0 4px 4px 0; }
.vedb__seg b { font-weight: 900; }
.vedb__seg--V, .forma__jogo--V, .jogos__res--V { background: var(--st-ok); }
.vedb__seg--E, .forma__jogo--E, .jogos__res--E { background: var(--st-alerta-marca); color: var(--tinta); }
.vedb__seg--D, .forma__jogo--D, .jogos__res--D { background: var(--st-negativo); }
.resumo-ano__gols { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 10px 0 0; font-size: var(--t-14); color: var(--grafite); }
.resumo-ano__gols strong { color: var(--tinta); font-weight: 900; font-size: var(--t-20); }

.campanha { margin: 26px 0 0; }
.campanha figcaption, .barras figcaption { margin: 0 0 8px; font-weight: 800; font-size: var(--t-16); }
.barras figcaption small { margin-left: 6px; font-weight: 500; font-size: var(--t-12); color: var(--grafite); }
.campanha__area { position: relative; }
.campanha__svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.campanha__svg:focus-visible { outline: 3px solid var(--caneta); outline-offset: 2px; }
.zona--topo { fill: var(--st-ok); fill-opacity: 0.1; }
.zona--fundo { fill: var(--st-negativo); fill-opacity: 0.1; }
.zona__rotulo { font-size: 9px; font-weight: 700; fill: var(--grafite); paint-order: stroke; stroke: var(--papel); stroke-width: 3px; stroke-linejoin: round; }
.grade-l { stroke: var(--linha); stroke-width: 1; }
.eixo { font-size: 10px; fill: var(--grafite); font-variant-numeric: tabular-nums; }
.campanha__linha { fill: none; stroke: var(--tinta); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.campanha__fim, .campanha__ponto { fill: var(--tinta); stroke: var(--papel); stroke-width: 2; }
.campanha__mira { stroke: var(--grafite); stroke-width: 1; }
.campanha__alvo { fill: transparent; cursor: crosshair; }
.campanha__dica {
  position: absolute; top: -6px; z-index: 1; display: grid; gap: 2px; max-width: 230px;
  padding: 7px 10px 8px; border-radius: var(--raio-painel); background: var(--figurinha);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tinta) 30%, transparent);
  font-size: var(--t-12); line-height: 1.3; pointer-events: none;
}
.campanha__dica[hidden] { display: none; }
.campanha__dica strong { font-size: var(--t-14); }
.campanha__dica[data-res]::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 2px 2px 0; }
.campanha__dica[data-res="V"]::before { background: var(--st-ok); }
.campanha__dica[data-res="E"]::before { background: var(--st-alerta-marca); }
.campanha__dica[data-res="D"]::before { background: var(--st-negativo); }


.forma { display: grid; gap: 8px; margin-top: 14px; }
.forma__nome { display: block; margin-bottom: 3px; font-size: var(--t-12); color: var(--grafite); }
.forma__jogos { display: grid; grid-template-columns: repeat(19, minmax(0, 1fr)); gap: 2px; margin: 0; padding: 0; list-style: none; }
.forma__jogo { display: grid; place-items: center; aspect-ratio: 1; border-radius: 3px; color: #FFFFFF; font-weight: 800; font-size: 0.625rem; }

.jogos { margin-top: 12px; font-size: var(--t-14); }
.jogos summary { min-height: 44px; display: flex; align-items: center; font-weight: 700; color: var(--caneta); cursor: pointer; }
.jogos__tab { width: 100%; border-collapse: collapse; font-size: var(--t-14); }
.jogos__tab th { text-align: left; font-size: var(--t-12); font-weight: 700; color: var(--grafite); padding: 4px 4px 6px; }
.jogos__tab td { padding: 6px 4px; border-top: 1px solid var(--linha); }
.jogos__fora { font-size: var(--t-12); color: var(--grafite); }
.jogos__res { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 4px; border-radius: 3px; color: #FFFFFF; font-weight: 800; font-size: 0.625rem; }

.fatos { margin: 22px 0 0; border-top: 1px solid var(--linha); }
.fatos > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linha); }
.fatos dt { font-size: var(--t-14); color: var(--grafite); }
.fatos dd { margin: 0; font-weight: 700; font-size: var(--t-14); line-height: 1.35; }
.fatos dd small { display: block; font-weight: 500; font-size: var(--t-14); color: var(--grafite); }

.barras { margin: 26px 0 0; }
.barras__lista { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.barra-gol__nome { display: block; margin-bottom: 4px; font-weight: 700; font-size: var(--t-14); }
.barra-gol__nome small { margin-left: 4px; font-weight: 500; font-size: var(--t-12); color: var(--grafite); }
.barra-gol__trilho { display: flex; align-items: center; gap: 8px; }
.barra-gol__barra { display: block; height: 14px; border-radius: 0 2px 2px 0; background: var(--clube); }
.barra-gol__trilho b { font-weight: 900; font-size: var(--t-16); }

.busca__ordem { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: var(--t-12); color: var(--grafite); }
.busca__ordem select { flex: 1; min-height: 40px; }
.sugestoes { margin: 12px 0 4px; }
.sugestoes__titulo { margin: 0 0 6px; font-size: var(--t-14); font-weight: 800; }
.linha-busca__motivo { display: block; font-size: var(--t-12); color: var(--grafite); }

/* ---------- Pôster: compartilhar, abas e o balanço da campanha ---------- */
/* Os dois botões logo abaixo do pôster, na mesma coluna de ~420 px dele. */
.compartilhar { display: grid; gap: 10px; max-width: 420px; margin: 0 auto; }
.compartilhar .botao { width: 100%; }
.compartilhar__status { min-height: 1.4em; margin: 0; font-size: var(--t-14); text-align: center; color: var(--grafite); }

/* Abas (WAI-ARIA): rolam na horizontal no celular, sem estourar a página. A escolhida: peso e o fio de tinta embaixo. */
.abas-ano { margin-top: 10px; }
.abas-ano__lista {
  position: relative; display: flex; gap: 2px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad); border-bottom: 1px solid var(--linha);
}
.abas-ano__lista::-webkit-scrollbar { display: none; } /* a aba cortada na borda já diz que rola */
.aba-ano {
  flex: none; min-height: 48px; padding: 0 14px; border: 0; background: transparent;
  font-weight: 600; font-size: var(--t-16); color: var(--grafite); white-space: nowrap;
  box-shadow: inset 0 -4px 0 transparent;
}
.aba-ano[aria-selected="true"] { font-weight: 800; color: var(--tinta); box-shadow: inset 0 -4px 0 var(--tinta); }
.aba-ano:hover { color: var(--tinta); }
.aba-ano:focus-visible { outline-offset: -3px; }
.painel { padding-top: 18px; }
.painel:focus-visible { outline-offset: 4px; }
.painel[hidden] { display: none; }
.painel .imprensa h2 { margin-top: 18px; }
.painel .chaves { margin-top: 22px; }
.painel .mundo { margin: 4px 0 0; }
@media (min-width: 1024px) {
  .abas-ano__lista { margin: 0; padding: 0; }
  .aba-ano { padding: 0 20px; }
}

/* Campanha: a força do elenco no começo do ano contra o final, e o desafio */
.balanco { display: grid; gap: 10px; }
.balanco .cartela { margin: 0; }
.expectativa__nums { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 0; }
.expectativa__nums dt { font-size: var(--t-14); color: var(--grafite); }
.expectativa__nums dd { margin: 2px 0 0; font-stretch: 125%; font-weight: 900; font-size: var(--t-39); line-height: 0.9; }
.expectativa__frase { margin: 10px 0 0; font-size: var(--t-16); line-height: 1.45; }
.desafio { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; border-left: 4px solid var(--st-dispensado); background: var(--st-dispensado-fundo); }
.desafio--ok { border-left-color: var(--st-ok); background: var(--st-chegou-fundo); }
.desafio__icone { width: 28px; height: 28px; }
.desafio__frase { margin: 2px 0 0; font-weight: 800; font-size: var(--t-16); line-height: 1.3; }
.desafio__detalhe { margin: 4px 0 0; font-size: var(--t-14); line-height: 1.4; }

/* Elenco: o XI que terminou o ano */
.xi-lista { list-style: none; margin: 0; padding: 0; }
.xi-lista li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 40px; border-top: 1px solid var(--linha); }
.xi-lista__pos { font-size: var(--t-12); font-weight: 700; color: var(--grafite); }
.xi-lista__nome { font-stretch: 62%; font-weight: 800; font-size: var(--t-20); line-height: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* No computador, o que vem abaixo do pôster usa a largura toda: colunas nas abas */
@media (min-width: 768px) {
  .balanco { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
  .painel__cartelas { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; align-items: start; }
  .painel__cartelas .cartela { margin: 0; }
  .painel .mundo { margin-top: 12px; }
}
@media (min-width: 1024px) {
  .painel__colunas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 36px; align-items: start; }
  .painel__colunas .numeros { margin-top: 0; }
  .painel__colunas .numeros h2 { margin-top: 18px; }
  .painel__lado { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: start; }
  .painel__lado .cartela { margin: 0; }
}

/* ---------- Quem sai do elenco (#/saidas): uma lista só, marcar e confirmar de uma vez ---------- */
.saidas { display: flex; flex-direction: column; min-height: calc(100vh - 2 * var(--pad)); }
.saidas__lead { margin: 4px 0 6px; font-weight: 700; font-size: var(--t-16); line-height: 1.4; }
.saidas__regra { margin: 0 0 14px; font-size: var(--t-14); line-height: 1.4; color: var(--grafite); }
.saidas__lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linha); }
.saida { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 8px; border-bottom: 1px solid var(--linha); }
.saida--marcada { background: var(--st-dispensado-fundo); box-shadow: inset 4px 0 0 var(--st-dispensado); }
.saida__linha { display: grid; grid-template-columns: 28px 44px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 64px; padding: 8px 0 8px 8px; cursor: pointer; }
.saida__marca { width: 22px; height: 22px; margin: 0; accent-color: var(--tinta); }
.saida__corpo { min-width: 0; display: grid; gap: 3px; }
.saida__destino { font-size: var(--t-12); color: var(--grafite); }
.saida--marcada .saida__destino { color: var(--st-dispensado); font-weight: 700; }
.saida__titular { padding: 1px 6px; border-radius: 3px; background: var(--canarinho); color: var(--tinta); font-size: var(--t-12); font-weight: 800; }
.saida__opcoes {
  min-height: 44px; margin-right: 4px; padding: 0 8px; border: 0; background: transparent;
  color: var(--caneta); font: inherit; font-size: var(--t-12); font-weight: 700; text-align: right; cursor: pointer;
  max-width: 88px; line-height: 1.2;
}
.saida__opcoes:hover { text-decoration: underline; }
.saidas__resumo { flex: 1; min-width: 0; }
.saidas__conta { font-size: var(--t-14); line-height: 1.2; color: var(--grafite); }
.saidas__conta strong { font-stretch: 118%; font-weight: 900; font-size: var(--t-20); color: var(--tinta); margin-right: 4px; }
.saidas__conta span { display: block; }
.saidas__aviso { margin: 4px 0 0; font-size: var(--t-12); font-weight: 700; line-height: 1.3; color: var(--st-alerta); }
.saidas__aviso--erro { color: var(--st-negativo); }
.barra--saidas .botao { flex: 0 0 auto; max-width: 52%; }
.barra--saidas .botao:disabled { opacity: 0.45; cursor: not-allowed; }