/* ========================================================================== */
/* RESET BÁSICO E CORES GERAIS                                                */
/* ========================================================================== */

/* Aplica o box-sizing border-box universalmente, remove margens e preenchimentos padrão, e define a tipografia padrão */
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; }

/* Estilização base do corpo da página (Background escuro, cor de texto clara e controle de overflow horizontal) */
body {
    background-color: #050505;
    color: #f8fafc;
    position: relative;
    overflow-x: hidden;
}

/* ========================================================================== */
/* FUNDO ANIMADO GLOBAL (Overlay com Imagem e Animação de Zoom/Pan)          */
/* ========================================================================== */
.bg-overlay {
    position: fixed;
    inset: -20px;
    background-image: linear-gradient(to bottom, rgba(5, 5, 5, 0.70), rgba(5, 5, 5, 0.82)), 
                      url('https://images.unsplash.com/photo-1524661135-423995f22d0b?q=80&w=1920&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    z-index: -1;
    animation: panMapBackground 35s linear infinite alternate;
}

/* Animação suave de movimento e zoom lento no fundo da tela */
@keyframes panMapBackground {
    0% { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.08) translate(-25px, -15px); }
}

/* ========================================================================== */
/* SISTEMA DE BOTÕES GLOBAIS                                                   */
/* ========================================================================== */

/* Reset base para elementos de botão */
button { border: none; cursor: pointer; font-family: inherit; }

/* Classe base para estilização de botões interativos com transições suaves e sombras */
.btn { 
    border-radius: 8px; border: none; font-weight: 700; cursor: pointer; 
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; 
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 2px 8px rgba(0,0,0,0.2); 
}

/* Efeito de hover (elevação e brilho) para botões ativos */
.btn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.1); box-shadow: 0 4px 12px rgba(0,0,0,0.35); }

/* Efeito de clique do botão (retorna à posição original) */
.btn:active { transform: translateY(0); }

/* Estado desativado de botões (opacidade reduzida e escala de cinza) */
.btn:disabled { opacity: 0.35; cursor: not-allowed; filter: grayscale(1); }

/* Variações de Cores e Estilos dos Botões */
.btn-success { background: linear-gradient(135deg, #059669, #10b981); color: #fff; }
.btn-danger { background: linear-gradient(135deg, #dc2626, #ef4444); color: #fff; }
.btn-primary { background: linear-gradient(135deg, #1d4ed8, #2563eb); color: #fff; }
.btn-warning { background: linear-gradient(135deg, #d97706, #f59e0b); color: #fff; }
.btn-secondary { background: rgba(255, 255, 255, 0.06); color: #e2e8f0; border: 1px solid rgba(255, 255, 255, 0.1); }
.btn-secondary:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }

/* ========================================================================== */
/* RODAPÉ GLOBAL                                                              */
/* ========================================================================== */
.site-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    padding: 16px 20px;
    font-size: 11.5px;
    color: #64748b;
    z-index: 10;
    letter-spacing: 0.5px;
}

/* ========================================================================== */
/* SISTEMA DE NOTIFICAÇÕES (TOASTS) GLOBAIS                                  */
/* ========================================================================== */

/* Container flutuante para empilhamento de mensagens toast no canto inferior direito */
.toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 999999999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }

/* Estilização visual individual de cada Toast (Card de aviso com efeito de desfoque de fundo) */
.toast { background: rgba(18, 18, 22, 0.95); border-left: 4px solid #3b82f6; color: #f8fafc; padding: 14px 20px; border-radius: 8px; font-size: 11.5px; font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,0.6); backdrop-filter: blur(10px); border-top: 1px solid rgba(255,255,255,0.08); border-right: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.08); animation: slideInToast 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; max-width: 350px; line-height: 1.4; pointer-events: auto; }

/* Variações de borda lateral baseadas no tipo de toast */
.toast.success { border-left-color: #10b981; }
.toast.error { border-left-color: #ef4444; }
.toast.warning { border-left-color: #f59e0b; }
.toast.fade-out { animation: fadeOutToast 0.3s ease forwards; }

/* Animações de entrada e saída dos toasts */
@keyframes slideInToast { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } }
@keyframes fadeOutToast { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(100%); } }

/* ========================================================================== */
/* RESPONSIVIDADE PARA TELAS MENORES (MOBILE)                                */
/* ========================================================================== */
@media (max-width: 820px) { 
    .toast-container { bottom: 16px; right: 16px; left: 16px; } 
    .toast { max-width: 100%; } 
}