/* --- VARIÁVEIS DE CORES (Mude aqui para alterar todo o site) --- */
        :root {
            --bg-dark: #2b2b2b;       /* Fundo principal (mais escuro) */
            --bg-card: #373737;       /* Fundo dos painéis e blocos */
            --bg-card-hover: #4a4a4a; /* Fundo quando passa o rato */
            --bg-sidebar: #1a1a1a;    /* Fundo super escuro do menu lateral */
            --primary: #FBCA1A;       /* Amarelo Ouro (Sua cor principal) */
            --text-light: #ffffff;    /* Textos brancos e títulos */
            --text-muted: #aaaaaa;    /* Textos secundários (cinzentos) */
            --border-color: #555555;  /* Cor das linhas divisórias */
            --success: #5cb85c;       /* Verde (Sucesso) */
            --danger: #d9534f;        /* Vermelho (Erros/Alertas) */
            --info: #5bc0de;          /* Azul (Informações) */
        }

        /* --- RESET BÁSICO --- */
        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Montserrat', sans-serif; }
        
        /* O body usa flexbox para separar o menu lateral da área central */
        body { background-color: var(--bg-dark); color: var(--text-light); overflow: hidden; display: flex; height: 100vh; }

        /* Customização da Barra de Rolagem (Scrollbar) para ficar no modo escuro */
        ::-webkit-scrollbar { width: 8px; height: 8px; }
        ::-webkit-scrollbar-track { background: var(--bg-dark); }
        ::-webkit-scrollbar-thumb { background: #555; border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: var(--primary); }

        /* ==================================================================
           CÓDIGO DO MENU LATERAL (SIDEBAR) E SEUS COMPONENTES
           ================================================================== */
        /* A caixa do menu lateral em si */
        .sidebar { 
            width: 260px; 
            background-color: var(--bg-sidebar); 
            display: flex; 
            flex-direction: column; 
            border-right: 1px solid var(--border-color); 
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Animação suave de entrada/saída */
            z-index: 100; /* Fica acima do conteúdo */
        }
        
        /* Cabeçalho do menu: Espaço reservado para a sua Logomarca Vertical */
        .sidebar-header { 
            padding: 40px 20px 20px 20px; 
            text-align: center; 
            border-bottom: 1px solid var(--border-color); 
            display: flex; 
            justify-content: center; 
            align-items: center; 
            min-height: 160px; 
            background: linear-gradient(180deg, #111 0%, var(--bg-sidebar) 100%); 
        }
        .logo-vertical { 
            max-width: 100%; 
            max-height: 130px; 
            object-fit: contain; 
            filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5)); /* Sombra leve atrás da logo */
        }
        
        /* Área de links do menu (permite scroll interno se houver muitos links) */
        .sidebar-menu { flex: 1; overflow-y: auto; padding: 20px 0; }
        
        /* Estilo individual de cada botão do menu */
        .menu-item { 
            display: block; 
            padding: 15px 25px; 
            color: var(--text-muted); 
            text-decoration: none; 
            font-weight: 600; 
            font-size: 14px; 
            transition: 0.2s; 
            border-left: 4px solid transparent; /* Linha amarela invisível por padrão */
        }
        .menu-item i { width: 25px; font-size: 16px; margin-right: 10px; color: var(--text-muted); transition: 0.2s; }
        
        /* Quando o utilizador passa o rato ou quando a página está ativa */
        .menu-item:hover, .menu-item.active { 
            background-color: rgba(251, 202, 26, 0.05); /* Fundo amarelado suave */
            color: var(--text-light); 
            border-left: 4px solid var(--primary); /* Aparece a linha amarela */
        }
        .menu-item:hover i, .menu-item.active i { color: var(--primary); } /* O ícone fica amarelo */

        /* A película escura que aparece atrás do menu no telemóvel */
        .sidebar-overlay { 
            display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
            background: rgba(0,0,0,0.7); z-index: 90; backdrop-filter: blur(3px); 
            opacity: 0; transition: opacity 0.3s ease; /* Efeito de fade */
        }
        .sidebar-overlay.active { display: block; opacity: 1; }

        /* ==================================================================
           ÁREA PRINCIPAL (Tudo o que fica à direita do menu)
           ================================================================== */
        .main-wrapper { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; }

        /* BARRA SUPERIOR (TOPBAR) */
        .topbar { 
            height: 70px; min-height: 70px; background-color: var(--bg-card); 
            display: flex; justify-content: space-between; align-items: center; 
            padding: 0 30px; box-shadow: 0 2px 10px rgba(0,0,0,0.3); z-index: 10; 
        }
        .topbar-left { display: flex; align-items: center; gap: 20px; }
        
        /* BOTÃO HAMBÚRGUER (3 Tracinhos) E SUA ANIMAÇÃO */
        .menu-toggle { 
            font-size: 24px; cursor: pointer; color: var(--primary); 
            transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Efeito elástico na rotação */
            display: none; /* Escondido no PC, aparece no Mobile */
            width: 30px; text-align: center; 
        }
        /* Classe inserida via Javascript para rodar o botão 90 graus (horizontal para vertical) */
        .menu-toggle.open { transform: rotate(90deg) scale(1.1); color: var(--text-light); }
        
        .page-title { font-size: 18px; font-weight: 600; color: var(--text-light); }
        .topbar-right { display: flex; align-items: center; gap: 20px; }
        
        /* Perfil de Usuário no Topo Direito */
        .user-profile { display: flex; align-items: center; gap: 10px; cursor: pointer; transition: 0.2s; padding: 5px 10px; border-radius: 8px; }
        .user-profile:hover { background-color: rgba(255,255,255,0.05); }

        /* CONTEÚDO ROLÁVEL (Abaixo da Topbar) */
        .content { flex: 1; overflow-y: auto; padding: 30px; display: flex; flex-direction: column; }
        .content-inner { flex: 1; }

        /* ==================================================================
           COMPONENTES VISUAIS (Cards, Painéis, Tabelas, Alertas)
           ================================================================== */
        /* Cards de Estatísticas (Dashboard) */
        .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-bottom: 30px; }
        .stat-card { background: var(--bg-card); border-radius: 12px; padding: 20px; display: flex; align-items: center; box-shadow: 0 4px 6px rgba(0,0,0,0.2); border-left: 5px solid var(--primary); transition: 0.2s; }
        .stat-card:hover { transform: translateY(-3px); background: var(--bg-card-hover); }
        .stat-icon { font-size: 35px; color: var(--primary); margin-right: 15px; opacity: 0.8; }
        .stat-details h3 { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 5px; }
        .stat-details p { font-size: 26px; font-weight: 800; color: var(--text-light); line-height: 1; }

        /* Estrutura Padrão de Painel (Usado em formulários e tabelas) */
        .panel { background: var(--bg-card); border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); margin-bottom: 30px; border: 1px solid var(--border-color); overflow: hidden; }
        .panel-header { padding: 15px 20px; border-bottom: 1px solid var(--border-color); background-color: rgba(0,0,0,0.1); font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
        .panel-body { padding: 20px; }

        /* Alertas (Avisos Amarelos, Verdes, Azuis) */
        .alert { padding: 15px 20px; border-radius: 8px; margin-bottom: 20px; font-size: 14px; display: flex; align-items: center; gap: 12px; border-left: 4px solid; }
		.alert-info { background-color: rgba(91, 192, 222, 0.1); border-color: #5bc0de; color: #c4e3f3; }
		.alert-warning { background-color: rgba(251, 202, 26, 0.1); border-color: #fbca1a; color: #fcf8e3; }
		.alert-success { background-color: rgba(92, 184, 92, 0.1); border-color: #5cb85c; color: #d6e9c6; }
		.alert-brown { background-color: rgba(186, 139, 101, 0.1); border-color: #ba8b65; color: #e8d5c4; }
        .alert-danger { background-color: rgba(220, 53, 69, 0.1); border-color: #dc3545; color: #f8d7da; }

        /* Formulários (Inputs, Selects) */
        .form-row { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 15px; }
        .form-group { flex: 1; min-width: 200px; display: flex; flex-direction: column; }
        .form-group label { font-size: 13px; font-weight: 600; color: var(--text-muted); margin-bottom: 8px; letter-spacing: 0.5px; }
        .form-control { background-color: var(--bg-dark); border: 1px solid var(--border-color); color: var(--text-light); padding: 12px 15px; border-radius: 6px; font-size: 14px; transition: 0.3s; outline: none; width: 100%; }
        .form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(251, 202, 26, 0.1); }
        
        /* Radios e Checkboxes Customizados */
        .radio-group, .checkbox-group { display: flex; gap: 20px; margin-top: 10px; }
        .custom-control { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; color: var(--text-light); }
        .custom-control input[type=radio], .custom-control input[type=checkbox] { width: 18px; height: 18px; cursor: pointer; accent-color: var(--primary); }
        
        /* Componente DUAL LISTBOX (Transferência de Lojas) */
        .dual-listbox { display: flex; gap: 15px; align-items: stretch; margin-top: 10px; }
        .listbox-panel { flex: 1; display: flex; flex-direction: column; gap: 10px; background: var(--bg-dark); padding: 15px; border-radius: 8px; border: 1px solid var(--border-color); }
        .listbox-select { height: 250px; overflow-y: auto; padding: 5px; }
        .listbox-select option { padding: 8px 12px; margin-bottom: 2px; border-radius: 4px; cursor: pointer; transition: 0.2s; }
        .listbox-select option:hover { background-color: rgba(255,255,255,0.05); }
        .listbox-select option:checked { background-color: var(--primary); color: var(--bg-dark); font-weight: bold; }
        .listbox-controls { display: flex; flex-direction: column; justify-content: center; gap: 10px; }

        /* Botões */
        .btn { padding: 10px 20px; border-radius: 6px; font-weight: 600; font-size: 14px; cursor: pointer; border: none; transition: 0.2s; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
        .btn-primary { background-color: var(--primary); color: var(--bg-dark); }
        .btn-primary:hover { background-color: #e0b416; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(251, 202, 26, 0.3); }
        .btn-secondary { background-color: #555; color: white; }
        .btn-secondary:hover { background-color: #666; }
        .btn-outline { background-color: transparent; border: 1px solid var(--primary); color: var(--primary); }
        .btn-outline:hover { background-color: rgba(251, 202, 26, 0.1); }
        .btn-sm { padding: 6px 12px; font-size: 12px; }

        /* Tabelas de Dados (Grid) */
        .table-responsive { overflow-x: auto; }
        .table { width: 100%; border-collapse: collapse; text-align: left; }
        .table th { padding: 12px 15px; color: var(--primary); font-size: 12px; text-transform: uppercase; border-bottom: 2px solid var(--border-color); }
        .table td { padding: 12px 15px; border-bottom: 1px solid var(--border-color); font-size: 13px; color: var(--text-light); }
        .table tbody tr:hover { background-color: rgba(255,255,255,0.03); }
        
        /* Badges (Etiquetas de Status em tabelas) */
        .badge { padding: 5px 10px; border-radius: 20px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; }
        .badge-success { background-color: rgba(92, 184, 92, 0.2); color: var(--success); border: 1px solid var(--success); }
        .badge-warning { background-color: rgba(251, 202, 26, 0.2); color: var(--primary); border: 1px solid var(--primary); }
        .badge-danger { background-color: rgba(217, 83, 79, 0.2); color: var(--danger); border: 1px solid var(--danger); }

        /* Componente MODAL (Janela Suspensa) */
        .modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 2000; justify-content: center; align-items: center; padding: 20px; backdrop-filter: blur(3px); }
        .modal-overlay.active { display: flex; animation: fadeIn 0.3s; }
        .modal-box { background: var(--bg-card); width: 100%; max-width: 500px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); border: 1px solid var(--border-color); animation: slideDown 0.3s; overflow: hidden; }
        .modal-header { padding: 20px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; background: rgba(0,0,0,0.2); }
        .modal-header h3 { font-size: 18px; color: var(--primary); }
        .btn-close-modal { background: none; border: none; color: var(--text-muted); font-size: 20px; cursor: pointer; transition: 0.2s; }
        .btn-close-modal:hover { color: var(--danger); transform: scale(1.1); }
        .modal-body { padding: 20px; color: var(--text-light); line-height: 1.5; }
        .modal-footer { padding: 20px; border-top: 1px solid var(--border-color); display: flex; justify-content: flex-end; gap: 10px; background: rgba(0,0,0,0.1); }

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

        /* Rodapé (Footer) do Painel Administrativo */
        .admin-footer { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; color: var(--text-muted); font-size: 12px; }
        .admin-footer a { color: var(--primary); text-decoration: none; font-weight: 600; transition: 0.2s; }
        .admin-footer a:hover { text-decoration: underline; color: #fff; }

        /* ==================================================================
           MEDIA QUERIES (Responsividade para Telemóveis)
           ================================================================== */
        @media (max-width: 992px) {
            /* Esconde a sidebar fora da tela */
            .sidebar { position: fixed; left: 0; height: 100%; transform: translateX(-100%); }
            /* Classe 'active' puxa a sidebar de volta para a tela */
            .sidebar.active { transform: translateX(0); }
            /* Mostra o botão de hambúrguer */
            .menu-toggle { display: block; }
            /* Empilha formulários e painéis duplos */
            .form-row { flex-direction: column; gap: 10px; }
            .dual-listbox { flex-direction: column; }
            /* Alinha botões de transferência na horizontal */
            .listbox-controls { flex-direction: row; }
            /* Centraliza rodapé */
            .admin-footer { flex-direction: column; gap: 10px; text-align: center; }
        }


		.wrapper {
		    position: relative;
		    overflow: hidden;
		    width: 100%;
		    height: 70px; 
		    border: 0px solid black;
		
		}
		
		#slide {
		    position: absolute;
		    left: -100%;
		    width: 100%;
		    height: 70px;
		    -webkit-animation: slide 0.7s forwards;
		    -webkit-animation-delay: 2s;
		    animation: slide 1.9s forwards;
		    animation-delay: 0s;
		
		  /*  opacity: 0.3; */
		}
		
		@-webkit-keyframes slide {
		    100% { left: 0; }
		}
		
		@keyframes slide {
		    100% { left: 0; }
		}