/* Configurações Globais e Reset Básico */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: #f4f7f9;
    color: #333;
    line-height: 1.6;
    height: 100%;
    /* Garante que o body ocupe a altura total */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* CORREÇÃO VAZAMENTO: IMPEDE A ROLAGEM HORIZONTAL INDESEJADA EM QUALQUER LUGAR */
    overflow-x: hidden;
}

/* CORREÇÃO PONTOS LATERAIS: Remove bordas pontilhadas e garante estilo de lista padrão */
ul {
    list-style: disc;
    margin-left: 0;
}

.main-content a,
.main-content * {
    /* Força a remoção de qualquer estilo de borda pontilhada ou tracejada nos elementos de conteúdo */
    border-style: none !important;
    border: none !important;
}

a {
    text-decoration: none;
    color: #007bff;
    transition: color 0.3s;
}

a:hover {
    color: #0056b3;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* ================================================= */
/* CORREÇÕES DE RESPONSIVIDADE PARA IMAGENS E GRIDS */
/* ================================================= */

/* Garante que todas as imagens se ajustem à largura do container */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Define o tamanho máximo dos escudos grandes (team-shield-large) em mobile */
.team-shield-large {
    width: 100px;
    height: 100px;
    margin: 0 auto 15px;
    /* Centraliza o escudo */
}

/* ================================================= */
/* HEADER (Cabeçalho) */
/* ================================================= */

.header {
    background-color: #004d99;
    color: white;
    padding: 15px 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

.header .container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.logo {
    font-size: 1.8em;
    font-weight: 700;
    color: #ffcc00;
}

/* NOVO: Estilo para o H1 que substitui o logo nas páginas sem imagem (Notícias) */
.site-title {
    font-size: 1.8em;
    /* Herda do .logo, mas é explicitamente definido */
    font-weight: 700;
    color: #ffcc00;
    /* CHAVE: Empurra o título para o canto esquerdo no desktop/telas grandes */
    margin-right: auto;
}

/* Menu e Busca (Mobile) */
.menu-toggle {
    display: none;
    background: transparent;
    border: none;
    color: white;
    font-size: 2em;
    cursor: pointer;
    margin-top: 5px;
}

.nav-menu {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    justify-content: center;
    flex-basis: auto;
    position: static;
    height: auto;
    padding: 0;
    background-color: transparent;
}

.nav-menu a {
    color: white;
    padding: 5px 15px;
    border-bottom: none;
    display: inline-block;
    margin: 0 5px;
    transition: background-color 0.3s;
    border-radius: 4px;
}

.nav-menu a:hover {
    background-color: rgba(255, 255, 255, 0.1);
}



/* Main Content - COMPENSAÇÃO PARA O HEADER FIXO */
.main-content {
    padding-top: 90px;
    padding-bottom: 30px;
    flex: 1;
    /* CORREÇÃO VAZAMENTO: IMPEDE A ROLAGEM HORIZONTAL INDESEJADA */
    overflow-x: hidden;
}

/* ================================================= */
/* TABELA DE CLASSIFICAÇÃO (SUPORTE: .classification-table E .full-classification-table) */
/* ================================================= */

/* Aplica o estilo a ambas as classes de tabela */
.classification-table,
.full-classification-table {
    width: 100%;
    /* MANTÉM 100% PARA TENTAR OCUPAR O MÁXIMO DA SIDEBAR */
    border-collapse: collapse;
    background-color: white;
    font-size: 0.85em;
    /* Reduz a fonte para caber mais dados */
    border-radius: 8px;
    /* Removido overflow: hidden aqui para dar lugar ao table-wrapper */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Cabeçalho da Tabela */
.classification-table thead,
.full-classification-table thead {
    background-color: #004d99;
    /* Azul Primário */
    color: white;
}

.classification-table th,
.full-classification-table th {
    padding: 12px 6px;
    text-align: center;
    font-weight: 700;
    border-bottom: 2px solid #ffcc00;
}

/* Alinhamento especial para o nome do time */
.classification-table th:nth-child(2),
.full-classification-table th:nth-child(2) {
    text-align: left;
    padding-left: 15px;
}

/* Células e Linhas */
.classification-table td,
.full-classification-table td {
    padding: 10px 6px;
    border-bottom: 1px solid #f0f0f0;
    text-align: center;
    /* Alinha os números ao centro */
}

/* Faixas Zebradas (alternadas) */
.classification-table tbody tr:nth-child(odd),
.full-classification-table tbody tr:nth-child(odd) {
    background-color: #ffffff;
}

.classification-table tbody tr:nth-child(even),
.full-classification-table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}


/* Destaques de Zonas */

/* Zona de Libertadores (G4) */
.classification-table .g4,
.full-classification-table .g4 {
    background-color: #d4edda !important;
    /* Verde Claro */
    color: #155724;
    font-weight: 700;
    border-left: 4px solid #155724;
}

/* Zona de Sul-Americana (Nova Classe) */
.classification-table .sula,
.full-classification-table .sula {
    background-color: #fff3cd !important;
    /* Amarelo Claro */
    color: #856404;
    border-left: 4px solid #856404;
}

/* Zona de Rebaixamento (Z4) */
.classification-table .z4,
.full-classification-table .z4 {
    background-color: #f8d7da !important;
    /* Vermelho Claro/Rosa */
    color: #721c24;
    font-weight: 700;
    border-left: 4px solid #721c24;
}

/* Destaque para Coluna de Pontos (3ª Coluna) */
.classification-table td:nth-child(3),
.full-classification-table td:nth-child(3) {
    font-weight: 700;
    color: #004d99;
}

/* Alinhamento da Coluna de Time (2ª Coluna) */
.classification-table td:nth-child(2),
.full-classification-table td:nth-child(2) {
    text-align: left;
    padding-left: 15px;
}


/* Outros Estilos e Componentes de Layout */
.section-title {
    font-size: 1.4em;
    color: #004d99;
    border-bottom: 3px solid #ffcc00;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.intro-text {
    margin-bottom: 20px;
    font-size: 0.95em;
    padding: 10px;
    border-left: 5px solid #004d99;
    background-color: #e9ecef;
}

/* CORREÇÃO CRÍTICA DE RESPONSIVIDADE DA TABELA */
.table-wrapper {
    /* CHAVE: Permite a rolagem horizontal interna SÓ SE A TABELA FOR MAIOR que a largura do container */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 15px;
    display: block;
    width: 100%;
}

.btn-full-table {
    display: block;
    width: 100%;
    text-align: center;
    padding: 10px;
    background-color: #ffcc00;
    color: #004d99;
    font-weight: 700;
    border-radius: 4px;
    margin-top: 15px;
    transition: background-color 0.3s;
}

.btn-full-table:hover {
    background-color: #e6b800;
}



/* ================================================= */
/* FOOTER (Rodapé) */
/* ================================================= */

.footer {
    background-color: #2c3e50;
    color: white;
    padding: 30px 0;
    margin-top: 30px;
}

.footer-content {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 30px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-nav,
.footer-contact,
.footer-social {
    /* Adiciona footer-social aqui para que ele tenha regras de largura similares */
    min-width: 250px;
}

.footer-nav h3,
.footer-contact h3,
.footer-social h3 {
    /* Adiciona footer-social h3 */
    color: #ffcc00;
    margin-bottom: 10px;
    font-size: 1.2em;
    border-bottom: 2px solid #ffcc00;
    padding-bottom: 5px;
}

.footer-nav ul {
    list-style: none;
    padding: 0;
}

.footer-nav a {
    color: white;
    display: block;
    padding: 5px 0;
    transition: color 0.3s;
}

.footer-nav a:hover {
    color: #ffcc00;
}

/* --- INÍCIO DA CORREÇÃO DE CONTRASTE --- */
.footer-contact a {
    /* Aplica a cor de alto contraste para o link do Telegram e outros contatos */
    color: #ffcc00;
    transition: color 0.3s;
}

.footer-contact a:hover {
    /* Garante que o hover também tenha bom contraste */
    color: #ffffff;
}

/* --- FIM DA CORREÇÃO DE CONTRASTE --- */

.footer-contact ul li {
    padding: 5px 0;
    font-size: 0.9em;
}

.copyright-info {
    text-align: center;
    font-size: 0.8em;
    padding-top: 10px;
}


/* ================================================= */
/* MEDIA QUERY: LAYOUT MOBILE/RESPONSIVO */
/* ================================================= */

/* Regras para telas pequenas (Celular) */
@media (max-width: 768px) {

    /* Faz o grid de notícias (team-news-grid) ficar em uma única coluna */
    .team-news-grid {
        grid-template-columns: 1fr;
    }

    /* Remove as colunas da ficha técnica (elenco-info) em telas pequenas */
    .elenco-info {
        columns: 1;
        column-gap: 0;
    }
}


@media (max-width: 992px) {

    /* CORREÇÃO DO FLEX CONTAINER: Empilhamento vertical */
    .flex-container {
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        /* REMOVIDO overflow-x: hidden; para deixar a regra geral no <body> */
    }

    .main-column,
    .sidebar-column {
        width: 100%;
        min-width: 100%;
    }

    /* CORREÇÃO MOBILE: Removendo qualquer ordenação inversa, deixando-o seguir a ordem do HTML (main depois sidebar) */
    /* A ORDEM INVERSA FOI REMOVIDA DAQUI. */
}


@media (max-width: 900px) {

    /* CORREÇÃO AQUI: VAZAMENTO HORIZONTAL */
    .container {
        /* Garante que o contêiner principal não cause vazamento horizontal */
        overflow-x: hidden;
        /* RE-ADICIONADO padding lateral para dar respiro ao conteúdo, evitando a borda total */
        padding-left: 10px;
        padding-right: 10px;
        max-width: 100%;
    }

    /* Regras para o menu */
    .menu-toggle {
        display: block;
        /* Alinhamento: Centraliza o botão agora que o logo foi removido. */
        margin-left: auto;
        margin-right: auto;
        order: 1;
        /* Novo: Torna o botão o elemento principal */
    }

    .nav-menu {
        display: none;
        order: 4;
        position: absolute;
        top: 65px;
        left: 0;
        width: 100%;
        height: 0;
        overflow: hidden;
        flex-direction: column;
        background-color: #004d99;
        transition: height 0.3s ease-in-out;
        z-index: 999;
    }

    .nav-menu.active {
        height: auto;
        max-height: 80vh;
        overflow-y: auto;
        display: flex;
    }

    .nav-menu a {
        padding: 15px 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        text-align: center;
        width: 100%;
    }

    /* CORREÇÃO RODAPÉ MOBILE: Centraliza os blocos e o texto */
    .footer-content {
        flex-direction: column;
        align-items: center;
        /* Centraliza os blocos do rodapé (nav, contact, social) */
        text-align: center;
        /* Centraliza o texto dentro dos blocos */
        gap: 30px;
        /* Garante bom espaçamento entre os blocos empilhados */
    }

    /* Garante que os blocos usem a largura total no mobile, mas com padding da .container */
    .footer-nav,
    .footer-contact,
    .footer-social {
        min-width: 100%;
        text-align: center;
    }

    /* **CORREÇÃO FINAL ROBUSTA**: Remove todos os estilos que impedem a centralização do texto nas listas */
    .footer-nav ul,
    .footer-contact ul {
        list-style: none !important;
        /* FORÇA a remoção dos marcadores */
        padding-left: 0 !important;
        /* FORÇA a remoção de qualquer padding */
        margin-left: 0 !important;
        /* FORÇA a remoção de qualquer margem */
        text-align: center !important;
        /* FORÇA a centralização do texto */
    }

    /* Garante que os itens individuais também centralizem */
    .footer-nav ul li,
    .footer-contact ul li {
        text-align: center !important;
        display: block;
    }


    /* Garante que os ícones sociais fiquem centralizados */
    .social-icons {
        justify-content: center;
    }
}

@media (min-width: 901px) {

    /* Retorna o menu para layout desktop */
    .menu-toggle {
        display: none;
    }
}

/* --- ESTILOS PARA A SEÇÃO DE ÍCONES SOCIAIS --- */

/* Estilo dos ícones: DEFINE O TAMANHO FIXO */
.social-icon {
    /* Você pode ajustar estes valores. 32px é um tamanho padrão. */
    width: 32px;
    height: 32px;
    display: block;
    /* Garante que o ícone se comporte como um bloco */
    transition: transform 0.2s ease;
}

/* Contêiner dos ícones (para espaçamento) */
.social-icons {
    margin-top: 15px;
    display: flex;
    gap: 10px;
    /* Espaçamento entre os ícones */
    align-items: center;
    /* Alinha verticalmente */
}

.social-icons a:hover .social-icon {
    transform: scale(1.15);
    /* Efeito de zoom ao passar o mouse */
}

/* Opcional, para garantir o layout do rodapé (se você não o tiver) */
.footer-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
}

/* ================================================= */
/* ESTILO DO ESCUDO CBF NA PÁGINA DE TIMES E ELENCOS */
/* ================================================= */

.cbf-shield-container {
    /* MANTÉM: Ocupa a largura total */
    width: 100%;
    /* Remove text-align para focar no margin: 0 auto da imagem */
    /* text-align: center; <-- REMOVIDO */
    padding-top: 20px;
    padding-bottom: 20px;
}

.cbf-shield {
    /* CHAVES PARA CENTRALIZAÇÃO E TAMANHO: */
    width: 60px;
    height: 60px;

    /* FORÇA A IMAGEM A SER UM BLOCO COM MARGEM AUTOMÁTICA */
    display: block;
    margin: 0 auto;
    /* ESTA É A CHAVE PARA CENTRALIZAR UM ELEMENTO BLOCK */

    opacity: 0.85;
    transition: opacity 0.3s;
}

.cbf-shield:hover {
    opacity: 1;
}

/* Garante que não haja margem superior indesejada no título após o escudo */
.main-content .section-title {
    margin-top: 0;
}

/* O título já está centralizado com text-align: center; na sua regra principal */
/* ================================================= */
/* ESTILOS ESPECÍFICOS PARA JOGOS ATRASADOS E REMARCADOS */
/* ================================================= */

/* --- Tipografia Jornalística --- */
.section-title,
.section-subtitle,
.card-match {
    font-family: 'Montserrat', sans-serif;
    color: #004d99;
}

.intro-text,
.disclaimer,
.card-info {
    font-family: 'Merriweather', serif;
}

/* --- Layout de Cards --- */

.game-list.card-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    padding: 0;
    list-style: none;
}

.game-card {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-top: 5px solid #004d99;
    /* Linha azul destacada no topo */
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s, box-shadow 0.2s;
}

.game-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.card-tag {
    display: inline-block;
    background: #ffcc00;
    color: #004d99;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.85em;
    margin-bottom: 10px;
}

.alert-tag {
    background: #dc3545;
    /* Amarelo */
    color: #004d99;
}

.remarcado-ok {
    background: #ffcc00;
    /* Fundo Amarelo/Ouro para Remarcado */
    color: #004d99;
    /* Texto Azul Escuro */
}

/* NOVO: Tag para jogos concluídos/realizados (VERDE CORRETO) */
.jogo-realizado {
    background: #4CAF50 !important;
    /* Verde para Realizado */
    color: white !important;
    /* Texto Branco */
}

.card-match {
    font-size: 1.5em;
    font-weight: 700;
    margin-top: 5px;
    margin-bottom: 15px;
    color: #000000;
    /* Mais escuro para destaque */
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 8px;
}

.card-info {
    font-size: 0.95em;
    line-height: 1.6;
    margin-bottom: 15px;
    color: #555;
}

.game-link {
    display: block;
    text-align: right;
    color: #004d99;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.2s;
}

.game-link:hover {
    color: #f7c80e;
}

/* --- Responsividade --- */
@media (max-width: 768px) {
    .game-list.card-layout {
        /* Garante que em mobile o grid não seja apertado */
        grid-template-columns: 1fr;
    }
}

/* ================================================= */
/* ESTILOS ESPECÍFICOS PARA A PÁGINA INICIAL (INDEX) */
/* ================================================= */

/* --- Layout da Página (Flexbox) --- */
.flex-container {
    display: flex;
    gap: 30px;
    /* Espaço entre as colunas */
    margin-top: 20px;
}

.main-column {
    flex: 3;
    /* Coluna principal ocupa mais espaço */
    min-width: 0;
}

.sidebar-column {
    flex: 1;
    /* Sidebar ocupa menos espaço */
    min-width: 250px;
}

/* Responsividade para colunas */
/* A regra @media (max-width: 992px) acima já faz a coluna empilhar */

/* --- Títulos e Headers --- */
.section-title,
.section-title-sidebar {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.8em;
    color: #004d99;
    /* Azul Principal */
    border-bottom: 3px solid #ffcc00;
    /* Linha de destaque amarela */
    padding-bottom: 5px;
    margin-bottom: 20px;
}

.section-title-sidebar {
    font-size: 1.4em;
    padding-bottom: 3px;
    margin-bottom: 15px;
}

/* --- DESTAQUE DA RODADA (Classic Card) --- */
.section-highlight {
    background: linear-gradient(135deg, #004d99, #003366);
    /* Gradiente de fundo */
    color: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
    margin-bottom: 30px;
}

.section-title-highlight {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.2em;
    margin-top: 0;
    margin-bottom: 15px;
    border-bottom: 3px solid #ffcc00;
    padding-bottom: 5px;
    color: white;
}

.match-highlight-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    /* Permite quebrar em mobile */
}

.match-info {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 2.5em;
    display: flex;
    align-items: center;
    gap: 15px;
}

.vs-label {
    color: #ffcc00;
    /* Amarelo de contraste */
}

.match-details p {
    margin: 5px 0;
    font-size: 1.1em;
}

.btn-details {
    display: inline-block;
    background-color: #ffcc00;
    color: #004d99;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 700;
    margin-top: 15px;
    transition: background-color 0.2s;
}

.btn-details:hover {
    background-color: #ffffff;
}

@media (max-width: 600px) {
    .match-highlight-container {
        flex-direction: column;
        align-items: flex-start;
    }

    .match-info {
        font-size: 1.8em;
        margin-bottom: 15px;
    }
}

/* --- LISTA DE JOGOS (Cards Pequenos) --- */
.game-list-card {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 15px;
    list-style: none;
    padding: 0;
}

.game-card-small {
    /* MUDANÇA CRÍTICA AQUI: Usando um cinza mais claro (quase branco) para gerar contraste com o fundo azulado do body (#f4f7f9) */
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-left: 5px solid #004d99;
    padding: 15px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    transition: background-color 0.2s;
    /* Adiciona uma sombra sutil para levantar o card */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.game-card-small:hover {
    /* Fundo um pouco mais escuro no hover para indicar interatividade */
    background-color: #f0f0f0;
    /* Levanta a sombra no hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.game-time {
    font-weight: 700;
    color: #004d99;
    width: 120px;
}

.game-match {
    flex-grow: 1;
    font-weight: 500;
    color: #333;
}

/* Correção de Contraste para Links de Jogos (Lista de Rodadas) */
.game-link {
    font-weight: 700;
    /* CORREÇÃO: Mudar para seu azul principal para garantir contraste (4.5:1) */
    color: #004d99;
    /* Cor original: #d1b82b */
    text-decoration: none;
}

/* NOVO: Adiciona a regra de hover corretamente */
.game-link:hover {
    /* Manter o hover com a cor amarela/ouro mais escura, indicando clique */
    color: #e6b800;
}


/* --- NOTÍCIAS (Cards) */
.news-card {
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.news-item h3 {
    font-size: 1.1em;
    color: #004d99;
    margin-top: 0;
    margin-bottom: 8px;
}

/* CORREÇÃO FINAL DE CONTRASTE PARA NOTÍCIAS: Força o AZUL */
/* Usando o seletor mais específico e cobrindo todos os estados do link (link, visited, active) */
.news-card a.news-link,
.news-card a.news-link:link,
.news-card a.news-link:visited,
.news-card a.news-link:active {
    font-weight: 700;
    /* FORÇANDO AZUL */
    color: #004d99 !important;
    text-decoration: none;
    transition: color 0.2s;
}

.news-card a.news-link:hover {
    /* O hover usa o amarelo de destaque */
    color: #e6b800 !important;
}


/* --- TABELA DE CLASSIFICAÇÃO (Sidebar Card) */
.sidebar-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.classification-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95em;
    margin-bottom: 15px;
}

.classification-table th,
.classification-table td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #f0f0f0;
}

.classification-table th {
    background-color: #004d99;
    color: white;
    font-weight: 700;
}

/* Cores de Destaque para Tabela */
.g4-bg {
    background-color: #e0f7fa;
    /* Azul claro para Libertadores/G4 */
    font-weight: 700;
}

.z4-bg {
    background-color: #fce4ec;
    /* Vermelho claro para Rebaixamento/Z4 */
    font-weight: 700;
}

.btn-full-table {
    display: block;
    text-align: center;
    background-color: #ffcc00;
    color: #004d99;
    padding: 10px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 700;
    transition: opacity 0.2s;
}

.btn-full-table:hover {
    opacity: 0.9;
}

/* ================================================= */
/* ESTILIZAÇÃO DO SIMULADOR (Lista de Jogos e Tabela Projetada) */
/* ================================================= */

.simulador-principal {
    margin-top: 30px;
    margin-bottom: 30px;
    padding: 0;
    /* Estilo de card */
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.simulador-desc {
    margin-bottom: 20px;
    font-size: 1em;
    color: #555;
    padding-left: 5px;
}

/* 1. Blocos Empilhados e Padding */
.simulador-bloco-jogos {
    /* Padding para separar o conteúdo do card principal */
    padding: 15px;
    border-bottom: 1px solid #eee;
    /* Linha divisória entre jogos e tabela */
}

.simulador-bloco-tabela {
    padding: 15px;
}


/* Título para a Tabela de Simulação */
.simulador-bloco-tabela .section-title-sidebar {
    /* Remove as bordas arredondadas do topo para se integrar melhor */
    border-radius: 0;
    padding: 10px 0;
    /* Ajusta o padding */
    margin-top: 0;
}

/* Wrapper para a lista de jogos: FORÇA ROLAGEM HORIZONTAL */
.lista-jogos-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* 2. Estilo dos Jogos (Layout interno) */
.rodada-simulador-header {
    background-color: #004d99;
    /* Azul Principal */
    color: white;
    padding: 10px 15px;
    margin: 15px 0 10px 0;
    border-radius: 4px;
    font-size: 1.1em;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    /* Corrige o margin horizontal para telas pequenas */
    min-width: 300px;
    /* Garante que o cabeçalho seja largo o suficiente para rolar */
}

.simulador-jogo-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    min-width: 350px;
    /* CHAVE: Força a rolagem horizontal */
}

.simulador-jogo-item:last-child {
    border-bottom: none;
}

.time-nome {
    font-weight: 500;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #333;
}

.time-nome.home {
    text-align: right;
    padding-right: 8px;
}

.time-nome.away {
    text-align: left;
    padding-left: 8px;
}

.placar-input {
    /* Usei .placar-input pois ele é genérico para placar_c e placar_f */
    width: 35px;
    /* Mais compacto */
    height: 35px;
    padding: 5px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-weight: bold;
    font-size: 1em;
    transition: border-color 0.3s;
    appearance: textfield;
    -moz-appearance: textfield;
    /* Remove setas no Firefox */
}

/* Remove as setas no Chrome/Safari */
.placar-input::-webkit-inner-spin-button,
.placar-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.placar-input:focus {
    border-color: #ffcc00;
    /* Destaque no foco com a cor amarela */
    box-shadow: 0 0 0 2px rgba(255, 204, 0, 0.4);
    outline: none;
}

.placar-separator {
    font-weight: bold;
    margin: 0 5px;
    color: #004d99;
    /* Cor do separador */
}

/* 3. Estilo da Tabela Projetada */

#tabela-classificacao-container {
    /* Removido todos os flex/min-width/overflow-x do container principal */
    padding: 0;
}

/* Tabela em si: Aplicando o estilo de tabela principal */
.tabela-simples-simulador,
.tabela-simulada {
    /* Herda o estilo da sua .classification-table */
    width: 100%;
    border-collapse: collapse;
    background-color: white;
    font-size: 0.85em;
    border-radius: 0 0 8px 8px;
    box-shadow: none;
    /* overflow: hidden; <--- LINHA REMOVIDA AQUI PARA CORRIGIR O PROBLEMA */
    /* CHAVE: Garante largura mínima para rolagem horizontal no table-wrapper */
    min-width: 400px;
}

/* Cabeçalho da Tabela do Simulador */
.tabela-simples-simulador thead,
.tabela-simulada thead {
    background-color: #004d99;
    color: white;
}

.tabela-simples-simulador th,
.tabela-simulada th {
    padding: 12px 6px;
    text-align: center;
    font-weight: 700;
    border-bottom: 2px solid #ffcc00;
}

/* Células e Linhas */
.tabela-simples-simulador td,
.tabela-simulada td {
    padding: 10px 6px;
    border-bottom: 1px solid #f0f0f0;
    text-align: center;
}

/* Faixas Zebradas (alternadas) */
.tabela-simples-simulador tbody tr:nth-child(odd),
.tabela-simulada tbody tr:nth-child(odd) {
    background-color: #ffffff;
}

.tabela-simples-simulador tbody tr:nth-child(even),
.tabela-simulada tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}


/* APLICANDO AS SUAS CORES EXISTENTES (.g4, .sula, .z4) */
/* As classes .g4, .sula, .z4 na <tr> serão aplicadas pelo JS. */

/* G4 (Libertadores - Grupos) */
.tabela-simulada .g4 td {
    border-left: 4px solid #155724;
    /* Verde escuro do seu .g4 */
    background-color: #d4edda !important;
    /* Seu verde claro */
    color: #155724;
}

/* Sula (Sudamericana) */
.tabela-simulada .sula td {
    border-left: 4px solid #856404;
    /* Seu amarelo escuro do .sula */
    background-color: #fff3cd !important;
    /* Seu amarelo claro */
    color: #856404;
}

/* Z4 (Rebaixamento) */
.tabela-simulada .z4 td {
    border-left: 4px solid #721c24;
    /* Seu vermelho escuro do .z4 */
    background-color: #f8d7da !important;
    /* Seu vermelho claro */
    color: #721c24;
}

/* Tira a borda inferior da última linha para ficar limpo */
.tabela-simulada tr:last-child td {
    border-bottom: none;
}

/* Estilo do nome do time na Tabela Projetada (2ª coluna) */
.tabela-simples-simulador td:nth-child(2),
.tabela-simulada td:nth-child(2) {
    text-align: left;
    font-weight: bold;
    color: #333;
    padding-left: 15px;
    /* Alinha com o seu estilo padrão */
    min-width: 150px;
    /* AUMENTADO: Garante que o nome do time ocupe mais espaço */
}

/* Estilo da Coluna de Pontos (3ª coluna) */
.tabela-simples-simulador td:nth-child(3),
.tabela-simulada td:nth-child(3) {
    min-width: 50px;
    /* Garante que a coluna Pts não seja esmagada */
}


/* 4. Responsividade Específica para Mobile (Garantir Rolagem) */
@media (max-width: 900px) {

    /* GARANTE QUE OS BLOCOS DE NAVEGAÇÃO E CONTATO HERDEM A LARGURA TOTAL NO MOBILE */
    .footer-nav,
    .footer-contact {
        width: 100% !important;
        /* Força 100% de largura */
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 1. CENTRALIZAÇÃO DOS BLOCOS (Garantia) */
    .footer-content {
        align-items: center;
        text-align: center;
        /* Garante que os blocos de nav/contato ocupem 100% no mobile */
        width: 100%;
    }

    /* 2. FORÇA O ALINHAMENTO NOS LINKS E NAS LISTAS (Nav/Contato) */
    .footer-nav ul,
    .footer-contact ul {
        list-style: none !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
        /* CHAVE: Garante que os itens da lista usem o centro do contêiner */
        text-align: center !important;
    }

    /* 3. Centraliza o texto em todos os links e remove o display block desnecessário */
    .footer-nav a,
    .footer-contact a {
        display: inline-block;
        /* Altera para inline-block */
        text-align: center !important;
        /* Adiciona margem automática para centralizar o bloco se ele for menor que 100% */
        margin-left: auto;
        margin-right: auto;
    }

    /* 4. Garante que os títulos da Ficha Técnica (sidebar-card) fiquem centralizados */
    .sidebar-card h3 {
        text-align: center !important;
    }
}


/* CORREÇÃO AQUI: VAZAMENTO HORIZONTAL */
.container {
    /* Garante que o contêiner principal não cause vazamento horizontal */
    overflow-x: hidden;
    /* RE-ADICIONADO padding lateral para dar respiro ao conteúdo, evitando a borda total */
    padding-left: 10px;
    padding-right: 10px;
    max-width: 100%;
}

/* O layout agora é empilhado por padrão, mas precisamos do padding do container */
.container {
    padding: 0;
}

.main-content {
    padding-top: 90px;
    padding-left: 10px;
    padding-right: 10px;
    /* GARANTIA: Proíbe o vazamento no main-content */
    overflow-x: hidden;
}

/* O elemento principal do simulador agora ocupa 100% da largura do seu container */
.simulador-principal {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* Garante que a sidebar use a largura total e não tenha padding que cause vazamento */
.sidebar-column {
    padding: 0;
    width: 100%;
}

/* Garante que o card da tabela tenha um pequeno respiro lateral para não tocar a borda da tela */
.sidebar-card {
    margin: 0 10px 20px 10px;
    width: calc(100% - 20px);
}


/* ================================================= */
/* ESTILOS ISOLADOS PARA PÁGINAS DE DETALHES DA PARTIDA (.match-page-detail) */
/* ================================================= */

.match-page-detail {
    /* Define o fundo apenas para o conteúdo principal desta página */
    background-color: #f4f7f9;
}

/* 1. TÍTULOS E ESTRUTURA GERAL */
.match-page-detail .section-title {
    /* O título principal da página de times será grande e centralizado */
    color: #0d47a1;
    /* Azul para o título principal do jogo */
    text-align: center;
    margin-bottom: 30px;
    font-size: 2.2em;
    border-bottom: 3px solid #ffcc00;
    padding-bottom: 10px;
}

/* 2. ESTILO BÁSICO DO CARD */
.match-page-detail .card-info {
    background-color: #fff;
    padding: 20px;
    margin-bottom: 25px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    /* Sombra suave */
    border-left: 5px solid #004d99;
    /* Borda esquerda com sua cor primária */
}

.match-page-detail .card-info h3 {
    font-family: 'Montserrat', sans-serif;
    margin-top: 0;
    color: #004d99;
    font-size: 1.5em;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

/* 3. LAYOUT FLEXÍVEL PARA CARTÕES LADO A LADO */
.match-page-detail .card-container-flex {
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
}

.match-page-detail .card-container-flex>.card-info {
    flex: 1;
    min-width: 300px;
}

/* 4. CARD: INFORMAÇÕES DA PARTIDA */
.match-page-detail .details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
}

.match-page-detail .detail-item strong {
    color: #333;
    display: block;
    margin-bottom: 3px;
    font-size: 0.9em;
}

.match-page-detail .detail-item span {
    font-size: 1.1em;
    font-weight: 700;
}

.match-page-detail .detail-transmission .trans-channel {
    background-color: #c62828;
    /* Vermelho forte para destaque da TV */
    color: white;
    padding: 3px 8px;
    border-radius: 5px;
    font-weight: 700;
}

/* 5. CARD: ESCALAÇÕES */
.match-page-detail .team-lineup {
    display: flex;
    justify-content: space-around;
    gap: 20px;
}

.match-page-detail .team-card {
    flex: 1;
    padding: 15px;
    border: 1px dashed #ddd;
    border-radius: 8px;
}

/* Cores de exemplo para os títulos dos times - ajuste conforme o jogo */
.match-page-detail .team-a-card h4 {
    color: #690f13;
}

/* Verde - Ex: Atlético-MG */
.match-page-detail .team-b-card h4 {
    color: #1d1d1c;
}

/* Azul - Ex: Ceará */

.match-page-detail .lineup-list {
    list-style-type: none;
    padding-left: 0;
}

.match-page-detail .lineup-list li {
    padding: 5px 0;
    border-bottom: 1px dotted #eee;
}

/* 6. CARD: DESFALQUES */
.match-page-detail .desfalques-content {
    display: flex;
    gap: 20px;
}

.match-page-detail .team-desfalque {
    flex: 1;
}

.match-page-detail .team-desfalque ul {
    list-style-type: '❌ ';
    /* Usa um emoji como marcador */
    padding-left: 20px;
}

/* 7. CARD: ANÁLISE PRÉ-JOGO */
.match-page-detail .card-analysis h3 {
    color: #4CAF50;
    /* Verde para Análise */
    border-left: 5px solid #4CAF50;
    padding-left: 10px;
    border-bottom: none;
}

.match-page-detail .prediction-box {
    margin-top: 20px;
    padding: 15px;
    background-color: #fff3e0;
    /* Fundo amarelo claro (cor de alerta) */
    border-radius: 8px;
    border: 1px solid #ffcc00;
    /* Borda com seu Amarelo/Ouro */
}

.match-page-detail .prediction-box h4 {
    color: #ff9800;
    /* Laranja para o título da expectativa */
    margin-top: 0;
}

/* 8. CARD: ARBITRAGEM */
.match-page-detail .card-referee h3 {
    color: #607d8b;
}

/* 9. LINK DE RODAPÉ */
.match-page-detail .read-more-news a {
    font-weight: 700;
    color: #004d99;
    /* Usa seu azul principal */
    transition: color 0.3s;
}

.match-page-detail .read-more-news a:hover {
    color: #ffcc00;
    /* Usa seu amarelo/ouro no hover */
}

/* 10. RESPONSIVIDADE ESPECÍFICA DE CARDS */
@media (max-width: 768px) {

    .match-page-detail .card-container-flex,
    .match-page-detail .team-lineup,
    .match-page-detail .desfalques-content {
        flex-direction: column;
    }

    .match-page-detail .card-container-flex>.card-info {
        min-width: 100%;
    }
}

/* 11. REGRAS ESPECÍFICAS DE CORES */
/* Todas as regras de cores específicas por jogo (Fluminense, Atlético-MG, etc.) permanecem inalteradas. */



/* CORREÇÃO ROBUSTA PARA VAZAMENTO DO TÍTULO DESTAQUE NO MOBILE */
@media (max-width: 600px) {

    /* 1. GARANTE QUE O TÍTULO CAIBA NA LARGURA */
    .section-title-highlight {
        /* Reduz a fonte para caber na maioria dos celulares */
        font-size: 1.5em !important;
        /* Garante que o texto possa quebrar em qualquer palavra se a largura for muito apertada */
        word-wrap: break-word;
        overflow-wrap: break-word;
        /* Garante 100% de largura */
        width: 100%;
        margin-bottom: 10px;
    }

    /* 2. FORÇA O CONTÊINER DESTAQUE A NÃO VAZAR */
    .section-highlight {
        /* Remove o padding lateral do destaque para evitar que ele empurre para fora */
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* 3. Garante que os nomes dos times se ajustem no card de destaque */
    .match-highlight-container {
        /* Garante que o contêiner de informações do jogo use 100% */
        width: 100%;
    }

    .match-info {
        /* Permite que o placar/times quebrem para a linha de baixo se for muito longo */
        flex-wrap: wrap;
        font-size: 2em;
        /* Reduz ligeiramente para caber */
    }
}

/* ================================================= */
/* CORREÇÃO DE ACESSIBILIDADE - ORDEM DOS TÍTULOS (H5) */
/* ================================================= */

.article-attribution {
    /* Substitui visualmente o H5 para metadados (Autor/Fonte) */
    font-size: 0.85em;
    /* Define o tamanho da fonte, similar a um h5 pequeno */
    font-weight: 500;
    /* Pode ser 500 ou 700 se quiser negrito, mas 500 é mais comum para metadados */
    color: #666;
    /* Cor cinza para metadados */
    margin-top: 5px;
    margin-bottom: 15px;
    display: block;
    /* Garante que o elemento ocupe uma linha inteira */
}

/* --- ESTILOS PARA A SEÇÃO DE COMENTÁRIOS --- */

.comentarios-section {
    max-width: 800px;
    margin: 40px auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
}

.comentarios-title {
    color: #333;
    border-bottom: 2px solid #007bff;
    /* Cor primária do site/blog */
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* --- ESTILOS DO FORMULÁRIO --- */

.comentarios-form {
    display: flex;
    flex-direction: column;
}

.form-group {
    margin-bottom: 15px;
}

.comentarios-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #555;
}

.form-input,
.form-textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    /* Garante que o padding não aumente a largura total */
    font-size: 16px;
    transition: border-color 0.3s ease;
}

.form-input:focus,
.form-textarea:focus {
    border-color: #007bff;
    /* Destaca o campo ativo */
    outline: none;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.2);
}

.form-textarea {
    resize: vertical;
    /* Permite que o usuário redimensione verticalmente */
}

/* --- ESTILOS DO BOTÃO --- */

.submit-button {
    background-color: #28a745;
    /* Cor de sucesso/destaque (Verde) */
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.submit-button:hover {
    background-color: #218838;
    /* Escurece no hover */
}

/* --- AVISO FORMSPREE --- */

.formspree-aviso {
    margin-top: 15px;
    font-size: 12px;
    color: #888;
    text-align: center;
}