/* =====================================================
   ESTILOS ESPECÍFICOS DO HEADER
   ===================================================== */

/* ========= CSS EXTRAÍDO DO HEADER.HTML ATUALIZADO ========= */

/* Foco visível para acessibilidade via teclado */
*:focus-visible {
    outline: 2px solid #d97706;
    outline-offset: 2px;
}

.glass {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(229, 231, 235, 0.2);
}

.dark .glass {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.mega-panel {
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    width: 100%;
    background-color: white;
    border-top: 1px solid rgba(229, 231, 235, 0.5);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    z-index: 50;
}

.dark .mega-panel {
    background-color: #0f172a;
    border-top: 1px solid rgba(55, 65, 81, 0.5);
}

.mega-panel.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Mobile Menu Transitions */
.mobile-menu-backdrop {
    transition: opacity 0.3s ease;
}
.mobile-menu-drawer {
    transition: transform 0.3s ease;
}

.mobile-submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
    visibility: hidden; /* Acessibilidade: esconde conteúdo colapsado */
}
.mobile-submenu.open {
    max-height: 800px;
    visibility: visible;
}

.tab-content {
    display: none;
    animation: fadeIn 0.3s ease-in-out;
}
.tab-content.active {
    display: block;
}

.menu-item-primary.active {
    background-color: rgba(217, 119, 6, 0.1);
    color: #d97706;
    border-right: 3px solid #d97706;
}

.dark .menu-item-primary.active {
    background-color: rgba(255, 255, 255, 0.05);
    color: #fbbf24;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateX(5px); }
    to { opacity: 1; transform: translateX(0); }
}

.custom-scroll::-webkit-scrollbar {
    width: 6px;
}
.custom-scroll::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.05);
}
.custom-scroll::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 20px;
}
.dark .custom-scroll::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.05);
}
.dark .custom-scroll::-webkit-scrollbar-thumb {
    background-color: #475569;
}

/* ========= GLASSMORPHISM & LINHA DOURADA ========= */
.glass {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.dark .glass {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.golden-line {
    height: 4px;
    background: linear-gradient(90deg, var(--audit-gold-dark) 0%, var(--audit-gold) 50%, var(--audit-gold-dark) 100%);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    width: 100%;
}

/* ========= BOTÕES DE NAVEGAÇÃO DESKTOP ========= */
.menu-trigger {
    @apply px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 hover:text-audit-goldDark transition border-b-2 border-transparent hover:border-audit-gold flex items-center gap-1 focus:outline-none;
}

/* ========= MEGA PAINÉIS DESKTOP ========= */
.desktop-panel {
    @apply absolute top-full left-0 w-full bg-audit-glassLight dark:bg-audit-glassDark border-t border-gray-200/20 shadow-xl backdrop-blur-xl p-8 z-40 origin-top;
    animation: fadeInDown 0.3s ease-out forwards;
}
.menu-title {
    @apply font-bold text-audit-navy dark:text-audit-gold mb-4 border-b border-gray-200 dark:border-gray-700 pb-2 text-sm;
}
.menu-link {
    @apply block p-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-audit-gold/20 dark:hover:bg-audit-blue/30 font-medium transition duration-150 flex justify-between items-center group;
}
.menu-icon {
    @apply text-[10px] opacity-0 group-hover:opacity-100 transition-opacity;
}

/* Detalhes Dinâmicos */
.detail-pane {
    @apply w-1/3 p-8 overflow-y-auto bg-gray-50 dark:bg-audit-bgDark;
}
.detail-desc {
    @apply text-sm text-gray-600 dark:text-gray-300 mb-4;
}
.detail-list {
    @apply space-y-2 text-sm;
}
.detail-link {
    @apply text-audit-goldDark hover:text-audit-blue transition font-semibold flex items-center gap-2;
}

/* CTA Coluna */
.menu-cta-column {
    @apply relative hidden md:block;
}
.menu-cta-icon {
    @apply bg-audit-gold w-16 h-16 rounded-full flex items-center justify-center shadow-2xl text-audit-navy text-3xl mb-4;
}
.menu-cta-title {
    @apply font-bold text-white text-xl mb-3 text-center drop-shadow-md;
}
.menu-cta-text {
    @apply text-sm text-white/90 mb-4 text-center;
}
.menu-cta-btn {
    @apply bg-audit-gold text-audit-navy font-bold py-3 px-6 rounded-full shadow-lg hover:bg-audit-goldDark hover:text-white transition uppercase text-sm;
}

/* Estilos adicionais para idioma e tema escuro */
.lang-option {
    @apply flex flex-col items-center gap-3 p-4 rounded-xl hover:bg-audit-gold/20 dark:hover:bg-white/10 cursor-pointer transition-all duration-300;
}

.lang-option:hover {
    @apply transform scale-105 shadow-lg;
}

/* Melhorias para tema escuro */
.dark .golden-line {
    background: linear-gradient(90deg, var(--audit-gold-dark) 0%, var(--audit-gold) 30%, var(--audit-gold-dark) 70%, #f59e0b 100%);
}

/* Ajuste para melhor contraste no tema escuro */
.dark .menu-link:hover {
    @apply bg-white/20;
}

.dark .detail-content.active {
    @apply text-gray-100;
}


/* ========= MENU MOBILE (ACORDEÃO) ========= */
.mobile-accordion-trigger {
    @apply w-full flex justify-between items-center px-4 py-3 rounded-lg hover:bg-white/40 dark:hover:bg-white/10 font-bold text-gray-800 dark:text-gray-200 transition group;
}
.mobile-submenu-content {
    @apply pl-4 border-l-2 border-audit-gold/30 ml-4 mt-1 space-y-1 overflow-hidden transition-all duration-300 ease-in-out;
}
.mobile-link {
    @apply block px-4 py-3 rounded-lg hover:bg-white/40 dark:hover:bg-white/10 font-bold text-gray-800 dark:text-gray-200 transition;
}
.mobile-sublink {
    @apply block px-4 py-2 text-sm text-gray-600 dark:text-gray-300 hover:text-audit-blue;
}
.mobile-sublink-small {
    @apply block px-4 py-1 text-sm text-gray-600 dark:text-gray-300 hover:text-audit-blue;
}
.mobile-submenu-title {
    @apply px-4 pt-2 text-xs font-semibold text-audit-goldDark dark:text-audit-gold uppercase;
}
.icon-chevron {
    transition: transform var(--transition-fast);
}
.rotate-chevron {
    transform: rotate(180deg);
}

/* --- MOBILE SEARCH SLIDE --- */
.search-slide-enter {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
}
.search-slide-active {
    max-height: 100px; /* Suficiente para a barra */
    opacity: 1;
}

/* Botão de Idioma Mobile */
.lang-btn-mobile {
    @apply hover:scale-110 transition p-1 rounded hover:bg-white/20;
}

/* --- Animações --- */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.animate-fade-in-down { 
    animation: fadeInDown 0.3s ease-out forwards; 
}

