/* ===================================================================== */
/* =================== ANÁLISE E COMENTÁRIOS DO CSS ================== */
/* ===================================================================== */

/*
 * NOTA GERAL:
 * Este layout é construído em camadas, usando 'position: absolute'.
 * Tudo é posicionado em relação ao '#roda-container-wrapper', que é
 * o nosso "palco" principal. A ordem das regras no CSS é importante
 * para a clareza, mas a sobreposição visual é controlada pelo 'z-index'
 * e pela ordem dos elementos no HTML.
*/


/* ===================================================================== */
/* 1. ESTRUTURA GERAL E CONTÊINERES PRINCIPAIS
/* ===================================================================== */

/* O "palco" principal que envolve toda a Roda da Vida. */
/* Ele centraliza tudo na tela e serve como âncora de posicionamento. */
#roda-container-wrapper {
    position: relative; /* ESSENCIAL: torna-se a referência para todos os elementos 'absolute' dentro dele. */
    display: flex; /* Usa flexbox para centralizar seu filho direto. */
    justify-content: center; /* Centraliza horizontalmente. */
    align-items: center; /* Centraliza verticalmente. */
    padding: 0;
    min-height: 800px; /* Garante espaço vertical suficiente. */
    width: 100%;
}

/* Uma classe genérica para os anéis que contêm apenas texto. */
/* Eles são invisíveis e servem apenas para posicionar os títulos. */
.anel-texto {
    position: absolute; /* Posicionado em relação ao '#roda-container-wrapper'. */
    border-radius: 50%; /* Garante que seja um círculo. */
    pointer-events: none; /* Faz com que o mouse "ignore" esses anéis, permitindo clicar no que está embaixo. */
}


/* ===================================================================== */
/* 2. ANEL EXTERNO (GRANDES ÁREAS)
/* ===================================================================== */

/* O anel mais externo, que contém os 4 títulos principais e as cores dos quadrantes. */
#anel-grande-area {
    width: 750px;
    height: 750px;
    transform: rotate(45deg); /* Gira toda a moldura em 45 graus. */
}

/* Estilo para os 4 títulos principais (PESSOAL, PROFISSIONAL, etc.). */
.quadrante-titulo {
    position: absolute; /* Posicionado em relação ao '#anel-grande-area'. */
    font-size: 18px;
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
    font-weight: 700;
}

/* Posicionamento individual de cada um dos 4 títulos. */
/* Cada um é posicionado e depois rotacionado para ficar "deitado" ou "em pé". */
#titulo-pessoal { top: 2%; left: 50%; transform: translateX(-50%); }
#titulo-qualidade { top: 50%; right: -8%; transform: translateY(-50%) rotate(90deg); }
#titulo-relacionamentos { bottom: 2%; left: 50%; transform: translateX(-50%) rotate(-180deg); }
#titulo-profissional { top: 50%; left: -5%; transform: translateY(-50%) rotate(-90deg); }

/* Define a forma de uma "fatia de pizza" de 90 graus para cada quadrante colorido. */
.quadrante-cor {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    /* A mágica do corte: cria um triângulo a partir do centro para o topo. */
    clip-path: polygon(50% 50%, 0% 0%, 100% 0%);
    z-index: -1; /* Joga a cor para trás dos títulos. */
}

/* Cria o "anel" colorido dentro da fatia de 90 graus. */
.quadrante-cor::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border-radius: 50%;
    /* A mágica do anel: cria uma "sombra interna" que funciona como uma borda gigante, formando o anel. */
    box-shadow: inset 0 0 0 50px;
}

/* Agrupa a definição da cor cinza para todos os quadrantes. */
#cor-pessoal, #cor-qualidade, #cor-relacionamentos, #cor-profissional {
    color: #a09f9f;
}

/* Gira cada fatia de 90 graus para sua posição correta, formando o círculo completo. */
#cor-pessoal { transform: rotate(0deg); }
#cor-qualidade { transform: rotate(90deg); }
#cor-relacionamentos { transform: rotate(180deg); }
#cor-profissional { transform: rotate(270deg); }

/* Garante que a cor definida no pai seja usada para criar o anel no filho (::after). */
#cor-pessoal::after, #cor-qualidade::after, #cor-relacionamentos::after, #cor-profissional::after {
    color: inherit;
}


/* ===================================================================== */
/* 3. ANEL INTERNO (SUBÁREAS)
/* ===================================================================== */

/* O anel intermediário, que contém os 12 subtítulos. */
#anel-sub-area {
    width: 650px;
    height: 650px;
    border: 2px solid #ccc; /* A borda circular visível que separa os subtítulos da roda clicável. */
}

/* Estilo para cada um dos 12 subtítulos. */
.sub-area-titulo {
    position: absolute; /* Posicionado pelo JavaScript. */
    top: 50%; left: 50%;
    transform-origin: center; /* Garante que a rotação ocorra a partir do centro. */
    font-size: 13px;
    font-weight: 600;
    color: #333;
    white-space: nowrap; /* Impede a quebra de linha automática, forçando o uso do   
. */
    text-align: center;
    line-height: 1.2;
}


/* ===================================================================== */
/* 4. NÚCLEO CLICÁVEL (A RODA DA VIDA)
/* ===================================================================== */

/* O contêiner da roda interativa de 12 fatias. */
#roda-da-vida-container {
    position: relative; /* Serve de âncora para as fatias. */
    width: 550px;
    height: 550px;
}

/* Cada uma das 12 fatias. É um contêiner invisível. */
.fatia-container {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    /* A mágica principal: corta o contêiner quadrado em uma fatia de pizza fina. */
    clip-path: polygon(50% 50%, 36.8% 0, 63.5% 0);
    transform-origin: center center; /* Garante que a rotação da fatia seja a partir do centro. */
    z-index: 10;
}

/* Cada um dos 10 segmentos clicáveis dentro de uma fatia. */
.anel {
    position: absolute; /* Posicionado em relação à '.fatia-container'. */
    border-radius: 50%;
    border: 1px solid #ddd; /* As linhas circulares da grade. */
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Alinha o número no topo. */
    cursor: pointer;
    transition: background-color 0.9s; /* Animação suave ao colorir. */
}

/* Efeito visual ao passar o mouse sobre um segmento. */
.anel:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

/* O número (1 a 10) dentro de cada segmento. */
.anel span {
    font-size: 12px;
    font-weight: bold;
    color: #555;
    transition: color 0.2s;
}

/* O círculo central sólido. */
#anel-central {
    position: absolute;
    width: 8.4%; height: 8.4%;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%); /* Técnica para centralização perfeita. */
    background-color: #34495e;
    border-radius: 50%;
    z-index: 100; /* Garante que fique por cima de tudo. */
    cursor: default; /* Remove o cursor de "clique". */
}


/* ===================================================================== */
/* 5. LINHAS DE DEMARCAÇÃO
/* ===================================================================== */

/* Estilo base para as 4 linhas principais. */
.linha-demarcatoria {
    position: absolute;
    background-color: #ccc;
    z-index: 2; /* Fica por cima dos anéis coloridos, mas abaixo do centro. */
    pointer-events: none;
}

/* A linha vertical principal. */
#linha-vertical {
    width: 3px;
    height: 750px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
}

/* A linha horizontal principal. */
#linha-horizontal {
    width: 750px;
    height: 3px;
    top: 50%;
    transform: translateY(-50%);
}

/* As 12 linhas finas que separam as subáreas. */
.linha-interna {
    position: absolute;
    top: 0;
    left: 50%;
    transform-origin: bottom center; /* A rotação acontece a partir da base, no centro. */
    width: 1px;
    height: 50%; /* Ocupa metade da altura do seu pai ('#anel-sub-area'). */
    background-color: #b9b9b9;
    pointer-events: none;
    z-index: 1; /* Fica um pouco atrás das linhas principais. */
}


/* ===================================================================== */
/* 6. COMPONENTES DE UI (CAIXAS DE TEXTO, BOTÕES, ETC.)
/* ===================================================================== */

/* A caixa azul que contém as instruções iniciais. */
.instructions-box {
    background-color: #f8f9fa;
    border-left: 4px solid #0d6efd;
    padding: 20px 25px;
    margin: 20px auto;
    max-width: 800px;
    border-radius: 5px;
}

/* Estilos para o conteúdo dentro da caixa de instruções. */
.instructions-box h4 { margin-top: 0; font-size: 1.2rem; color: #333; }
.instructions-box p { line-height: 1.6; color: #555; }
.instructions-box ol { padding-left: 20px; line-height: 1.7; color: #555; }
.instructions-box li { margin-bottom: 10px; }

/* Classe utilitária para esconder elementos (usada nas perguntas de reflexão). */
.hidden {
    display: none;
}

/* O contêiner na Etapa 2 que organiza os resultados em colunas. */
#resultado-container {
    display: flex;
    flex-wrap: wrap; /* Permite que as colunas quebrem em telas menores. */
    gap: 30px; /* Espaço entre as colunas. */
    justify-content: center;
    align-items: flex-start;
    margin: 40px auto;
}

/* Cada coluna de resultado (uma para a imagem, outra para o gráfico). */
.resultado-coluna {
    flex: 1; /* Faz com que as colunas dividam o espaço igualmente. */
    min-width: 400px; /* Largura mínima antes de quebrar a linha. */
    max-width: 550px;
    text-align: center;
}

.resultado-coluna h4 {
    font-size: 1.2rem;
    color: #333;
    margin-bottom: 20px;
}

/* A imagem da roda gerada pelo html2canvas. */
#imagem-roda-container img {
    max-width: 100%;
    height: auto;
    border: 1px solid #ddd;
    border-radius: 50%;
}

/* ========================================= */
/* === CORREÇÕES E AJUSTES FINAIS === */
/* ========================================= */

/* 1. Garante que o "miolo" da roda (nível 0) tenha uma cor escura */
#roda-da-vida-container .anel-central {
  background-color: #a3a3a3; /* Um cinza claro, para não ser tão pesado */
  /* Ou use uma cor mais escura se preferir, como #555 */
  border: 1px solid #ccc; /* Opcional: adiciona uma borda sutil */
  pointer-events: none;
  z-index: 99;
}

/* 2. Garante que a imagem gerada não estoure o contêiner */
#imagem-roda-container img {
  max-width: 100%;
  height: auto;
  border: 1px solid #c7c5c5;
  border-radius: 8px;
  margin-top: 10px;
}