/* app/static/css/home.css */
/* Estilos completos para a página inicial com design refinado e responsivo. */

:root { 
    --cor-principal: #004a91; 
    --cor-fundo: #f0f2f5; 
    --cor-card: #ffffff; 
    --cor-texto: #333;
    --cor-texto-secundario: #555;
}

html {
    height: 100%;
}

body { 
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin: 0; 
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cor-texto);
    
    /* --- Configuração da Imagem de Fundo --- */
    background-image: url('../images/background_pmpi.png'); 
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.welcome-container {
    background-color: transparent;
    padding: 2rem;
    width: 100%;
    max-width: 900px; /* Aumenta um pouco o espaço útil */
    text-align: center;
    box-sizing: border-box;
}

.welcome-header {
    margin-bottom: 3rem;
}

.brasao {
    width: 180px;
    height: auto;
    margin-bottom: 1.5rem;
}

.welcome-header h1 {
    color: var(--cor-principal);
    margin: 0 0 0.5rem 0;
    font-size: 3.75rem;
    font-weight: 700;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}

.welcome-header .subtitle {
    font-size: 1.2rem;
    color: var(--cor-texto-secundario);
    margin: 0;
    font-weight: 500;
}

.dashboard-links {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.dashboard-card-link {
    text-decoration: none;
    color: inherit;
    flex: 1; /* Permite que os cards cresçam para preencher o espaço */
    min-width: 300px; /* Largura mínima antes de quebrar a linha */
    max-width: 380px; /* Largura máxima para cada card */
}

.dashboard-links .dashboard-card {
    background-color: var(--cor-card);
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 2rem;
    height: 100%; /* Faz com que os cards na mesma linha tenham a mesma altura */
    box-sizing: border-box;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dashboard-links .dashboard-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 25px rgba(0, 74, 145, 0.15); /* Sombra com a cor principal */
}

.dashboard-links h2 {
    color: var(--cor-principal);
    margin-top: 0;
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
}

.dashboard-links p {
    color: var(--cor-texto-secundario);
    line-height: 1.5;
}