/*.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: 9999;
    color: #fff;
}

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

.toast.success {
    background: #4CAF50;
}

.toast.error {
    background: #F44336;
}

.toast.warning {
    background: #FF9800;
}

.toast i {
    margin-right: 8px;
}
*/

.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: 9999;
    color: #fff;
    max-width: 90%;
    /* evita que ocupe toda a tela no mobile */
    text-align: center;
    /* centraliza o texto */
    /* --- CONFIGURAÇÕES DE LARGURA CORRIGIDAS --- */
    width: max-content;
    /* Força o balão a se ajustar ao tamanho exato do texto */
    max-width: 95vw;
    /* Impede que o balão saia da tela do celular (95% da largura da tela) */
    white-space: nowrap;
    /* 🔥 O SEGREDO: Impede a quebra de linha automática do texto */

    display: flex;
    /* Alinha o ícone e o texto perfeitamente na mesma linha */
    align-items: center;
    justify-content: center;
}



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

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

.toast.error {
    background: #F44336;

}

.toast.warning {
    background: #FF9800;
}

.toast i {
    margin-right: 8px;
}




/* --- AJUSTE EXCLUSIVO PARA TELAS DE CELULARES (MOBILE) --- */
@media (max-width: 480px) {
    .toast {
        font-size: 13px;
        /* Reduz ligeiramente a fonte para caber em telas muito estreitas */
        padding: 10px 16px;
        top: 15px;
        white-space: normal;
        /* Permite quebra APENAS se a mensagem for gigantesca e passar de 95% da tela */
        word-break: keep-all;
        /* Impede que palavras sejam cortadas ao meio (ex: "suce-sso") */
    }

    .toast i {
        margin-right: 6px;
        /* Aproxima o ícone do texto no mobile */
    }
}


/* Estilos CSS das animações de movimento */

@keyframes caminharVaca {
    0% {
        transform: translateX(-20px) rotate(0deg);
    }

    25% {
        transform: translateX(-10px) rotate(-3deg);
        /* Inclina para frente simulando o passo */
    }

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

    75% {
        transform: translateX(10px) rotate(3deg);
        /* Inclina para trás simulando o passo */
    }

    100% {
        transform: translateX(-20px) rotate(0deg);
        /* Retorna em loop */
    }
}