/* ============================================================================
   ESTILOS DE ESPACIADO PARA VISTA DE PROYECTOS
   Migrado desde producción MVC 5 Legacy
   ============================================================================ */

/* Clases de margin utility */
.m-t-3 {
    margin-top: 20px !important;
}

.m-b-3 {
    margin-bottom: 20px !important;
}

/* Ajuste para cards de proyecto - Espaciado simétrico */
.box-project {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    padding-left: 15px;
    padding-right: 15px;
}

/* Grid responsive con espaciado correcto */
.my-shuffle-container .col-md-4 {
    padding-left: 15px;
    padding-right: 15px;
}

/* Ajuste específico para cards en mobile */
@media (max-width: 767px) {
    .box-project {
        margin-left: 15px;
        margin-right: 15px;
    }

    .pricel {
        margin-bottom: 20px;
    }
}

/* Ajuste específico para desktop */
@media (min-width: 768px) {
    .features-four .col-md-4 {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* Override padding from Site.css - Legacy uses padding: 20px top/bottom */
.pricel .phead-top {
    padding: 20px 8px !important;
}

/* Heights for project card list items - Legacy specific measurements */
.pricel .plist li {
    min-height: 58px !important;
    height: auto !important;
    padding: 12px 0px !important;
}

/* Last li with action buttons (Pedido/Fotos) has max-height of 67px */
.pricel .plist li:last-child {
    max-height: 67px !important;
}

/* Estilos para iconos de editar/eliminar - btn-group (NO btn-orange/btn-danger) */
.phead-top a {
    color: white !important;
    margin-left: 10px;
    transition: opacity 0.2s ease;
    display: inline-block;
    background-color: transparent;
}

.phead-top a:hover {
    opacity: 0.7;
    text-decoration: none;
    color: white !important;
}

.phead-top .fa {
    font-size: 20px;
    vertical-align: middle;
}

.phead-top .fa-pencil-square-o,
.phead-top .fa-trash-o {
    cursor: pointer;
}

/* Ajuste de altura máxima responsive para cards */
@media screen and (min-width: 992px) {
    .height-responsive {
        max-height: 310px;
    }
}

@media screen and (max-width: 991px) {
    .height-responsive {
        max-height: none;
    }
}

/* Corrección de contenedor principal - ahora usa .container de Bootstrap 3 */
.features-four {
    width: 100%;
    /* Eliminados hacks CSS - Bootstrap .container maneja el ancho y centraje */
}

.my-shuffle-container {
    overflow: visible !important;
    margin: 0 auto;
}

/* Bootstrap .row necesita sus margins negativos naturales para compensar padding del .container */

/* Mantener proporción correcta del grid 3 columnas */
@media (min-width: 992px) {
    .features-four .col-md-4 {
        width: 33.33333333%;
        float: left;
    }
}

/* Tablets: 2 columnas */
@media (min-width: 768px) and (max-width: 991px) {
    .features-four .col-md-4 {
        width: 50%;
        float: left;
    }
}

/* Mobile: 1 columna completa */
@media (max-width: 767px) {
    .features-four .col-xs-12 {
        width: 100%;
    }
}

/* Espaciado uniforme entre filas */
.proyecto {
    margin-bottom: 30px;
}

/* Matches Legacy Site.css line-height */
.title-project-box {
    font-size: 25px;
    line-height: 30px;
}