/* ============================================================
   TEMPO REAL - TIMES
   Estilos da página /times/{slug}/ e do botão [botao-tempo-real]
   Usa --tr-cor (cor primária do time) como variável dinâmica.
   ============================================================ */

.tr-page {
    --tr-cor: #A32D2D;
    --tr-bg: #ffffff;
    --tr-bg-soft: #f6f7f8;
    --tr-border: rgba(0, 0, 0, 0.08);
    --tr-text: #1a1a1a;
    --tr-text-muted: #666;
    --tr-radius: 12px;
    --tr-radius-sm: 8px;
    --tr-gap: 16px;
    --tr-campo-verde: #0F6E56;
    --tr-amarelo: #FAC775;
    --tr-amarelo-dark: #854F0B;
    --tr-azul-rival: #185FA5;

    max-width: 980px;
    margin: 0 auto;
    padding: 24px 16px 60px;
    color: var(--tr-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.5;
}

/* Auto: segue preferência do sistema */
@media (prefers-color-scheme: dark) {
    .tr-page {
        --tr-bg: #1a1a1a;
        --tr-bg-soft: #252525;
        --tr-border: rgba(255, 255, 255, 0.1);
        --tr-text: #f5f5f5;
        --tr-text-muted: #999;
    }
}

/* Forçado claro (manual) — sobrepõe preference do sistema */
:root[data-tr-theme="light"] .tr-page {
    --tr-bg: #ffffff;
    --tr-bg-soft: #f6f7f8;
    --tr-border: rgba(0, 0, 0, 0.08);
    --tr-text: #1a1a1a;
    --tr-text-muted: #666;
}

/* Forçado escuro (manual) — sobrepõe preference do sistema */
:root[data-tr-theme="dark"] .tr-page {
    --tr-bg: #1a1a1a;
    --tr-bg-soft: #252525;
    --tr-border: rgba(255, 255, 255, 0.1);
    --tr-text: #f5f5f5;
    --tr-text-muted: #999;
}

/* ============== HEADER ============== */
.tr-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 20px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--tr-border);
}

.tr-header-escudo img,
.tr-header-escudo {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: contain;
    background: var(--tr-bg-soft);
}

.tr-header-info {
    flex: 1;
    min-width: 0;
}

.tr-titulo {
    margin: 0;
    font-size: clamp(20px, 4vw, 28px);
    font-weight: 600;
    color: var(--tr-text);
}

.tr-subtitulo {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--tr-text-muted);
}

.tr-badge-live {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(226, 75, 74, 0.1);
    color: #c0392b;
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
    letter-spacing: 0.05em;
}

.tr-pulse {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #E24B4A;
    border-radius: 50%;
    animation: tr-pulse 1.4s ease-in-out infinite;
}

@keyframes tr-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(0.8); }
}

/* ============== CARDS ============== */
.tr-main {
    display: flex;
    flex-direction: column;
    gap: var(--tr-gap);
}

.tr-card {
    background: var(--tr-bg);
    border: 1px solid var(--tr-border);
    border-radius: var(--tr-radius);
    padding: 20px;
}

.tr-section-label {
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--tr-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ============== PLACAR ============== */
.tr-jogo-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 18px;
    font-size: 12px;
    color: var(--tr-text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tr-placar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
}

.tr-time {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.tr-time-casa { justify-content: flex-end; flex-direction: row-reverse; }
.tr-time-casa .tr-time-info { text-align: right; }

.tr-time-escudo {
    width: 44px;
    height: 44px;
    object-fit: contain;
    flex-shrink: 0;
}

.tr-time-nome {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    word-break: break-word;
}

.tr-time-mando {
    font-size: 10px;
    color: var(--tr-text-muted);
    letter-spacing: 0.08em;
}

.tr-placar-numeros {
    font-size: clamp(28px, 6vw, 44px);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-align: center;
    min-width: 100px;
    color: var(--tr-cor);
}

.tr-placar-sep {
    color: var(--tr-text-muted);
    font-weight: 400;
    margin: 0 6px;
}

/* ============== CAMPO + MOMENTUM ============== */
.tr-campo-wrapper {
    background: var(--tr-campo-verde);
    border-radius: var(--tr-radius-sm);
    padding: 14px;
}

.tr-campo-svg {
    width: 100%;
    display: block;
}

#tr-campo-bola {
    transition: transform 0.6s ease-out;
}

.tr-ultima-acao {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    padding: 0 4px;
    font-size: 13px;
}

.tr-ultima-acao-label { color: var(--tr-text-muted); }
.tr-ultima-acao-texto {
    font-weight: 600;
    color: var(--tr-amarelo-dark);
}

.tr-momentum { margin-top: 16px; }
.tr-momentum-label {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--tr-text-muted);
}

.tr-momentum-bar {
    display: flex;
    height: 28px;
    border-radius: var(--tr-radius-sm);
    overflow: hidden;
}

.tr-momentum-home,
.tr-momentum-away {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    font-weight: 600;
    transition: width 0.6s ease;
    overflow: hidden;
    white-space: nowrap;
}

.tr-momentum-home { background: var(--tr-cor); }
.tr-momentum-away { background: var(--tr-azul-rival); }

/* ============== ESTATÍSTICAS ============== */
.tr-stat-row { margin-bottom: 16px; }
.tr-stat-row:last-child { margin-bottom: 0; }

.tr-stat-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 13px;
}

.tr-stat-header-label { color: var(--tr-text-muted); }
.tr-stat-header-valor { font-weight: 600; }

.tr-stat-bar {
    display: flex;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    background: var(--tr-bg-soft);
}

.tr-stat-bar-home { background: var(--tr-cor); }
.tr-stat-bar-away { background: var(--tr-azul-rival); }

/* ============== EVENTOS ============== */
.tr-evento {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--tr-border);
}
.tr-evento:last-child { border-bottom: none; }

.tr-evento-min {
    font-size: 13px;
    font-weight: 600;
    color: var(--tr-text-muted);
    min-width: 36px;
}

.tr-evento-badge {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 3px;
    font-weight: 600;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}
.tr-evento-badge.gol { background: #C0DD97; color: #173404; }
.tr-evento-badge.amarelo { background: #FAC775; color: #633806; }
.tr-evento-badge.vermelho { background: #F09595; color: #501313; }
.tr-evento-badge.sub { background: #B5D4F4; color: #042C53; }
.tr-evento-badge.var { background: #D3D1C7; color: #2C2C2A; }

.tr-evento-info { flex: 1; min-width: 0; }
.tr-evento-titulo {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}
.tr-evento-meta {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--tr-text-muted);
}

/* ============== ESCALAÇÃO ============== */
.tr-escalacao-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.tr-escalacao-time {
    background: var(--tr-bg-soft);
    padding: 14px;
    border-radius: var(--tr-radius-sm);
}

.tr-escalacao-titulo {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tr-escalacao-formacao {
    font-size: 11px;
    color: var(--tr-text-muted);
    margin-left: 8px;
}

.tr-escalacao-jogadores {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    color: var(--tr-text-muted);
    line-height: 1.7;
}

.tr-escalacao-jogadores li {
    display: flex;
    gap: 8px;
}

.tr-escalacao-num {
    color: var(--tr-text);
    font-weight: 600;
    min-width: 24px;
}

/* ============== ESTADO IDLE (sem jogo) ============== */
.tr-proximo-jogo {
    text-align: center;
}

.tr-proximo-times {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.tr-proximo-time {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.tr-proximo-time img { width: 60px; height: 60px; object-fit: contain; }
.tr-proximo-time span { font-size: 14px; font-weight: 600; }

.tr-proximo-vs {
    font-size: 24px;
    color: var(--tr-text-muted);
    font-weight: 300;
}

.tr-proximo-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
    font-size: 14px;
}
.tr-proximo-data { font-weight: 600; text-transform: capitalize; }
.tr-proximo-liga { color: var(--tr-text-muted); font-size: 13px; }

.tr-countdown {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.tr-countdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--tr-bg-soft);
    padding: 12px;
    border-radius: var(--tr-radius-sm);
    min-width: 70px;
}

.tr-cd-num {
    font-size: 24px;
    font-weight: 700;
    color: var(--tr-cor);
    font-variant-numeric: tabular-nums;
}

.tr-cd-lbl {
    font-size: 11px;
    color: var(--tr-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Último resultado */
.tr-ultimo-jogo {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 16px;
    margin-bottom: 12px;
}
.tr-ultimo-time {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1;
}
.tr-ultimo-time img { width: 48px; height: 48px; object-fit: contain; }
.tr-ultimo-time span { font-size: 13px; font-weight: 600; text-align: center; }
.tr-ultimo-placar {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--tr-cor);
}
.tr-ultimo-meta {
    margin: 0;
    text-align: center;
    font-size: 13px;
    color: var(--tr-text-muted);
}

/* Lista de fixtures */
.tr-fixture-list { margin: 0; padding: 0; list-style: none; }
.tr-fixture-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--tr-bg-soft);
    border-radius: var(--tr-radius-sm);
    margin-bottom: 8px;
    font-size: 14px;
}
.tr-fixture-data {
    color: var(--tr-text-muted);
    font-weight: 600;
    min-width: 110px;
    text-transform: capitalize;
}
.tr-fixture-logo { width: 28px; height: 28px; object-fit: contain; }
.tr-fixture-oponente { flex: 1; font-weight: 600; }
.tr-fixture-oponente small { color: var(--tr-text-muted); font-weight: 400; }
.tr-fixture-liga { color: var(--tr-text-muted); font-size: 12px; }

/* Artigos */
.tr-artigos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

.tr-artigo-card {
    text-decoration: none;
    color: var(--tr-text);
    background: var(--tr-bg-soft);
    border-radius: var(--tr-radius-sm);
    overflow: hidden;
    transition: transform 0.15s ease;
}
.tr-artigo-card:hover { transform: translateY(-2px); }

.tr-artigo-thumb img { width: 100%; height: 110px; object-fit: cover; display: block; }

.tr-artigo-titulo {
    margin: 0;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}

.tr-loading { color: var(--tr-text-muted); font-size: 14px; }

/* ============================================================
   ANÚNCIOS - Slots integrados via "Aparência > Widgets"
   ============================================================ */
.tr-ad-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 12px 0;
    padding: 14px;
    background: var(--tr-bg-soft);
    border-radius: var(--tr-radius-sm);
    text-align: center;
    min-height: 100px; /* reserva espaço, evita layout shift */
}

.tr-ad-slot-topo { margin-top: 0; margin-bottom: var(--tr-gap); }
.tr-ad-slot-meio { margin: var(--tr-gap) 0; }
.tr-ad-slot-inferior { margin: var(--tr-gap) 0; }

.tr-ad-rotulo {
    font-size: 10px;
    color: var(--tr-text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 8px;
    font-weight: 500;
}

.tr-ad-widget {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.tr-ad-widget img,
.tr-ad-widget iframe,
.tr-ad-widget ins,
.tr-ad-widget .adsbygoogle {
    max-width: 100% !important;
    height: auto;
    display: block;
    margin: 0 auto;
}

.tr-ad-titulo {
    display: none; /* esconde título do widget no slot de anúncio */
}

/* ============================================================
   TEXTO CONTEXTUAL - alimenta a página com conteúdo
   ============================================================ */
.tr-card-contexto {
    background: var(--tr-bg);
}

.tr-context-text p {
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--tr-text);
}

.tr-context-text p:last-child { margin-bottom: 0; }

.tr-card-sobre .tr-sobre-conteudo {
    font-size: 15px;
    line-height: 1.7;
}

.tr-card-sobre .tr-sobre-conteudo p { margin: 0 0 14px; }
.tr-card-sobre .tr-sobre-conteudo p:last-child { margin-bottom: 0; }
.tr-card-sobre .tr-sobre-conteudo h2,
.tr-card-sobre .tr-sobre-conteudo h3 {
    margin: 20px 0 10px;
    font-size: 18px;
    font-weight: 600;
}

/* ============================================================
   BOTÕES DE COMPARTILHAR + ASSINAR ALERTAS
   ============================================================ */
.tr-share-row {
    display: flex;
    justify-content: center;
    margin: -8px 0 4px;
}

.tr-share-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: center;
}

.tr-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--tr-border);
    background: var(--tr-bg);
    color: var(--tr-text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
    font-family: inherit;
}

.tr-share-btn:hover {
    transform: translateY(-1px);
    text-decoration: none;
}

.tr-share-whatsapp { color: #25D366; }
.tr-share-whatsapp:hover { background: rgba(37, 211, 102, 0.1); color: #25D366; }

.tr-share-twitter { color: var(--tr-text); }
.tr-share-twitter:hover { background: var(--tr-bg-soft); color: var(--tr-text); }

.tr-share-telegram { color: #229ED9; }
.tr-share-telegram:hover { background: rgba(34, 158, 217, 0.1); color: #229ED9; }

.tr-share-copy:hover,
.tr-share-subscribe:hover {
    background: var(--tr-bg-soft);
}

.tr-share-subscribe {
    background: var(--tr-cor);
    color: white;
    border-color: var(--tr-cor);
}

.tr-share-subscribe:hover {
    background: var(--tr-cor);
    color: white;
    opacity: 0.9;
}

@keyframes tr-gol-flash {
    0%, 100% { box-shadow: 0 0 0 0 rgba(192, 221, 151, 0); }
    50%      { box-shadow: 0 0 0 8px rgba(192, 221, 151, 0.5); }
}

.tr-card-jogo.tr-gol-flash {
    animation: tr-gol-flash 0.6s ease-in-out 6;
}

/* ============================================================
   HEAD-TO-HEAD (Confronto direto)
   ============================================================ */
.tr-h2h-resumo {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--tr-text);
}

.tr-h2h-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tr-h2h-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--tr-bg-soft);
    border-radius: var(--tr-radius-sm);
    margin-bottom: 6px;
    font-size: 13px;
}

.tr-h2h-resultado {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 11px;
    flex-shrink: 0;
}

.tr-h2h-resultado.vit { background: #639922; }
.tr-h2h-resultado.emp { background: #888780; }
.tr-h2h-resultado.der { background: #A32D2D; }

.tr-h2h-data {
    color: var(--tr-text-muted);
    min-width: 80px;
    font-weight: 500;
}

.tr-h2h-times {
    flex: 1;
}

.tr-h2h-times strong {
    margin: 0 4px;
    font-weight: 600;
}

.tr-h2h-liga {
    color: var(--tr-text-muted);
    font-size: 11px;
}

/* ============================================================
   TABELA DO CAMPEONATO
   ============================================================ */
.tr-tabela-wrapper {
    overflow-x: auto;
    margin: 0 -4px;
}

.tr-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.tr-tabela th,
.tr-tabela td {
    padding: 10px 6px;
    text-align: center;
    border-bottom: 1px solid var(--tr-border);
}

.tr-tabela th {
    font-weight: 500;
    color: var(--tr-text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tr-tabela .tr-pos {
    width: 32px;
    color: var(--tr-text-muted);
    font-weight: 600;
}

.tr-tabela .tr-time-col {
    text-align: left;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 140px;
}

.tr-tabela .tr-time-col img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
}

.tr-tabela .tr-pts {
    font-weight: 700;
    color: var(--tr-cor);
}

.tr-tabela .tr-time-destaque {
    background: rgba(163, 45, 45, 0.06);
}

.tr-tabela .tr-time-destaque td {
    font-weight: 600;
}

.tr-tabela .tr-time-destaque .tr-pos {
    color: var(--tr-cor);
    font-weight: 700;
}

/* ============================================================
   TOP ARTILHEIROS
   ============================================================ */
.tr-artilheiros-list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: none;
}

.tr-artilheiro-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--tr-bg-soft);
    border-radius: var(--tr-radius-sm);
    margin-bottom: 8px;
}

.tr-artilheiro-pos {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--tr-cor);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
}

.tr-artilheiro-foto {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--tr-bg);
    flex-shrink: 0;
}

.tr-artilheiro-info {
    flex: 1;
    min-width: 0;
}

.tr-artilheiro-nome {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

.tr-artilheiro-meta {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--tr-text-muted);
}

.tr-artilheiro-gols {
    text-align: center;
    flex-shrink: 0;
}

.tr-artilheiro-gols strong {
    display: block;
    font-size: 22px;
    font-weight: 700;
    color: var(--tr-cor);
    line-height: 1;
}

.tr-artilheiro-gols small {
    font-size: 10px;
    color: var(--tr-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Mobile */
@media (max-width: 600px) {
    .tr-page { padding: 16px 12px 40px; }
    .tr-card { padding: 16px; }
    .tr-time { gap: 8px; }
    .tr-time-escudo { width: 36px; height: 36px; }
    .tr-time-nome { font-size: 13px; }
    .tr-placar-numeros { font-size: 32px; min-width: 80px; }
    .tr-momentum-home,
    .tr-momentum-away { font-size: 11px; }
    .tr-fixture-item { flex-wrap: wrap; }
    .tr-fixture-data { min-width: auto; flex: 1 0 100%; }
}

/* ============================================================
   v1.4: TABS (eventos / estatísticas / escalação)
   ============================================================ */
.tr-tabs-nav {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--tr-border);
    margin: -4px -4px 16px;
    padding: 0 4px;
    overflow-x: auto;
    scrollbar-width: none;
}
.tr-tabs-nav::-webkit-scrollbar { display: none; }

.tr-tab-btn {
    background: transparent;
    border: none;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 500;
    color: var(--tr-text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tr-tab-btn:hover { color: var(--tr-text); }

.tr-tab-btn.is-active {
    color: var(--tr-cor);
    border-bottom-color: var(--tr-cor);
    font-weight: 600;
}

.tr-tab-count {
    background: var(--tr-bg-soft);
    color: var(--tr-text-muted);
    font-size: 11px;
    padding: 1px 7px;
    border-radius: 999px;
    font-weight: 600;
}

.tr-tab-btn.is-active .tr-tab-count {
    background: var(--tr-cor);
    color: white;
}

.tr-tab-panel { display: none; }
.tr-tab-panel.is-active { display: block; }

/* ============================================================
   v1.4: FILTROS DE EVENTOS
   ============================================================ */
.tr-eventos-filtros {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.tr-filtro-btn {
    background: var(--tr-bg-soft);
    border: 1px solid transparent;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    color: var(--tr-text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    font-family: inherit;
}

.tr-filtro-btn:hover {
    background: var(--tr-border);
}

.tr-filtro-btn.is-active {
    background: var(--tr-cor);
    color: white;
    border-color: var(--tr-cor);
}

.tr-eventos-vazio {
    color: var(--tr-text-muted);
    font-size: 13px;
    text-align: center;
    padding: 20px;
    margin: 0;
}

/* ============================================================
   v1.4: TRANSMISSÃO (onde assistir)
   ============================================================ */
.tr-transmissao {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 14px;
    background: var(--tr-bg-soft);
    border-radius: var(--tr-radius-sm);
    font-size: 13px;
}

.tr-transmissao-label {
    color: var(--tr-text-muted);
    font-weight: 500;
}

.tr-transmissao-canais {
    color: var(--tr-text);
    font-weight: 600;
}

.tr-transmissao-pre {
    margin: 12px 0;
    text-align: center;
    justify-content: center;
}

/* ============================================================
   v1.4: PROBABILIDADES PRÉ-JOGO
   ============================================================ */
.tr-pred-bar {
    display: flex;
    height: 56px;
    border-radius: var(--tr-radius-sm);
    overflow: hidden;
    margin-bottom: 12px;
}

.tr-pred-segmento {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    line-height: 1.3;
    padding: 4px 6px;
    overflow: hidden;
    text-align: center;
}

.tr-pred-home { background: var(--tr-cor); }
.tr-pred-draw { background: #888780; }
.tr-pred-away { background: var(--tr-azul-rival); }

.tr-pred-time {
    font-size: 11px;
    font-weight: 500;
    opacity: 0.9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.tr-pred-pct {
    font-size: 16px;
    font-weight: 700;
}

.tr-pred-disclaimer {
    margin: 0;
    font-size: 11px;
    color: var(--tr-text-muted);
    text-align: center;
    line-height: 1.5;
}

/* ============================================================
   v1.4: COMPARATIVO LADO A LADO ("Como chegam para o jogo")
   ============================================================ */
.tr-comparativo {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.tr-comp-times {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--tr-border);
}

.tr-comp-time {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}

.tr-comp-time img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.tr-comp-time span {
    font-size: 13px;
    font-weight: 600;
}

.tr-comp-vs {
    font-size: 22px;
    color: var(--tr-text-muted);
    font-weight: 300;
}

.tr-comp-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--tr-border);
}

.tr-comp-row:last-child { border-bottom: none; }

.tr-comp-cell {
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: var(--tr-text);
    padding: 4px 8px;
    border-radius: var(--tr-radius-sm);
    transition: background 0.15s;
}

.tr-comp-cell.is-melhor {
    background: rgba(99, 153, 34, 0.15);
    color: #3B6D11;
    font-weight: 700;
}

:root[data-tr-theme="dark"] .tr-comp-cell.is-melhor,
@media (prefers-color-scheme: dark) {
    .tr-comp-cell.is-melhor { color: #C0DD97; }
}

.tr-comp-cell-label {
    font-size: 12px;
    color: var(--tr-text-muted);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
    min-width: 110px;
}

.tr-comp-row-forma { padding: 14px 0; }
.tr-comp-forma {
    display: inline-flex;
    gap: 4px;
    justify-content: center;
}

.tr-comp-forma-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: white;
    font-size: 11px;
    font-weight: 700;
}

.tr-comp-forma-pill.vit { background: #639922; }
.tr-comp-forma-pill.emp { background: #888780; }
.tr-comp-forma-pill.der { background: #A32D2D; }
.tr-comp-forma-empty { color: var(--tr-text-muted); font-size: 13px; }

/* ============================================================
   v1.4: ACORDEONS (<details>)
   ============================================================ */
.tr-acordeon {
    background: var(--tr-bg);
    border: 1px solid var(--tr-border);
    border-radius: var(--tr-radius);
    margin-bottom: var(--tr-gap);
    overflow: hidden;
}

.tr-acordeon-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background 0.15s;
}

.tr-acordeon-summary::-webkit-details-marker { display: none; }
.tr-acordeon-summary::marker { display: none; }

.tr-acordeon-summary:hover {
    background: var(--tr-bg-soft);
}

.tr-acordeon-titulo {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    color: var(--tr-text);
}

.tr-acordeon-count {
    background: var(--tr-cor);
    color: white;
    font-size: 11px;
    padding: 2px 9px;
    border-radius: 999px;
    font-weight: 700;
}

.tr-acordeon-arrow {
    color: var(--tr-text-muted);
    font-size: 11px;
    transition: transform 0.2s ease;
}

.tr-acordeon[open] .tr-acordeon-arrow {
    transform: rotate(180deg);
}

.tr-acordeon-conteudo {
    padding: 0 20px 20px;
}

/* ============================================================
   v1.4: LESÕES E SUSPENSOS
   ============================================================ */
.tr-injuries-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tr-injury-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--tr-border);
}

.tr-injury-item:last-child { border-bottom: none; }

.tr-injury-foto {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--tr-bg-soft);
}

.tr-injury-info {
    flex: 1;
    min-width: 0;
}

.tr-injury-nome {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

.tr-injury-meta {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--tr-text-muted);
}

.tr-injury-badge {
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.tr-injury-badge.tr-injury-lesao {
    background: rgba(226, 75, 74, 0.12);
    color: #A32D2D;
}

.tr-injury-badge.tr-injury-suspenso {
    background: rgba(250, 199, 117, 0.25);
    color: #854F0B;
}

/* ============================================================
   v1.4: RECORDES DA TEMPORADA
   ============================================================ */
.tr-recordes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
}

.tr-recorde-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    background: var(--tr-bg-soft);
    border-radius: var(--tr-radius-sm);
}

.tr-recorde-label {
    font-size: 11px;
    color: var(--tr-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tr-recorde-val {
    font-size: 16px;
    font-weight: 700;
    color: var(--tr-cor);
}

/* ============================================================
   v1.4: PRÓXIMOS JOGOS DA RODADA
   ============================================================ */
.tr-rodada-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tr-rodada-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid var(--tr-border);
    font-size: 13px;
}

.tr-rodada-item:last-child { border-bottom: none; }

.tr-rodada-data {
    color: var(--tr-text-muted);
    font-weight: 600;
    min-width: 80px;
}

.tr-rodada-times {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.tr-rodada-times img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.tr-rodada-times strong {
    color: var(--tr-text-muted);
    font-weight: 400;
    margin: 0 4px;
}

/* ============================================================
   v1.4: TOGGLE DE MODO ESCURO (integrado no header — sem fixed)
   ============================================================ */
.tr-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.tr-theme-toggle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--tr-bg);
    border: 1px solid var(--tr-border);
    color: var(--tr-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, transform 0.15s;
    padding: 0;
}

.tr-theme-toggle:hover {
    background: var(--tr-bg-soft);
    transform: scale(1.06);
}

.tr-theme-toggle:focus-visible {
    outline: 2px solid var(--tr-cor);
    outline-offset: 2px;
}

/* Mostra/esconde ícone conforme tema atual */
.tr-theme-icon-sun { display: none; }
.tr-theme-icon-moon { display: inline-block; }

@media (prefers-color-scheme: dark) {
    .tr-theme-icon-sun { display: inline-block; }
    .tr-theme-icon-moon { display: none; }
}

:root[data-tr-theme="light"] .tr-theme-icon-sun { display: none; }
:root[data-tr-theme="light"] .tr-theme-icon-moon { display: inline-block; }

:root[data-tr-theme="dark"] .tr-theme-icon-sun { display: inline-block; }
:root[data-tr-theme="dark"] .tr-theme-icon-moon { display: none; }

/* ============================================================
   v1.4: RESPONSIVO
   ============================================================ */
@media (max-width: 600px) {
    .tr-tab-btn { padding: 8px 10px; font-size: 13px; }
    .tr-comp-times { gap: 8px; }
    .tr-comp-time img { width: 38px; height: 38px; }
    .tr-comp-time span { font-size: 11px; }
    .tr-comp-cell { font-size: 14px; }
    .tr-comp-cell-label { font-size: 10px; min-width: 80px; }
    .tr-pred-pct { font-size: 13px; }
    .tr-pred-time { font-size: 10px; }
    .tr-acordeon-summary { padding: 14px 16px; }
    .tr-acordeon-conteudo { padding: 0 16px 16px; }
    .tr-theme-toggle { width: 32px; height: 32px; }
}