/* Estilos Básicos Globais e Variáveis */
:root {
    --primary-color-tool: #c0392b; /* Vermelho para alerta/risco */
    --secondary-color-tool: #7f8c8d; /* Cinza */
    --bg-tool-original: #ecf0f1; /* Fundo cinza claro original */
    --text-tool: #2c3e50; /* Texto escuro */
    --card-bg-tool: #ffffff;
    --border-tool: #bdc3c7;
    --button-bg-tool: var(--primary-color-tool);
    --button-text-tool: #ffffff;
    --header-bg-color: #3498db; /* Azul para header (Requirement 6) */
    --header-border-color: #2980b9;
    --footer-bg-color: #2c3e50; /* Cinza escuro para footer (Requirement 7) */
    --footer-text-color: #95a5a6;
    --footer-link-color: #bdc3c7;
}

/* === ESTILOS GERAIS E BACKGROUND (Requirement 2 e 4) === */
body {
    font-family: sans-serif;
    line-height: 1.6;
    color: var(--text-tool);
    /* Requirement 2: Background Image */
    background-image: url('calculadora-risco-cardiox.jpg');
    background-size: cover; /* Cobre toda a área */
    background-position: center center; /* Centraliza a imagem */
    background-repeat: no-repeat; /* Não repete a imagem */
    background-attachment: fixed; /* Mantém a imagem fixa ao rolar */
    /* Fim Requirement 2 */
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main.tool-content-wrapper {
    flex-grow: 1;
    padding: 20px 15px; /* Padding interno */
    width: 100%;
    max-width: 650px; /* Largura máxima para o conteúdo */
    margin: 20px auto; /* Centraliza e adiciona margem superior/inferior */
    box-sizing: border-box;
}

/* === CABEÇALHO PADRÃO (Requirement 6 e 4) === */
.header-compact {
    background-color: var(--header-bg-color); /* Azul */
    color: white;
    padding: 10px 15px;
    text-align: center;
    border-bottom: 3px solid var(--header-border-color);
    flex-shrink: 0; /* Não encolhe */
}

.header-compact-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    max-width: 1200px; /* Limita largura do conteúdo do header */
    margin: 0 auto; /* Centraliza conteúdo */
}

.header-logo { /* Renomeado de .header-compact img para ser mais específico */
    height: 35px;
    width: 35px;
}

.header-compact-text h1 {
    font-size: 1.3em;
    color: white;
    margin: 0 0 2px 0;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
    border-bottom: none;
    padding-bottom: 0;
}

.header-compact-text p {
    font-size: 0.85em;
    color: yellow; /* Cor padrão do template */
    margin: 0;
    line-height: 1.2;
    text-align: left;
}

/* === ESTILOS DA CALCULADORA === */
.container {
    padding: 25px;
    border-radius: 12px; /* Aumentado para melhor efeito vidro */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    margin-bottom: 25px; /* Espaçamento inferior */
    position: relative; /* Necessário para z-index se sobrepondo a outros elementos */
    overflow: hidden; /* Garante que o blur não vaze */
}

/* === EFEITO VIDRO (Requirement 3) === */
.glass-effect {
    background-color: rgba(255, 255, 255, 0.15); /* Fundo branco semi-transparente */
    backdrop-filter: blur(10px); /* Efeito de desfoque no fundo */
    -webkit-backdrop-filter: blur(10px); /* Para compatibilidade com Safari */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Borda sutil */
}
/* Ajuste de cor de texto dentro do container com efeito vidro para melhor leitura */
.glass-effect,
.glass-effect h1,
.glass-effect .subtitle,
.glass-effect label,
.glass-effect input::placeholder {
    color: #1a1a1a; /* Cor de texto mais escura para contraste no fundo claro/blurry */
}
.glass-effect h1 {
    color: var(--primary-color-tool); /* Mantém a cor do título principal */
}
.glass-effect input {
     background-color: rgba(255, 255, 255, 0.5); /* Fundo do input levemente transparente */
     border-color: rgba(0, 0, 0, 0.1);
     color: #1a1a1a; /* Cor do texto digitado */
}
.glass-effect input:focus {
     background-color: rgba(255, 255, 255, 0.7);
     border-color: var(--primary-color-tool);
     box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.3);
}


/* Título principal da ferramenta */
.container h1 {
    /* color: var(--primary-color-tool); - Definido acima para glass-effect */
    text-align: center;
    margin-top: 0;
    margin-bottom: 5px; /* Reduzido */
    font-size: 1.7em; /* Levemente maior */
    border-bottom: 1px solid rgba(0,0,0,0.1); /* Borda mais sutil */
    padding-bottom: 10px;
}
.container .subtitle {
    text-align: center;
    margin-top: 0;
    margin-bottom: 25px;
    font-size: 0.95em;
    color: #555; /* Cor ajustada para glass-effect acima */
}


.input-group {
    margin-bottom: 18px;
}

.input-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: bold;
    /* color: var(--text-tool); - Definido acima para glass-effect */
}

.input-group input[type="number"] {
    width: 100%;
    padding: 12px; /* Um pouco mais de padding */
    border: 1px solid var(--border-tool);
    border-radius: 5px; /* Bordas mais arredondadas */
    font-size: 1em;
    box-sizing: border-box;
     /* Remove setas */
    -moz-appearance: textfield;
    /* background, border e color definidos acima para glass-effect */
}
.input-group input[type="number"]::-webkit-outer-spin-button,
.input-group input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* :focus definido acima para glass-effect */


button { /* Botão Calcular */
    background-color: var(--button-bg-tool);
    color: var(--button-text-tool);
    border: none;
    padding: 14px 20px; /* Aumentado */
    font-size: 1.15em; /* Aumentado */
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.1s ease;
    width: 100%;
    font-weight: bold;
    margin-top: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}

button:hover {
    background-color: #a52a2a; /* Vermelho mais escuro */
    transform: translateY(-1px); /* Leve efeito ao passar o mouse */
}
button:active {
    transform: translateY(0px); /* Efeito ao clicar */
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
}

/* Resultado */
#resultado {
    margin-top: 25px;
    padding: 18px; /* Aumentado */
    border-radius: 6px;
    display: none; /* Começa oculto */
    border: 1px solid; /* Borda sólida */
    text-align: center;
    transition: all 0.3s ease; /* Transição suave */
}

#resultado h3 {
    margin-top: 0;
    margin-bottom: 12px; /* Aumentado */
    font-size: 1.3em; /* Aumentado */
}
#resultado p {
    margin: 10px 0; /* Aumentado */
    line-height: 1.6; /* Aumentado */
}
#resultado strong {
    font-size: 1.5em; /* Aumentado */
    display: block; /* Coloca o valor em linha própria */
    margin-top: 5px;
    margin-bottom: 8px;
}

/* Classes de Risco */
.risco-baixo {
    background-color: #dff0d8;
    border-color: #3c763d;
    color: #3c763d;
}
.risco-baixo strong { color: #3c763d; }

.risco-moderado {
    background-color: #fcf8e3;
    border-color: #8a6d3b;
    color: #8a6d3b;
}
.risco-moderado strong { color: #8a6d3b; }

.risco-alto {
    background-color: #f2dede;
    border-color: #a94442;
    color: #a94442;
}
.risco-alto strong { color: #a94442; }

/* === Disclaimer e Referências (Requirement 4) === */
.disclaimer, .referencias {
    margin-top: 25px; /* Mantido espaçamento */
    padding: 15px;
    font-size: 0.85em;
    color: #f1f1f1; /* Texto claro para contraste com fundo escuro/imagem */
    background-color: rgba(44, 62, 80, 0.7); /* Fundo escuro semi-transparente */
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.1); /* Borda sutil clara */
    box-sizing: border-box; /* Inclui padding/border na largura/altura */
    max-width: 650px; /* Mantém largura máxima */
    margin-left: auto; /* Centraliza */
    margin-right: auto; /* Centraliza */
}
.disclaimer strong {
    color: #e74c3c; /* Vermelho mais claro para destaque */
}

.referencias h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1em;
    color: #bdc3c7; /* Cinza claro */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 5px;
}
.referencias p {
    margin: 5px 0;
    line-height: 1.4;
}

/* === Seção AdSense (Requirement 4) === */
.adsense-tool {
    margin: 30px auto 20px auto;
    padding: 15px 0;
    max-width: 650px; /* Largura similar ao .container */
    width: 95%;
    /* border-top: 1px solid rgba(255, 255, 255, 0.2); Linha divisória clara */
    text-align: center;
    min-height: 90px;
    box-sizing: border-box;
    /* background-color: rgba(0, 0, 0, 0.1); Fundo sutil opcional */
    border-radius: 4px;
}

/* === RODAPÉ PADRÃO (Requirement 7 e 4) === */
.tool-footer {
    background-color: var(--footer-bg-color); /* Cinza escuro */
    color: var(--footer-text-color);
    text-align: center;
    padding: 15px;
    font-size: 0.8em;
    border-top: 3px solid var(--header-bg-color); /* Borda superior azul (do header) */
    margin-top: auto; /* Empurra para baixo */
    flex-shrink: 0; /* Não encolhe */
}

.tool-footer-links {
    margin-bottom: 8px;
}

.tool-footer a {
    color: var(--footer-link-color);
    margin: 0 8px;
    text-decoration: none;
    transition: color 0.2s;
}

.tool-footer a:hover {
    text-decoration: underline;
    color: #fff; /* Clareia no hover */
}


/* === RESPONSIVIDADE === */
@media (max-width: 768px) {
    main.tool-content-wrapper {
        max-width: 95%; /* Usa mais da largura */
        margin-top: 15px;
        margin-bottom: 15px;
    }
     .header-compact-content {
        justify-content: flex-start; /* Alinha à esquerda em telas menores */
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media (max-width: 480px) {
    main.tool-content-wrapper {
        padding: 10px;
    }
    .container {
        padding: 20px; /* Menos padding */
    }
    .container h1 {
        font-size: 1.5em; /* Menor */
    }
    #resultado strong {
        font-size: 1.3em; /* Menor */
    }
    button {
        font-size: 1.05em; /* Menor */
        padding: 12px 15px;
    }
    .disclaimer, .referencias {
        font-size: 0.8em;
        padding: 12px;
    }
    .header-compact-text h1 { font-size: 1.2em; }
    .header-compact-text p { font-size: 0.8em; }
    .tool-footer { font-size: 0.75em; }
}