/* ==========================================================================
   IMPORTAÇÃO DE FONTES EXTERNAS
   ========================================================================== */
/* Aqui estamos a importar a fonte "Inter" do Google Fonts para deixar o texto mais moderno */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');

/* ==========================================================================
   VARIÁVEIS DO SISTEMA (PALETA DE CORES E MEDIDAS)
   ========================================================================== */
/* O :root funciona como um "dicionário" onde guardamos as cores e tamanhos principais. 
   Se quiser mudar o azul do sistema inteiro, basta mudar a cor '--color-primary' aqui! */
:root {
    /* Cores de Fundo (Backgrounds) */
    --bg-body: #f8fafc;         /* Cor de fundo principal da página (cinza bem claro) */
    --bg-surface: #ffffff;      /* Cor de fundo dos cartões (branco puro) */
    --bg-header: #0f172a;       /* Cor do cabeçalho lá em cima (azul muito escuro) */
    --bg-header-nav: #1e293b;   /* Cor da barra de menus dentro do cabeçalho */
    
    /* Cores de Texto */
    --text-main: #0f172a;       /* Cor do texto principal (quase preto para boa leitura) */
    --text-muted: #64748b;      /* Cor para textos secundários (cinza médio) */
    --text-light: #f8fafc;      /* Cor do texto em fundos escuros (quase branco) */
    
    /* Cores de Ação (Botões e Avisos) */
    --color-primary: #3b82f6;       /* Azul principal (botões principais) */
    --color-primary-hover: #2563eb; /* Azul mais escuro quando o rato passa por cima */
    --color-success: #10b981;       /* Verde para acertos e sucesso */
    --color-success-hover: #059669; /* Verde mais escuro no hover */
    --color-danger: #e11d48;        /* Vermelho para erros e apagar dados */
    --color-danger-hover: #be123c;  /* Vermelho escuro no hover */
    --color-warning: #f59e0b;       /* Laranja para avisos */
    --color-border: #e2e8f0;        /* Cor das linhas que separam os elementos */
    
    /* Fontes e Tamanhos Comuns */
    --font-main: 'Inter', sans-serif;
    --radius-md: 8px;           /* Arredondamento pequeno (botões) */
    --radius-lg: 12px;          /* Arredondamento grande (cartões) */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);  /* Sombra leve */
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1); /* Sombra forte (para o Modal pop-up) */
}

/* ==========================================================================
   CONFIGURAÇÕES GERAIS (RESET E BASE)
   ========================================================================== */
/* O asterisco (*) afeta absolutamente TODOS os elementos do site */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; /* Garante que bordas não aumentem o tamanho dos elementos */
}

body { 
    font-family: var(--font-main); /* Usa a fonte definida lá em cima */
    background-color: var(--bg-body); 
    color: var(--text-main); 
    display: flex; 
    flex-direction: column; 
    height: 100vh; /* O site ocupa 100% da altura do ecrã */
    overflow: hidden; /* Esconde a barra de scroll geral do site (usaremos scroll só no conteúdo) */
}

/* Tira o estilo padrão feio dos botões do navegador */
button { 
    font-family: inherit; 
    cursor: pointer; 
    border: none; 
    background: none; 
}

/* Para imagens de questões não passarem o tamanho do ecrã */
img { 
    max-width: 100%; 
    height: auto; 
    border-radius: var(--radius-md); 
}

/* Classe muito importante: esconde elementos da tela quando aplicada */
.hidden-view { 
    display: none !important; 
}

/* ==========================================================================
   CLASSES UTILITÁRIAS (Para usar rapidamente no HTML)
   ========================================================================== */
.mb-6 { margin-bottom: 24px; } /* Dá um espaço para baixo */
.m-0 { margin: 0; }            /* Tira toda a margem */
.p-0 { padding: 0; }           /* Tira todo o espaçamento interno */
.p-lg { padding: 32px; }       /* Espaçamento interno grande */

.border-strong-green { border-color: #a7f3d0; } /* Borda verde clara para SWOT */
.border-strong-red { border-color: #fecdd3; }   /* Borda vermelha clara para SWOT */

.text-success { color: var(--color-success); }
.empty-state { color: var(--text-muted); font-style: italic; } /* Texto quando não há dados */
.center-text { text-align: center; }

/* ==========================================================================
   CABEÇALHO (HEADER) E NAVEGAÇÃO
   ========================================================================== */
.header { 
    background-color: var(--bg-header); 
    color: var(--text-light); 
    box-shadow: var(--shadow-sm); 
    z-index: 10; /* Garante que o cabeçalho fica sempre por cima de tudo */
}

.header-content { 
    max-width: 1152px; 
    margin: 0 auto; /* Centraliza no ecrã do PC */
    padding: 0 16px; 
    height: 64px; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; /* Espalha o Logo e o Menu para os lados opostos */
}

.logo-container { 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    font-weight: 700; 
    font-size: 1.125rem; 
    letter-spacing: -0.025em; 
}

.logo-highlight { color: var(--color-primary); }
.logo-icon { width: 24px; height: 24px; color: var(--color-primary); }

.nav-bar { 
    display: flex; 
    gap: 4px; 
    background-color: var(--bg-header-nav); 
    padding: 4px; 
    border-radius: var(--radius-md); 
}

.nav-btn { 
    padding: 6px 16px; 
    border-radius: 4px; 
    font-size: 0.875rem; 
    font-weight: 600; 
    color: #cbd5e1; 
    transition: all 0.2s; /* Animação suave ao passar o rato */
}

.nav-btn:hover { 
    color: var(--text-light); 
    background-color: rgba(255, 255, 255, 0.1); 
}

.nav-btn.active { 
    background-color: var(--color-primary); 
    color: white; 
}

/* ==========================================================================
   ÁREA DE CONTEÚDO PRINCIPAL (MAIN E CARTÕES)
   ========================================================================== */
.main-content { 
    flex: 1; 
    overflow-y: auto; /* Permite fazer scroll SÓ no conteúdo, mantendo o header parado */
    padding: 32px 16px; 
}

.container { 
    max-width: 1152px; 
    margin: 0 auto; 
    display: flex; 
    flex-direction: column; 
    gap: 24px; 
}

.container-sm { 
    max-width: 768px; /* Usado para telas mais finas, como a área do simulado */
    margin: 0 auto; 
}

/* Estilo Base dos "Cartões Brancos" */
.card { 
    background-color: var(--bg-surface); 
    border-radius: var(--radius-lg); 
    padding: 24px; 
    box-shadow: var(--shadow-sm); 
    border: 1px solid var(--color-border); 
}

.card-title { 
    font-size: 1.25rem; 
    font-weight: 700; 
    margin-bottom: 8px; 
}

.card-subtitle { 
    font-size: 0.875rem; 
    color: var(--text-muted); 
    margin-bottom: 24px; 
}

/* ==========================================================================
   BOTÕES GERAIS DO SISTEMA
   ========================================================================== */
.btn { 
    padding: 10px 20px; 
    border-radius: var(--radius-md); 
    font-weight: 600; 
    font-size: 0.875rem; 
    transition: background 0.2s; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    gap: 8px; 
}

.btn-primary { background-color: var(--color-primary); color: white; } 
.btn-primary:hover { background-color: var(--color-primary-hover); }

.btn-success { background-color: var(--color-success); color: white; } 
.btn-success:hover { background-color: var(--color-success-hover); }

.btn-danger { background-color: var(--color-danger); color: white; } 
.btn-danger:hover { background-color: var(--color-danger-hover); }

.btn-warning { background-color: var(--color-warning); color: white; }

.btn-dark { background-color: var(--bg-header); color: white; } 
.btn-dark:hover { background-color: black; }

.btn-outline { 
    background-color: transparent; 
    border: 1px solid var(--color-border); 
    color: var(--text-muted); 
} 
.btn-outline:hover { 
    background-color: var(--bg-body); 
    color: var(--text-main); 
}

.btn-large { 
    padding: 14px 32px; 
    font-size: 1rem; 
}

.btn:disabled { 
    opacity: 0.5; /* Deixa o botão transparente quando não pode ser clicado */
    cursor: not-allowed; 
}

/* ==========================================================================
   ESTILOS ESPECÍFICOS: DASHBOARD E MÉTRICAS
   ========================================================================== */
.dashboard-grid { 
    display: grid; 
    grid-template-columns: 1fr; /* No telemóvel fica uma coluna só */
    gap: 24px; 
}

@media (min-width: 768px) { 
    .dashboard-grid { 
        grid-template-columns: 1fr 1fr; /* No PC ficam duas colunas lado a lado */
    } 
}

.stats-overview { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    flex-wrap: wrap; 
    gap: 24px; 
}

/* "Caixinhas" de Acertos, Erros, etc */
.stat-boxes { display: flex; flex-wrap: wrap; gap: 16px; }
.stat-box { 
    padding: 8px 16px; 
    border-radius: var(--radius-md); 
    border: 1px solid var(--color-border); 
    text-align: center; 
}

/* Variações de cor para cada caixinha */
.stat-box.success { background-color: #ecfdf5; border-color: #d1fae5; }
.stat-box.danger { background-color: #fff1f2; border-color: #ffe4e6; }
.stat-box.neutral { background-color: var(--bg-body); }
.stat-box.info { background-color: #eff6ff; border-color: #dbeafe; }

.stat-label { 
    display: block; 
    font-size: 0.75rem; 
    font-weight: 700; 
    text-transform: uppercase; 
    margin-bottom: 4px; 
}

.stat-box.success .stat-label { color: var(--color-success); } 
.stat-box.danger .stat-label { color: var(--color-danger); } 
.stat-box.neutral .stat-label { color: var(--text-muted); } 
.stat-box.info .stat-label { color: var(--color-primary); }

.stat-value { font-size: 1.5rem; font-weight: 700; }
.stat-box.success .stat-value { color: #047857; } 
.stat-box.danger .stat-value { color: #be123c; } 
.stat-box.info .stat-value { color: #1d4ed8; }

/* Gráfico de Rosca (Criado 100% com CSS sem imagens) */
.donut-chart { 
    --perc: 0%; /* Variável alterada pelo Javascript (0 a 100) */
    width: 140px; 
    height: 140px; 
    border-radius: 50%; 
    /* A mágica acontece aqui: pinta de verde consoante a percentagem */
    background: conic-gradient(var(--color-success) var(--perc), var(--color-border) 0); 
    position: relative; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    box-shadow: inset 0px 0px 10px rgba(0,0,0,0.05); 
}

/* O "furo" no meio do gráfico de rosca */
.donut-chart::before { 
    content: ""; 
    width: 104px; 
    height: 104px; 
    border-radius: 50%; 
    background-color: var(--bg-surface); 
    position: absolute; 
    box-shadow: 0px 0px 10px rgba(0,0,0,0.05); 
}

.donut-inner { position: relative; font-size: 1.5rem; font-weight: 700; text-align: center; }
.donut-inner span.label { font-size: 0.75rem; font-weight: 400; color: var(--text-muted); display: block; }

/* Análise SWOT (Listas de Pontos Fortes e Fracos) */
.swot-header { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.swot-header.fortes { color: #065f46; } 
.swot-header.atencao { color: #9f1239; }

.swot-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.swot-item { 
    display: flex; 
    justify-content: space-between; 
    background-color: var(--bg-body); 
    padding: 10px 12px; 
    border-radius: 4px; 
    border: 1px solid var(--color-border); 
    font-size: 0.875rem; 
}
.swot-item span.perc { font-weight: 700; }

/* Histórico de Simulados Antigos */
.history-list { 
    display: flex; 
    flex-direction: column; 
    gap: 12px; 
    max-height: 300px; /* Se a lista crescer, cria scroll interno */
    overflow-y: auto; 
    padding-right: 4px; 
}

.history-card { 
    background: var(--bg-body); 
    border: 1px solid var(--color-border); 
    border-radius: var(--radius-md); 
    padding: 12px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
}
.history-card .h-title { font-weight: 600; font-size: 0.875rem; margin-bottom: 4px; text-transform: capitalize; }
.history-card .h-meta { font-size: 0.75rem; color: var(--text-muted); }
.history-card .h-score { font-weight: 700; color: var(--color-success); font-size: 1.125rem;}

/* ==========================================================================
   ESTILOS ESPECÍFICOS: TELA DE SIMULADO E QUESTÕES
   ========================================================================== */
.runner-header { 
    background-color: var(--bg-body); 
    border-bottom: 1px solid var(--color-border); 
    padding: 16px 24px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    border-radius: var(--radius-lg) var(--radius-lg) 0 0; 
}

.runner-topic { font-weight: 700; color: var(--text-muted); font-size: 0.875rem; }
.runner-stats { display: flex; gap: 12px; align-items: center; }
.runner-counter { background-color: #dbeafe; color: #1e40af; padding: 4px 12px; border-radius: 99px; font-weight: 700; font-size: 0.875rem; }

/* Relógio do Simulado Cronometrado */
.runner-timer { 
    display: flex; 
    align-items: center; 
    gap: 4px; 
    color: var(--color-danger); 
    font-weight: 700; 
    font-size: 0.875rem; 
    background: #fff1f2; 
    padding: 4px 12px; 
    border-radius: 99px; 
}

.question-text { font-size: 1.125rem; font-weight: 600; line-height: 1.6; margin-bottom: 16px; }
.question-image { margin-bottom: 24px; text-align: center; }

/* Alternativas (A, B, C, D) */
.options-list { display: flex; flex-direction: column; gap: 12px; }

.option-btn { 
    width: 100%; 
    text-align: left; 
    padding: 16px; 
    border-radius: var(--radius-md); 
    border: 1px solid var(--color-border); 
    background: var(--bg-surface); 
    transition: all 0.2s; 
    font-size: 1rem; 
    color: var(--text-main); 
}

/* Quando passa o rato e a questão ainda não foi submetida */
.option-btn:hover:not(:disabled) { 
    border-color: var(--color-primary); 
    background-color: #eff6ff; 
}

/* Quando seleciona uma alternativa antes de confirmar */
.option-btn.selected { 
    border-color: var(--color-primary); 
    background-color: #eff6ff; 
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2); 
}

/* Quando o sistema corrige: Acerto */
.option-btn.correct { 
    border-color: var(--color-success); 
    background-color: #ecfdf5; 
}

/* Quando o sistema corrige: Erro */
.option-btn.incorrect { 
    border-color: var(--color-danger); 
    background-color: #fff1f2; 
    opacity: 0.7; 
}

.option-letter { font-weight: 700; color: var(--color-primary); margin-right: 8px; }

/* Quadro com a explicação do professor após responder */
.feedback-box { 
    margin-top: 24px; 
    padding: 16px; 
    border-radius: var(--radius-md); 
    font-size: 0.875rem; 
    line-height: 1.5; 
    animation: fadeIn 0.3s ease-out; 
}
.feedback-box.success { background-color: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }
.feedback-box.danger { background-color: #fff1f2; border: 1px solid #fecdd3; color: #9f1239; }

/* ==========================================================================
   TELA DE CONFIGURAÇÃO DO SIMULADO (Escolher Modo Livre, Cronometrado, etc)
   ========================================================================== */
.setup-grid { 
    display: grid; 
    grid-template-columns: 1fr; /* Coluna única no telemóvel */
    gap: 16px; 
    margin-top: 24px; 
}

@media (min-width: 640px) { 
    .setup-grid { grid-template-columns: 1fr 1fr 1fr; } /* Três colunas em PC/Tablet */
}

.setup-card { 
    border: 1px solid var(--color-border); 
    border-radius: var(--radius-md); 
    padding: 24px; 
    cursor: pointer; 
    transition: all 0.2s; 
    background: var(--bg-surface); 
}

.setup-card:hover { 
    border-color: var(--color-primary); 
    box-shadow: var(--shadow-sm); 
}

/* Estilo para quando escolhemos um modo de estudo específico */
.setup-card.active { 
    border-color: var(--color-primary); 
    background-color: #eff6ff; 
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2); 
}

.setup-card h3 { font-size: 1.125rem; font-weight: 700; margin-bottom: 8px; color: var(--text-main); }
.setup-card.active h3 { color: var(--color-primary); }
.setup-card p { font-size: 0.875rem; color: var(--text-muted); }

/* Campos do formulário (Caixas de Seleção e Tempo) */
.form-group { margin-bottom: 16px; text-align: left; }
.form-group label { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 8px; color: var(--text-main); }

.form-control { 
    width: 100%; 
    padding: 10px 12px; 
    border-radius: var(--radius-md); 
    border: 1px solid var(--color-border); 
    font-family: var(--font-main); 
    font-size: 0.875rem; 
    color: var(--text-main); 
    background-color: var(--bg-surface); 
}

.form-control:focus { 
    outline: none; 
    border-color: var(--color-primary); 
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2); 
}

/* ==========================================================================
   TELA DE DADOS (Área de Upload e Download de JSON)
   ========================================================================== */
.data-actions { 
    display: flex; 
    flex-direction: column; 
    gap: 16px; 
    align-items: center; 
    justify-content: center; 
    padding: 32px 0;
}

/* Truque para esconder o input nativo de upload de arquivo (feio) e usar um botão bonito por baixo */
.file-upload-wrapper { 
    position: relative; 
    overflow: hidden; 
    display: inline-block; 
}

.file-upload-wrapper input[type=file] { 
    font-size: 100px; 
    position: absolute; 
    left: 0; 
    top: 0; 
    opacity: 0; /* Invisível mas ainda clicável */
    cursor: pointer; 
}

/* ==========================================================================
   MODAL DE AVISO (Pop-up do Sistema)
   ========================================================================== */
/* Fundo escuro atrás do pop-up */
.modal-overlay { 
    position: fixed; 
    inset: 0; 
    background: rgba(15, 23, 42, 0.6); 
    backdrop-filter: blur(2px); /* Efeito de vidro esfumaçado no fundo */
    display: flex; 
    align-items: center; 
    justify-content: center; 
    z-index: 50; 
}

/* O cartão branco do pop-up */
.modal-content { 
    background: var(--bg-surface); 
    border-radius: var(--radius-lg); 
    width: 100%; 
    max-width: 450px; 
    padding: 24px; 
    box-shadow: var(--shadow-lg); 
    animation: fadeIn 0.2s ease-out; /* Animação de entrada */
    margin: auto; 
}

.modal-title { font-size: 1.125rem; font-weight: 700; margin-bottom: 8px; }
.modal-msg { font-size: 0.875rem; color: var(--text-main); font-weight: 600; margin-bottom: 12px; }

/* Explicação longa se existir dentro do Modal */
.modal-exp { 
    font-size: 0.875rem; 
    color: var(--text-muted); 
    background: var(--bg-body); 
    padding: 12px; 
    border-radius: var(--radius-md); 
    border: 1px solid var(--color-border); 
    margin-bottom: 24px; 
    line-height: 1.5; 
}

.modal-actions { 
    display: flex; 
    justify-content: flex-end; /* Coloca os botões à direita */
    gap: 12px; 
}

/* ==========================================================================
   ANIMAÇÕES E DETALHES (SCROLLBAR)
   ========================================================================== */
/* Define como funciona a animação "fadeIn" que usamos ali em cima */
@keyframes fadeIn { 
    from { opacity: 0; transform: scale(0.95); } 
    to { opacity: 1; transform: scale(1); } 
}

/* Estilo para a barra de rolagem (Scrollbar) nos navegadores do PC */
::-webkit-scrollbar { width: 8px; } 
::-webkit-scrollbar-track { background: var(--bg-body); } 
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; } 
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

.bar-chart-row { margin-bottom: 16px; }
.bar-label { display: flex; justify-content: space-between; font-size: 0.875rem; font-weight: 600; margin-bottom: 6px; }
.bar-container { background: var(--color-border); height: 10px; border-radius: 5px; overflow: hidden; width: 100%; }
.bar-fill { height: 100%; background: var(--color-primary); transition: width 0.8s ease-in-out; }