/*
 * Band Futebol — a fonte CBF.
 *
 * CSS à mão, não Tailwind: o bloco aparece na capa, em post, na barra
 * lateral e numa página própria, em qualquer praça da rede. Classe de
 * utilitário que o tema não usa some na compilação do Tailwind, e aí o
 * placar chegaria torto justamente na praça que não recompilou.
 *
 * Paleta emprestada do portal: papel #f6f5f1, tinta #101216, vermelho
 * #d8151f, linha #e4e1d8.
 */

.bcbf {
    --bcbf-papel: #fff;
    --bcbf-fundo: #f6f5f1;
    --bcbf-tinta: #101216;
    --bcbf-suave: #6b7078;
    --bcbf-linha: #e4e1d8;
    --bcbf-vivo: #d8151f;

    font-family: Inter, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--bcbf-tinta);
}

.bcbf * { box-sizing: border-box; }

/* ── Cabeçalho do bloco ─────────────────────────────────────────────── */

.bcbf-topo {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 12px;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--bcbf-tinta);
}

.bcbf-chapeu {
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--bcbf-vivo);
}

.bcbf-titulo {
    font-family: Fraunces, Georgia, serif;
    font-size: 26px;
    font-weight: 900;
    letter-spacing: -.02em;
    line-height: 1.1;
    margin: 4px 0 0;
}

.bcbf-mais {
    flex: none;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--bcbf-tinta);
    border-bottom: 2px solid var(--bcbf-vivo);
    padding-bottom: 2px;
}

.bcbf-mais:hover { color: var(--bcbf-vivo); }

.bcbf-vazio {
    margin: 0;
    padding: 18px 0;
    font-size: 14px;
    color: var(--bcbf-suave);
}

/* ── A grade de jogos ───────────────────────────────────────────────── */

.bcbf-jogos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bcbf-jogo {
    background: var(--bcbf-papel);
    border: 1px solid var(--bcbf-linha);
    border-top: 3px solid var(--bcbf-linha);
    padding: 12px 14px 10px;
}

.bcbf-jogo--ao-vivo { border-top-color: var(--bcbf-vivo); }
.bcbf-jogo--encerrado { border-top-color: var(--bcbf-tinta); }

.bcbf-jogo-alto {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.bcbf-camp {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--bcbf-suave);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bcbf-estado {
    flex: none;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--bcbf-suave);
}

.bcbf-jogo--ao-vivo .bcbf-estado {
    color: var(--bcbf-vivo);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.bcbf-jogo--ao-vivo .bcbf-estado::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--bcbf-vivo);
    animation: bcbf-pisca 1.6s ease-in-out infinite;
}

@keyframes bcbf-pisca { 50% { opacity: .25; } }

@media (prefers-reduced-motion: reduce) {
    .bcbf-jogo--ao-vivo .bcbf-estado::before { animation: none; }
}

/* ── O confronto ────────────────────────────────────────────────────── */

.bcbf-confronto {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
}

.bcbf-time {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 13px;
    line-height: 1.2;
}

.bcbf-time b {
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bcbf-time--fora { flex-direction: row; justify-content: flex-end; text-align: right; }

.bcbf-escudo {
    flex: none;
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.bcbf-escudo--vazio {
    display: block;
    border-radius: 50%;
    background: var(--bcbf-fundo);
    border: 1px solid var(--bcbf-linha);
}

.bcbf-placar {
    flex: none;
    font-family: Fraunces, Georgia, serif;
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -.02em;
    white-space: nowrap;
    padding: 0 6px;
}

.bcbf-placar i { font-style: normal; color: var(--bcbf-linha); margin: 0 4px; }

.bcbf-hora {
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--bcbf-suave);
}

.bcbf-jogo-baixo {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--bcbf-linha);
    font-size: 11px;
    color: var(--bcbf-suave);
}

.bcbf-jogo-baixo span + span::before { content: "· "; }

/* ── A faixa na capa ────────────────────────────────────────────────── */

.bcbf-faixa {
    max-width: 1280px;
    margin: 0 auto;
    padding: 32px 24px;
}

/* ── A classificação ────────────────────────────────────────────────── */

.bcbf-rolagem {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--bcbf-linha);
    background: var(--bcbf-papel);
}

.bcbf-tabela {
    width: 100%;
    min-width: 860px;
    border-collapse: collapse;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.bcbf-tabela th,
.bcbf-tabela td {
    padding: 9px 7px;
    text-align: center;
}

.bcbf-tabela thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bcbf-tinta);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Zebra: linha sim, linha não. */
.bcbf-tabela tbody tr:nth-child(odd) { background: var(--bcbf-fundo); }
.bcbf-tabela tbody tr:nth-child(even) { background: var(--bcbf-papel); }
.bcbf-tabela tbody tr:hover { background: #efe9d9; }

.bcbf-tabela tbody tr + tr { border-top: 1px solid var(--bcbf-linha); }

.bcbf-forte { font-weight: 800; font-size: 14px; }

/* Posição e variação */

.bcbf-col-pos { width: 62px; white-space: nowrap; }

.bcbf-pos {
    display: inline-block;
    min-width: 20px;
    font-weight: 800;
}

.bcbf-var {
    font-style: normal;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: -.02em;
    margin-left: 3px;
}

.bcbf-var--sobe  { color: #1a7f4b; }
.bcbf-var--desce { color: var(--bcbf-vivo); }
.bcbf-var--igual { color: #c3bfb4; }

/* Time */

/*
 * O nome do time à esquerda, sempre na mesma coluna.
 *
 * `.bcbf-col-time` sozinho perdia para `.bcbf-tabela td` (que tem uma classe
 * E um elemento, e portanto mais peso) — o text-align:center ganhava e cada
 * linha começava num ponto, conforme o tamanho do nome. Daí o escudo e o nome
 * saírem desalinhados de linha para linha.
 */
.bcbf-tabela th.bcbf-col-time,
.bcbf-tabela td.bcbf-col-time {
    text-align: left;
    white-space: nowrap;
    min-width: 190px;
}

.bcbf-tabela td.bcbf-col-time span {
    display: inline-block;
    vertical-align: middle;
    font-weight: 600;
}

/* Caixa fixa para o escudo: é ela que faz todos os nomes começarem no mesmo x. */
.bcbf-tabela td.bcbf-col-time .bcbf-escudo {
    display: inline-block;
    vertical-align: middle;
    width: 22px;
    height: 22px;
    margin-right: 9px;
    object-fit: contain;
}

/* Cartões */

.bcbf-cartao {
    display: inline-block;
    width: 7px;
    height: 10px;
    border-radius: 1px;
    margin-right: 4px;
    vertical-align: -1px;
}

.bcbf-cartao--ca { background: #e8b800; }
.bcbf-cartao--cv { background: var(--bcbf-vivo); }

/* Últimos cinco */

.bcbf-col-forma { white-space: nowrap; }

.bcbf-forma {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    margin-right: 3px;
    border-radius: 50%;
    font-style: normal;
    font-size: 9px;
    font-weight: 800;
    color: #fff;
    background: #b8b3a6;
}

.bcbf-forma--v { background: #1a7f4b; }
.bcbf-forma--e { background: #b8b3a6; }
.bcbf-forma--d { background: var(--bcbf-vivo); }

/* Próximo adversário */

.bcbf-col-prox { width: 64px; }

.bcbf-prox {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.bcbf-prox .bcbf-escudo { width: 22px; height: 22px; }

.bcbf-mando {
    font-style: normal;
    font-size: 9px;
    font-weight: 800;
    color: var(--bcbf-suave);
}

.bcbf-sem { color: #c3bfb4; }

.bcbf-grupo {
    font-family: Fraunces, Georgia, serif;
    font-size: 16px;
    font-weight: 800;
    margin: 24px 0 8px;
}

.bcbf-nota {
    margin: 10px 0 0;
    font-size: 11px;
    line-height: 1.5;
    color: var(--bcbf-suave);
}

/* ── A página /jogos/ ───────────────────────────────────────────────── */

.bcbf-pagina {
    max-width: 1280px;
    margin: 0 auto;
    padding: 28px 24px 64px;
    font-family: Inter, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: #101216;
}

.bcbf-pagina > .bcbf { margin-bottom: 40px; }

.bcbf-cabeca { margin-bottom: 20px; }

.bcbf-cabeca h1 {
    font-family: Fraunces, Georgia, serif;
    font-size: 38px;
    font-weight: 900;
    letter-spacing: -.03em;
    line-height: 1.05;
    margin: 6px 0 0;
}

.bcbf-edicoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

.bcbf-pilula {
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    color: #101216;
    background: #f6f5f1;
    border: 1px solid #e4e1d8;
    padding: 6px 12px;
}

.bcbf-pilula.is-atual { background: #101216; color: #fff; border-color: #101216; }

.bcbf-rodadas {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 24px;
}

.bcbf-rodada {
    min-width: 32px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    color: #6b7078;
    border: 1px solid #e4e1d8;
    padding: 5px 6px;
}

.bcbf-rodada.is-atual { background: #d8151f; border-color: #d8151f; color: #fff; }

.bcbf-lances ul, .bcbf-lances { list-style: none; margin: 0; padding: 0; }

.bcbf-lances > li {
    border: 1px solid #e4e1d8;
    padding: 14px 16px;
    margin-bottom: 10px;
}

.bcbf-lances h3 {
    font-family: Fraunces, Georgia, serif;
    font-size: 17px;
    font-weight: 800;
    margin: 0 0 8px;
}

.bcbf-gols li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
    padding: 3px 0;
}

.bcbf-minuto { font-weight: 800; min-width: 34px; }
.bcbf-clube { font-size: 11px; color: #6b7078; }

.bcbf-marca {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    background: #f6f5f1;
    padding: 2px 6px;
}

.bcbf-documentos { margin: 10px 0 0; font-size: 11px; }
.bcbf-documentos a { color: #6b7078; margin-right: 12px; }

/* ── Na barra lateral o espaço é curto ──────────────────────────────── */

.widget .bcbf-jogos,
.wp-block-sidebar .bcbf-jogos { grid-template-columns: 1fr; }

.widget .bcbf-topo { display: none; }

/* ── O bloco da capa em abas: Série A, B, C e D ───────────────────────
 *
 * Quatro cartões por linha deixam pouca largura para cada um. O cartão daqui
 * é o do placar da TV: sigla de três letras, escudo, o resultado no meio e o
 * horário em cima — nada que estique. O cartão da página /jogos/ continua com
 * o nome por extenso; este desenho vale só dentro de .bcbf-series.
 */

.bcbf-abas {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 14px;
}

.bcbf-aba {
    appearance: none;
    background: transparent;
    border: 1px solid var(--bcbf-linha);
    border-radius: 999px;
    padding: 6px 16px;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--bcbf-suave);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.bcbf-aba:hover { color: var(--bcbf-tinta); border-color: var(--bcbf-tinta); }

.bcbf-aba--ativa,
.bcbf-aba--ativa:hover {
    background: var(--bcbf-tinta);
    border-color: var(--bcbf-tinta);
    color: #fff;
}

.bcbf-painel__pe {
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--bcbf-suave);
}

.bcbf-series .bcbf-jogos { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ── O cartão ──────────────────────────────────────────────────────── */

.bcbf-card {
    background: var(--bcbf-papel);
    border: 1px solid var(--bcbf-linha);
    border-top: 3px solid var(--bcbf-linha);
    padding: 10px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.bcbf-card--ao-vivo { border-top-color: var(--bcbf-vivo); }
.bcbf-card--encerrado { border-top-color: var(--bcbf-tinta); }

.bcbf-card__topo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--bcbf-suave);
}

.bcbf-card__rodada { white-space: nowrap; }

.bcbf-card__quando {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
}

.bcbf-card__jogo {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
}

.bcbf-card__time {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.bcbf-card__time b {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .04em;
    line-height: 1;
}

.bcbf-card__time--fora { justify-content: flex-end; }

.bcbf-card .bcbf-escudo,
.bcbf-card .bcbf-escudo--vazio {
    width: 26px;
    height: 26px;
    flex: none;
}

.bcbf-card__placar {
    font-size: 19px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.bcbf-card__placar i { font-style: normal; color: var(--bcbf-suave); margin: 0 5px; font-size: 14px; }
.bcbf-card__x { color: var(--bcbf-suave); font-size: 15px; font-weight: 700; }

.bcbf-card__selo {
    align-self: center;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--bcbf-suave);
    border: 1px solid var(--bcbf-linha);
    border-radius: 999px;
    padding: 3px 12px;
}

.bcbf-card__selo--vivo {
    color: #fff;
    background: var(--bcbf-vivo);
    border-color: var(--bcbf-vivo);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.bcbf-card__selo--vivo::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    animation: bcbf-pisca 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .bcbf-card__selo--vivo::before { animation: none; }
}

.bcbf-card__pe {
    font-size: 11.5px;
    color: var(--bcbf-suave);
    padding-top: 8px;
    border-top: 1px solid var(--bcbf-linha);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 1080px) {
    .bcbf-series .bcbf-jogos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .bcbf-series .bcbf-jogos { grid-template-columns: 1fr; }
}

/* ── A página /jogos/ em duas colunas ─────────────────────────────────
 *
 * Classificação de um lado, jogos da rodada do outro. Uma embaixo da outra
 * obrigava a rolar a página inteira para cruzar a tabela com o jogo, que é
 * exatamente o que o leitor de futebol fica fazendo.
 */

.bcbf-colunas {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 26px;
    align-items: start;
}

/* Quinze colunas na classificação: dividindo a largura, ela rola de lado
   dentro da própria coluna em vez de empurrar a de jogos para baixo. */
.bcbf-coluna--tabela .bcbf--tabela { overflow-x: auto; }

.bcbf-coluna { min-width: 0; }

/* Um cartão por linha na coluna estreita, e aí o nome inteiro cabe. */
.bcbf-coluna--jogos .bcbf-jogos { grid-template-columns: 1fr; }

.bcbf-passo { display: flex; gap: 6px; }

.bcbf-passo__seta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--bcbf-linha);
    border-radius: 50%;
    font-size: 17px;
    line-height: 1;
    text-decoration: none;
    color: var(--bcbf-tinta);
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.bcbf-passo__seta:hover {
    background: var(--bcbf-tinta);
    border-color: var(--bcbf-tinta);
    color: #fff;
}

/* No cartão com nome por extenso o nome manda, e o escudo acompanha. */
.bcbf-card--nome .bcbf-card__time b {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 1024px) {
    .bcbf-colunas { grid-template-columns: 1fr; }
    .bcbf-coluna--jogos .bcbf-jogos { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}

/* As rodadas passaram para a coluna dos jogos: todas de uma vez, sem rolagem. */
.bcbf-coluna--jogos .bcbf-rodadas { margin-bottom: 16px; }

.bcbf-rodada.is-vazia {
    opacity: .4;
    cursor: default;
}

/* ── Artilharia ───────────────────────────────────────────────────────
 *
 * Sem retrato do jogador: a CBF manda apelido e camisa, nunca foto. Quem
 * identifica é o escudo do clube.
 */

.bcbf--artilharia { margin-top: 34px; }

.bcbf-art__rotulo {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--bcbf-suave);
}

.bcbf-art {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bcbf-art__item {
    display: grid;
    grid-template-columns: 32px 30px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 6px;
    border-bottom: 1px solid var(--bcbf-linha);
}

.bcbf-art__item:last-child { border-bottom: 0; }

.bcbf-art__pos {
    font-size: 17px;
    font-weight: 800;
    color: #c3bfb4;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.bcbf-art__item:nth-child(-n+3) .bcbf-art__pos { color: var(--bcbf-tinta); }

.bcbf-art__escudo {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.bcbf-art__quem { min-width: 0; }

.bcbf-art__quem b {
    display: block;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bcbf-art__quem small {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--bcbf-suave);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bcbf-art__gols {
    font-size: 19px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.bcbf-nota {
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--bcbf-suave);
}