/*-----------------------------------------------------------------------*/




/* Fondo del spinner */
.spinner-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    z-index: 1050;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Spinner Border */
.spinner-border {
    border: 5px solid #f3f3f3; /* Fondo gris claro */
    border-top: 5px solid #3498db; /* Color inicial */
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Spinner Grow */
.spinner-grow {
    background-color: #3498db;
    border-radius: 50%;
    animation: grow-color-change 1s infinite;
}

/* Animación de cambio de color para spinner-border */
.spinner-border-color {
    animation: spin 1s linear infinite, border-color-change 1s infinite;
}

@keyframes border-color-change {
    0% { border-top-color: #3498db; }
    33% { border-top-color: #e74c3c; }
    66% { border-top-color: #f1c40f; }
    100% { border-top-color: #3498db; }
}

/* Animación de cambio de color para spinner-grow */
.spinner-grow-color {
    animation: grow-color-change 1s infinite;
}

@keyframes grow-color-change {
    0% { background-color: #3498db; }
    33% { background-color: #e74c3c; }
    66% { background-color: #f1c40f; }
    100% { background-color: #3498db; }
}

/* Animación de giro */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}