/* GLOBAL STYLES - Super Cérebro (Unified) */
:root{
  --primary:#D07C2A;
  --accent:#0097A7;
  --bg-start:#eaf6f8;
  --bg-end:#f7fbff;
  --glass: rgba(255,255,255,0.75);
  --text:#122028;
  --muted:#6b7b80;
  --radius:18px;
  --card-width:900px;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter,Arial,system-ui,-apple-system;
  min-height:100vh;
  background:linear-gradient(135deg,var(--bg-start),var(--bg-end));
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.container{max-width:var(--card-width);margin:28px auto;padding:0 18px;}


/* Admin specific (A2) */
.admin-wrapper { padding-top:16px; padding-bottom:40px; }
.admin-header { display:flex; align-items:center; gap:12px; }

/* stat card */
.stat { padding:16px; border-radius:12px; text-align:left; }
.stat small { color:var(--muted); display:block; }
.stat .stat-value { font-size:28px; font-weight:800; margin-top:6px; }

/* table */
.table { width:100%; border-collapse:collapse; background:#fff; border-radius:10px; overflow:hidden; }
.table thead th { background:rgba(0,0,0,0.03); padding:12px; text-align:left; }
.table tbody td { padding:12px; border-bottom:1px solid rgba(0,0,0,0.06); vertical-align:middle; }

/* actions icons */
.actions-col { display:flex; justify-content:center; gap:10px; align-items:center; }
.icon-btn i { font-size:20px; color:var(--accent); transition: transform .14s ease; }
.icon-btn.delete i { color:var(--primary); }
.icon-btn:hover i { transform:scale(1.12); }

/* responsive */
@media (max-width:900px) {
  .admin-wrapper .stats-grid { grid-template-columns:repeat(1,1fr); }
  .container { padding:14px; }
  .stat .stat-value { font-size:22px; }
}


.actions-col {
    display: flex;
    justify-content: center;
    gap: 14px;
}

.icon-btn i {
    font-size: 22px;
    cursor: pointer;
    transition: 0.15s ease;
    color: var(--accent);
}

.icon-btn:hover i {
    transform: scale(1.18);
}

.icon-btn.delete i {
    color: #d63031;
}

.stat-value {
    font-size: 26px;
    font-weight: 700;
    margin-top: 8px;
}


/* =================================== */
/* ESTILOS DA PÁGINA DE LOGIN */
/* =================================== */

/* 1. Centraliza o card na tela */
body.login-page,
body.quiz-page {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px; 
}

/* 2. Define o tamanho e alinhamento do card */
.login-box {
    max-width: 400px; /* Largura máxima do card */
    width: 100%;     /* Responsivo em telas menores */
    text-align: center; /* Centraliza o título e o botão */
    padding: 32px 28px; /* Aumenta o padding (espaço interno) */
}

/* 3. Melhora o título "Painel Admin" */
.login-box h2 {
    font-size: 26px; /* Fonte maior */
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 24px; /* Mais espaço abaixo do título */
}

/* 4. Melhora os inputs */
.login-box input[type=text],
.login-box input[type=password] {
    text-align: center; /* Centraliza o texto digitado */
    font-size: 16px;
    padding: 14px; /* Inputs um pouco mais altos */
    margin-bottom: 12px; /* Espaço entre os inputs */
    margin-top: 0;
    /* Fundo levemente sólido para destacar do card */
    background: rgba(255, 255, 255, 0.8); 
}

/* 5. Adiciona um efeito de FOCO (MUITO IMPORTANTE) */
.login-box input[type=text]:focus,
.login-box input[type=password]:focus {
    outline: 0; /* Remove a borda padrão feia */
    border-color: var(--accent); /* Usa sua cor de destaque (azul) */
    
    /* Cria um "brilho" suave usando sua cor de destaque */
    box-shadow: 0 0 0 3px rgba(0, 151, 167, 0.2); 
}

/* 6. Botão com largura total */
.login-box .btn {
    width: 100%;
    padding: 14px; /* Botão maior */
    font-size: 16px;
    margin-top: 12px; /* Espaço acima do botão */
}


/* Card */
.card{
  background:var(--glass);
  border-radius:var(--radius);
  padding:22px;
  box-shadow:0 18px 40px rgba(15,23,26,0.08);
  backdrop-filter:blur(10px) saturate(120%);
}

/* Header */
.header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:56px;border-radius:8px}
.brand h1{margin:0;font-size:20px}
.small{font-size:13px;color:var(--muted)}

/* Forms & inputs */
input[type=text], input[type=tel], input[type=password], input[type=email], input:not([type]), textarea{
  width:100%;padding:12px;border-radius:10px;border:1px solid rgba(0,0,0,0.06);margin:8px 0;background:#fff;
  font-size:15px;
}
.btn{
  display:inline-block;padding:10px 16px;border-radius:12px;border:0;background:linear-gradient(90deg,var(--primary),var(--accent));
  color:#fff;font-weight:700;cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,0.08);
}
.btn.ghost{background:transparent;color:var(--text);border:1px solid rgba(0,0,0,0.06)}
.actions{display:flex;gap:8px;align-items:center}

/* Answers */
.answers{display:grid;gap:12px;margin-top:12px}
.option{padding:14px;border-radius:12px;border:1px solid rgba(0,0,0,0.06);background:#fff;cursor:pointer;transition:all .18s}
.option:hover{transform:translateY(-4px);box-shadow:0 10px 20px rgba(0,0,0,0.06)}
.option.selected{background:linear-gradient(180deg,rgba(0,151,167,0.06),rgba(208,124,42,0.04));border-color:rgba(0,0,0,0.08)}

/* Quiz layout */
.quiz-wrap{display:flex;flex-direction:column;gap:18px}
.progress{font-size:13px;color:var(--muted);font-weight:700;margin-bottom:6px}

/* Result */
.result{ text-align:center;padding:20px }
.result h2{margin:8px 0;font-size:26px}

/* Admin table */
.table{width:100%;border-collapse:collapse;background:#fff;border-radius:10px;overflow:hidden}
.table th{background:rgba(0,0,0,0.03);padding:12px;text-align:left}
.table td{padding:12px;border-bottom:1px solid rgba(0,0,0,0.06)}

/* Responsive */
@media(max-width:720px){
  :root{--card-width:95%}
  .brand img{height:44px}
}




/* =================================== */
/* ESTILOS DO QUIZ (Páginas de Perguntas) */
/* =================================== */

/* Container da Pergunta (título, progresso, etc.) */
.quiz-wrap h3 {
    margin-top: 4px;
    margin-bottom: 24px;
    font-size: 1.3rem; /* 20px~ */
    font-weight: 600;
    line-height: 1.4;
}

/* Progresso (Ex: "1/7") */
.progress {
    font-size: 13px;
    color: var(--muted); /* Sua cor --muted */
    font-weight: 700;
    margin-bottom: 6px;
}

/* --- Estilos das Opções de Resposta --- */

/* Grid para as respostas */
.answers {
    display: grid;
    gap: 12px; /* Espaço entre as opções */
    margin-top: 12px;
    margin-bottom: 28px; /* Espaço antes dos botões de nav */
}

/* Estilo de CADA opção (o mais importante) */
.option {
    padding: 16px 18px; /* Padding interno */
    border-radius: 12px; /* Borda arredondada */
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #fff; /* Fundo branco */
    cursor: pointer;
    transition: all 0.18s ease; /* Transição suave */
    text-align: left;
    font-weight: 500;
    font-size: 15px;
}

/* Efeito HOVER na opção */
.option:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
    border-color: var(--accent); /* Borda com sua cor de destaque */
}

/* Opção SELECIONADA */
.option.selected {
    border-color: var(--primary); /* Borda com sua cor primária */
    font-weight: 700;
    color: var(--text);
    /* Um fundo gradiente suave usando suas cores */
    background: linear-gradient(135deg, 
                    rgba(208, 124, 42, 0.05), /* Sua cor --primary com 5% opacidade */
                    rgba(0, 151, 167, 0.05)   /* Sua cor --accent com 5% opacidade */
                );
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
}

/* --- Navegação (Botões) --- */

/* Container dos botões "Voltar" e "Próximo" */
.nav {
    display: flex;
    justify-content: space-between; /* Alinha botões (um na esq, um na dir) */
    align-items: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.07); /* Linha separadora */
}

/* O botão .btn já deve existir, mas vamos adicionar
   estilos para :disabled e :hover */

.btn:hover {
    transform: scale(1.03);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

.btn:disabled {
    background: #ccc; /* Cor para botão desabilitado */
    cursor: not-allowed;
    opacity: 0.7;
    box-shadow: none;
    transform: none;
}

.btn.ghost:hover {
    background: rgba(0, 0, 0, 0.04);
    transform: none;
    box-shadow: none;
}

/* =================================== */
/* ESTILOS DA TELA DE RESULTADO */
/* =================================== */

/* Wrapper principal do resultado */
.result-wrap {
    text-align: center; /* Centraliza tudo */
    padding: 24px 10px; /* Adiciona mais espaço vertical */
}

/* 1. Estilo de ênfase para o Score (Ex: 68%) */
.result-score {
    font-size: 82px; /* Tamanho BEM grande */
    font-weight: 800; /* Máximo de "peso" */
    line-height: 1.1;
    margin-bottom: 12px;

    /* [EFEITO] Gradiente de cor no texto */
    background: linear-gradient(90deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

/* 2. Estilo de ênfase para o Feedback (Ex: "Atenção...") */
.result-feedback {
    font-size: 1.15rem; /* ~18px - Um pouco maior que o normal */
    color: var(--text);  /* Cor de texto principal (não a --muted) */
    line-height: 1.5;
    max-width: 480px; /* Limita a largura do texto */
    margin: 0 auto 24px auto; /* Centraliza o parágrafo */
}

/* =================================== */
/* ESTILO DO BOTÃO WHATSAPP */
/* =================================== */

.btn-whatsapp {
    background: linear-gradient(90deg, #25D366, #128C7E); /* Cores do WhatsApp */
    color: #fff;
    display: flex; /* Para alinhar o ícone e o texto */
    align-items: center;
    gap: 8px; /* Espaço entre o ícone e o texto */
    font-weight: 700;
    padding: 12px 20px; /* Ajuste o padding se necessário */
    text-decoration: none; /* Remover sublinhado do link */
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.25); /* Sombra verde */
}

.btn-whatsapp:hover {
    transform: scale(1.03);
    box-shadow: 0 10px 25px rgba(37, 211, 102, 0.4); /* Sombra mais intensa no hover */
}

.btn-whatsapp i {
    font-size: 20px; /* Tamanho do ícone do WhatsApp */
    color: #fff; /* Cor branca para o ícone */
}