/* flash.css — Banners efímeros: pancartas inclinadas de tinta. Tono amable. */

.flash-stack {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.flash {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  border-radius: var(--radius-sm);
  transform: skewX(calc(var(--skew) / 2));
  box-shadow: var(--shadow-ink-sm);
  animation: flash-in 300ms var(--ease-snap);
}
.flash-icon {
  font-size: 1.1rem;
}

.flash-success {
  background: var(--brand);
  color: #fff;
}
.flash-info {
  background: var(--ink);
  color: var(--paper);
  border-left: 6px solid var(--cyan);
}
.flash-warn {
  background: var(--yellow);
  color: #131316;
}

@keyframes flash-in {
  from {
    opacity: 0;
    transform: skewX(calc(var(--skew) / 2)) translateX(-24px);
  }
  to {
    opacity: 1;
    transform: skewX(calc(var(--skew) / 2)) translateX(0);
  }
}