/* ── Futebol: rail lateral + página /futebol ─────────────────────────────── */

.rail-football__content {
    padding: 0;
}

.rail-football__match {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    font-size: 0.8rem;
}

.rail-football__match:last-child {
    border-bottom: none;
}

.rail-football__team {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.rail-football__team--away {
    flex-direction: row-reverse;
    text-align: right;
}

.rail-football__team img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
}

.rail-football__team span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rail-football__mid {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.rail-football__score {
    font-weight: 700;
    padding: 2px 6px;
    background: var(--surface-2);
    border-radius: 4px;
    min-width: 40px;
    text-align: center;
}

.rail-football__score.is-live {
    color: var(--red);
    background: rgba(244, 67, 54, 0.1);
}

.rail-football__status {
    font-size: 0.65rem;
    color: var(--text-3);
    margin-bottom: 2px;
}

.rail-football__live {
    color: var(--red);
    font-weight: 700;
}

.football-empty {
    text-align: center;
    padding: 40px 16px;
    color: var(--text-3);
}

.football-league {
    margin: 20px 0 8px;
    font-size: 0.9rem;
    color: var(--text-2);
    border-bottom: 1px solid var(--border);
    padding-bottom: 4px;
}

.fb-match {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 12px;
}

.fb-team {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
    font-size: 1.05rem;
    font-weight: 700;
}

.fb-team--away {
    flex-direction: row-reverse;
    text-align: right;
}

.fb-team img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
}

.fb-mid {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.fb-score {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0;
    padding: 4px 12px;
    background: var(--surface-2);
    border-radius: 8px;
    min-width: 70px;
    text-align: center;
}

.fb-score.is-live {
    color: var(--red);
    background: rgba(244, 67, 54, 0.1);
}

.fb-status {
    font-size: 0.75rem;
    color: var(--text-3);
    margin-bottom: 4px;
}

.football-live {
    color: var(--red);
    font-weight: 700;
}

#btn-favorite-team.has-team {
    background: var(--nav-hover);
    color: var(--text-1);
}

/* CENTRALIZAR DE VOLTA (12/09/26): a janela do time abria COLADA no canto
   superior esquerdo. Não era ela — é o reset da casa, `*, ::before, ::after {
   margin: 0 }` no index.css, que também acerta o `<dialog>` e apaga o
   `margin: auto` que o navegador usa para centralizar um modal nativo. Só esta
   linha traz de volta; sem ela, qualquer `<dialog>` novo desta casa nasce
   torto do mesmo jeito. */
#modal-team {
    margin: auto;
    width: min(90vw, 400px);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
}

#modal-team::backdrop {
    background: rgba(10, 10, 10, 0.45);
}

#team-search {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    margin-bottom: 16px;
}

#team-list {
    max-height: 400px;
    overflow-y: auto;
}

.team-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px;
    border: none;
    border-bottom: 1px solid var(--border);
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.team-item:hover {
    background: var(--nav-hover);
}

.team-item img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* A FILEIRA DO BOTÃO (12/09/26): o "Time do coração" morava na barra de título
   inventada da página, que saiu por duplicar a barra da casa. Ele fica numa
   linha só dele, encostado à direita — a mesma altura de respiro das abas de
   /rankings. */
.football-acoes {
    display: flex;
    justify-content: flex-end;
    padding: 16px 16px 0;
}

.football-feed {
    padding: 16px;
}

/* SOZINHO NO MEIO DA LINHA (12/09/26, ordem do dono: *"que tal centralizar
   isso"*). O `margin-left: auto` empurrava o botão para a direita porque havia
   a contagem do dia à esquerda; ela morreu, e um botão só, encostado na borda,
   fica torto. */
.football-team-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* BRANCO, e não `--surface-2` (12/09/26, ordem do dono). No tema claro os
       dois batem no mesmo #FFF; a diferença aparece no tema preto e nas
       paletas de cor, onde `--surface` é a caixa e `--surface-2` é o cinza de
       apoio. Esta pílula é caixa. */
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 5px 14px;
    border-radius: 999px;
    font-weight: 700;
    cursor: pointer;
    color: var(--text);
}

/* O escudo desenhado, no lugar do 🤍 do sistema. */
.fut-escudo {
    flex: 0 0 auto;
    color: var(--accent);
}

.football-team-btn__nome {
    line-height: 1.2;
}

/* ── A BUSCA DO HUB (12/09/26, *"faltou uma busca"*) ────────────────────── */
.fut-busca {
    padding: 12px 16px 0;
}

.fut-busca[hidden] {
    display: none !important;
}

.fut-busca__campo {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 0.92rem;
}

.fut-busca__campo:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.fut-achados {
    padding: 0;
}

.football-team-modal__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.football-team-modal__head h3 {
    margin: 0;
}

.football-team-modal__close {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: var(--text);
}

/* ═══ A TELA DO FUTEBOL, 2ª versão (12/09/26, ordem do dono) ════════════════
   Filtros, linha de estado, cartão clicável e a folha do jogo.

   Este bloco chegou DEPOIS do JS na primeira tentativa, e o dono viu a tela
   crua — sem uma linha de estilo, com escudo quebrado e "- - -" no lugar do
   placar. A lição é a de sempre nesta casa: marcação, estilo e comportamento
   nascem no MESMO commit, senão um deles vai ao ar sozinho. */

.fut-topo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 16px 0;
}

.fut-filtros {
    display: flex;
    gap: 8px;
    padding: 12px 16px 4px;
    overflow-x: auto;
    scrollbar-width: none;
}

.fut-filtros::-webkit-scrollbar {
    display: none;
}

.fut-filtro {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-2);
    font: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
}

.fut-filtro.is-on {
    background: var(--text-1, #111);
    border-color: var(--text-1, #111);
    color: #fff;
}

.fut-filtro__conta {
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-3);
    font-size: 0.76rem;
}

.fut-filtro.is-on .fut-filtro__conta {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

/* ── O CARTÃO DO JOGO ─────────────────────────────────────────────────────
   Virou BOTÃO (era uma `div` muda): a folha do jogo é a porta das três ações,
   e cartão que não parece clicável não é clicado. */
.fb-match {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 14px);
    margin-bottom: 10px;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.fb-match:hover {
    border-color: var(--text-3);
}

.fb-match.is-live {
    border-color: rgba(244, 67, 54, 0.45);
}

/* O time do coração ganha um fio na lateral: sem gritar, mas achável. */
.fb-match.is-meu {
    box-shadow: inset 3px 0 0 var(--accent);
}

.fb-team {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    font-size: 1rem;
    font-weight: 700;
}

.fb-team > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fb-team--away {
    flex-direction: row-reverse;
    text-align: right;
}

.fb-team img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    flex-shrink: 0;
}

.fb-mid {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    min-width: 86px;
}

.fb-score {
    font-size: 1.35rem;
    font-weight: 800;
    padding: 2px 12px;
    background: var(--surface-2);
    border-radius: 8px;
    min-width: 70px;
    text-align: center;
}

.fb-score.is-live {
    color: var(--red);
    background: rgba(244, 67, 54, 0.1);
}

.fb-status {
    font-size: 0.76rem;
    color: var(--text-3);
    margin-bottom: 4px;
}

.fb-marcas {
    display: flex;
    gap: 4px;
    margin-top: 4px;
    font-size: 0.72rem;
    line-height: 1;
    min-height: 12px;
}

.football-league--meu {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* ── A FOLHA DO JOGO ────────────────────────────────────────────────────── */
.fut-folha {
    margin: auto;
    width: min(94vw, 460px);
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--bg);
    color: var(--text);
}

.fut-folha::backdrop {
    background: rgba(10, 10, 10, 0.45);
}

.fut-folha__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.fut-folha__liga {
    margin: 0;
    color: var(--text-3);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.fut-folha__titulo {
    margin: 2px 0 0;
    font-size: 1.05rem;
}

.fut-folha__placar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 18px 0 6px;
}

.fut-folha__lado {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
    text-align: center;
    font-size: 0.86rem;
    font-weight: 700;
}

.fut-folha__lado img {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.fut-folha__lado span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.fut-folha__num {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    font-size: 1.7rem;
    font-weight: 800;
}

.fut-folha__num small {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-3);
}

.fut-folha__num.is-live,
.fut-folha__num.is-live small {
    color: var(--red);
}

.fut-folha__acoes {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

.fut-acao {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.fut-acao:hover:not(:disabled) {
    background: var(--nav-hover);
}

/* Botão que não pode NÃO some: fica apagado e a linha de baixo diz o motivo
   (ver pintarSeguir e pintarPalpite em futebol.js). */
.fut-acao:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.fut-acao__icone {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.fut-acao__texto {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.fut-acao__texto strong {
    font-size: 0.95rem;
}

.fut-acao__texto small {
    color: var(--text-3);
    font-size: 0.78rem;
}

/* ── O PALPITE ──────────────────────────────────────────────────────────── */
.fut-palpite {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.fut-palpite__escolhas {
    display: flex;
    gap: 8px;
}

.fut-palpite__opcao {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
    padding: 10px 6px;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: inherit;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.fut-palpite__opcao span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.fut-palpite__opcao.is-on {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.fut-palpite__opcao img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.fut-palpite__emoji {
    font-size: 1.15rem;
    line-height: 22px;
}

.fut-palpite__placar {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 10px;
    margin-top: 14px;
}

.fut-palpite__campo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
    color: var(--text-3);
    font-size: 0.76rem;
    text-align: center;
}

.fut-palpite__campo span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.fut-palpite__campo input {
    width: 62px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--text);
    font: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    text-align: center;
}

.fut-palpite__x {
    padding-bottom: 10px;
    color: var(--text-3);
}

.fut-palpite__dica {
    margin: 10px 0 0;
    color: var(--text-3);
    font-size: 0.78rem;
    text-align: center;
}

.fut-palpite__acoes {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
}

/* ── A JANELA DO TIME DO CORAÇÃO ────────────────────────────────────────── */
.football-team-modal__dica {
    margin: 0 0 10px;
    color: var(--text-3);
    font-size: 0.84rem;
}

.team-item small {
    margin-left: auto;
    color: var(--text-3);
    font-size: 0.74rem;
}

/* ── O CARTÃO DO JOGO NO FEED ───────────────────────────────────────────── */
.bip-jogo {
    display: block;
    margin: 10px 0;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    color: inherit;
    text-decoration: none;
}

.bip-jogo.is-live {
    border-color: rgba(244, 67, 54, 0.45);
}

.bip-jogo__liga {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--text-3);
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.bip-jogo__selo {
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
}

.bip-jogo__selo--vivo {
    color: var(--red);
}

.bip-jogo__linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
}

.bip-jogo__time {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    font-weight: 700;
}

.bip-jogo__time > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bip-jogo__time--fora {
    flex-direction: row-reverse;
    text-align: right;
}

.bip-jogo__escudo {
    width: 26px;
    height: 26px;
    object-fit: contain;
    flex-shrink: 0;
}

.bip-jogo__placar {
    flex-shrink: 0;
    font-size: 1.15rem;
    font-weight: 800;
}

.bip-jogo__placar span {
    color: var(--text-3);
    font-weight: 600;
}

/* ── O FILTRO POR LIGA (12/09/26, 3ª ordem do dono) ────────────────────────
   Segunda fileira, mais discreta que a de estado: ali se escolhe O QUE ver
   (ao vivo, próximos), aqui se estreita DENTRO da escolha. Duas fileiras com o
   mesmo peso visual virariam um painel de controle. */
.fut-ligas {
    display: flex;
    gap: 6px;
    padding: 6px 16px 2px;
    overflow-x: auto;
    scrollbar-width: none;
}

.fut-ligas::-webkit-scrollbar {
    display: none;
}

.fut-ligas[hidden] {
    display: none !important;
}

.fut-liga {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-3);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.fut-liga.is-on {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
}

.fut-liga .fut-filtro__conta {
    background: transparent;
    padding: 0;
    font-size: 0.74rem;
    opacity: 0.75;
}

/* ── A PRÉVIA DO JOGO NO COMPOSITOR (12/09/26) ─────────────────────────────
   O mesmo cartão do feed, dentro do compositor, com um X para tirar. Anexo que
   não se vê é anexo em que ninguém confia. */
.compose-jogo-preview {
    position: relative;
    margin: 8px 0 4px;
}

.compose-jogo-preview[hidden] {
    display: none !important;
}

.compose-jogo-preview__card {
    display: block;
    pointer-events: none;
}

.compose-jogo-preview__x {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 0.78rem;
    line-height: 1;
    cursor: pointer;
}

.compose-jogo-preview__x:hover {
    background: rgba(0, 0, 0, 0.75);
}

/* ══ AS DUAS TELAS DO FUTEBOL (12/09/26, 4ª ordem do dono) ══════════════════
   *"eu mostraria na primeira tela as ligas, ninguém quer ver tudo… ao clicar a
   pessoa teria já jogos específicos daquela liga"*.

   A lista única de 180 jogos morreu, e com ela a fileira de cinquenta chips de
   campeonato que saía cortada na borda. Agora: cartazes de liga na primeira
   tela, jogos na segunda. */

.fut-secao {
    margin: 18px 16px 8px;
    color: var(--text-2);
    font-size: 0.86rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.fut-secao--vivo {
    color: var(--red);
}

.fut-agora {
    padding: 0 16px;
}

.fut-agora[hidden],
.fut-hub[hidden],
.fut-liga-tela[hidden] {
    display: none !important;
}

/* ── OS CARTAZES DOS CAMPEONATOS ───────────────────────────────────────────
   Grade de dois (ou mais) por linha, com a arte oficial da competição. Duas
   colunas no celular é o ponto em que o emblema ainda se reconhece de relance
   — foi por isso que a fileira de chips falhava: nome sem imagem, cortado. */
.fut-cartazes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    padding: 0 16px 24px;
}

.fut-cartaz {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--duration, .18s) ease, transform var(--duration, .18s) ease;
}

.fut-cartaz:hover {
    border-color: var(--text-3);
    transform: translateY(-1px);
}

.fut-cartaz.is-live {
    border-color: rgba(244, 67, 54, 0.45);
}

/* A arte da competição vem do CDN da API em PNG com fundo transparente e, em
   muitas, tinta escura — o quadradinho claro atrás garante que o emblema
   apareça também no tema preto. */
.fut-cartaz__arte {
    width: 40px;
    height: 40px;
    object-fit: contain;
    padding: 4px;
    border-radius: 10px;
    background: #fff;
    margin-bottom: 4px;
}

.fut-cartaz__nome {
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.25;
}

.fut-cartaz__linha {
    color: var(--text-3);
    font-size: 0.78rem;
}

.fut-cartaz__vivo {
    color: var(--red);
    font-weight: 700;
}

/* ── A TELA DE UM CAMPEONATO ───────────────────────────────────────────── */
.fut-voltar {
    margin: 12px 16px 0;
    padding: 6px 12px 6px 8px;
    border: none;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-2);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
}

.fut-voltar:hover {
    background: var(--nav-hover);
}

.fut-liga-cab {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px 0;
}

.fut-liga-cab__arte {
    width: 34px;
    height: 34px;
    object-fit: contain;
    padding: 3px;
    border-radius: 8px;
    background: #fff;
}

.fut-liga-cab__nome {
    margin: 0;
    font-size: 1.1rem;
}

/* Filtro sem jogo nenhum fica apagado e inerte — e não some: a ausência é
   informação ("hoje não teve encerrado ainda"), o sumiço é confusão. */
.fut-filtro:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}