:root {
    --toast-glass-bg: rgba(8, 8, 12, 0.85);
    --toast-glass-border: rgba(239, 211, 108, 0.4);
    --toast-glass-hover: rgba(239, 211, 108, 0.25);
    --toast-shadow: 0 25px 48px rgba(0, 0, 0, 0.55);
    --toast-text: #f4f5f7;
    --toast-muted: rgba(244, 245, 247, 0.65);
    --toast-accent: #efd36c;
    --toast-success: #7ee9b2;
    --toast-danger: #ff6b6b; /* Color rojo para los toasts de error */
    --toast-warn: #f5c16c; /* Color amarillo para los toasts de advertencia */
}

.toast-container {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    z-index: 1050 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 10px !important;
}

.toast {
    min-width: 240px !important;
    margin-bottom: 12px !important;
    background: var(--toast-glass-bg) !important; /* Fondo oscuro con transparencia */
    backdrop-filter: blur(16px) !important; /* Efecto de desenfoque */
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid var(--toast-glass-border) !important; /* Borde brillante */
    border-radius: 16px !important; /* Bordes redondeados */
    box-shadow: var(--toast-shadow) !important; /* Sombra sutil */
    transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out !important;
    transform: translateY(-100%) !important;
    opacity: 0 !important;
    font-family: 'Roboto', sans-serif !important; /* Fuente moderna */
    letter-spacing: 1px;
    color: var(--toast-text) !important; /* Color de fuente */
    font-weight: bold !important; /* Negrita */
    white-space: nowrap; /* Impide que el texto se divida en varias líneas */
    width: auto !important; /* El ancho se adapta automáticamente al contenido */
    max-width: 100%; /* No permite que se desborde */
}

.toast.show {
    transform: translateY(0) !important;
    opacity: 1 !important;
}

.toast.wobble {
    animation: wobble 0.5s ease-in-out !important;
}

.toast.fade-out {
    opacity: 0 !important;
    transition: opacity 1s ease-out !important;
}

.toast .toast-body {
    padding: 12px !important;
    font-size: 16px !important;
    color: var(--toast-text) !important; /* Texto del toast en color claro */
}

.toast .btn-close {
    filter: invert(1) !important;
}

.toast.bg-success {
    background: var(--toast-glass-bg) !important; /* Fondo oscuro */
    border-color: var(--toast-success) !important; /* Borde verde */
    color: var(--toast-success) !important; /* Texto verde */
}

.toast.bg-info {
    background: var(--toast-glass-bg) !important; /* Fondo oscuro */
    border-color: var(--toast-accent) !important; /* Borde dorado */
    color: var(--toast-accent) !important;
}

.toast.bg-danger {
    background: var(--toast-glass-bg) !important; /* Fondo oscuro */
    border-color: var(--toast-danger) !important; /* Borde rojo */
    color: var(--toast-danger) !important; /* Texto rojo */
}

.toast.bg-warning {
    background: var(--toast-glass-bg) !important; /* Fondo oscuro */
    border-color: var(--toast-warn) !important; /* Borde amarillo */
    color: var(--toast-warn) !important; /* Texto amarillo */
}

.toast:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important; /* Sombra al pasar el mouse */
    border-color: var(--toast-glass-hover) !important; /* Borde más brillante en hover */
    cursor: pointer !important;
}

@keyframes wobble {
    0%, 100% { transform: translateX(0) !important; }
    25% { transform: translateX(-3px) !important; }
    75% { transform: translateX(3px) !important; }
}
