/* Estilos gerais para a página */
body {
    background-color: #333; 
    color: white;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 10px;
}

/* O contêiner principal que imita a imagem */
.container-principal {
    max-width: 1000px; 
    max-height: 500px;
    margin: 10px auto; 
    background-color: black;
    border: 1px solid white;
    border-radius: 15px; 
    overflow: hidden; 
 /*   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);*/
}

/* --- LINHA 1: CABEÇALHO --- */
.cabecalho {
    padding: 0;
    line-height: 0; 
}

.cabecalho img {
    width: 100%; 
    display: block;
}

/* --- LINHA 2: AS DUAS COLUNAS --- */
.conteudo-duas-colunas {
    display: flex;
}

.coluna.esquerda {
    flex: 0 0 40%; /* Define a largura da coluna esquerda em 40% */
    border-right: 1px solid white;
    text-align: center;
    padding: 20px;
    height: 600px;
    overflow-y: auto;
}

.coluna.direita {
    flex: 1 1 60%; /* Permite que a coluna direita ocupe os 60% restantes e cresça se necessário */
    font-family: Verdana, sans-serif;
    font-size: 12px;
    line-height: 1.1;
    padding: 20px;
    height: 600px;
    overflow-y: auto;
}

/*
CONTEÚDO DA COLUNA ESQUERDA (CD)
*/

.coluna.esquerda {
    border-right: 1px solid white; 
    text-align: center;
}

.coluna.esquerda .capa-cd {
    border: 0;
    margin-bottom: 10px;
}

.coluna.esquerda .info-cd {
    font-family: Verdana, sans-serif;
    font-size: 12px;
    line-height: 1.1;
}

.coluna.esquerda .info-cd a {
    color: white;
}

/* Estilo do Menu Lateral (Substituto do Flash) -  HORIZONTAL */
.menu-lateral {
    margin-top: 20px;
    padding: 0 5px; /* Adiciona um pequeno preenchimento lateral para não colar nas bordas */
}

.menu-lateral ul {
    list-style: none; /* Remove as bolinhas da lista */
    padding: 0;
    margin: 0;
    display: flex; /* O mais importante: alinha os itens horizontalmente */
    flex-wrap: wrap; /* Permite que os botões quebrem para a linha de baixo se não couberem */
    justify-content: center; /* Centraliza os botões no espaço disponível */
    gap: 3px; /* Cria um espaço uniforme entre os botões */
}

.menu-lateral a {
    display: inline-block; /* Muda para inline-block para fluir horizontalmente */
    padding: 5px 10px; /* Padding um pouco menor que o do rodapé */
      background-color: white;
      color: black;
      border-radius: 10px; /* Deixe proporcional ao tamanho do botão */
      border: 2px solid white;
      font-family: Verdana, sans-serif;
      font-size: 12px; /* Letras um pouco menores */
      font-weight: bold;
      text-decoration: none;
      transition: all 0.3s ease-in-out;
}

.menu-lateral a:hover {
      background-color: #ddd; /* Cinza claro no hover */
      color: black;
      text-decoration: none;
}

/*
CONTEÚDO DA COLUNA DIREITA (Notícias)
*/

.coluna.direita {
    font-family: Verdana, sans-serif;
    font-size: 12px; /* equivalente para o antigo "size=1" */
    line-height: 1.6; /* Melhora a legibilidade */
}

/* Estilo para os títulos das notícias */
.coluna.direita h4 {
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 13px; /* Um pouco maior para destaque */
    font-weight: bold;
}

/* Espaçamento entre as notícias, substituindo os múltiplos <br> */
.coluna.direita .noticia {
    margin-bottom: 20px;
}

.coluna.direita .noticia p {
    margin-top: 0;
    margin-bottom: 10px;
}

/* Estilo para a assinatura */
.coluna.direita .byline {
    font-size: 10px; /* Bem pequeno, como no original */
    color: #ccc;
}

/* Estilo para o link do histórico, que era <font size=-7> */
.coluna.direita .historico {
    font-size: 10px; 
    margin-top: 40px;
}

/* Estilos para os links dentro da coluna direita */
.coluna.direita a {
    color: white; /* Cor padrão do link */
    font-weight: bold;
    text-decoration: none; /* Remove o sublinhado padrão */
}

.coluna.direita a:hover {
    color: #ccc; /* Cor do link ao passar o mouse */
    text-decoration: underline; /* Adiciona sublinhado no hover */
}


/*

### ESTILO DA BARRA DE ROLAGEM (Scrollbar) ###


 Para navegadores baseados em WebKit (Chrome, Safari, Edge) */
 
.coluna.direita::-webkit-scrollbar {
    width: 12px;
}

.coluna.direita::-webkit-scrollbar-track {
    background: black; /* Fundo da trilha */
}

.coluna.direita::-webkit-scrollbar-thumb {
    background-color: white; /* A própria barra */
    border-radius: 20px;
    border: 3px solid black; /* Cria uma borda em volta da barra */
}

/* Para Firefox */
.coluna.direita {
    scrollbar-width: thin;
    scrollbar-color: white black; /* Cor da barra e cor do fundo */
}


/* --- LINHA 3: RODAPÉ (CÓDIGO CORRIGIDO) --- */
.rodape {
    padding: 20px;
    text-align: center;
}

.rodape nav a {
    display: inline-block;
      margin: 2px 2px;
      padding: 2px 2px;

      background-color: white;
      color: black;
      border-radius: 20px; /* Deixe proporcional ao tamanho do botão */
      border: 2px solid white;

      font-family: Verdana, sans-serif;
      font-size: 14px; /* Letras um pouco menores */
      font-weight: bold;
      text-decoration: none;

      transition: all 0.3s ease-in-out;
}

.rodape nav a:hover {
      background-color: #ddd; /* Cinza claro no hover */
      color: black;
      text-decoration: none;
}

@media (max-width: 768px) {
    /* Container principal ocupa quase toda a tela */
    .container-principal {
        width: 95%;
        max-height: none;
        border-radius: 10px;
    }

    /* Muda de colunas lado a lado para empilhadas */
    .conteudo-duas-colunas {
        flex-direction: column;
    }

    .coluna.esquerda,
    .coluna.direita {
        flex: 1 1 100%;
        height: auto; /* Altura automática em vez de fixa */
        padding: 15px;
    }

    .coluna.esquerda {
        border-right: none;
        border-bottom: 1px solid white; /* Opcional: separar visualmente as colunas */
    }

    /* Reduz tamanho da fonte e padding de botões para caber melhor */
    .menu-lateral a,
    .rodape nav a {
        font-size: 11px;
        padding: 4px 8px;
    }

    /* Centraliza imagem no topo */
    .cabecalho img {
        height: auto;
    }
}