.flash {
  display: flex;
  inset-block-start: var(--block-space);
  inset-inline-start: 50%;
  justify-content: center;
  position: fixed;
  transform: translate(-50%);
  z-index: 6;
}

.flash__inner {
  animation: appear-then-fade 3s 300ms both;
  aspect-ratio: 1;
  background-color: var(--flash-background, var(--color-positive));
  border-radius: 50%;
  display: grid;
  padding: var(--block-space);
  place-items: center;

  img {
    grid-area: 1/1;
  }

  /* El reset global corta toda animacion a 0.01ms bajo reduced-motion. Aqui
     eso no atenua nada: appear-then-fade arranca en opacidad 0 y termina en
     0, con fill both y 300ms de retardo, asi que el aviso se quedaba
     invisible durante el retardo y moria ahi. Quien pidio menos movimiento
     se quedaba sin ninguna confirmacion, ni de exito ni de error.
     Devolverle la duracion es legitimo porque esto es un fundido de opacidad,
     no un desplazamiento. El animationend que lo retira sigue intacto. */
  @media (prefers-reduced-motion: reduce) {
    animation-duration: 3s !important;
    animation-iteration-count: 1 !important;
  }
}