<div 
  id="toast-default"
  class="absolute right-0 -top-3 items-center w-full max-w-xs p-4 text-gray-100 rounded-lg bg-blue-700 opacity-80 me-2 hidden"
>
  <div
    class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 rounded-lg"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      fill="currentColor"
      class="bi bi-check2-circle"
      viewBox="0 0 16 16"
    >
      <path
        d="M2.5 8a5.5 5.5 0 0 1 8.25-4.764.5.5 0 0 0 .5-.866A6.5 6.5 0 1 0 14.5 8a.5.5 0 0 0-1 0 5.5 5.5 0 1 1-11 0"
      />
      <path
        d="M15.354 3.354a.5.5 0 0 0-.708-.708L8 9.293 5.354 6.646a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0z"
      />
    </svg>
  </div>
  <div class="ms-3 text-sm font-normal">Datos actualizados.</div>
  <button
    id="close-alert"
    type="button"
    class="ms-auto -mx-1.5 -my-1.5 focus:ring-2 inline-flex items-center justify-center h-8 w-8"
    data-dismiss-target="#toast-default"
    aria-label="Close"
  >
    <span class="sr-only">Close</span>
    <svg
      class="w-3 h-3"
      aria-hidden="true"
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 14 14"
    >
      <path
        stroke="currentColor"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
      />
    </svg>
  </button>
</div>
