/* ======================================================= */
/* ARQUIVO DE ESTILO PRINCIPAL E UNIFICADO (style.css)     */
/* ======================================================= */

/* --- 1. VARIÁVEIS E RESET GERAL --- */
:root {
    --main-bg: #f8f8f5;
    --light-bg: #1a2a4f;
    --dark-bg: #0b152a;
    --text-color: #171718;
    --text-color-light: #ecf0f1;
    --highlight: #3f5eaa;
    --accent: #4d6ccc;
    --shadow-light: rgba(255, 255, 255, 0.9);
    --shadow-dark: rgba(5, 11, 26, 0.2);
    --cor-primaria: #AD0505;
    --cor-hover: #456ae8;
    --cor-terciaria: #030385;

  /* Tipografia (Baseado em Sora e Roboto do seu HTML) */
  --font-heading: 'Inter', sans-serif;
  --font-body: 'Montserrat', sans-serif;
  --font-weight-normal: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Espaçamento */
  --spacing-xs: 8px;
  --spacing-sm: 15px;
  --spacing-md: 30px;
  --spacing-lg: 60px;
  --spacing-xl: 90px;
  /* --spacing-xs: 120px; */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; */
    font-family: Arial, Helvetica, sans-serif;
    scroll-behavior: smooth;
}

body {
    /* background-color: #f0f2f5; */
    background-color: #f4f7f6;
    color: var(--text-color);
    line-height: 1.3;
}

/* --- 2. LAYOUT E CONTAINERS --- */
.container, .containerCabecalho {
    /* max-width: 1100px; */
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
}
section[id] {
    scroll-margin-top: 80px;
}

h1, .h1 {
    font-size: 1.8em;
    line-height: 1.2;
}

/* --- 3. CABEÇALHO E NAVEGAÇÃO --- */
.main-header {
    background-color: #fff;
    padding: 15px 0;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.main-header .containerCabecalho {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--cor-terciaria);
    text-decoration: none;
}

/* .main-nav {
  display: none;  Escondido por padrão, ajustado para desktop 
  width: 100%;
  text-align: center;
  margin-bottom: var(--spacing-xl); 
  font-size: 0.85rem; 
  font-weight: 600; 
} */

.main-nav ul {
    list-style: none;
    display: flex;
}
.main-nav li {
    margin-left: 2rem;
}
.main-nav a {
    text-decoration: none;
    color: var(--cor-terciaria);
    /* font-weight: bold; */
    transition: color 0.3s ease;
}
.main-nav a:hover {
    color: var(--cor-hover);
}

.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-color);
    cursor: pointer;
    z-index: 1001;
}

/* --- 4. ESTILOS NEOMÓRFICOS E DO FORMULÁRIO --- */
.neo-container {
    /* background-color: var(--main-bg); */
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 8px 8px 15px var(--shadow-dark), -8px -8px 15px var(--shadow-light);
    padding: 25px;
    margin-top: 120px; /* Espaço para o header fixo */
}

.container-cadastro {
    width: 650px;
    max-width: 100%;
    margin: 0 auto;
}

.form-group { margin-bottom: 20px; }
label { display: block; margin-bottom: 8px; font-weight: 500; }
input[type="text"], input[type="number"], input[type="email"], input[type="tel"], input[type="password"], select, textarea {
    width: 100%;
    padding: 12px 15px;
    /* border: none; */
    /* border: 1px solid rgba(255, 255, 255, 0.6); */
    border-radius: 10px;
    /* background-color: var(--main-bg); */
    color: var(--text-color);
    font-size: 16px;
    
    /* Força a remoção da aparência padrão do iOS */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
    /* 2. Força uma borda transparente. Isso "engana" o Safari, 
    fazendo-o pensar que o elemento é customizável. */
    border: 1px solid transparent; 
    border-bottom: .5px solid #c6c6c6;

    /* 3. Garante uma cor de fundo sólida e não transparente */
    /* background-color: var(--main-bg); */

     /* Adiciona prefixo para compatibilidade com Safari/iOS */
    -webkit-box-shadow: inset 3px 3px 7px var(--shadow-dark), inset -3px -3px 7px var(--shadow-light);
    box-shadow: inset 3px 3px 7px var(--shadow-dark), inset -3px -3px 7px var(--shadow-light);

    /* 5. Estilo específico para a seta do select (se você quiser) */
    /* Se você não quiser uma seta, pode remover este bloco */
    /* background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23666%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: right 15px top 50%;
    background-size: 10px auto; */
}

/* Opcional: Remove a seta customizada do textarea e do input de idade */
textarea,
input[type="number"] {
    background-image: none;
}


/* .radio-group { display: flex; flex-wrap: wrap; justify-content: space-between; }
.radio-label { display: flex; flex-direction: column; align-items: center; text-align: center; flex: 1; min-width: 60px; margin-bottom: 10px; }
.radio-option { height: 40px; width: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 5px; cursor: pointer; background-color: var(--main-bg); box-shadow: 3px 3px 7px var(--shadow-dark), -3px -3px 7px var(--shadow-light); position: relative; }
.radio-option.selected { box-shadow: inset 3px 3px 7px var(--shadow-dark), inset -3px -3px 7px var(--shadow-light); }
.radio-option.selected::after { content: ''; width: 20px; height: 20px; border-radius: 50%; background-color: var(--accent); position: absolute; } */
/* ============================================= */
/* ESTILOS APRIMORADOS PARA AS OPÇÕES DO QUESTIONÁRIO */
/* ============================================= */

 /* 1. O contêiner das opções */
.radio-group {
    display: flex;
    gap: 15px; /* Espaçamento entre os botões */
}

/* 2. O 'label' que envolve o botão. Faz ele ocupar o espaço. */
.radio-label {
    flex: 1; /* Cada label ocupa uma porção igual da largura */
    display: block; /* Garante que o label se comporte como um bloco */
}

/* 3. O botão clicável (que agora contém o texto) */
.radio-option {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; /* Ocupa toda a largura do label */
    min-height: 50px;
    padding: 10px;
    border-top: .5px solid #c6c6c6;
    border-radius: 10px;
    cursor: pointer;
    /* background-color: var(--main-bg); */

    /* Adiciona prefixo para compatibilidade com Safari/iOS */
    -webkit-box-shadow: 3px 3px 7px var(--shadow-dark), -3px -3px 7px var(--shadow-light);
    box-shadow: 3px 3px 7px var(--shadow-dark), 
                -3px -3px 7px var(--shadow-light);
    transition: all 0.2s ease;
    text-align: center; /* Centraliza o texto, caso ele quebre a linha */

    /* Força a remoção da aparência padrão do iOS */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* 4. Estilo para o texto DENTRO do botão */
.option-text {
    font-size: 15px;
    font-weight: 500;
}

/* 5. Efeito de Hover */
.radio-option:hover {
    transform: translateY(-2px);
    box-shadow: 5px 5px 10px var(--shadow-dark), 
                -5px -5px 10px var(--shadow-light);
}

/* 6. Estilo do botão selecionado */
.radio-option.selected {
    box-shadow: inset 3px 3px 7px var(--shadow-dark), 
                inset -3px -3px 7px var(--shadow-light);
    background-color: var(--accent);
    color: #fff;
    transform: translateY(0);
}

.question {
    margin-bottom: 30px;
    padding: 15px;
    border-radius: 10px;
    /* background-color: var(--main-bg); */
    box-shadow: inset 3px 3px 7px var(--shadow-dark),
                inset -3px -3px 7px var(--shadow-light);
}

/* Seleciona todo .question que for um filho par (even) */
.question:nth-child(even) {
    /* Define uma cor de fundo ligeiramente diferente.
       Você pode usar uma variável de cor existente ou uma nova. */
    /* background-color: #f0f0ed; Um tom um pouco mais escuro que o --main-bg (#f8f8f5) */
    background-color: #f4f7f6; /* Um tom um pouco mais escuro que o --main-bg (#f8f8f5) */

    /* Opcional: Você pode ajustar a sombra também, se desejar */
    /* box-shadow: inset 3px 3px 7px #d1d1d1, 
                inset -3px -3px 7px #ffffff; */
}

.question-text {margin-bottom: 20px; line-height: 1.2;}


.btn { 
    display: inline-block; 
    padding: 12px 25px; 
    border: none; 
    border-radius: 10px; 
    text-decoration: none; 
    background-color: var(--main-bg); 
    color: var(--text-color); 
    font-size: 16px; 
    font-weight: 600; 
    cursor: pointer; 
    transition: all 0.3s ease; 

    /* Adiciona prefixo para compatibilidade com Safari/iOS */
    -webkit-box-shadow: 5px 5px 10px var(--shadow-dark), -5px -5px 10px var(--shadow-light);
    box-shadow: 5px 5px 10px var(--shadow-dark), -5px -5px 10px var(--shadow-light); 
    
    /* Força a remoção da aparência padrão do iOS */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.btn-primary { background-color: var(--accent); color: #fff; }
.navigation { display: flex; justify-content: center; margin-top: 20px; gap: 30px; align-items: stretch;}
.progress-container { width: 100%; height: 10px; background-color: var(--main-bg); border-radius: 5px; margin: 20px 0; box-shadow: inset 3px 3px 7px var(--shadow-dark), inset -3px -3px 7px var(--shadow-light); }
.progress-bar { height: 100%; background-color: var(--accent); border-radius: 5px; width: 0%; transition: width 0.3s ease; }
.error-message { color: #ff6b6b; font-size: 14px; }

/* --- 5. RODAPÉ E BOTÃO "VOLTAR AO TOPO" --- */
.main-footer { background-color: #e9ecef; color: #333; padding: 30px 0; margin-top: 50px; }
.footer-content { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 30px; margin-bottom: 20px; }
.footer-section { min-width: 250px; }
.footer-section h3 { color: #000; margin-bottom: 15px; }
.footer-bottom { text-align: center; border-top: 1px solid #ddd; padding-top: 20px; font-size: 0.9rem; }
#back-to-top { position: fixed; bottom: 25px; right: 25px; opacity: 0; visibility: hidden; transform: translateY(20px); background-color: var(--accent); color: white; width: 40px; height: 40px; border-radius: 50%; text-align: center; line-height: 40px; z-index: 1000; cursor: pointer; transition: all 0.3s ease; }
#back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }

.back-to-top .fa {
  font-size: 22px;
  vertical-align: middle
}

.pergFreq {
  font-size: .7rem;
}

.nav-link {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  margin: 0 var(--spacing-sm);
  /* color: var(--text-dark); */
  display: inline-block;
  padding: 5px 0;
  font-size: .85rem;
}

.category-label {
    display: none;
}

.option-text {
    font-size: 1em;
    line-height: 1;
}

/* --- 6. RESPONSIVIDADE E MENU HAMBÚRGUER (A SOLUÇÃO) --- */
/* @media (max-width: 992px) {
    .menu-toggle { display: block; }
    .main-nav {
        display: none; /* Escondido por padrão *
        position: absolute;
        top: 100%; /* Aparece logo abaixo do header *
        left: 0;
        width: 100%;
        background-color: rgba(44, 62, 80, 0.98); /* Fundo da sidebar *
    }
}  */
    /* CSS DEFINITIVO PARA O MENU HAMBÚRGUER (SEM ANIMAÇÃO)     */
@media (max-width: 768px) {
    .menu-toggle {
        display: block;
    }

    /* 2. Define o estado padrão do menu de navegação (ESCONDIDO) */
    .main-nav {
        display: none;
        }
    
    /* 3. Define o estado ATIVO do menu de navegação (VISÍVEL) */
    /*    Esta regra é ativada quando o JavaScript adiciona a classe '.active' */
    .main-nav.active {
        display: block !important; 
        position: absolute;
        width: 100%;
        top: 70px; /* <<-- Ajuste este valor para a altura exata do seu header */
        left: 0;
        background-color: #2c3e50; /* Fundo escuro */
        z-index: 1001; /*Garante que o menu fique na frente do conteúdo */
        transform: translateX(0); /*Move para a posição 0 (visível);*/
    }

    /* 4. Estiliza os itens DENTRO do menu ativo */
    .main-nav.active ul {
        flex-direction: column;
    }

    .main-nav.active li {
        margin: 0;
        text-align: center;
        border-bottom: 1px solid #34495e;
    }
    
    .main-nav.active li:last-child {
        border-bottom: none;
    }

    .main-nav.active a {
        padding: 6px;
        display: block;
        color: #ecf0f1; /* Texto claro */
    }
    /* .radio-group { justify-content: space-around; } */
    .radio-group { flex-direction: column; }
}

@media (max-width: 600px) {
    .admin-button, .btn-filtrar {
        text-align: center;
        line-height: 1.2;
    }

    .header-actions a  {
        display: block;
    }
}

/* Media Query para telas pequenas (como celulares) */
/*@media (max-width: 480px) {*/
/*    .logo {*/
/*        font-size: 1rem;*/
/*    }*/

/*    .step h2 {*/
/*        font-size: 1.4em;*/
/*        line-height: 1.2;*/
/*    }*/

/*    .container {*/
/*        padding: 0 10px;*/
/*    }*/

/*    h1, .h1 {*/
/*        font-size: 1.4em;*/
/*    }*/

/*    .neo-container {*/
/*        padding: 10px;*/
/*        margin-top: 110px;*/
        /* box-shadow: none; */
/*    }*/

/*    .navigation {*/
/*        margin-bottom: 20px;*/
/*    }*/
    
/*    .back-to-top {*/
/*        display: none;*/
/*    }*/
/*}*/

@media (max-width: 480px) {
    .logo {
        font-size: 1rem;
    }

    .step h2 {
        font-size: 1.4em;
        line-height: 1.2;
    }

    .container {
        padding: 0 10px;
    }

    h1, .h1 {
        font-size: 1.4em;
    }

    .question-text, .option-text  {
        font-size: .8rem;
    }
    
    .question-text { margin-bottom: 10px;}

    .radio-group {
        gap: 7px;
    }

    .radio-option {
        min-height: 0;
        padding: 9px;
    }

    .neo-container {
        padding: 10px;
        margin-top: 110px;
        /* box-shadow: none; */
    }

    .navigation {
        margin-bottom: 20px;
    }
    
    .close-modal-btn {
        right: 4px !important;
    }
    
    .back-to-top {
        display: none;
    }
}

@media (max-width: 391px) {
    [data-tooltip]::after {
        left: 2% !important;
    }
}

@media (max-width: 345px) {
    [data-tooltip]::after {
        left: 0% !important;
    }
}