/* --- Estilos para a página de Fórmula 1 --- */

/* --- Container dos Filtros --- */
.formula1-filtros {
    display: flex;
    justify-content: center;
    background-color: #e9ecef;
    border-radius: 12px;
    padding: 0.5rem;
    margin-top: -1.2rem; /* Espaço acima dos filtros */
    margin-bottom: 1.5rem; /* Espaço abaixo dos filtros */
    margin-left: 20px;
    margin-right: 20px;
}

/* --- Estilo Base dos Botões de Filtro --- */
.filtro-btn {
    flex: 1; /* Faz os botões ocuparem o espaço igualmente */
    padding: 0.75rem 1rem;
    margin: 0 0.25rem;
    border: none;
    background-color: transparent; /* Fundo transparente por padrão */
    color: #6c757d;
    font-weight: 600;
    font-size: 0.90rem; /* Ajustei um pouco o tamanho para caber bem */
    font-family: var(--fonte-principal);
    border-radius: 8px; /* Bordas arredondadas para o efeito de pílula */
    text-align: center;
    transition: background-color 0.3s ease, color 0.3s ease;
    cursor: pointer;
}

/* --- Efeito Hover (passar o mouse) --- */
/* Só aplica o hover se o botão NÃO estiver ativo */
.filtro-btn:not(.ativo):hover {
    background-color: #f93c35; /* Cor de fundo ao passar o mouse */
    color: #ffffff; /* Cor do texto ao passar o mouse */
}

/* --- Estilo do Botão Ativo --- */
.filtro-btn.ativo {
    background-color: #e10600;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(225, 6, 0, 0.3);
    cursor: default; /* O cursor não muda no botão já ativo */
}

/* --- layout da pagina --- */
/* Estilos para os cards de evento da F1 */
#conteudo-formula1 {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Espaçamento entre os cards */
    padding: 0 20px 15px 20px; /* Espaço nas laterais e no fundo */
}

.loading-message, .error-message {
    text-align: center;
    padding: 2rem;
    font-weight: 500;
}

.error-message {
    color: #dc3545; /* Vermelho para erros */
}

.evento-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: #ffffff; /* Usando variável para tema escuro */
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.evento-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

/* Bloco da Data */
.evento-data {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    background-color: #6c757d; /* Cinza padrão */
    color: white;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-weight: 700;
}

.evento-data .dia {
    font-size: 1.6rem;
    line-height: 1;
}

.evento-data .mes {
    font-size: 0.8rem;
    letter-spacing: 0.5px;
}

/* Informações do Evento (meio) */
.evento-info {
    flex-grow: 1;
}

.evento-info .dia-semana {
    color: #e10600; /* Vermelho F1 */
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
}

/* Titulo dos treinos e classificação */
.evento-info h2 {
    margin: 0.25rem 0 0.5rem;
    font-size: 1.5rem;
    color: var(--cor-texto-principal, #212529);
}

/* Titulo dos circuito do pais */
.evento-info .circuito {
    margin: 0; /* Margin ajustada pois não há mais nada abaixo */
    color: var(--cor-texto-secundario, #6c757d);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Bloco da Hora (direita) */
.evento-hora {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 1.2rem;
    font-weight: 600;
    color: #e10600; /* Vermelho F1 */
}

/* Icone da hora (direita) */
.evento-hora .fa-clock {
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

/* Estilos para o Evento Principal (Corrida) */
.evento-principal {
    position: relative; /* Essencial para criar um contexto de posicionamento */
    z-index: 0;         /* CRÍTICO: Cria um contexto de empilhamento estável que resolve o bug do hover */
    overflow: hidden;   /* Para conter o fundo dentro das bordas arredondadas */
    /* Estilos de layout e texto que não são de fundo */
    color: white;
    padding-top: 3rem;
    padding-bottom: 3rem;
}

/* NOVA REGRA: Adicione este bloco para criar a camada de fundo desfocada */
.evento-principal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Joga esta camada para trás do conteúdo do .evento-principal */
    /* TODO o fundo (cor + imagem) é definido AQUI */
    background-color: #15151e;
    background-image: url('https://rtrsports.com/wp-content/uploads/2024/07/pexels-rezk-assaf-10795564.jpg');
    background-size: cover;
    background-position: center right;
    /* O desfoque é aplicado somente nesta camada de fundo */
    filter: blur(1.4px);
}

.evento-principal .evento-data {
    background-color: #e10600; /* Vermelho F1 */
    width: 70px;
    height: 70px;
}

.evento-principal h2, .evento-principal .circuito { color: white; }

.evento-principal .dia-semana, .evento-principal .evento-hora { color: white; }

.evento-principal .evento-hora {
    background-color: rgba(225, 6, 0, 0.8); /* Fundo vermelho translúcido */
    padding: 0.5rem 1rem;
    border-radius: 10px;
}

.evento-principal .evento-info {
    display: flex;
    flex-direction: column; /* Empilha os itens verticalmente */
    align-items: center;   /* Centraliza horizontalmente */
    justify-content: center; /* Centraliza verticalmente */
}

/* ---------------------------------------------- */
/* --- Estilos para a Seção de Última Corrida --- */
.resultado-header {
    position: relative; /* Essencial para o posicionamento do ::before */
    z-index: 0;         /* Cria um contexto de empilhamento estável */
    overflow: hidden;   /* Contém o fundo dentro das bordas arredondadas */
    /* Estilos de layout e texto */
    text-align: center;
    padding: 3rem;
    border-radius: 12px;
    margin-bottom: 0.5rem;
}

/* Adicione esta NOVA REGRA ao seu CSS */
.resultado-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Joga esta camada para trás do conteúdo de texto */
    /* O fundo completo (cor + imagem) é definido aqui */
    background-color: #15151e;
    background-image: url('https://rtrsports.com/wp-content/uploads/2024/07/pexels-rezk-assaf-10795564.jpg');
    background-size: cover;
    background-position: center; /* 'center' pode ficar melhor para este componente */
    /* Efeito de desfoque */
    filter: blur(1px);
}

.resultado-header h2 {
    margin: 0;
    color: #ffffff;
    font-size: 1.8rem;
}

.resultado-header p {
    margin: 0.25rem 0 0;
    color: #ffffff;
    font-weight: 500;
}

.podium-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.podium-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background-color: #ffffff;
    border-radius: 10px;
    border-left: 8px solid; /* Borda colorida baseada na posição */
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* Cores do Pódio */
.podium-card.pos-1 { border-color: #FFD700; } /* Ouro */
.podium-card.pos-2 { border-color: #C0C0C0; } /* Prata */
.podium-card.pos-3 { border-color: #CD7F32; } /* Bronze */

.podium-position {
    font-size: 1.5rem;
    font-weight: 700;
    width: 40px;
    text-align: center;
    flex-shrink: 0;
}
.podium-card.pos-1 .podium-position { color: #FFD700; }
.podium-card.pos-2 .podium-position { color: #8B8B8B; }
.podium-card.pos-3 .podium-position { color: #CD7F32; }

.podium-info {
    flex-grow: 1;
}

/* Nome do piloto */
.podium-info .driver-name {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 400;
    color: #000000;
}

.podium-info .driver-name strong {
    font-weight: 700;
}

/* Nome da equipe */
.podium-info .team-name {
    margin: 0.15rem 0 0;
    font-size: 0.85rem;
    color: #6c757d;
}

.podium-points {
    font-size: 0.9rem;
    font-weight: 600;
    color: #ffffff;
    background-color: #e10600;
    border-radius: 6px;
    min-width: 70px;         /* Valor sugerido para caber bem "+25 PTS" */
    text-align: center;      /* Garante que o texto fique no meio */
    padding: 0.4rem 0;
    flex-shrink: 0;
}

/* --- Estilos para a Seção de Classificação --- */
/* Container para as abas 'Pilotos' e 'Construtores' */
.classificacao-nav {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    padding-left: 20px;
    padding-right: 20px
}

.classificacao-nav-btn {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 1px solid #dee2e6;
    background-color: transparent;
    color: #000000;
    font-weight: 600;
    font-family: var(--fonte-principal);
    border-radius: 8px;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.classificacao-nav-btn:hover {
    background-color: #f1f3f5;
    border-color: #ced4da;
}

.classificacao-nav-btn.ativo {
    background-color: #e10600;
    color: #ffffff;
    border-color: #e10600;
    cursor: default;
}

/* Tabela de Classificação */
.classificacao-tabela-container {
    overflow-x: auto; /* Para rolagem em telas pequenas */
    padding: 0 5px; /* Um pequeno respiro interno extra para a tabela */
}

.classificacao-tabela {
    width: 100%;
    border-collapse: collapse; /* Remove espaços entre as células */
    text-align: left;
}

.classificacao-tabela th, .classificacao-tabela td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #dee2e6; /* Linha de separação entre as linhas */
    vertical-align: middle;
}

/* Cabeçalhos da tabela */
.classificacao-tabela th {
    font-weight: 600;
    color: #6c757d;
    font-size: 0.8rem;
    text-transform: uppercase;
}

/* Cores dos nomes do piloto e pontos */
.classificacao-tabela td {
    color: #212529;
}

/* Colunas específicas */
.col-pos {
    width: 10%;
    font-weight: 700;
    text-align: center;
    font-size: 1.1rem;
}

.col-pts {
    width: 20%;
    font-weight: 700;
    text-align: right;
}

/* Coluna de Pilotos */
.col-piloto .equipe {
    display: block;
    font-size: 0.85rem;
    color: #6c757d;
    margin-top: 2px;
}
.col-construtor {
    font-weight: 300;
}

/* CONTAGEM REGRESSIVA DA F1 */
.countdown-container {
    background: #ffffff;
    border: 1px solid var(--border-color, #2b0808);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    margin-bottom: 1px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.countdown-title {
    font-size: 1rem;
    color: #000000;
    margin-top: -10px;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.countdown-timer {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.time-box {
    background: var(--bg-card, #222);
    border: 2px solid #007bff; /* Azul do seu tema */
    border-radius: 8px;
    min-width: 65px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.time-box span {
    font-size: 1.5rem;
    font-weight: bold;
    color: #fff;
    line-height: 1;
}

.time-box small {
    font-size: 0.8rem;
    color: #aaa;
    margin-top: 5px;
    font-weight: 600;
}

.countdown-segundos {
    border-color: #ff4d4d; /* Vermelho F1 nos segundos para chamar atenção */
}

.corrida-live {
    color: #ff4d4d;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
}

/* --- ESTILOS PARA TELAS MENORES (MOBILE) --- */
@media (max-width: 600px) {
    #conteudo-formula1 {
        padding: 0 10px 15px 10px; /* Espaço nas laterais e no fundo */
    }
    .evento-info h2 {
        font-size: 1.2rem;
    }
    .evento-info .circuito {
        font-size: 0.8rem;
    }
    .evento-card {
        gap: 0.5rem;
    }
    /* 3. Reduz o padding do bloco da hora no card principal */
    .evento-principal .evento-hora {
        padding: 0.4rem 0.6rem;
    }
    .evento-principal {
        /* Adiciona um padding extra na base para criar espaço para o texto do circuito */
        padding-bottom: 3rem; /* Espaço para o texto do circuito */
    }
    /* 2. POSICIONA O CIRCUITO DE FORMA ABSOLUTA NO CANTO INFERIOR ESQUERDO */
    .evento-principal .evento-info .circuito {
        /* Define o posicionamento absoluto */
        position: absolute;
        /* Distância da base do card */
        bottom: 1rem;
        /* Distância da esquerda do card */
        left: 50%;
        transform: translateX(-50%);
        /* Garante que o texto não vaze para a direita */
        right: 1rem;
        width: auto; /* Reseta a largura para o padrão */
    }
    .formula1-filtros {
        font-size: 0.7rem;       /* 1. Diminui a fonte */
        padding: 0.75rem 0.5rem; /* 2. Reduz o espaçamento lateral */
        margin: 8px;
        margin-top: -20px; /* Ajusta o espaço acima dos filtros para telas menores */

    }
    .filtro-btn {
        font-size: 0.8rem;       /* 1. Diminui a fonte */
        padding: 0.5rem 0.2rem; /* 2. Reduz o espaçamento lateral */
        margin: 0;
    }
    .resultado-header {
        padding: 2rem;
    }
    .podium-card {
        padding: 0.8rem 10px; /* Reduz o padding lateral de 1rem para 10px */
        gap: 8px;            /* Diminui o espaço entre a posição, o texto e os pontos */
    }
    .podium-position {
        width: 30px;         /* De 40px para 30px */
        font-size: 1.2rem;   /* Fonte levemente menor */
    }
    .podium-info .driver-name {
        font-size: 1.05rem;  /* Reduz um pouco o tamanho da fonte */
        line-height: 1.1;    /* Ajusta o espaço entre as linhas do nome */
        margin-bottom: 2px;
    }
}