/* =============================================
    SKIN: TEMA GESTÃO, NEGÓCIOS E FINANÇAS
    Este arquivo SÓ define as cores e imagens.
============================================= */

body.page-management {
    /* -- 1. Variáveis do Esqueleto (com cores da paleta Gestão) -- */
    --theme-body-bg: #f8f8f8; /* Fundo claro */
    --theme-text-light: #333333; /* Texto escuro para fundo claro */
    --theme-text-muted: #666666; /* Texto cinza suave */
    --theme-bg-dark: #f0f0f0; /* Fundo levemente cinza */

    --theme-primary: #8a2be2;    /* Roxo principal (Blue Violet) */
    --theme-secondary: #ff8c00;  /* Laranja secundário (Dark Orange) */
    
    --theme-header-image: url('/img/8.jpg'); /* **COLOQUE A URL DA SUA IMAGEM AQUI** */
    --theme-header-position: left center;
    --theme-header-border: 2px solid;
    --theme-header-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);

    /* Gradiente para o título */
    --theme-title-gradient: linear-gradient(to right, var(--theme-primary), var(--theme-secondary));
    
    --theme-card-bg: #ffffff; /* Fundo do card branco */
    --theme-card-border: rgba(0, 0, 0, 0.1); /* Borda sutil */
    --theme-card-icon-bg: #f5f5f5; /* Fundo do ícone levemente cinza */
    --theme-card-hover-shadow: 0 10px 25px rgba(138, 43, 226, 0.2); /* Sombra roxa no hover */
    
    --theme-icon-shadow: 0 0 15px rgba(138, 43, 226, 0.3); /* Brilho roxo */
    
    --theme-button-text: var(--theme-primary);
    --theme-button-border: 2px solid var(--theme-primary);
    --theme-button-bg: transparent;
    --theme-button-hover-bg: var(--theme-primary); /* Fundo sólido roxo no hover */
    --theme-button-hover-text: #ffffff; /* Texto branco no botão roxo */
    --theme-button-hover-shadow: 0 0 15px rgba(138, 43, 226, 0.4);
    
    --theme-mobile-arrow-color: var(--theme-primary) !important; /* Seta roxa no mobile */
}

/* --- 2. Sobrescritas Específicas do Tema --- */

/* Borda do Header (gradiente roxo/laranja) */
.page-management header.hero-catalog {
    border-image-slice: 1;
    border-image-source: linear-gradient(to right, var(--theme-primary), var(--theme-secondary));
}

/* Título com gradiente e borda */
.page-management .category-title {
    background: var(--theme-title-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    border-image-source: linear-gradient(to right, var(--theme-primary), var(--theme-secondary)) !important;
    border-image-slice: 1 !important;
    border-bottom: var(--theme-header-border) !important;
}

/* Efeito de "partículas" e "névoa" para complementar */
body.page-management::before {
    content: '';
    position: fixed;
    top: 5%; left: 5%;
    width: 200px; height: 200px;
    background: radial-gradient(circle, var(--theme-primary) 0%, transparent 60%);
    opacity: 0.08;
    z-index: -1;
    pointer-events: none;
    animation: pulse 4s infinite alternate;
}
body.page-management::after {
    content: '';
    position: fixed;
    bottom: 10%; right: 10%;
    width: 300px; height: 300px;
    background: radial-gradient(circle, var(--theme-secondary) 0%, transparent 60%);
    opacity: 0.08;
    z-index: -1;
    pointer-events: none;
    animation: pulse 5s infinite alternate reverse;
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 0.08; }
    100% { transform: scale(1.1); opacity: 0.15; }
}