.toast {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    padding: 12px 20px;
    border-radius: 6px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: all 0.5s ease;
    font-weight: bold;
    z-index: 99999;
    /* Aumentado para garantir prioridade total */
    color: #fff;
    text-align: center;

    /* --- AJUSTES DE FLUXO --- */
    display: flex;
    /* Alinha o ícone e o texto na mesma linha */
    align-items: center;
    /* Centraliza verticalmente o ícone com o texto */
    justify-content: center;
    gap: 10px;
    /* 🔥 O SEGREDO: Cria o espaço perfeito e fixo entre o ícone e o texto */

    width: max-content;
    /* Ajusta a largura exata ao conteúdo combinado */
    max-width: 90vw;
    /* Impede que o balão saia da tela do celular */
}

.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Tipos de Alerta */
.toast.success {
    background: #4CAF50;
}

.toast.error {
    background: #F44336;
}

.toast.warning {
    background: #FF9800;
}

/* Remove a margem antiga do ícone, já que agora usamos o 'gap' no elemento pai */
.toast i {
    margin-right: 0;
    font-size: 1.1em;
    /* Destaca ligeiramente o ícone */
}

/* --- AJUSTE EXCLUSIVO PARA TELAS DE CELULARES (MOBILE) --- */
@media (max-width: 480px) {
    .toast {
        font-size: 13px;
        padding: 10px 16px;
        top: 15px;
        flex-wrap: nowrap;
        /* Garante que o ícone e o texto fiquem juntos no mobile */
    }
}

/* Estilos CSS das animações de movimento */
@keyframes caminharVaca {
    0% {
        transform: translateX(-20px) rotate(0deg);
    }

    25% {
        transform: translateX(-10px) rotate(-3deg);
    }

    50% {
        transform: translateX(0px) rotate(0deg);
    }

    75% {
        transform: translateX(10px) rotate(3deg);
    }

    100% {
        transform: translateX(-20px) rotate(0deg);
    }
}