/* ========================================================== */
/* == 💰 ESTILOS PARA PRECIOS REFERENCIALES EN TARJETA 💰 == */
/* ========================================================== */

/* ⭐ IMPORTANTE: Altura fija para TODOS los contenedores de precio */
.producto-card .price-container {
    min-height: 52px; /* ⬆️ AUMENTADO de 38px para acomodar 2 filas */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 🎯 GRID 2x2 PARA 4 PRECIOS REFERENCIALES EN TARJETA */
.precios-referenciales-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columnas */
    grid-template-rows: repeat(2, 1fr);    /* 2 filas */
    gap: 0.15rem 0.25rem;
    width: 100%;
    max-width: 180px;
    margin: 0 auto;
}

.precio-referencial-item-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.1rem 0.2rem;
    border: none;
    flex-shrink: 0;
}

.precio-referencial-item-card .precio-ref-valor {
    font-size: 0.58rem;
    font-weight: 700;
    color: #007bff;
    display: block;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
}

.precio-referencial-item-card .precio-ref-cantidad {
    font-size: 0.44rem;
    color: #6c757d;
    display: block;
    white-space: nowrap;
    line-height: 1.1;
    text-align: center;
}

/* ⭐ Contenedor para "Precio a consultar" con misma altura */
.precio-consultar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
}

/* ========================================================== */
/* == 💰 ESTILOS PARA PRECIOS REFERENCIALES EN MODAL 💰 == */
/* ========================================================== */

/* ✅ MODAL: MANTENER DISEÑO HORIZONTAL (UNA SOLA FILA) */
#modalPriceContainer .precios-referenciales-modal {
    display: flex; /* ← FLEX en lugar de GRID */
    justify-content: center;
    align-items: center;
    gap: 0.7rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-borde-claro);
    flex-wrap: wrap; /* Por si en móvil pequeño necesita wrap */
}

.precio-referencial-item-modal {
    text-align: center;
    flex: 0 1 auto;
    padding: 0.25rem 0.5rem;
    border-right: 1px solid #e0e0e0; /* ← RESTAURADO el borde derecho */
}

.precio-referencial-item-modal:last-child {
    border-right: none; /* ← Sin borde en el último */
}

.precio-referencial-item-modal .precio-ref-valor {
    font-size: 0.85rem;
    font-weight: 700;
    color: #007bff;
    display: block;
    line-height: 1.3;
    text-align: center;
    white-space: nowrap;
}

.precio-referencial-item-modal .precio-ref-cantidad {
    font-size: 0.6rem;
    color: #6c757d;
    display: block;
    white-space: nowrap;
    line-height: 1.2;
    margin-top: 0.15rem;
    text-align: center;
}

/* Mensaje informativo debajo de los precios */
.precios-ref-info {
    font-size: 0.75rem;
    color: #6c757d;
    text-align: center;
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

/* ========================================================== */
/* ✅ RESPONSIVE PARA PRECIOS REFERENCIALES EN MÓVIL ✅ */
/* ========================================================== */

@media (max-width: 575.98px) {
    /* ⭐ TARJETA: Grid 2x2 en móvil */
    .producto-card .price-container {
        min-height: 46px;
    }
    
    .precio-consultar-placeholder {
        min-height: 46px;
    }
    
    .precios-referenciales-container {
        gap: 0.1rem 0.2rem;
        max-width: 160px;
    }
    
    .precio-referencial-item-card .precio-ref-valor {
        font-size: 0.52rem;
    }
    
    .precio-referencial-item-card .precio-ref-cantidad {
        font-size: 0.40rem;
    }
    
    /* ⭐ MODAL: Mantener flex horizontal en móvil */
    #modalPriceContainer .precios-referenciales-modal {
        gap: 0.4rem 0.6rem;
        padding: 0.5rem 0;
        flex-wrap: wrap; /* Permitir wrap si es necesario */
    }
    
    .precio-referencial-item-modal .precio-ref-valor {
        font-size: 0.76rem;
    }
    
    .precio-referencial-item-modal .precio-ref-cantidad {
        font-size: 0.54rem;
    }
    
    .precios-ref-info {
        font-size: 0.68rem;
    }
}

@media (max-width: 400px) {
    /* ⭐ TARJETA: Grid 2x2 en móvil pequeño */
    .producto-card .price-container {
        min-height: 42px;
    }
    
    .precio-consultar-placeholder {
        min-height: 42px;
    }
    
    .precios-referenciales-container {
        gap: 0.08rem 0.15rem;
        max-width: 140px;
    }
    
    .precio-referencial-item-card .precio-ref-valor {
        font-size: 0.48rem;
    }
    
    .precio-referencial-item-card .precio-ref-cantidad {
        font-size: 0.37rem;
    }
    
    /* ⭐ MODAL: Flex horizontal */
    #modalPriceContainer .precios-referenciales-modal {
        gap: 0.3rem 0.4rem;
    }
    
    .precio-referencial-item-modal .precio-ref-valor {
        font-size: 0.70rem;
    }
    
    .precio-referencial-item-modal .precio-ref-cantidad {
        font-size: 0.50rem;
    }
}

@media (max-width: 360px) {
    /* ⭐ TARJETA: Grid 2x2 en móvil extra pequeño */
    .producto-card .price-container {
        min-height: 40px;
    }
    
    .precio-consultar-placeholder {
        min-height: 40px;
    }
    
    .precios-referenciales-container {
        gap: 0.05rem 0.1rem;
        max-width: 130px;
    }
    
    .precio-referencial-item-card .precio-ref-valor {
        font-size: 0.45rem;
    }
    
    .precio-referencial-item-card .precio-ref-cantidad {
        font-size: 0.34rem;
    }
    
    /* ⭐ MODAL: Flex horizontal con wrap */
    #modalPriceContainer .precios-referenciales-modal {
        gap: 0.25rem 0.3rem;
        flex-wrap: wrap;
    }
    
    .precio-referencial-item-modal .precio-ref-valor {
        font-size: 0.64rem;
    }
    
    .precio-referencial-item-modal .precio-ref-cantidad {
        font-size: 0.46rem;
    }
}