body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column; /* Empilhar header, content-wrapper, footer */
    min-height: 100vh;
    background-image: url('calculadora-homax.jpg'); /* Imagem de Fundo */
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Fundo fixo ao scroll */
    align-items: center; /* Centraliza horizontalmente os filhos (header, content-wrapper, footer) */
}

.content-wrapper {
    flex-grow: 1; /* Permite que o wrapper ocupe o espaço restante */
    display: flex;
    justify-content: center; /* Centraliza o container horizontalmente */
    align-items: center; /* Centraliza o container verticalmente se houver espaço */
    padding: 20px 0; /* Espaçamento acima e abaixo do container */
    width: 100%; /* Garante que o wrapper ocupe toda a largura para centralizar corretamente */
}


.container {
    background-color: rgba(255, 255, 255, 0.5); /* Efeito Vidro */
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 400px;
    max-width: 90%; /* Ajuste para ser mais responsivo em telas menores */
    text-align: center;
    backdrop-filter: blur(5px); /* Adiciona desfoque para o efeito vidro */
    -webkit-backdrop-filter: blur(5px); /* Compatibilidade Safari */
    /* Removido margin: auto; pois o align-items: center no body e justify-content: center no content-wrapper já centralizam */
}

.main-title {
    color: #3498db;
    margin-bottom: 20px;
    text-align: center; /* Garantir centralização */
}

.form-group {
    margin-bottom: 20px;
}

label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    color: #555;
    text-align: left;
}

.example {
    font-weight: normal;
    color: #777;
    font-size: 0.9em;
}

input[type="number"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box;
}

button {
    background-color: #3498db;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #2980b9;
}

#resultados {
    margin-top: 30px;
    text-align: left;
    padding: 15px;
    border: 1px solid #eee;
    border-radius: 5px;
    background-color: rgba(249, 249, 249, 0.8); /* Fundo semi-transparente */
}

#resultados h2 {
    color: #333;
    margin-bottom: 10px;
    font-size: 1.2em;
}

#resultados p {
    color: #666;
    line-height: 1.6;
}

.explicacao {
    margin-top: 20px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: rgba(249, 249, 249, 0.8); /* Fundo semi-transparente */
    text-align: left;
}

.explicacao h3 {
    color: #333;
    font-size: 1.1em;
    margin-bottom: 10px;
}

.explicacao p {
    color: #555;
    line-height: 1.6;
}

.interpretacao {
    margin-top: 20px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: rgba(240, 248, 255, 0.8); /* Fundo semi-transparente */
    text-align: left;
}

.interpretacao h3 {
    color: #2e86c1;
    font-size: 1.1em;
    margin-bottom: 10px;
}

.interpretacao p {
    color: #333;
    line-height: 1.6;
    font-weight: bold; /* Destaca a interpretação */
}

/* Cores para a interpretação dos resultados calculados */
.verde {
    color: green;
}

.amarelo {
    color: orange;
}

.vermelho {
    color: red;
}

.disclaimer {
    margin-top: 20px;
    padding: 15px;
    background-color: rgba(249, 249, 249, 0.8); /* Fundo semi-transparente */
    border: 1px solid #ddd;
    border-radius: 5px;
    text-align: center;
    font-size: 0.9em;
    color: #777;
}

/* Estilos do cabeçalho */
.header-compact {
    background-color: #5DADE2; /* Cor de fundo azul suavizada */
    color: white; /* Cor da fonte branca */
    text-align: center; /* Centralizar o conteúdo */
    padding: 10px 0; /* Espaçamento interno */
    width: 100%; /* Ocupa toda a largura */
    box-sizing: border-box; /* Inclui padding na largura total */
}

.header-compact-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px; /* Espaçamento entre a logo e o texto */
    max-width: 800px; /* Limita a largura do conteúdo centralizado */
    margin: 0 auto; /* Centraliza o conteúdo dentro do header */
}

.header-logo {
    max-width: 80px; /* Ajuste o tamanho da logo */
    height: auto;
}

.header-compact-text h1 {
    color: white; /* Primeira linha em branco */
    margin: 0;
    font-size: 1.8em; /* Ajusta tamanho do h1 */
}

.header-compact-text p {
    color: yellow; /* Segunda linha em amarelo */
    margin: 0;
    font-size: 1em; /* Ajusta tamanho do p */
}

/* Estilos do rodapé */
.tool-footer {
    background-color: #333; /* Cor de fundo cinza escuro */
    color: white; /* Cor da fonte branca */
    text-align: center; /* Centralizar o texto */
    padding: 10px 0; /* Espaçamento interno */
    width: 100%; /* Ocupa toda a largura */
    margin-top: auto; /* Garante que o footer fique no final se o conteúdo for menor que a tela */
    box-sizing: border-box; /* Inclui padding na largura total */
}

.tool-footer-links a {
    color: #ddd; /* Cor dos links */
    text-decoration: none; /* Remover sublinhado dos links */
    margin: 0 10px; /* Espaçamento entre os links */
}

.tool-footer-links a:hover {
    text-decoration: underline;
}

/* Estilos para a tabela de interpretação */
.explicacao table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

.explicacao th, .explicacao td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

.explicacao th {
    background-color: #f2f2f2;
}

/* Cores para as linhas da tabela de interpretação */
.homa-ir-row td {
    background-color: #e0f7fa; /* Azul claro para HOMA-IR */
}
.homa-beta-row td {
    background-color: #fff9c4; /* Amarelo claro para HOMA-BETA */
}
.imc-row td {
    background-color: #e8f5e9; /* Verde claro para IMC */
}

/* Estilo para a célula rowspan do índice */
.explicacao table td:first-child {
    font-weight: bold;
    vertical-align: top; /* Alinha o texto do rowspan no topo */
}

/* Estilo para a seção de fontes */
.sources {
    margin-top: 20px;
    font-size: 0.9em;
    color: #555;
}
.sources ul {
    margin-top: 5px;
    padding-left: 20px;
}
.sources li {
    margin-bottom: 5px;
}
.sources a {
    color: #3498db;
    text-decoration: none;
}
.sources a:hover {
     text-decoration: underline;
}