/* Despacho Comunica — flash toasts (Mesa Azul) */

:root {
  --dc-z-flash: 50;
  --dc-flash-duration: 5s;
}

.flash-region {
  position: fixed;
  z-index: var(--dc-z-flash);
  inset-block-end: var(--dc-space-6);
  inset-inline-end: var(--dc-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-2);
  width: min(22.5rem, calc(100vw - 2rem));
  max-height: min(32rem, calc(100dvh - 5rem));
  overflow: auto;
  overscroll-behavior: contain;
}

.flash {
  position: relative;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--dc-space-3);
  overflow: hidden;
  padding: var(--dc-space-3) var(--dc-space-2) var(--dc-space-3) var(--dc-space-3);
  border: 1px solid var(--dc-border);
  border-inline-start: 3px solid var(--dc-brand);
  border-radius: var(--dc-radius);
  background: var(--dc-surface);
  box-shadow: var(--dc-shadow-md);
  color: var(--dc-text);
  font-size: var(--dc-fs-sm);
  animation: dc-flash-in 220ms var(--dc-ease) both;
  animation-delay: calc(var(--flash-i, 0) * 60ms);
}

.flash__icon {
  flex-shrink: 0;
  margin-block-start: 0.1rem;
  color: var(--dc-brand);
}

.flash.is-leaving {
  animation: dc-flash-out 160ms var(--dc-ease) forwards;
}

.flash > p {
  flex: 1;
  min-width: 0;
}

.flash .btn {
  flex-shrink: 0;
  width: 1.75rem;
  min-height: 1.75rem;
  background: transparent;
  border-color: transparent;
  color: var(--dc-text-muted);
}

.flash .btn:hover {
  background: var(--dc-surface-muted);
  border-color: transparent;
  color: var(--dc-text);
}

.flash-progress {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 2px;
  background: var(--dc-brand);
  opacity: 0.35;
  transform-origin: left center;
  animation: dc-flash-progress var(--dc-flash-duration) linear forwards;
}

.flash:hover .flash-progress,
.flash:focus-within .flash-progress {
  animation-play-state: paused;
}

.flash.is-leaving .flash-progress {
  animation-play-state: paused;
}

.flash--success {
  border-inline-start-color: var(--dc-success);
}

.flash--success .flash__icon {
  color: var(--dc-success);
}

.flash--success .flash-progress {
  background: var(--dc-success);
}

.flash--error,
.flash--danger {
  border-inline-start-color: var(--dc-danger);
}

.flash--error .flash__icon,
.flash--danger .flash__icon {
  color: var(--dc-danger);
}

.flash--warning,
.flash--alert {
  border-inline-start-color: var(--dc-warning);
}

.flash--warning .flash__icon,
.flash--alert .flash__icon {
  color: var(--dc-warning);
}

.flash--info,
.flash--message,
.flash--neutro {
  border-inline-start-color: var(--dc-brand);
}

@keyframes dc-flash-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes dc-flash-out {
  to {
    opacity: 0;
  }
}

@keyframes dc-flash-progress {
  from {
    transform: scaleX(1);
  }

  to {
    transform: scaleX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .flash,
  .flash.is-leaving {
    animation: none;
  }

  .flash-progress {
    animation-duration: var(--dc-flash-duration) !important;
  }
}

@media (max-width: 860px) {
  .flash-region {
    inset-inline: var(--dc-space-4);
    inset-block-end: calc(var(--dc-space-4) + env(safe-area-inset-bottom, 0px));
    width: auto;
    max-height: min(40dvh, calc(100dvh - 5rem));
  }
}