.toastContainer { position: fixed; bottom: var(--space-6); right: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); z-index: 9999; pointer-events: none; /* Deixa cliques passarem pelo container vazio */ } .toast { pointer-events: auto; /* Reativa cliques dentro do toast */ min-width: 300px; background: var(--color-surface); color: var(--color-text-primary); border: 1px solid var(--color-border); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); font-size: var(--text-sm); font-weight: 500; backdrop-filter: blur(8px); animation: slideIn var(--transition-normal) ease forwards; } @keyframes slideIn { from { opacity: 0; transform: translateX(100%) scale(0.95); } to { opacity: 1; transform: translateX(0) scale(1); } } .info { border-left: 4px solid var(--color-accent); } .success { border-left: 4px solid var(--color-priority-low); } .error { border-left: 4px solid var(--color-priority-critical); } .closeBtn { background: none; border: none; color: var(--color-text-muted); font-size: var(--text-lg); cursor: pointer; padding: 0; line-height: 1; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: var(--radius-sm); transition: background var(--transition-fast), color var(--transition-fast); } .closeBtn:hover { background: var(--color-bg); color: var(--color-text-primary); }