diff --git a/_includes/floating_alert.html b/_includes/floating_alert.html
index 87a5ed9..5a5043c 100644
--- a/_includes/floating_alert.html
+++ b/_includes/floating_alert.html
@@ -1,6 +1,6 @@
 <div
   data-controller="floating-alert"
-  class="floating-alert floating-alert-bottom floating-alert-default"
+  class="floating-alert floating-alert-bottom floating-alert-default hide"
   role="status" aria-live="polite" aria-atomic="true">
-  <div data-target="toast.content" class="floating-alert-content white background-black-t4"></div>
+  <div data-target="floating-alert.content" class="floating-alert-content white background-black-t4"></div>
 </div>
diff --git a/_layouts/default.html b/_layouts/default.html
index 8f7dff2..8994f1f 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -57,5 +57,6 @@
     </main>
 
     {% include_cached footer.html %}
+    {% include_cached floating_alert.html %}
   </body>
 </html>
diff --git a/_packs/controllers/floating_alert_controller.js b/_packs/controllers/floating_alert_controller.js
index 7509d26..c00ee8c 100644
--- a/_packs/controllers/floating_alert_controller.js
+++ b/_packs/controllers/floating_alert_controller.js
@@ -1,18 +1,34 @@
 import { Controller } from "stimulus";
 
+// Ejemplo de uso:
+// window.dispatchEvent(
+//   new CustomEvent("toast", { detail: { content: "¡Hola, usuarix!" } })
+// );
 export default class extends Controller {
   static targets = ["content"];
 
   connect() {
     window.addEventListener("toast", (event) => {
       this.contentTarget.innerText = event.detail.content;
-      this.element.classList.toggle("hide");
-      this.element.classList.toggle("show");
+      this.set(true);
 
-      setTimeout(() => {
-        this.element.classList.toggle("hide");
-        this.element.classList.toggle("show");
+      if (this.interval) {
+        clearTimeout(this.interval);
+      }
+      this.interval = setTimeout(() => {
+        this.set(false);
+        this.interval = null;
       }, 3000);
     });
   }
+
+  set(show) {
+    if (show) {
+      this.element.classList.remove("hide");
+      this.element.classList.add("show");
+    } else {
+      this.element.classList.add("hide");
+      this.element.classList.remove("show");
+    }
+  }
 }
diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index a755a31..6868ad7 100644
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -137,6 +137,7 @@ $enable-responsive-font-sizes: true;
 @import "menu";
 @import "content";
 @import "fonts";
+@import "floating_alert";
 
 /// La barra de progreso de Turbo tiene el color primario
 /// de la paleta, definido por Bootstrap o por nosotres.