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

/* ⭐ IMPORTANTE: Altura fija para TODOS los contenedores de precio */
.producto-card .price-container {
    min-height: 38px;
    display: flex;
    align-items: center; /* Centrado vertical */
    justify-content: flex-start; /* Alineación horizontal al inicio */
}

.precio-referencial-item-card {
    display: inline-block;
    text-align: center;
    padding: 0.1rem 0.25rem;
    border-right: 1px solid #e0e0e0;
    flex-shrink: 0; /* Evitar que se compriman */
}

.precio-referencial-item-card:last-child {
    border-right: none;
}

.precio-referencial-item-card .precio-ref-valor {
    font-size: 0.6rem; /* ⬇️ Reducido aún más de 0.65rem */
    font-weight: 700;
    color: #007bff;
    display: block;
    line-height: 1.2;
    min-width: 2.5rem; /* Ancho mínimo para evitar que se compriman */
    text-align: center;
}

.precio-referencial-item-card .precio-ref-cantidad {
    font-size: 0.45rem; /* ⬇️ Reducido aún más de 0.5rem */
    color: #6c757d;
    display: block;
    white-space: nowrap;
    line-height: 1.1;
    min-width: 2.5rem; /* Ancho mínimo para alineación perfecta */
    text-align: center;
}

/* 🎯 CONTENEDOR CENTRADO - SOLUCIÓN AL PROBLEMA */
.precios-referenciales-container {
    display: flex;
    justify-content: center; /* 🆕 Siempre centrado */
    align-items: center;
    width: 100%;
    gap: 0.25rem; /* ⬇️ Espacio reducido entre elementos */
    position: relative; /* Para centrado absoluto */
    overflow: hidden; /* Evitar desbordamiento */
}

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

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

#modalPriceContainer .precios-referenciales-modal {
    display: flex;
    justify-content: center; /* 🆕 Centrado en modal también */
    align-items: center;
    gap: 0.7rem; /* ⬇️ Espacio reducido en modal */
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-borde-claro);
    flex-wrap: wrap; /* Permitir wrap en modal si es necesario */
}

.precio-referencial-item-modal {
    text-align: center;
    flex: 0 1 auto; /* No crecer, no encogerse */
    padding: 0.25rem 0.5rem;
    border-right: 1px solid #e0e0e0;
    min-width: 4rem; /* Ancho mínimo en modal */
}

.precio-referencial-item-modal:last-child {
    border-right: none;
}

.precio-referencial-item-modal .precio-ref-valor {
    font-size: 0.82rem; /* ⬇️ Reducido aún más de 0.88rem */
    font-weight: 700;
    color: #007bff;
    display: block;
    line-height: 1.3;
    text-align: center;
}

.precio-referencial-item-modal .precio-ref-cantidad {
    font-size: 0.58rem; /* ⬇️ Reducido aún más de 0.62rem */
    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) {
    /* ⭐ Altura fija para móvil */
    .producto-card .price-container {
        min-height: 34px;
    }
    
    /* Tarjeta móvil */
    .precio-referencial-item-card .precio-ref-valor {
        font-size: 0.54rem; /* ⬇️ Reducido aún más de 0.58rem */
        min-width: 2.2rem; /* Ancho mínimo menor en móvil */
    }
    
    .precio-referencial-item-card .precio-ref-cantidad {
        font-size: 0.42rem; /* ⬇️ Reducido aún más de 0.47rem */
        min-width: 2.2rem; /* Ancho mínimo menor en móvil */
    }
    
    .precios-referenciales-container {
        gap: 0.2rem; /* ⬇️ Espacio reducido en móvil */
    }
    
    /* Modal móvil */
    #modalPriceContainer .precios-referenciales-modal {
        gap: 0.6rem; /* ⬇️ Gap reducido en modal móvil */
        padding: 0.5rem 0;
        justify-content: center;
    }
    
    .precio-referencial-item-modal .precio-ref-valor {
        font-size: 0.73rem; /* ⬇️ Reducido aún más de 0.78rem */
        min-width: 3.5rem; /* Ancho mínimo en modal móvil */
    }
    
    .precio-referencial-item-modal .precio-ref-cantidad {
        font-size: 0.52rem; /* ⬇️ Reducido aún más de 0.55rem */
        min-width: 3.5rem; /* Ancho mínimo en modal móvil */
    }
    
    .precios-ref-info {
        font-size: 0.68rem;
    }
}

@media (max-width: 400px) {
    /* ⭐ Altura fija para móvil pequeño */
    .producto-card .price-container {
        min-height: 32px;
    }
    
    .precio-referencial-item-card .precio-ref-valor {
        font-size: 0.49rem; /* ⬇️ Reducido aún más de 0.53rem */
        min-width: 2rem; /* Ancho mínimo más pequeño */
    }
    
    .precio-referencial-item-card .precio-ref-cantidad {
        font-size: 0.39rem; /* ⬇️ Reducido aún más de 0.43rem */
        min-width: 2rem; /* Ancho mínimo más pequeño */
    }
    
    .precios-referenciales-container {
        gap: 0.15rem; /* ⬇️ Espacio mínimo en pantallas pequeñas */
    }
    
    .precio-referencial-item-modal .precio-ref-valor {
        font-size: 0.66rem; /* ⬇️ Reducido aún más de 0.7rem */
        min-width: 3rem; /* Ancho mínimo en modal móvil pequeño */
    }
    
    .precio-referencial-item-modal .precio-ref-cantidad {
        font-size: 0.49rem; /* ⬇️ Reducido aún más de 0.52rem */
        min-width: 3rem; /* Ancho mínimo en modal móvil pequeño */
    }
    
    #modalPriceContainer .precios-referenciales-modal {
        gap: 0.4rem; /* ⬇️ Gap mínimo en modal muy pequeño */
    }
}

@media (max-width: 360px) {
    /* ⭐ Altura fija para móvil extra pequeño */
    .producto-card .price-container {
        min-height: 30px;
    }
    
    .precio-referencial-item-card .precio-ref-valor {
        font-size: 0.46rem; /* ⬇️ Reducido aún más de 0.5rem */
        min-width: 1.8rem; /* Ancho mínimo extra pequeño */
    }
    
    .precio-referencial-item-card .precio-ref-cantidad {
        font-size: 0.36rem; /* ⬇️ Reducido aún más de 0.4rem */
        min-width: 1.8rem; /* Ancho mínimo extra pequeño */
    }
    
    .precios-referenciales-container {
        gap: 0.1rem; /* ⬇️ Espacio mínimo en pantallas extra pequeñas */
    }
    
    /* En pantallas muy pequeñas, permitir wrap del modal */
    #modalPriceContainer .precios-referenciales-modal {
        flex-wrap: wrap;
        gap: 0.3rem; /* ⬇️ Gap mínimo en modal extra pequeño */
    }
    
    .precio-referencial-item-modal .precio-ref-valor {
        font-size: 0.6rem; /* Aún más pequeño en extra pequeño */
        min-width: 2.5rem;
    }
    
    .precio-referencial-item-modal .precio-ref-cantidad {
        font-size: 0.45rem; /* Aún más pequeño en extra pequeño */
        min-width: 2.5rem;
    }
}