/* Estilos para el efecto de carga */
    #loader {
        position: relative;
        position: fixed;
        width: 100%;
        height: 100%;
        background: #fff;
        z-index: 10000;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .spinner {
        position: absolute;
        width: 150px; /* Ajusta el tamaño según necesites */
        height: 150px; /* Ajusta el tamaño según necesites */
        border: 20px solid #FFCC00;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        border-top: 20px solid #FF5733;
        border-radius: 50%;
        animation: spin 2s linear infinite;
    }

    /* Estilos para centrar la imagen */
    .loader-image {
        max-width:120px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }