body {
    font-family: 'Roboto', sans-serif;
    background-color: #f4f4f9;
    color: #333;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

header {
    background-color: #0d2c4e;
    color: #f0e6d2;
    width: 100%;
    text-align: center;
    padding: 20px 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    /* Adicionado para centralizar o logo e o texto verticalmente */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ESTILO PARA O LOGO */
#logo {
    height: 70px; /* Define uma altura fixa para o logo */
    margin-bottom: 15px; /* Cria um espaço entre o logo e o título */
}

header h1 {
    margin: 0;
    font-weight: 700;
}

header p {
    margin: 5px 0 0 0;
    font-weight: 300;
}

main {
    width: 90%;
    max-width: 800px;
    margin-top: 20px;
}

.controls {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
    justify-content: center;
}

.controls label {
    font-weight: 400;
}

.controls input[type="date"], .controls button {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}

.controls button {
    background-color: #b99d6b;
    color: white;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
}

.controls button:hover {
    background-color: #a48a5a;
}

.results-header {
    margin-top: 30px;
    border-bottom: 2px solid #b99d6b;
    padding-bottom: 10px;
}

#results-container {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    padding-bottom: 40px;
}

.card {
    background-color: #fff;
    border-left: 5px solid #0d2c4e;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}

.card:hover {
    transform: translateY(-5px);
}

.card h3 {
    margin: 0 0 10px 0;
    color: #0d2c4e;
}

.card p {
    margin: 5px 0;
    line-height: 1.5;
}

.card .highlight {
    font-weight: 700;
    color: #b99d6b;
}

.no-results {
    font-style: italic;
    color: #666;
    grid-column: 1 / -1; /* Ocupa toda a largura */
    text-align: center;
    padding: 20px;
}


/* --- DESIGN RESPONSIVO PARA CELULARES --- */
/* Os estilos dentro deste bloco só serão aplicados em telas com largura máxima de 600px */
@media (max-width: 600px) {
    main {
        width: 95%; /* Ocupa mais espaço na tela */
    }

    header h1 {
        font-size: 1.5em; /* Diminui um pouco o título principal */
    }

    #logo {
        height: 60px; /* Diminui um pouco o logo em telas menores */
    }

    .controls {
        flex-direction: column; /* Empilha os controles verticalmente */
        align-items: stretch; /* Faz os controles ocuparem a largura toda */
    }

    /* O grid de resultados já é naturalmente responsivo, mas podemos ajustar se necessário */
    #results-container {
        /* Garante que os cards não fiquem espremidos */
        grid-template-columns: 1fr; 
    }
}