/* * =========================================================
 * GLOBAL STYLES (Adicionado: Variáveis CSS para Glassmorphism)
 * =========================================================
 */
/* Define as variáveis CSS que o preloader.css precisa usar para o glassmorphism 
   Elas replicam os valores do Tailwind config para uso em CSS puro (backdrop-filter) */
:root {
    --tw-audit-glassLight: rgba(255, 255, 255, 0.98);
    --tw-audit-glassDark: rgba(15, 23, 42, 0.98);
}
.dark :root {
    --tw-audit-glassDark: rgba(15, 23, 42, 0.98);
}

/* ========= ANIMAÇÕES BÁSICAS ========= */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Classes utilitárias do Tailwind estendidas */
.animate-fade-in {
    animation: fadeIn 0.8s ease-out forwards;
}
.animate-fade-in-down {
    animation: fadeInDown 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.animate-slide-in-up {
    animation: slideInUp 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* Estilos globais da página */
/* =====================================================
    AUDIT EDUCA - ESTILOS GLOBAIS
    ===================================================== */

/* ========= VARIÁVEIS CSS ========= */
:root {
    /* Cores Audit Educa (Definidas no script Tailwind para utilidades) */
    --audit-navy: #0f172a;	
    --audit-blue: #1e3a8a;	
    --audit-gold: #fbbf24;	
    --audit-gold-dark: #b45309;
    --audit-glass-light: rgba(255, 255, 255, 0.98);
    --audit-glass-dark: rgba(15, 23, 42, 0.98);
    
    /* Fontes */
    --font-family: 'Poppins', sans-serif;
    
    /* Transições */
    --transition-fast: 0.3s ease;

    /* LAYOUT: VARIÁVEL PARA A ALTURA DO CABEÇALHO FIXO */
    /* Ajustado para 7rem. Este valor compensa a altura total do cabeçalho fixo (incluindo navegação e linha dourada) + uma margem de segurança. */
    --header-height: 7rem;
}

/* ========= RESET E BASE ========= */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    /* Aplica transição globalmente para suavizar mudanças de tema e hover */
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast);
}

body {
    font-family: var(--font-family);
    line-height: 1.6;
    overflow-x: hidden;	
}

/* ========= LAYOUT E OFFSET DE CABEÇALHO ========= */

/* Regra para o Cabeçalho Fixo (Assuma que você aplica esta classe ao seu <header>) */
.header-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* Garante que o cabeçalho fique acima de outros elementos */
    /* A altura do cabeçalho é definida pelo Tailwind no HTML, mas garantimos que ele seja fixo */
}

/* Offset para o Conteúdo Principal: Empurra o <main> para baixo */
/* Aplica um padding-top igual à altura do cabeçalho fixo */
main {
    padding-top: var(--header-height);
    /* Opcional: Garante que o main comece no topo, abaixo do header */
    min-height: calc(100vh - var(--header-height));
}

/* ========= CONFIGURAÇÕES DE TEMA ESCURO ========= */
.dark {
    color-scheme: dark;
}

/* Melhorias para o tema escuro */
.dark body {
    background-color: var(--audit-bg-dark, #0b1120);
    color: #f1f5f9;
}

/* Configurações específicas para elementos que podem não estar sendo afetados pelo dark: */
.dark .bg-white {
    background-color: rgba(15, 23, 42, 0.8) !important;
}

.dark .bg-gray-50 {
    background-color: rgba(15, 23, 42, 0.6) !important;
}

.dark .bg-gray-100 {
    background-color: rgba(15, 23, 42, 0.4) !important;
}

.dark .text-gray-800 {
    color: #e2e8f0 !important;
}

.dark .text-gray-700 {
    color: #cbd5e1 !important;
}

.dark .text-gray-600 {
    color: #94a3b8 !important;
}

.dark .border-gray-200 {
    border-color: rgba(148, 163, 184, 0.2) !important;
}

.dark .border-gray-300 {
    border-color: rgba(148, 163, 184, 0.3) !important;
}

/* --- Scroll Lock para Modais/Menus --- */
body.overflow-hidden {
    overflow: hidden !important;
}