/* Estilos para el contenedor del loader */

.loader-wrapper-f {

    display: flex;

    justify-content: center;

    align-items: center;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.5); /* Fondo semitransparente para oscurecer la página */

    z-index: 9999; /* Asegura que el loader esté en la parte superior de todo */

  }

  

  /* Estilos para el spinner/loader animado */

  .loader-f {

    border: 4px solid #f3f3f3; /* Color del borde del loader */

    border-top: 4px solid #3498db; /* Color del borde en la parte superior */

    border-radius: 50%;

    width: 50px;

    height: 50px;

    animation: spin 2s linear infinite; /* Animación giratoria */

  }

  

  @keyframes spin {

    0% { transform: rotate(0deg); }

    100% { transform: rotate(360deg); }

  }