.loading {
    display: none; 
    text-align: center;
    background: rgba(0, 0, 0, 0.8); 
    padding: 20px; 
    border-radius: 10px; 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    z-index: 1000;
}

.spiner{
    border: 4px solid #f3f3f3; 
    border-top: 4px solid var(--clr-primary); 
    border-radius: 50%; 
    width: 30px; 
    height: 30px; 
    animation: spin 1s linear infinite; 
    margin: 10px auto;
}

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


.form-optimizador {
    background-color: whitesmoke;
    color: black;
    margin: 2vh auto;
    border-radius: 10px;
    padding: 2vh;
    font: 'Fira Sans';
    max-width: 1200px;
    width: 90%;
}


.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 20px;                      
    margin-top: 2vh;
}


.form-grid-section {
    display: grid;
    grid-template-columns: 350px 1fr; /* izquierda labels, derecha inputs */
    column-gap: 15px;
    row-gap: 10px;
    max-width: 500px; /* opcional */
}

/* El título ocupa toda la fila */
.form-grid-section h3 {
    grid-column: span 2;
}

/* Responsive para móvil */
@media (max-width: 1300px) {
    .form-grid-section {
        grid-template-columns: 1fr;
    }

    .form-grid-section label {
        margin-top: 10px;
    }
}

@media (max-width: 768px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 500px) {
    .form-grid-section {
        grid-template-columns: 1fr;
        display: flex;
        flex-direction: column;
    }
}


.full-width-field {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    grid-column: 1 / 3;
}

.full-width-field input[type="file"] {
    width: 100%;
}