.toast-header img {
    width: 30px;
    height: 30px;
    object-fit: cover;
}

#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1051;
    /* Asegura que el toast esté por encima del modal */
    padding: 1rem;
}

/* Aseguramos que el fondo del toast no esté opacado */
.toast {
    background-color: transparent !important;
}

.toast.bg-success {
    background-color: #28a745 !important;
}

.toast.bg-danger {
    background-color: #dc3545 !important;
}

.toast.bg-warning {
    background-color: #ffc107 !important;
}

/* Evitar que el backdrop del modal tape los toasts */
.modal-backdrop {
    z-index: 1040 !important;
}

/* Asegurar que los toasts estén por encima del modal */
#toast-container {
    z-index: 1200;
    /* Bootstrap modal usa hasta 1055 */
}

@media (max-width: 768px) {
    #toast-container {
        top: auto !important;
        bottom: 2rem;
        left: 1rem;
        right: auto;
        transform: none;
        width: 100%;
        max-width: 90vw;
        padding-bottom: env(safe-area-inset-bottom, 1rem);
    }

    #toast-container .toast {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    } }