/* ====================================
    ESTILOS GERAIS DO CORPO DA PÁGINA
    ==================================== */
body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
}


/* ====================================
    ESTILOS DO CABEÇALHO (HEADER)
    ==================================== */
header {
    background-color: #004080;
    color: white;
    padding: 5px;
    text-align: center;
}

header img {
    display: block;
    margin: 0 auto 5px; /* Centraliza a imagem e adiciona espaço abaixo */
}
/* ====================================
    ESTILOS DA NAVEGAÇÃO (NAV)
    ==================================== */
nav {
    background-color: #0066cc;
    padding: 0.5em;
    text-align: center;
}

nav a {
    color: white;
    margin: 0 1em;
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
}

nav a:hover {
    text-decoration: underline;
    color: #ffcc00;
}


/* ====================================
    ESTILOS DA TABELA
    ==================================== */

.tabela-postos {
    /* Essencial para que as colunas se ajustem ao conteúdo */
    table-layout: auto; 
    border-collapse: collapse;  
    width: 100%; 
}

.tabela-postos th, 
.tabela-postos td {
    border: 1px solid #000;
    padding: 5px; /* Padding padrão das demais células (texto) */
    text-align: center;
    /* Centraliza o conteúdo verticalmente (solução para tabelas) */
    vertical-align: middle; 
}

.tabela-postos th {
    background-color: #f2f2f2;
}

/* ESTILOS PARA A COLUNA DO ÍCONE (TD e TH) */
.tabela-postos .coluna-icone,
.tabela-postos .coluna-icone-header {
    /* Limite de Largura */
    width: 1%; 
    white-space: nowrap; 
    
    /* Padding Lateral: 0 no topo/base, 10px nas laterais */
    padding: 0 10px; 
}

/* GARANTE O TAMANHO EXATO DA IMAGEM */
.tabela-postos .coluna-icone img {
    /* Garante que a imagem se comporte corretamente com vertical-align */
    display: inline-block; 
    width: 20px;
    height: 20px;
}


/* ====================================
    LAYOUT MAPA E TABELA (LADO A LADO)
    - USA FLEXBOX -
    ==================================== */

.mapa-e-tabela {
    display: flex; 
    flex-wrap: wrap; 
    gap: 20px;  
    justify-content: center;  
    align-items: flex-start;  
    padding: 2em;  
}

/* Estilo para o mapa (iframe) */
.mapa-e-tabela iframe {
    /* Padrão: permite quebra e crescimento em telas pequenas */
    flex: 1 1 50%;
    max-width: 100%;
    height: 480px;  
    border: none;  
}

/* Estilo para a tabela */
.mapa-e-tabela .tabela-postos {
    /* Padrão: permite quebra e crescimento em telas pequenas */
    flex: 1 1 50%; 
    max-width: 100%;
}


/* Media Query para telas maiores (Desktop) */
@media (min-width: 1050px) {
    /* NOVO AJUSTE: Força a divisão 50/50 em telas grandes, usando flex-basis: 0 */
    
    /* Iframe (Mapa) */
    .mapa-e-tabela iframe {
        /* Cresce 1x, Encolhe 1x, Base 0 (divide o espaço igualmente) */
        flex: 1 1 0; 
        /* Limita a largura para garantir que não ultrapasse 50% - gap/2 */
        max-width: calc(50% - 10px); 
    }
    
    /* Tabela */
    .mapa-e-tabela .tabela-postos {
        /* Cresce 1x, Encolhe 1x, Base 0 (divide o espaço igualmente) */
        flex: 1 1 0; 
        /* Limita a largura para garantir que não ultrapasse 50% - gap/2 */
        max-width: calc(50% - 10px); 
    }
}


/* ====================================
    ESTILOS DO RODAPÉ (FOOTER)
    ==================================== */
footer {
    background-color: #004080;
    color: white;
    text-align: center;

}