/* =========================================================
   GALERÍA DE OBRAS
   ========================================================= */

.gallery .gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background: #ffffff;
}

/* Contenedor uniforme para todas las obras */
.gallery-image-wrapper {
    width: 100%;
    height: 420px;
    overflow: hidden;
    background: #f5f5f5;
}

/* Imagen */
.gallery-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;

    transition: transform 0.5s ease;
}

/* Efecto al pasar el mouse */
.gallery .gallery-item:hover .gallery-image {
    transform: scale(1.04);
}


/* =========================================================
   ESPACIADO ENTRE OBRAS
   ========================================================= */

.gallery .row {
    --bs-gutter-x: 2rem;
    --bs-gutter-y: 3rem;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {

    .gallery-image-wrapper {
        height: 360px;
    }

}


/* =========================================================
   CELULAR
   ========================================================= */

@media (max-width: 767px) {

    .gallery-image-wrapper {
        height: 380px;
    }

    .gallery .row {
        --bs-gutter-x: 1.25rem;
        --bs-gutter-y: 2rem;
    }

}

/* =========================================================
     ESTILOS DEL WIZARD
     ========================================================= -->*/

/*
 * Indicadores de pasos
 */

.wizard-step {

    width: 42px;
    height: 42px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto;

    background-color: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);

    font-weight: 600;

    transition: all 0.3s ease;

}


.wizard-step.active {

    background-color: var(--bs-primary);
    color: #fff;

}


.wizard-step.completed {

    background-color: var(--bs-success);
    color: #fff;

}


/*
 * Línea entre los pasos
 */

.wizard-line {

    width: 55px;
    height: 2px;

    background-color: var(--bs-border-color);

    margin-top: 21px;

}


/*
 * Campos
 */

#modalEncargarObra .form-control,
#modalEncargarObra .form-select {

    border-radius: 5px;

}


/*
 * Efecto de los campos al recibir foco
 */

#modalEncargarObra .form-control:focus,
#modalEncargarObra .form-select:focus {

    border-color: var(--bs-primary);

    box-shadow: 0 0 0 0.25rem rgba(
        var(--bs-primary-rgb),
        0.15
        );

}


/*
 * Área de archivos
 */

#imagenesReferencia {

    cursor: pointer;

}


/*
 * Botones
 */

#modalEncargarObra .btn {

    border-radius: 5px;

}


/*
 * En pantallas pequeñas
 */

@media (max-width: 575.98px) {

    .wizard-line {

        width: 25px;

    }

    .wizard-step {

        width: 36px;
        height: 36px;

    }

    .wizard-line {

        margin-top: 18px;

    }

    #modalEncargarObra .modal-body {

        padding-left: 1rem;
        padding-right: 1rem;

    }

}

/* =========================================================
   PREVISUALIZACIÓN DE IMÁGENES DE REFERENCIA
   ========================================================= */

.imagen-referencia-item {
    position: relative;
}

.imagen-referencia-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    background: var(--bs-body-bg);
    height: 180px;
}

.imagen-referencia-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* Botón eliminar */

.btn-eliminar-imagen {
    position: absolute;
    top: 8px;
    right: 8px;

    width: 32px;
    height: 32px;

    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border: none;
    border-radius: 50%;

    background: rgba(220, 53, 69, 0.95);
    color: #fff;

    z-index: 10;

    transition: all 0.2s ease;
}

.btn-eliminar-imagen:hover {
    background: #dc3545;
    transform: scale(1.08);
}


/* Nombre del archivo */

.imagen-referencia-nombre {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    padding: 6px 8px;

    background: rgba(0, 0, 0, 0.65);
    color: #fff;

    font-size: 0.75rem;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* Mensaje cuando no hay imágenes */

.imagenes-referencia-vacio {
    padding: 20px;

    text-align: center;

    border: 1px dashed var(--bs-border-color);
    border-radius: 8px;

    color: var(--bs-secondary-color);
}