:root {
    --bg-page: #fffdf5; 
    --bg-header: #fffdf5;
    --text-main: #020617;
    --text-muted: #64748b;
    --border: rgba(0, 0, 0, 0.08);
    --amarelo-gold: #ffc107;
    --amarelo-hover: #e5ad06;
    --sidebar-active: rgba(255, 193, 7, 0.1);
    --header-top-h: 50px;
    --header-bottom-h: 40px;
    --sidebar-w: 260px;
    --transition: all 0.2s ease;
}

[data-theme="dark"] {
    --bg-page: #0b0e14;
    --bg-header: #0b0e14;
    --text-main: #ffffff;
    --text-muted: #94a3b8;
    --border: rgba(255, 255, 255, 0.1);
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Plus Jakarta Sans', sans-serif; }
body { background-color: var(--bg-page); color: var(--text-main); overflow-x: hidden; }

header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; border-bottom: 1px solid var(--border); background: var(--bg-header); }
.nav-top { height: var(--header-top-h); display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem; }
.nav-left-links { display: flex; align-items: center; gap: 20px; }
.logo-section { display: flex; align-items: center; gap: 8px; color: var(--text-main); font-weight: 800; font-size: 1.1rem; text-decoration: none; transition: var(--transition); }
.logo-box { background: var(--amarelo-gold); color: #020617; padding: 3px 7px; border-radius: 5px; }
.top-link { text-decoration: none; color: var(--text-muted); font-size: 0.85rem; font-weight: 600; }

.nav-center-search { flex: 1; display: flex; justify-content: center; }
.search-bar { background: rgba(0,0,0,0.03); border: 1px solid var(--border); border-radius: 6px; padding: 6px 12px; display: flex; align-items: center; gap: 10px; width: 350px; }
.search-bar input { background: none; border: none; outline: none; color: var(--text-main); font-size: 0.8rem; width: 100%; }

.sub-nav {
    display: flex; justify-content: left; gap: 24px;
    padding: 0 2rem;
    border-top: 1px solid rgba(0,0,0,0.03);
}

.sub-nav-item {
    color: var(--text-muted); text-decoration: none; font-size: 0.75rem; font-weight: 700;
    display: flex; align-items: center; gap: 6px;
    padding: 12px 0; position: relative; transition: var(--transition);
}
.sub-nav-item::after {
    content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px;
    background: var(--amarelo-gold); transition: var(--transition);
}
.sub-nav-item:hover::after, .sub-nav-item.active::after { width: 100%;}

.layout-main { display: flex; margin-top: calc(var(--header-top-h) + var(--header-bottom-h)); height: calc(100vh - 90px); }
.sidebar { width: var(--sidebar-w); border-right: 1px solid var(--border); overflow-y: auto; padding: 1.5rem 0.8rem; flex-shrink: 0; }
.sidebar-label { font-size: 0.65rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; margin: 1.5rem 0 0.8rem 0.5rem; letter-spacing: 0.5px; }

.sidebar-item { 
    display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; 
    border-radius: 6px; text-decoration: none; color: var(--text-muted); font-size: 0.8rem; font-weight: 500; margin-bottom: 2px;
    transition: var(--transition);
}
.sidebar-item:hover, .sidebar-item.active { background: var(--sidebar-active); color: var(--amarelo-gold); }
.sidebar-item.active { font-weight: 700; }

.dropdown-container { margin-bottom: 5px; }
.dropdown-btn { width: 100%; border: none; background: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; color: var(--text-muted); font-size: 0.8rem; font-weight: 600; text-align: left; }
.dropdown-content { padding-left: 10px; display: none; }
.dropdown-container.open .dropdown-content { display: block; }
.dropdown-container.open .chevron { transform: rotate(180deg); }

.content { flex: 1; overflow-y: auto; padding: 3rem; width: 100%; }

.hero-section { margin-bottom: 3rem; max-width: 100%; }
.hero-section h1 { font-size: 2.5rem; font-weight: 800; letter-spacing: -1px; margin-bottom: 1rem; line-height: 1.1; }
.hero-section h1 span { color: var(--amarelo-gold); }
.hero-section h2 { font-size: 2rem; font-weight: 800; letter-spacing: -1px; margin-bottom: 1rem; line-height: 1.1; }
.hero-section h2 span { color: var(--amarelo-gold); }
.hero-section p { font-size: 1.1rem; color: var(--text-muted); line-height: 1.6; }

.counter-badge { display: inline-flex; align-items: center; padding: 4px 12px; background: var(--sidebar-active); border: 1px solid var(--border); border-radius: 50px; font-size: 0.75rem; font-weight: 700; color: var(--amarelo-gold); margin-bottom: 1rem; gap: 3px;}

.doc-body { width: 100%; animation: fadeIn 0.4s ease; }

/* --- ESTILIZAÇÃO DOS FILTROS --- */
.filter-container { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; flex-wrap: wrap; gap: 15px; }
.filter-group { display: flex; gap: 10px; }
.filter-dropdowns { display: flex; gap: 15px; align-items: center; }

.filter-btn { padding: 6px 14px; border-radius: 20px; border: 1px solid var(--border); background: none; color: var(--text-muted); cursor: pointer; font-size: 0.75rem; font-weight: 600; transition: var(--transition); }
.filter-btn.active { background: var(--amarelo-gold); border-color: var(--amarelo-gold); color: #020617; }

.select-filter { 
    padding: 6px 12px; border-radius: 8px; border: 1px solid var(--border); 
    background: var(--bg-header); color: var(--text-muted); font-size: 0.75rem; 
    font-weight: 600; outline: none; cursor: pointer;
}

.comp-card { margin-bottom: 4rem; }
.tag-list { display: flex; gap: 8px; margin-bottom: 15px; }
.tag { font-size: 0.65rem; padding: 2px 8px; border-radius: 4px; background: var(--border); color: var(--text-muted); text-transform: uppercase; font-weight: 700; }

.comp-id { color: var(--amarelo-gold); font-weight: 800; margin-right: 8px; }
.comp-title { font-size: 1.8rem; font-weight: 800; margin-bottom: 8px; }
.comp-desc { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 12px; }

.preview-container { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--bg-header); }
.preview-header { padding: 12px 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.preview-actions { display: flex; flex-direction: row; align-items: center; gap: 8px; }

.action-btn { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 6px; border: 1px solid var(--border); cursor: pointer; font-weight: 700; font-size: 0.75rem; background: var(--bg-page); color: var(--text-main); white-space: nowrap; }
.action-btn.highlight { background: var(--amarelo-gold); color: #020617; border-color: var(--amarelo-gold); }

.preview-viewport { padding: 60px; min-height: 200px; display: flex; justify-content: center; align-items: center; background-image: radial-gradient(var(--border) 1px, transparent 1px); background-size: 20px 20px; }
iframe { width: 100%; border: none; background: transparent; }

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

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }

.action-btn.download-btn {
    /* Base discreta usando as variáveis de texto do sistema */
    background-color: transparent;
    border-color: var(--text-muted);
    color: var(--text-muted);
}

/* Sutil incremento de opacidade no estado normal se estiver no tema dark */
[data-theme="dark"] .action-btn.download-btn {
    background-color: rgba(255, 255, 255, 0.01);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Efeito Hover do Botão de Download - Ativação do Amarelo Ouro */
.action-btn.download-btn:hover {
    color: var(--text-main);
    background-color: rgba(255, 193, 7, 0.15); /* Variação suave do seu gold */
    border-color: var(--amarelo-gold);
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.1);
}

[data-theme="dark"] .action-btn.download-btn:hover {
    background-color: rgba(255, 193, 7, 0.2);
    border-color: var(--amarelo-gold);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

/* Animação estruturada no ícone de download ao passar o mouse */
.action-btn.download-btn:hover i {
    animation: bounceDown 0.6s infinite alternate;
}

/* Keyframes para a microinteração do ícone */
@keyframes bounceDown {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(2px);
    }
}

/* ============================================================
   SEÇÃO DE RESPONSIVIDADE (NOVOS AJUSTES)
   ============================================================ */

@media (max-width: 1024px) {
    .nav-center-search { display: none; } /* Oculta busca central em tablets para priorizar espaço */
    .content { padding: 2rem; }
    .hero-section h1 { font-size: 2.2rem; }
}

@media (max-width: 768px) {
    body { overflow-y: auto; } /* Permite scroll no body se necessário */
    
    .layout-main { 
        flex-direction: column; 
        height: auto; 
        margin-top: calc(var(--header-top-h) + 45px); /* Ajuste para o menu que pode quebrar */
    }

    .sidebar { 
        width: 100%; 
        border-right: none; 
        border-bottom: 1px solid var(--border); 
        height: auto; 
        max-height: 300px; 
    }

    .sub-nav {
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 5px;
    }

    .filter-container {
        flex-direction: column;
        align-items: flex-start;
    }

    .filter-dropdowns {
        width: 100%;
        flex-direction: column;
        gap: 10px;
    }

    .select-filter {
        width: 100%;
    }

    .preview-header {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }

    .preview-actions {
        width: 100%;
        justify-content: space-between;
    }

    .preview-viewport {
        padding: 30px 15px;
    }
}

@media (max-width: 480px) {
    .nav-top { padding: 0 1rem; }
    .logo-section { font-size: 0.9rem; }
    
    .hero-section h1 { font-size: 1.8rem; }
    .hero-section p { font-size: 0.95rem; }

    .content { padding: 1.5rem 1rem; }

    .action-btn {
        padding: 8px 10px;
        font-size: 0.7rem;
    }
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
/* Botão Scroll Top - Design Elite */
.scroll-top {
  position: fixed !important;
  visibility: hidden;
  opacity: 0;
  right: 20px;
  bottom: 20px;
  z-index: 999999 !important; /* Valor altíssimo para ficar acima de tudo */
  background-color: #ffd700 !important; /* Gold */
  width: 46px;
  height: 46px;
  border-radius: 8px;
  display: flex !important; /* Força o flex para centralizar o ícone */
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  pointer-events: none; /* Desativa cliques enquanto invisível */
}

.scroll-top i {
  font-size: 24px;
  color: #1a1a1a !important; /* Slate Dark */
  line-height: 0;
}

/* Classe de Ativação */
.scroll-top.active {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important; /* Reativa cliques */
  transform: translateY(0);
}

/* Estado inicial (levemente abaixo para efeito de subida) */
.scroll-top:not(.active) {
  transform: translateY(20px);
}

.scroll-top:hover {
  background-color: #1a1a1a !important;
  transform: translateY(-5px) !important;
}

.scroll-top:hover i {
  color: #ffd700 !important;
}

/* ==========================================================================
   Sistema de Notificação (Toast/Notify) - Canto Inferior Direito
   ========================================================================== */

/* Container fixo que agrupa as notificações na tela */
#notify-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none; /* Permite clicar nos elementos atrás do container se estiver vazio */
}

/* Caixa do Toast individual */
.toast-notify {
    pointer-events: auto; /* Reativa os cliques para o botão de fechar, se houver */
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background-color: var(--bg-page);
    border: 1px solid var(--border);
    border-left: 4px solid var(--amarelo-gold); /* Destaque na esquerda com seu Amarelo Ouro */
    border-radius: 6px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    color: var(--text-main);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    min-width: 280px;
    max-width: 380px;
    
    /* Estado inicial para a animação */
    opacity: 0;
    transform: translateX(40px) scale(0.95);
    transition: var(--transition);
    animation: toastSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Variação sutil de sombra se o tema ativo for Dark */
[data-theme="dark"] .toast-notify {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
    background-color: #11151d; /* Tom levemente contrastante com o fundo puro do dark */
}

/* Classe aplicada via JS para remover o elemento com suavidade */
.toast-notify.hide {
    opacity: 0;
    transform: translateX(40px) scale(0.9);
    animation: toastSlideOut 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Ícone de sucesso dentro do toast */
.toast-icon {
    color: var(--amarelo-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ==========================================================================
   Animações de Entrada e Saída
   ========================================================================== */
@keyframes toastSlideIn {
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes toastSlideOut {
    from {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateX(40px) scale(0.9);
    }
}