/* Importando uma fonte do Google Fonts para um visual mais profissional */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');

/* Reset básico para garantir consistência entre navegadores */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

body {
    /* Cor de fundo escura, compartilhada por todo o site */
    background-color: #121417; 
    color: #f0f0f0; /* Cor do texto padrão */
}

/* Estilo para o rodapé, que também será usado em várias páginas */
footer {
    position: fixed;
    bottom: 10px;
    width: 100%;
    text-align: center;
    color: #555;
    font-size: 12px;
}

/* ... (todos os seus estilos globais anteriores) ... */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');
*{margin:0;padding:0;box-sizing:border-box;font-family:'Inter',sans-serif}body{background-color:#121417;color:#f0f0f0}footer{position:fixed;bottom:10px;width:100%;text-align:center;color:#555;font-size:12px}

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

.notification-container {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 2000; /* Garante que fique acima de tudo */
    display: flex;
    flex-direction: column;
    gap: 10px; /* Espaço entre múltiplas notificações */
}

.toast {
    padding: 15px 20px;
    border-radius: 6px;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border-left: 5px solid #fff;
    animation: slideIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Animação de entrada */
@keyframes slideIn {
    from {
        transform: translateX(-120%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Animação de saída */
.toast.fade-out {
    animation: slideOut 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
}

@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(-120%);
        opacity: 0;
    }
}


/* Estilos para cada tipo de notificação */
.toast--success {
    background-color: #273e26;
    border-left-color: #4CAF50; /* Verde */
}

.toast--error {
    background-color: #4d2525;
    border-left-color: #f44336; /* Vermelho */
}

.toast--info {
    background-color: #2f3741;
    border-left-color: #2196F3; /* Azul */
}

/* ... (todo o CSS anterior) ... */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');
*{margin:0;padding:0;box-sizing:border-box;font-family:'Inter',sans-serif}body{background-color:#121417;color:#f0f0f0}footer{position:fixed;bottom:10px;width:100%;text-align:center;color:#555;font-size:12px;padding:0 15px}

/* Estilos de Notificações */
.notification-container{position:fixed;bottom:20px;left:20px;z-index:2000;display:flex;flex-direction:column;gap:10px}.toast{padding:15px 20px;border-radius:6px;color:#fff;font-size:15px;font-weight:500;box-shadow:0 4px 12px rgba(0,0,0,.3);border-left:5px solid #fff;animation:slideIn .5s cubic-bezier(.25,.46,.45,.94) forwards}@keyframes slideIn{from{transform:translateX(-120%);opacity:0}to{transform:translateX(0);opacity:1}}.toast.fade-out{animation:slideOut .5s cubic-bezier(.55,.085,.68,.53) forwards}@keyframes slideOut{from{transform:translateX(0);opacity:1}to{transform:translateX(-120%);opacity:0}}.toast--success{background-color:#273e26;border-left-color:#4CAF50}.toast--error{background-color:#4d2525;border-left-color:#f44336}.toast--info{background-color:#2f3741;border-left-color:#2196F3}

/* ================================================= */
/* NOVO: AJUSTES RESPONSIVOS GLOBAIS        */
/* ================================================= */
@media (max-width: 768px) {
    footer {
        font-size: 10px;
    }

    .notification-container {
        left: 10px;
        right: 10px;
        bottom: 10px;
        align-items: center;
    }

    .toast {
        width: 100%;
        max-width: 400px;
    }
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');

/* Reset básico para garantir consistência entre navegadores */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

body {
    background-color: #121417; 
    color: #f0f0f0;
}

footer {
    position: fixed;
    bottom: 10px;
    width: 100%;
    text-align: center;
    color: #555;
    font-size: 12px;
    padding: 0 15px; /* Adicionado para evitar que o texto encoste nas bordas */
}

/* Sistema de Notificações (Toasts) */
.notification-container {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    padding: 15px 20px;
    border-radius: 6px;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border-left: 5px solid #fff;
    animation: slideIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes slideIn {
    from { transform: translateX(-120%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.toast.fade-out {
    animation: slideOut 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
}

@keyframes slideOut {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(-120%); opacity: 0; }
}

.toast--success {
    background-color: #273e26;
    border-left-color: #4CAF50;
}

.toast--error {
    background-color: #4d2525;
    border-left-color: #f44336;
}

.toast--info {
    background-color: #2f3741;
    border-left-color: #2196F3;
}

/* AJUSTES RESPONSIVOS GLOBAIS */
@media (max-width: 768px) {
    footer {
        font-size: 10px;
    }

    .notification-container {
        left: 10px;
        right: 10px;
        bottom: 10px;
        align-items: center;
    }

    .toast {
        width: 100%;
        max-width: 400px;
    }
}