/* 1. CONFIGURAÇÕES GERAIS E VARIÁVEIS */
:root {
    color-scheme: light;      /* 👈 Esta é a linha nova que trava o tema claro */
    --primary-color: #102C26; /* Verde Escuro */
    --bg-color: #F7E7CE;      /* Creme */
    --card-bg: #ffffff;       /* Branco para o card */
    --text-color: #102C26;
    --accent-color: #e0d1b8;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif; /* Fonte moderna */
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
    overflow-x: hidden;
    
    /* Plantas minimalistas em SVG no fundo */
    background-image: 
        /* Planta do canto superior esquerdo */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23102C26' opacity='0.04'%3E%3Cpath d='M17,8C8,10 5.9,16.17 3.82,21.34L5.71,22L6.66,19.7C7.14,19.87 7.64,20 8,20C19,20 22,3 22,3C21,5 14,5.25 9,6.25C4,7.25 7.05,10.67 9,12C10.95,13.33 16,13 14,16C12,19 8.5,18.5 7.85,16.5C8.84,15.74 11.5,13.62 11.5,13.62C11.5,13.62 10.6,12.78 9.5,11.5C8.4,10.22 8,9 8,9C8,9 13,8 17,8Z'/%3E%3C/svg%3E"),
        /* Planta do canto inferior direito (rotacionada) */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23102C26' opacity='0.05'%3E%3Cpath d='M17,8C8,10 5.9,16.17 3.82,21.34L5.71,22L6.66,19.7C7.14,19.87 7.64,20 8,20C19,20 22,3 22,3C21,5 14,5.25 9,6.25C4,7.25 7.05,10.67 9,12C10.95,13.33 16,13 14,16C12,19 8.5,18.5 7.85,16.5C8.84,15.74 11.5,13.62 11.5,13.62C11.5,13.62 10.6,12.78 9.5,11.5C8.4,10.22 8,9 8,9C8,9 13,8 17,8Z'/%3E%3C/svg%3E");
    
    /* Posicionamento para ficar nos cantos e não rolar com a tela */
    background-repeat: no-repeat;
    background-position: top -80px left -80px, bottom -80px right -80px;
    background-size: 450px, 600px;
    background-attachment: fixed;
}

/* 2. HEADER (Topo do Site) */
header {
    background-color: var(--primary-color);
    color: var(--bg-color);
    padding: 1.5rem 10%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header .logo {
    font-weight: 600;
    letter-spacing: 2px;
}

nav a {
    color: var(--bg-color);
    text-decoration: none;
    margin-left: 20px;
    font-size: 0.9rem;
    font-weight: 300;
    transition: opacity 0.3s;
}

nav a:hover {
    opacity: 0.7;
}

/* 3. HERO SECTION (Introdução) */
/* O container principal centraliza o Título e o Botão */
.hero {
    text-align: center; 
    padding: 5rem 10% 3rem;
}

/* O título mantém as configurações normais dele */
.hero h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    font-weight: 600;
    color: var(--primary-color);
}

/* O parágrafo fica centralizado na tela, mas com o texto justificado por dentro */
.hero p {
    max-width: 600px;
    margin: 0 auto 2rem; /* O 'auto' é o que mantém o bloco do texto no meio da tela */
    font-size: 1.1rem;
    opacity: 0.8;
    text-align: justify; /* Justifica as laterais do texto */
    text-align-last: center; /* 🔥 Dica de Ouro: Centraliza apenas a última linha do texto, deixando o visual muito mais elegante! */
}

.btn-start {
    background-color: var(--primary-color);
    color: white;
    padding: 14px 35px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: transform 0.3s, background 0.3s;
}

.btn-start:hover {
    transform: translateY(-3px);
    background-color: #1a463d;
}

/* 4. ÁREA DA CALCULADORA (Quiz Card) */
.quiz-container {
    display: flex;
    justify-content: center;
    padding: 2rem 5% 8rem; /* Espaço para o footer não cobrir */
}

.quiz-card {
    background: var(--card-bg);
    width: 100%;
    max-width: 700px;
    padding: 3rem;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(16, 44, 38, 0.08);
}

/* Títulos dentro do card */
.quiz-card h2 {
    font-size: 1.4rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

/* Barra de Progresso */
.progress-container {
    margin-bottom: 2.5rem;
}

#step-text {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    display: block;
}

.progress-bar {
    background: #f0f0f0;
    height: 8px;
    border-radius: 10px;
}

.progress-fill {
    background: var(--primary-color);
    height: 100%;
    border-radius: 10px;
    transition: width 0.5s ease;
}

/* 5. FORMULÁRIO DINÂMICO (Onde as perguntas aparecem) */
#formulario {
    margin-bottom: 20px;
}

#formulario div {
    margin-bottom: 20px;
}

/* Estilo para labels/perguntas geradas pelo JS */
#formulario label {
    display: block;
    font-weight: 500;
    margin-bottom: 10px;
}

/* Estilo para inputs (se você usar select ou text) */
#formulario input, #formulario select {
    width: 100%;
    padding: 12px;
    border: 1.5px solid #eee;
    border-radius: 8px;
    outline: none;
    transition: 0.3s;
}

#formulario input:focus {
    border-color: var(--primary-color);
}

/* 5.1 GRID E BOTÕES DE OPÇÃO DAS PERGUNTAS */
.options-grid {
    display: grid;
    grid-template-columns: 1fr; /* Coloca uma opção abaixo da outra em celulares */
    gap: 12px;
    margin-top: 15px;
}

/* Para telas maiores (computador), divide em duas colunas para aproveitar o espaço */
@media (min-width: 600px) {
    .options-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.option-btn {
    background-color: #ffffff;
    border: 2px solid #e0e0e0;
    padding: 16px 20px;
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    transition: all 0.3s ease;
    font-size: 0.95rem;
    color: var(--text-color);
    font-weight: 500;
    display: block;
}

/* Efeito ao passar o mouse por cima */
.option-btn:hover {
    border-color: var(--primary-color);
    background-color: rgba(16, 44, 38, 0.04);
    transform: translateY(-2px); /* Dá um pequeno "pulo" suave */
}

/* Remove a margem padrão antiga para não desalinhar a nova grade */
#formulario label.option-btn {
    margin-bottom: 0;
}

/* 6. BOTÕES DE AÇÃO (Calcular / Próximo) */
.quiz-footer {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

button {
    background-color: var(--primary-color);
    color: white;
    padding: 12px 30px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    transition: 0.3s;
}

button:hover {
    background-color: #1a463d;
    transform: scale(1.02);
}

/* 7. RESULTADOS E GRÁFICOS */
#resultado {
    text-align: center;
    font-size: 22px;
    margin-top: 30px;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 10px;
    color: var(--primary-color);
}

#dicas {
    text-align: center;
    margin-top: 15px;
    font-size: 1rem;
    color: #555;
    font-style: italic;
}

/* Container que limita o tamanho do gráfico */
.chart-container {
    position: relative;
    height: 250px; /* Altura restrita e minimalista */
    width: 100%;
    max-width: 450px; /* Impede que ele fique muito largo em telas grandes */
    margin: 30px auto 0; /* O "auto" garante que fique perfeitamente centralizado */
}

/* Garante que o canvas respeite a caixa */
#grafico {
    width: 100% !important;
    height: 100% !important;
}

/* 8. FOOTER */
footer {
    background-color: var(--primary-color);
    color: var(--bg-color);
    text-align: center;
    padding: 1.5rem;
    font-size: 0.8rem;
    position: relative; /* Mudado para não cobrir o conteúdo */
    width: 100%;
}
/* 9. MODAL SOBRE */
.modal {
    display: none; /* Fica oculto até a pessoa clicar */
    position: fixed;
    z-index: 1000; /* Fica por cima de tudo */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /* Fundo escuro semi-transparente usando o seu Verde Escuro */
    background-color: rgba(16, 44, 38, 0.6); 
    backdrop-filter: blur(4px); /* Dá aquele efeito de desfoque moderno no fundo */
}

.modal-content {
    background-color: var(--card-bg);
    margin: 10% auto; /* Centraliza vertical e horizontalmente */
    padding: 3rem;
    border-radius: 15px;
    width: 90%;
    max-width: 550px;
    position: relative;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    color: var(--text-color);
}

.modal-content h2 {
    margin-bottom: 1.5rem;
    color: var(--primary-color);
}

.modal-content p {
    margin-bottom: 1rem;
    opacity: 0.9;
    font-size: 1.05rem;
}

/* O botão 'X' de fechar */
.close-btn {
    color: #aaa;
    position: absolute;
    top: 15px;
    right: 25px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.close-btn:hover {
    color: var(--primary-color);
}
/* 10. DICAS PERSONALIZADAS */
#dicas-personalizadas {
    margin-top: 40px;
    padding: 25px;
    background-color: rgba(16, 44, 38, 0.04); /* Fundo verdinho bem suave */
    border-left: 4px solid var(--primary-color); /* Linha verde na lateral */
    border-radius: 8px;
    text-align: left;
}

#dicas-personalizadas h3 {
    color: var(--primary-color);
    font-size: 1.15rem;
    margin-bottom: 15px;
}

#dicas-personalizadas ul {
    list-style-type: none; /* Remove as bolinhas pretas padrão */
    padding: 0;
}

#dicas-personalizadas li {
    margin-bottom: 12px;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-color);
    background: #ffffff; /* Fundo branco para destacar cada dica */
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #eee;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}

.mensagem-sucesso {
    text-align: center;
    padding: 15px;
}

.mensagem-sucesso h3 {
    color: #2e7d32; /* Um verde mais vibrante para celebrar */
    margin-bottom: 5px;
}
/* 11. ÁREA DE LOGIN */
#area-usuario {
    margin-right: 20px;
    background-color: rgba(247, 231, 206, 0.1);
    padding: 5px 15px;
    border-radius: 20px;
    border: 1px solid rgba(247, 231, 206, 0.3);
}

#nome-usuario {
    color: var(--bg-color);
    font-weight: 600;
    font-size: 0.9rem;
    margin-right: 15px;
}

#btn-sair {
    color: #ff6b6b; /* Um vermelho suave para o botão de sair */
    font-weight: 600;
    margin-left: 0;
}

#btn-sair:hover {
    opacity: 0.8;
}

#btn-login {
    font-weight: 600;
    border: 1px solid var(--bg-color);
    padding: 5px 15px;
    border-radius: 20px;
}
/* ========================================== */
/* ESTILOS DO CHAT DA YUNA                    */
/* ========================================== */
.yuna-chat-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 320px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    font-family: 'Inter', sans-serif;
    z-index: 9999; /* Garante que fique acima dos outros elementos */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #e0e0e0;
}

.yuna-chat-header {
    background-color: var(--primary-color); /* Padronizado para Verde Escuro */
    color: white;
    padding: 12px;
    text-align: center;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

.yuna-chat-header:hover {
    background-color: #1a463d; /* Hover padronizado */
}

.yuna-chat-body {
    display: flex;
    flex-direction: column;
    height: 350px;
    background-color: #f9f9f9;
}

.yuna-mensagens {
    flex: 1;
    padding: 12px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.msg {
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 14px;
    max-width: 85%;
    line-height: 1.4;
}

.msg .autor {
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 4px;
    display: block;
    color: #666;
}

.yuna-msg {
    background-color: #E8F5E9; /* Fundo verde clarinho */
    color: #2e7d32;
    align-self: flex-start;
    border-bottom-left-radius: 2px;
}

.usuario-msg {
    background-color: #E3F2FD; /* Fundo azul clarinho */
    color: #1565C0;
    align-self: flex-end;
    text-align: right;
    border-bottom-right-radius: 2px;
}

#yuna-form {
    display: flex;
    padding: 10px;
    background-color: white;
    border-top: 1px solid #eee;
}

#yuna-input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    outline: none;
    font-family: inherit;
}

#yuna-input:focus {
    border-color: var(--primary-color); /* Atualizado para combinar */
}

#yuna-form button {
    background-color: var(--primary-color); /* Padronizado para Verde Escuro */
    color: white;
    border: none;
    padding: 10px 16px;
    margin-left: 8px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.2s;
}

#yuna-form button:hover {
    background-color: #1a463d; /* Hover padronizado */
}

#yuna-digitando {
    font-size: 0.9em;
    color: #666;
    padding: 8px;
    margin-bottom: 10px;
    font-style: italic;
    animation: pulse 1.5s infinite; /* Faz o texto pulsar levemente */
}

@keyframes pulse {
    0% { opacity: 0.5; }
    50% { opacity: 1; }
    100% { opacity: 0.5; }
}

.btn-reiniciar {
    background-color: var(--primary-color); /* Padronizado para Verde Escuro */
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    margin: 30px auto; /* O 'auto' empurra o botão para o centro exato da tela */
    display: block;    /* Garante que ele ocupe a própria linha */
    width: fit-content;
    transition: background-color 0.3s;
}

.btn-reiniciar:hover {
    background-color: #1a463d; /* Hover padronizado */
}
/* ========================================== */
/* AJUSTES PARA CELULAR (RESPONSIVIDADE YUNA) */
/* ========================================== */
@media (max-width: 600px) {
    .yuna-chat-container {
        /* Ocupa a largura total da tela, menos 40px (20px de margem de cada lado) */
        width: calc(100% - 40px) !important; 
        right: 20px !important;
        bottom: 20px !important;
    }

    /* Regra para quando o usuário clicar no botão de expandir no celular */
    .yuna-chat-expandido {
        width: calc(100% - 40px) !important; /* Impede que os 600px quebrem a tela */
        height: 65vh !important; /* Altura um pouco menor no celular para não cobrir o teclado */
    }
}