/* SpaMaster 360 v20.3.3
   Corrección definitiva tarjetas POS:
   - elimina height fijo de .pos-product-img
   - imagen cuadrada 1:1
   - nombre más visible
   - menos espacio vacío
*/

#posSaleModal .pos-product,
#posSaleModal .product-card,
#posSaleModal .sale-product-card,
#posSaleModal [data-product-id],
#posSaleModal [data-service-id]{
    width:180px!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    padding:0!important;
    border-radius:18px!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
    background:#fff!important;
}

/* Regla específica que estaba dañando las imágenes */
#posSaleModal .pos-product-img,
#posSaleModal img.pos-product-img,
#posSaleModal .pos-product img,
#posSaleModal .product-card img,
#posSaleModal .sale-product-card img,
#posSaleModal [data-product-id] img,
#posSaleModal [data-service-id] img{
    width:100%!important;
    height:auto!important;
    min-height:unset!important;
    max-height:unset!important;
    aspect-ratio:1 / 1!important;
    object-fit:cover!important;
    object-position:center!important;
    display:block!important;
    margin:0!important;
    padding:0!important;
    border-radius:0!important;
    flex:0 0 auto!important;
}

/* Placeholder emoji también cuadrado */
#posSaleModal .pos-product .emoji,
#posSaleModal .product-card .emoji,
#posSaleModal .sale-product-card .emoji,
#posSaleModal [data-product-id] .emoji,
#posSaleModal [data-service-id] .emoji{
    width:100%!important;
    height:auto!important;
    aspect-ratio:1 / 1!important;
    display:grid!important;
    place-items:center!important;
    margin:0!important;
    padding:0!important;
    border-radius:0!important;
    background:#eef2f7!important;
    font-size:46px!important;
    flex:0 0 auto!important;
}

/* Contenido interno compacto */
#posSaleModal .pos-product-name,
#posSaleModal .product-name,
#posSaleModal .service-name,
#posSaleModal .pos-product small,
#posSaleModal .product-card small,
#posSaleModal .sale-product-card small{
    font-size:16px!important;
    font-weight:800!important;
    line-height:1.22!important;
    color:#64748b!important;
    text-align:center!important;
    margin:10px 12px 6px!important;
    padding:0!important;
    min-height:38px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
}

/* Precio más visible y con margen inferior */
#posSaleModal .pos-product-price,
#posSaleModal .product-price,
#posSaleModal .service-price,
#posSaleModal .pos-product strong,
#posSaleModal .product-card strong,
#posSaleModal .sale-product-card strong{
    font-size:20px!important;
    font-weight:950!important;
    line-height:1.15!important;
    color:#0f172a!important;
    text-align:center!important;
    margin:4px 12px 14px!important;
    padding:0!important;
}

/* Evita espacios blancos gigantes después del precio */
#posSaleModal .pos-product > :last-child,
#posSaleModal .product-card > :last-child,
#posSaleModal .sale-product-card > :last-child,
#posSaleModal [data-product-id] > :last-child,
#posSaleModal [data-service-id] > :last-child{
    margin-bottom:14px!important;
}

/* Grilla más limpia */
#posSaleModal .sale-products-grid,
#posSaleModal .pos-products-grid,
#posSaleModal .products-grid,
#posSaleModal #saleProductsGrid,
#posSaleModal .products-list{
    display:grid!important;
    grid-template-columns:repeat(5, 180px)!important;
    gap:18px!important;
    align-items:start!important;
    justify-content:start!important;
}

/* La imagen no debe estar limitada por reglas viejas */
#posSaleModal .pos-product-img[style],
#posSaleModal img.pos-product-img[style]{
    height:auto!important;
}

/* Estado seleccionado */
#posSaleModal .pos-product.is-selected-v203,
#posSaleModal .product-card.is-selected-v203,
#posSaleModal .sale-product-card.is-selected-v203,
#posSaleModal [data-product-id].is-selected-v203,
#posSaleModal [data-service-id].is-selected-v203{
    border:2px solid #6C4CF1!important;
    box-shadow:0 16px 34px rgba(108,76,241,.18)!important;
}

@media(max-width:1250px){
    #posSaleModal .sale-products-grid,
    #posSaleModal .pos-products-grid,
    #posSaleModal .products-grid,
    #posSaleModal #saleProductsGrid,
    #posSaleModal .products-list{
        grid-template-columns:repeat(4, 180px)!important;
    }
}

@media(max-width:980px){
    #posSaleModal .sale-products-grid,
    #posSaleModal .pos-products-grid,
    #posSaleModal .products-grid,
    #posSaleModal #saleProductsGrid,
    #posSaleModal .products-list{
        grid-template-columns:repeat(3, 180px)!important;
    }
}

@media(max-width:720px){
    #posSaleModal .sale-products-grid,
    #posSaleModal .pos-products-grid,
    #posSaleModal .products-grid,
    #posSaleModal #saleProductsGrid,
    #posSaleModal .products-list{
        grid-template-columns:repeat(2, minmax(140px,1fr))!important;
    }

    #posSaleModal .pos-product,
    #posSaleModal .product-card,
    #posSaleModal .sale-product-card,
    #posSaleModal [data-product-id],
    #posSaleModal [data-service-id]{
        width:100%!important;
    }
}