/* css/avisos.css | Avisos flotantes abajo (verde = ok, rojo = error). Se usa desde js/ecommerce.js: cjAviso() */
/* ---------- Aviso flotante (se ve aunque estes abajo de todo) ---------- */
#avisos {
  position: fixed; z-index: 2000; left: 12px; right: 12px; bottom: 12px;
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
@media (min-width: 768px) { #avisos { left: auto; right: 20px; bottom: 20px; width: 360px; } }
.aviso {
  pointer-events: auto; padding: 12px 16px; border-radius: 12px; color: #fff;
  box-shadow: 0 12px 28px #10294b33; white-space: pre-line; animation: avisoEntra .25s ease;
}
.aviso.ok { background: #198754; }
.aviso.error { background: #dc3545; }
@keyframes avisoEntra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
#cart-count.pulso { animation: pulso .4s ease; }
@keyframes pulso { 50% { transform: scale(1.5); } }
@media (prefers-reduced-motion: reduce) { .aviso, #cart-count.pulso { animation: none; } }