/* style.css */
:root {
    --primary-blue: #0A3D62;
    --accent-blue: #2980B9;
    --light-bg: #F7F9FC;
    --text-primary: #1A202C;
    --text-secondary: #5A6A7B;
    --border-color: #E2E8F0;
    --danger-red: #E53E3E;
    --danger-red-light: #FFF5F5;
}

html, body {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

body { 
    font-family: 'Inter', sans-serif; 
    background-color: var(--light-bg); 
}

.logo-img { 
    object-fit: contain; 
    /* CORREÇÃO CLS: Adiciona aspecto 1:1 para evitar deslocamento de layout
       quando as imagens carregam */
    aspect-ratio: 1 / 1; 
}

.loader {
    width: 48px; 
    height: 48px; 
    border: 5px solid #d1d5db;
    border-bottom-color: var(--primary-blue); 
    border-radius: 50%;
    display: inline-block; 
    animation: rotation 1s linear infinite;
}

.btn-spinner {
    width: 20px; 
    height: 20px; 
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-bottom-color: white; 
    border-radius: 50%;
    display: inline-block; 
    animation: rotation 1s linear infinite;
}

@keyframes rotation { 
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(360deg); } 
}

.nav-item.active {
    color: var(--primary-blue);
    background-color: #EFF6FF;
    font-weight: 600;
}

.bottom-nav-item.active svg, .bottom-nav-item.active span {
    color: var(--primary-blue);
}

/* --- TEMA DE NATAL --- */

/* 1. Neve Caindo (CSS Puro - Leve e Moderno) */
.snow-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    display: none; /* Escondido por padrão */
    overflow: hidden;
}

.theme-christmas .snow-container {
    display: block;
}

.snowflake {
    position: absolute;
    top: -10px;
    background: white;
    border-radius: 50%;
    opacity: 0.8;
    animation: fall linear infinite;
}

@keyframes fall {
    to { transform: translateY(105vh); }
}

/* 2. Decoração de Topo (Guirlanda Minimalista/Luzes) */
body.theme-christmas header {
    position: relative;
    border-bottom: 3px solid #C0392B !important; /* Vermelho Natalino Elegante */
}

body.theme-christmas header::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 100%;
    height: 6px;
    background: repeating-linear-gradient(
        45deg,
        #C0392B,
        #C0392B 10px,
        #FFFFFF 10px,
        #FFFFFF 20px,
        #27AE60 20px,
        #27AE60 30px,
        #FFFFFF 30px,
        #FFFFFF 40px
    );
    z-index: 50;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* 3. Chapéu de Papai Noel na Logo (Overlay via CSS) */
body.theme-christmas .logo-img {
    position: relative;
    z-index: 20;
}

/* Criamos um pseudo-elemento no container da logo, não na imagem img diretamente (img não suporta after) 
   Mas como as logos estão soltas, vamos adicionar uma classe wrapper via JS ou usar um truque de background */

/* 4. Bolinhas Penduradas (CSS Puro + SVG no Background) */
body.theme-christmas::before {
    content: '';
    position: fixed;
    top: 0;
    right: 20px;
    width: 150px;
    height: 150px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cline x1='50' y1='0' x2='50' y2='30' stroke='%23ccc' stroke-width='1'/%3E%3Ccircle cx='50' cy='45' r='15' fill='%23C0392B' /%3E%3Ccircle cx='50' cy='45' r='12' fill='none' stroke='%23E74C3C' stroke-width='1' opacity='0.5'/%3E%3C/svg%3E"),
                      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cline x1='50' y1='0' x2='50' y2='50' stroke='%23ccc' stroke-width='1'/%3E%3Ccircle cx='50' cy='65' r='15' fill='%23F1C40F' /%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right top, right 40px top;
    z-index: 60;
    pointer-events: none;
    animation: swing 3s infinite ease-in-out alternate;
}

@keyframes swing {
    0% { transform: rotate(2deg); transform-origin: top center; }
    100% { transform: rotate(-2deg); transform-origin: top center; }
}

/* 5. Árvore de Natal Sutil no Canto Inferior (Marca d'água) */
body.theme-christmas::after {
    content: '';
    position: fixed;
    bottom: -20px;
    left: -20px;
    width: 200px;
    height: 200px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2327AE60' opacity='0.15'%3E%3Cpath d='M12 2L2 22h20L12 2zm0 4.8l6.4 12.8H5.6L12 6.8z'/%3E%3C/svg%3E"); 
    /* Árvore minimalista */
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 0;
    pointer-events: none;
}

/* Ajuste para Botões no Tema de Natal */
body.theme-christmas .btn-primary, 
body.theme-christmas .nav-item.active {
    /* Mantém o azul, mas adiciona um brilho festivo */
    box-shadow: 0 0 10px rgba(41, 128, 185, 0.4), 0 0 2px #fff inset;
}

/* --- TEMA DE NATAL MODERNO --- */

/* Container da Neve */
.snow-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    display: none;
    overflow: hidden;
}

.theme-christmas .snow-container {
    display: block;
}

.snowflake {
    position: absolute;
    top: -10px;
    background: white;
    border-radius: 50%;
    opacity: 0.6;
    box-shadow: 0 0 5px rgba(255,255,255,0.8); /* Brilho suave */
    animation: fall linear infinite;
}

@keyframes fall {
    to { transform: translateY(105vh); }
}

/* Header Festivo (Borda Vermelha + Luzes Sutis) */
body.theme-christmas header {
    border-bottom: 3px solid #D42E2E !important; 
    box-shadow: 0 10px 20px -10px rgba(212, 46, 46, 0.3) !important;
}

/* Bolinhas de Natal Penduradas (SVG via CSS - Sem sujeira no HTML) */
body.theme-christmas::before {
    content: '';
    position: fixed;
    top: 0;
    right: 30px; /* Ajuste conforme necessário para não cobrir o menu */
    width: 120px;
    height: 150px;
    pointer-events: none;
    z-index: 60;
    background-repeat: no-repeat;
    /* Duas bolinhas penduradas minimalistas */
    background-image: 
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 150'%3E%3Cline x1='25' y1='0' x2='25' y2='80' stroke='%23ccc' stroke-width='1'/%3E%3Ccircle cx='25' cy='95' r='12' fill='%23D42E2E'/%3E%3Ccircle cx='25' cy='95' r='10' fill='none' stroke='%23ffffff' stroke-width='1' opacity='0.3'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 150'%3E%3Cline x1='25' y1='0' x2='25' y2='50' stroke='%23ccc' stroke-width='1'/%3E%3Ccircle cx='25' cy='65' r='12' fill='%23F1C40F'/%3E%3Ccircle cx='25' cy='65' r='10' fill='none' stroke='%23ffffff' stroke-width='1' opacity='0.3'/%3E%3C/svg%3E");
    background-position: right top, right 40px top;
    animation: swingOrnament 3s infinite ease-in-out alternate;
}

@keyframes swingOrnament {
    0% { transform: rotate(2deg); transform-origin: top center; }
    100% { transform: rotate(-2deg); transform-origin: top center; }
}

/* Árvore Minimalista (Marca d'água no canto) */
body.theme-christmas::after {
    content: '';
    position: fixed;
    bottom: -10px;
    left: -20px;
    width: 250px; /* Mantive o tamanho grande para a marca d'água */
    height: 250px;
    /* NOVO SVG da Árvore de Natal: Limpo, com Estrela e Tronco */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3C!-- Estrela no Topo --%3E%3Cpath fill='%23F1C40F' d='M12 2.6l1.8 3.7 4 .6-2.9 2.8.7 4L12 12l-3.5 1.8.7-4-2.9-2.8 4-.6z'/%3E%3C!-- Galhos (3 Camadas) --%3E%3Cpath fill='%2327AE60' d='M12 6.5l-4 4h8l-4-4z'/%3E%3Cpath fill='%2327AE60' d='M12 9.5l-6 6h12l-6-6z'/%3E%3Cpath fill='%2327AE60' d='M12 14.5l-8 4h16l-8-4z'/%3E%3C!-- Tronco --%3E%3Crect x='11' y='19' width='2' height='3.5' fill='%23964B00'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 0;
    opacity: 0.08; /* Opacidade bem baixa para manter o toque de marca d'água */
    pointer-events: none;
}

/* Botões com toque festivo sutil */
body.theme-christmas .btn-primary,
body.theme-christmas button.bg-\[var\(--primary-blue\)\] {
    box-shadow: 0 0 15px rgba(212, 46, 46, 0.4); 
    border: 1px solid rgba(255,255,255,0.2);
}

/* 1. Regra para TODAS as logos de Natal */
.theme-christmas [data-theme-target^="logo-horizontal"] {
    /* MANTÉM: Garante um tamanho MÍNIMO para a logo aparecer (Evita que o elemento colapse) */
    min-height: 64px !important; 
    min-width: 64px !important; 
    
    /* MANTÉM: Propriedades de Fundo */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: relative; 

    /* Oculta a imagem do 'src' da tag <img> para revelar o background.
       O 'display: block' é importante para que min-height/min-width funcione.
    */
    content: url('data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==') !important; /* PNG 1x1 transparente */
    display: block !important;
}

/* 2. Logo Horizontal (Para Side Menu Desktop Admin/Guard) */
.theme-christmas [data-theme-target="logo-horizontal"] {
    /* URL da nova logo de Natal Horizontal */
    background-image: url("https://i.postimg.cc/8cKwsZjb/1.png") !important;
    /* Reduz o min-height e aumenta o min-width para o logo horizontal */
    min-height: 60px !important;
    min-width: 150px !important; 
}