/* ===========================
   RESET E VARIÁVEIS
   =========================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-color: #2563eb;
    --secondary-color: #7c3aed;
    --success-color: #10b981;
    --danger-color: #ef4444;
    --warning-color: #f59e0b;
    --dark: #1f2937;
    --light: #f3f4f6;
    --white: #ffffff;
    --border-radius: 12px;
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--dark);
    background-color: var(--light);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ===========================
   NAVBAR
   =========================== */
.navbar {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: var(--white);
    padding: 1rem 0;
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: 100;
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar-brand h1 {
    font-size: 1.5rem;
    font-weight: 700;
}

.navbar-menu {
    display: flex;
    gap: 2rem;
}

.navbar-menu a {
    color: var(--white);
    text-decoration: none;
    font-weight: 500;
    transition: opacity 0.3s;
}

.navbar-menu a:hover,
.navbar-menu a.active {
    opacity: 0.8;
    text-decoration: underline;
}

.navbar-timer {
    font-size: 1.2rem;
    font-weight: 700;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--border-radius);
}

/* ===========================
   PÁGINA INICIAL
   =========================== */
.main-content {
    padding: 3rem 0;
}

.hero {
    text-align: center;
    margin-bottom: 3rem;
}

.hero h2 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    color: var(--dark);
}

.hero p {
    font-size: 1.2rem;
    color: #6b7280;
}

.simulados-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.card-simulado {
    background: var(--white);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    box-shadow: var(--shadow);
    transition: transform 0.3s, box-shadow 0.3s;
    cursor: pointer;
}

.card-simulado:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.badge {
    background: var(--primary-color);
    color: var(--white);
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.card-dificuldade {
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.card-dificuldade.facil {
    background: #d1fae5;
    color: var(--success-color);
}

.card-dificuldade.medio {
    background: #fef3c7;
    color: var(--warning-color);
}

.card-dificuldade.dificil {
    background: #fee2e2;
    color: var(--danger-color);
}

.card-simulado h3 {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
    color: var(--dark);
}

.card-description {
    color: #6b7280;
    margin-bottom: 1rem;
    min-height: 3rem;
}

.card-info {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1rem;
    color: #6b7280;
    font-size: 0.9rem;
}

.btn-iniciar {
    width: 100%;
    padding: 0.8rem;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: var(--white);
    border: none;
    border-radius: var(--border-radius);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.3s;
}

.btn-iniciar:hover {
    opacity: 0.9;
}

/* Card Prova Especial */
.card-prova {
    border: 3px solid #f59e0b;
    background: linear-gradient(135deg, #fffbeb, #ffffff);
    position: relative;
    overflow: hidden;
}

.card-prova::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #f59e0b, #ef4444, #8b5cf6, #10b981);
}

.badge-prova {
    background: linear-gradient(135deg, #f59e0b, #ef4444) !important;
    font-size: 0.9rem !important;
}

.card-pesos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.peso-tag {
    background: #f1f5f9;
    color: #475569;
    padding: 0.25rem 0.6rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid #e2e8f0;
}

.peso-destaque {
    background: #fef3c7;
    color: #92400e;
    border-color: #f59e0b;
    font-weight: 700;
}

.btn-prova {
    background: linear-gradient(135deg, #f59e0b, #ef4444) !important;
    font-size: 1.05rem;
}

/* Detalhamento por Bloco (Prova) */
.detalhamento-prova {
    background: var(--white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    padding: 2rem;
    margin-bottom: 2rem;
}

.detalhamento-prova h3 {
    text-align: center;
    color: var(--dark);
    margin-bottom: 1.5rem;
    font-size: 1.3rem;
}

.blocos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.bloco-card {
    border-radius: var(--border-radius);
    padding: 1.25rem;
    text-align: center;
    border: 2px solid #e5e7eb;
    transition: transform 0.3s;
}

.bloco-card:hover {
    transform: translateY(-3px);
}

.bloco-card h4 {
    font-size: 1rem;
    margin-bottom: 1rem;
    color: #1f2937;
}

.bloco-card.bloco-bom {
    border-color: #10b981;
    background: linear-gradient(135deg, #ecfdf5, #ffffff);
}

.bloco-card.bloco-medio {
    border-color: #f59e0b;
    background: linear-gradient(135deg, #fffbeb, #ffffff);
}

.bloco-card.bloco-ruim {
    border-color: #ef4444;
    background: linear-gradient(135deg, #fef2f2, #ffffff);
}

.bloco-stats {
    display: flex;
    justify-content: space-around;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.bloco-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bloco-valor {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e3a5f;
}

.bloco-label {
    font-size: 0.7rem;
    color: #6b7280;
    text-transform: uppercase;
    font-weight: 600;
}

.bloco-peso {
    font-size: 0.8rem;
    color: #9ca3af;
    font-style: italic;
    margin-top: 0.5rem;
}

/* ===========================
   PÁGINA DO SIMULADO
   =========================== */
.simulado-container {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 2rem;
    padding: 2rem 0;
}

.progress-bar {
    grid-column: 1 / -1;
    background: var(--white);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    margin-bottom: 1rem;
}

.progress-info {
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--dark);
}

.progress-track {
    height: 10px;
    background: #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    transition: width 0.3s;
    width: 2%;
}

.questao-container {
    background: var(--white);
    padding: 2rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
}

.questao-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--light);
}

.questao-numero {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-color);
}

.questao-materia {
    background: var(--light);
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.9rem;
}

.questao-enunciado {
    margin-bottom: 2rem;
    font-size: 1.1rem;
    line-height: 1.8;
}

.questao-alternativas {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.alternativa {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    border: 2px solid #e5e7eb;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all 0.3s;
}

.alternativa:hover {
    border-color: var(--primary-color);
    background: #eff6ff;
}

.alternativa input[type="radio"] {
    margin-top: 0.2rem;
}

.alternativa-letra {
    font-weight: 700;
    color: var(--primary-color);
}

.alternativa-texto {
    flex: 1;
}

.questao-navegacao {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1.5rem;
    border-top: 2px solid var(--light);
}

.nav-buttons {
    display: flex;
    gap: 1rem;
}

.btn-nav {
    padding: 0.8rem 1.5rem;
    border: none;
    border-radius: var(--border-radius);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

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

.btn-anterior,
.btn-proxima {
    background: var(--primary-color);
    color: var(--white);
}

.btn-anterior:disabled {
    background: #9ca3af;
    cursor: not-allowed;
}

.btn-nav:hover:not(:disabled) {
    opacity: 0.9;
    transform: translateY(-2px);
}

/* Botão Finalizar Mobile (oculto no desktop) */
.finalizar-mobile {
    display: none;
}

/* Painel Lateral */
.questoes-panel {
    background: var(--white);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    height: fit-content;
    position: sticky;
    top: 100px;
}

.questoes-panel h3 {
    margin-bottom: 1rem;
    color: var(--dark);
}

.questoes-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.questao-mini {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.questao-mini:hover {
    transform: scale(1.1);
}

.questao-mini.respondida {
    background: var(--success-color);
    color: var(--white);
    border-color: var(--success-color);
}

.questao-mini.marcada {
    background: var(--warning-color);
    color: var(--white);
    border-color: var(--warning-color);
}

.questao-mini.atual {
    background: var(--primary-color);
    color: var(--white);
    border-color: var(--primary-color);
}

.legenda {
    padding: 1rem 0;
    border-top: 1px solid var(--light);
    border-bottom: 1px solid var(--light);
    margin-bottom: 1rem;
}

.legenda-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
}

.btn-finalizar {
    width: 100%;
    padding: 1rem;
    background: var(--success-color);
    color: var(--white);
    border: none;
    border-radius: var(--border-radius);
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-finalizar:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

/* ===========================
   PÁGINA DE RESULTADO
   =========================== */
.resultado-container {
    padding: 3rem 0;
}

.resultado-header {
    text-align: center;
    margin-bottom: 2rem;
}

.resultado-header h2 {
    font-size: 2.5rem;
    color: var(--dark);
    margin-bottom: 0.5rem;
}

.resultado-subtitulo {
    font-size: 1.2rem;
    color: #6b7280;
}

.pontuacao-principal {
    display: flex;
    justify-content: center;
    margin-bottom: 3rem;
}

.score-circle {
    position: relative;
    width: 200px;
    height: 200px;
}

.score-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.score-numero {
    display: block;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--success-color);
}

.score-label {
    font-size: 0.9rem;
    color: #6b7280;
}

.estatisticas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.stat-card {
    background: var(--white);
    padding: 2rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.stat-icon {
    font-size: 2.5rem;
}

.stat-card.acertos .stat-icon {
    color: var(--success-color);
}

.stat-card.erros .stat-icon {
    color: var(--danger-color);
}

.stat-card.tempo .stat-icon,
.stat-card.nota .stat-icon {
    color: var(--primary-color);
}

.stat-info {
    display: flex;
    flex-direction: column;
}

.stat-numero {
    font-size: 2rem;
    font-weight: 700;
    color: var(--dark);
}

.stat-label {
    color: #6b7280;
    font-size: 0.9rem;
}

/* Análise de Desempenho */
.analise-desempenho {
    background: var(--white);
    padding: 2rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    margin-bottom: 2rem;
}

.analise-desempenho h3 {
    margin-bottom: 2rem;
    color: var(--dark);
    text-align: center;
    font-size: 1.5rem;
}

.analise-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.analise-card {
    border-radius: var(--border-radius);
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.analise-forte {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border-left: 4px solid #10b981;
}

.analise-fraca {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    border-left: 4px solid #ef4444;
}

.analise-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.analise-icone {
    font-size: 1.75rem;
}

.analise-header h4 {
    margin: 0;
    color: var(--dark);
    font-size: 1.1rem;
}

.analise-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.analise-item {
    background: rgba(255, 255, 255, 0.7);
    padding: 1rem;
    border-radius: 8px;
}

.analise-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.categoria-nome {
    font-weight: 600;
    color: var(--dark);
}

.categoria-percentual {
    font-weight: 700;
    font-size: 1.1rem;
}

.analise-item-texto {
    color: #4b5563;
    font-size: 0.9rem;
    margin: 0;
}

.sem-destaque {
    color: #6b7280;
    font-style: italic;
    text-align: center;
    padding: 1rem;
}

.loading {
    color: #6b7280;
    text-align: center;
    padding: 1rem;
}

/* Recomendações de Estudo */
.recomendacoes-estudo {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    margin-top: 2rem;
    border-left: 4px solid var(--primary-color);
}

.recomendacao-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.recomendacao-icone {
    font-size: 1.75rem;
}

.recomendacao-header h4 {
    margin: 0;
    color: var(--dark);
    font-size: 1.2rem;
}

.recomendacao-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.recomendacao-item {
    background: rgba(255, 255, 255, 0.8);
    padding: 1.25rem;
    border-radius: 8px;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.recomendacao-numero {
    background: var(--primary-color);
    color: var(--white);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
}

.recomendacao-texto h5 {
    margin: 0 0 0.5rem 0;
    color: var(--dark);
    font-size: 1rem;
}

.recomendacao-texto p {
    margin: 0;
    color: #4b5563;
    font-size: 0.9rem;
    line-height: 1.5;
}

.resultado-acoes {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.btn-acao {
    padding: 1rem 2rem;
    border: none;
    border-radius: var(--border-radius);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

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

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

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

.btn-acao:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

/* ===========================
   GABARITO COMPLETO
   =========================== */
.gabarito-section {
    background: var(--white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    margin-bottom: 2rem;
    overflow: hidden;
}

.gabarito-header {
    background: linear-gradient(135deg, #1e3a5f, #2563eb);
    color: var(--white);
    padding: 1.5rem 2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.gabarito-header h3 {
    margin: 0;
    flex: 1;
    min-width: 200px;
}

.gabarito-filtros {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.filtro-btn {
    padding: 0.5rem 1rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 25px;
    background: transparent;
    color: var(--white);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
    transition: all 0.3s;
}

.filtro-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.6);
}

.filtro-btn.ativo {
    background: var(--white);
    color: #1e3a5f;
    border-color: var(--white);
}

.filtro-acertos.ativo {
    background: #10b981;
    color: var(--white);
    border-color: #10b981;
}

.filtro-erros.ativo {
    background: #ef4444;
    color: var(--white);
    border-color: #ef4444;
}

.filtro-branco.ativo {
    background: #6b7280;
    color: var(--white);
    border-color: #6b7280;
}

.btn-fechar-gabarito {
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--white);
    border-radius: var(--border-radius);
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s;
}

.btn-fechar-gabarito:hover {
    background: rgba(255, 255, 255, 0.3);
}

.gabarito-lista {
    padding: 1.5rem;
}

.gabarito-contador {
    text-align: center;
    padding: 0.75rem;
    background: #f1f5f9;
    border-radius: var(--border-radius);
    margin-bottom: 1.5rem;
    color: #475569;
    font-size: 0.95rem;
}

.gabarito-vazio {
    text-align: center;
    padding: 3rem;
    color: #6b7280;
    font-size: 1.1rem;
}

.gabarito-questao {
    border: 2px solid #e5e7eb;
    border-radius: var(--border-radius);
    margin-bottom: 1.5rem;
    overflow: hidden;
    transition: all 0.3s;
}

.gabarito-questao:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.gabarito-questao.questao-correta {
    border-color: #10b981;
}

.gabarito-questao.questao-errada {
    border-color: #ef4444;
}

.gabarito-questao.questao-branco {
    border-color: #9ca3af;
}

.gabarito-questao-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
}

.questao-correta .gabarito-questao-header {
    background: #ecfdf5;
}

.questao-errada .gabarito-questao-header {
    background: #fef2f2;
}

.questao-branco .gabarito-questao-header {
    background: #f3f4f6;
}

.gabarito-questao-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.gabarito-numero {
    font-weight: 700;
    color: #1e3a5f;
    font-size: 1rem;
}

.gabarito-materia {
    background: #e0e7ff;
    color: #3730a3;
    padding: 0.25rem 0.75rem;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
}

.gabarito-peso {
    background: #fef3c7;
    color: #92400e;
    padding: 0.25rem 0.6rem;
    border-radius: 15px;
    font-size: 0.75rem;
    font-weight: 700;
    border: 1px solid #f59e0b;
}

.gabarito-status {
    font-size: 1.5rem;
}

.gabarito-enunciado {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.gabarito-enunciado p {
    margin: 0;
    color: #1f2937;
    line-height: 1.7;
    font-size: 0.95rem;
}

.gabarito-alternativas {
    padding: 1rem 1.5rem;
}

.gabarito-alt {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    transition: background 0.2s;
    position: relative;
}

.gabarito-alt:last-child {
    margin-bottom: 0;
}

.gabarito-alt.alt-correta {
    background: #ecfdf5;
    border: 2px solid #10b981;
}

.gabarito-alt.alt-errada {
    background: #fef2f2;
    border: 2px solid #ef4444;
}

.alt-letra {
    font-weight: 700;
    color: #374151;
    min-width: 25px;
    font-size: 0.95rem;
}

.alt-correta .alt-letra {
    color: #059669;
}

.alt-errada .alt-letra {
    color: #dc2626;
}

.alt-texto {
    flex: 1;
    color: #4b5563;
    line-height: 1.5;
    font-size: 0.9rem;
}

.alt-badge {
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

.alt-badge.correta {
    background: #10b981;
    color: white;
}

.alt-badge.errada {
    background: #ef4444;
    color: white;
}

.gabarito-resposta-info {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 1.5rem;
    background: #f8fafc;
    border-top: 1px solid #e5e7eb;
    font-size: 0.85rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.info-correta {
    color: #059669;
}

.info-usuario {
    color: #6b7280;
}

.sem-alternativas {
    color: #9ca3af;
    font-style: italic;
    text-align: center;
    padding: 1rem;
}

/* Responsivo gabarito — movido para bloco responsivo unificado */

.dicas-melhoria {
    background: var(--white);
    padding: 2rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
}

.dicas-melhoria h3 {
    margin-bottom: 1rem;
    color: var(--dark);
}

.dica-card {
    background: #eff6ff;
    padding: 1rem;
    border-radius: var(--border-radius);
    border-left: 4px solid var(--primary-color);
    margin-bottom: 1rem;
}

/* ===========================
   PÁGINA DE HISTÓRICO
   =========================== */
.historico-container {
    padding: 3rem 0;
}

.historico-header {
    text-align: center;
    margin-bottom: 2rem;
}

.historico-header h2 {
    font-size: 2.5rem;
    color: var(--dark);
    margin-bottom: 0.5rem;
}

.resumo-geral {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.resumo-card {
    background: var(--white);
    padding: 2rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    text-align: center;
}

.resumo-numero {
    display: block;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.resumo-label {
    color: #6b7280;
    font-size: 0.9rem;
}

.filtros-historico {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.filtro-select {
    padding: 0.8rem 1rem;
    border: 2px solid #e5e7eb;
    border-radius: var(--border-radius);
    font-size: 1rem;
    cursor: pointer;
    background: var(--white);
}

.lista-historico {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.historico-item {
    background: var(--white);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    display: grid;
    grid-template-columns: 2fr 1fr auto;
    gap: 2rem;
    align-items: center;
}

.historico-info h3 {
    margin-bottom: 0.5rem;
    color: var(--dark);
}

.historico-data {
    color: #6b7280;
    font-size: 0.9rem;
    margin-bottom: 0.3rem;
}

.historico-detalhes {
    color: #9ca3af;
    font-size: 0.85rem;
}

.historico-resultado {
    text-align: center;
}

.resultado-nota {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius);
    display: inline-block;
}

.resultado-nota.excelente {
    background: #d1fae5;
    color: var(--success-color);
}

.resultado-nota.bom {
    background: #dbeafe;
    color: var(--primary-color);
}

.resultado-nota.regular {
    background: #fef3c7;
    color: var(--warning-color);
}

.resultado-info {
    display: flex;
    gap: 1rem;
    justify-content: center;
    font-size: 0.9rem;
}

.resultado-acertos {
    color: var(--success-color);
}

.resultado-erros {
    color: var(--danger-color);
}

.historico-acoes {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.btn-mini {
    padding: 0.5rem 1rem;
    border: 2px solid var(--primary-color);
    background: var(--white);
    color: var(--primary-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s;
}

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

.evolucao-grafico {
    background: var(--white);
    padding: 2rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
}

.evolucao-grafico h3 {
    margin-bottom: 1rem;
    color: var(--dark);
}

.grafico-placeholder {
    height: 300px;
    background: var(--light);
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    text-align: center;
    padding: 2rem;
}

/* ===========================
   RODAPÉ
   =========================== */
.footer {
    background: var(--dark);
    color: var(--white);
    padding: 2rem 0;
    margin-top: 4rem;
}

.footer .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-links {
    display: flex;
    gap: 2rem;
}

.footer-links a {
    color: var(--white);
    text-decoration: none;
    transition: opacity 0.3s;
}

.footer-links a:hover {
    opacity: 0.7;
}

/* ===========================
   HAMBURGER MENU (desktop: hidden)
   =========================== */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--white);
    font-size: 1.6rem;
    cursor: pointer;
    padding: 0.4rem 0.6rem;
    border-radius: 8px;
    transition: background 0.3s;
    line-height: 1;
}

.menu-toggle:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* ===========================
   RESPONSIVIDADE — TABLETS (≤ 768px)
   =========================== */
@media (max-width: 768px) {

    /* --- Container --- */
    .container {
        padding: 0 16px;
    }

    /* --- Hamburger Menu --- */
    .menu-toggle {
        display: block;
    }

    .navbar {
        padding: 0.75rem 0;
    }

    .navbar .container {
        flex-wrap: wrap;
        position: relative;
    }

    .navbar-brand h1 {
        font-size: 1.15rem;
    }

    .navbar-menu {
        display: none;
        width: 100%;
        flex-direction: column;
        background: rgba(0, 0, 0, 0.15);
        border-radius: 0 0 12px 12px;
        padding: 0.5rem;
        gap: 0;
        order: 3;
        margin-top: 0.5rem;
    }

    .navbar-menu.active {
        display: flex;
    }

    .navbar-menu a {
        padding: 0.75rem 1rem;
        border-radius: 8px;
        font-size: 1rem;
    }

    .navbar-menu a:hover,
    .navbar-menu a.active {
        background: rgba(255, 255, 255, 0.15);
        opacity: 1;
        text-decoration: none;
    }

    /* --- Timer (simulado page) --- */
    .navbar-timer {
        font-size: 1rem;
        padding: 0.4rem 0.8rem;
    }

    /* --- Hero --- */
    .main-content {
        padding: 1.5rem 0;
    }

    .hero {
        margin-bottom: 1.5rem;
    }

    .hero h2 {
        font-size: 1.6rem;
        line-height: 1.3;
    }

    .hero p {
        font-size: 0.95rem;
    }

    /* --- Cards Grid --- */
    .simulados-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .card-simulado {
        padding: 1.25rem;
    }

    .card-header {
        margin-bottom: 0.75rem;
    }

    .card-simulado h3 {
        font-size: 1.15rem;
    }

    .card-description {
        font-size: 0.9rem;
        margin-bottom: 0.75rem;
    }

    .card-info {
        font-size: 0.85rem;
    }

    .btn-iniciar {
        padding: 0.9rem;
        font-size: 1rem;
        min-height: 48px;
    }

    .card-pesos {
        gap: 0.4rem;
    }

    .peso-tag {
        font-size: 0.7rem;
        padding: 0.2rem 0.5rem;
    }

    /* --- Simulado Page Layout --- */
    .simulado-container {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 1rem 0;
    }

    .progress-bar {
        padding: 1rem;
        margin-bottom: 0.5rem;
    }

    .progress-info {
        font-size: 0.9rem;
    }

    .questao-container {
        padding: 1.25rem;
    }

    .questao-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        margin-bottom: 1rem;
        padding-bottom: 0.75rem;
    }

    .questao-numero {
        font-size: 1rem;
    }

    .questao-materia {
        font-size: 0.8rem;
    }

    .questao-enunciado {
        font-size: 1rem;
        line-height: 1.7;
        margin-bottom: 1.5rem;
    }

    /* Touch-friendly alternativas */
    .alternativa {
        padding: 0.9rem;
        min-height: 48px;
        gap: 0.75rem;
        border-width: 2px;
    }

    .alternativa-letra {
        font-size: 0.95rem;
        min-width: 24px;
    }

    .alternativa-texto {
        font-size: 0.95rem;
        line-height: 1.5;
    }

    .questao-navegacao {
        flex-direction: column;
        gap: 0.75rem;
        padding-top: 1rem;
    }

    .btn-nav {
        padding: 0.75rem 1rem;
        min-height: 48px;
        font-size: 0.95rem;
    }

    .nav-buttons {
        width: 100%;
        justify-content: space-between;
    }

    .btn-marcar {
        width: 100%;
    }

    /* --- Side Panel: oculta completamente no mobile --- */
    .questoes-panel,
    .questoes-panel * {
        display: none !important;
    }

    /* --- Botão Finalizar visível no mobile --- */
    .finalizar-mobile {
        display: block;
        margin-top: 1rem;
    }

    .finalizar-mobile .btn-finalizar {
        width: 100%;
        padding: 1rem;
        font-size: 1.05rem;
        min-height: 52px;
    }

    /* --- Resultado Page --- */
    .resultado-container {
        padding: 1.5rem 0;
    }

    .resultado-header {
        margin-bottom: 1.5rem;
    }

    .resultado-header h2 {
        font-size: 1.6rem;
    }

    .resultado-subtitulo {
        font-size: 0.95rem;
    }

    .pontuacao-principal {
        margin-bottom: 2rem;
    }

    .score-circle {
        width: 160px;
        height: 160px;
    }

    .score-circle svg {
        width: 160px;
        height: 160px;
    }

    .score-numero {
        font-size: 2rem;
    }

    .score-label {
        font-size: 0.8rem;
    }

    .estatisticas-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
        margin-bottom: 2rem;
    }

    .stat-card {
        padding: 1rem;
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }

    .stat-icon {
        font-size: 1.75rem;
    }

    .stat-numero {
        font-size: 1.5rem;
    }

    .stat-label {
        font-size: 0.8rem;
    }

    /* --- Análise de Desempenho --- */
    .analise-desempenho {
        padding: 1.25rem;
        margin-bottom: 1.5rem;
    }

    .analise-desempenho h3 {
        font-size: 1.2rem;
        margin-bottom: 1.25rem;
    }

    .analise-container {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .analise-card {
        padding: 1.25rem;
    }

    .analise-icone {
        font-size: 1.5rem;
    }

    .analise-header h4 {
        font-size: 1rem;
    }

    .analise-item {
        padding: 0.85rem;
    }

    .categoria-nome {
        font-size: 0.9rem;
    }

    .categoria-percentual {
        font-size: 1rem;
    }

    /* --- Recomendações --- */
    .recomendacoes-estudo {
        padding: 1.25rem;
        margin-top: 1.5rem;
    }

    .recomendacao-header h4 {
        font-size: 1.05rem;
    }

    .recomendacao-item {
        padding: 1rem;
        flex-direction: column;
        gap: 0.75rem;
    }

    .recomendacao-numero {
        width: 28px;
        height: 28px;
        font-size: 0.85rem;
    }

    .recomendacao-texto h5 {
        font-size: 0.95rem;
    }

    .recomendacao-texto p {
        font-size: 0.85rem;
    }

    /* --- Ações do resultado --- */
    .resultado-acoes {
        flex-direction: column;
        gap: 0.75rem;
        margin-bottom: 1.5rem;
    }

    .btn-acao {
        width: 100%;
        min-height: 48px;
        font-size: 1rem;
        padding: 0.9rem 1.5rem;
    }

    /* --- Detalhamento Prova (blocos) --- */
    .detalhamento-prova {
        padding: 1.25rem;
    }

    .detalhamento-prova h3 {
        font-size: 1.15rem;
    }

    .blocos-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .bloco-card {
        padding: 1rem;
    }

    .bloco-card h4 {
        font-size: 0.95rem;
    }

    .bloco-stats {
        gap: 0.35rem;
    }

    .bloco-valor {
        font-size: 1rem;
    }

    /* --- Gabarito --- */
    .gabarito-header {
        flex-direction: column;
        align-items: stretch;
        padding: 1.25rem;
        gap: 0.75rem;
    }

    .gabarito-header h3 {
        text-align: center;
        min-width: unset;
    }

    .gabarito-filtros {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .filtro-btn {
        text-align: center;
        font-size: 0.8rem;
        padding: 0.5rem 0.4rem;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .btn-fechar-gabarito {
        width: 100%;
        min-height: 44px;
        text-align: center;
    }

    .gabarito-lista {
        padding: 1rem;
    }

    .gabarito-questao-header {
        padding: 0.85rem 1rem;
    }

    .gabarito-questao-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
    }

    .gabarito-numero {
        font-size: 0.9rem;
    }

    .gabarito-enunciado {
        padding: 1rem;
    }

    .gabarito-enunciado p {
        font-size: 0.9rem;
        line-height: 1.6;
    }

    .gabarito-alternativas {
        padding: 0.75rem 1rem;
    }

    .gabarito-alt {
        padding: 0.6rem 0.75rem;
        gap: 0.5rem;
    }

    .alt-texto {
        font-size: 0.85rem;
    }

    .gabarito-resposta-info {
        flex-direction: column;
        padding: 0.6rem 1rem;
        font-size: 0.8rem;
    }

    /* --- Histórico Page --- */
    .historico-container {
        padding: 1.5rem 0;
    }

    .historico-header h2 {
        font-size: 1.6rem;
    }

    .historico-header p {
        font-size: 0.9rem;
    }

    .resumo-geral {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .resumo-card {
        padding: 1.25rem;
    }

    .resumo-numero {
        font-size: 1.75rem;
    }

    .resumo-label {
        font-size: 0.8rem;
    }

    .filtros-historico {
        flex-direction: column;
    }

    .filtro-select {
        width: 100%;
        min-height: 48px;
    }

    .historico-item {
        grid-template-columns: 1fr;
        gap: 1rem;
        text-align: center;
        padding: 1.25rem;
    }

    .historico-info h3 {
        font-size: 1.05rem;
    }

    .historico-acoes {
        flex-direction: row;
        justify-content: center;
    }

    .btn-mini {
        min-height: 44px;
        padding: 0.6rem 1.25rem;
    }

    .evolucao-grafico {
        padding: 1.25rem;
    }

    .grafico-placeholder {
        height: 200px;
        padding: 1rem;
    }

    /* --- Footer --- */
    .footer {
        margin-top: 2rem;
        padding: 1.5rem 0;
    }

    .footer .container {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }

    .footer p {
        font-size: 0.85rem;
    }

    .footer-links {
        gap: 1rem;
        justify-content: center;
    }

    .footer-links a {
        font-size: 0.85rem;
    }
}

/* ===========================
   RESPONSIVIDADE — CELULARES PEQUENOS (≤ 480px)
   =========================== */
@media (max-width: 480px) {

    .container {
        padding: 0 12px;
    }

    .navbar-brand h1 {
        font-size: 0.95rem;
    }

    .hero h2 {
        font-size: 1.3rem;
    }

    .hero p {
        font-size: 0.85rem;
    }

    .card-simulado h3 {
        font-size: 1.05rem;
    }

    /* Grid de questões menor */
    .questoes-grid {
        grid-template-columns: repeat(6, 1fr);
    }

    .questao-mini {
        width: 32px;
        height: 32px;
        font-size: 0.7rem;
    }

    /* Stats em 1 coluna */
    .estatisticas-grid {
        grid-template-columns: 1fr;
    }

    .resumo-geral {
        grid-template-columns: 1fr;
    }

    /* Título do resultado */
    .resultado-header h2 {
        font-size: 1.35rem;
    }

    /* Score circle menor */
    .score-circle {
        width: 140px;
        height: 140px;
    }

    .score-circle svg {
        width: 140px;
        height: 140px;
    }

    .score-numero {
        font-size: 1.75rem;
    }

    /* Gabarito filtros em 1 coluna */
    .gabarito-filtros {
        grid-template-columns: 1fr;
    }

    /* Questão */
    .questao-enunciado {
        font-size: 0.95rem;
    }

    .alternativa-texto {
        font-size: 0.9rem;
    }

    /* Navbar timer */
    .navbar-timer {
        font-size: 0.9rem;
        padding: 0.35rem 0.7rem;
    }

    .historico-header h2 {
        font-size: 1.35rem;
    }
}

/* ===========================
   UTILITÁRIOS TOUCH
   =========================== */
@media (hover: none) and (pointer: coarse) {
    /* Dispositivos touch - aumentar áreas clicáveis */
    .alternativa {
        min-height: 52px;
    }

    .btn-nav,
    .btn-iniciar,
    .btn-acao,
    .btn-finalizar,
    .btn-mini,
    .filtro-btn {
        min-height: 48px;
    }

    .questao-mini {
        min-width: 36px;
        min-height: 36px;
    }

    /* Remover hover effects em touch */
    .card-simulado:hover {
        transform: none;
    }

    .btn-nav:hover:not(:disabled) {
        transform: none;
    }

    .btn-acao:hover {
        transform: none;
    }

    .bloco-card:hover {
        transform: none;
    }

    .questao-mini:hover {
        transform: none;
    }
}