/* Tarjetas de publicación (Shared/_ProductCard.cshtml) — diseño compacto "B", 2026-10-27.
   Home, buscador, favoritos y perfil del vendedor. Más anchas y menos altas: foto 4:3 a todo el ancho con los datos
   cortos encima, cuerpo en pocas líneas y sin botón "Ver" (toda la tarjeta es el link). */
.pcard { display: flex; flex-direction: column; height: 100%; background: #fff; border-radius: 16px; overflow: hidden;
         box-shadow: 0 2px 12px rgba(0,0,0,.07); border: 1px solid #eef0f3; text-decoration: none !important; color: #1a1a2e;
         transition: transform .18s, box-shadow .18s; }
.pcard:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.12); color: #1a1a2e; }

.pcard-img { position: relative; aspect-ratio: 4 / 3; background: #f3f4f6; overflow: hidden; }
.pcard-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.pcard:hover .pcard-img img { transform: scale(1.04); }
.pcard-img img.is-ficha { object-fit: contain; background: linear-gradient(135deg, #f3f1ff, #e6f0ff); }
.pcard:hover .pcard-img img.is-ficha { transform: none; }

.pcard-tl { position: absolute; top: 8px; left: 8px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
/* Vendedor online ahora (presencia, 2026-11-04) */
.pcard-online { width: 13px; height: 13px; border-radius: 50%; background: #22c55e; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.12); animation: pcOn 2s ease-in-out infinite; }
@keyframes pcOn { 0%, 100% { box-shadow: 0 0 0 1px rgba(0,0,0,.12), 0 0 0 0 rgba(34,197,94,.55); } 50% { box-shadow: 0 0 0 1px rgba(0,0,0,.12), 0 0 0 5px rgba(34,197,94,0); } }
.pcard-pill { font-size: 10.5px; font-weight: 800; border-radius: 50px; padding: 3px 8px; box-shadow: 0 1px 4px rgba(0,0,0,.2); line-height: 1.2; }
.pcard-pill-auction { background: #3483fa; color: #fff; }   /* celeste de la marca (2026-10-29) */
.pcard-pill-gold { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #92400e; }
.pcard-pill-silver { background: #f1f5f9; color: #334155; }

.pcard-uses { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; }
.pcard-use { width: 26px; height: 26px; border-radius: 50%; background: #fff; display: inline-flex; align-items: center; justify-content: center;
             font-size: 13px; box-shadow: 0 1px 4px rgba(0,0,0,.2); }

.pcard-bl { position: absolute; left: 8px; bottom: 8px; display: flex; gap: 4px; }
.pcard-tag { background: rgba(255,255,255,.95); color: #374151; font-size: 10.5px; font-weight: 700; border-radius: 50px; padding: 2px 8px;
             box-shadow: 0 1px 3px rgba(0,0,0,.15); line-height: 1.4; }
.pcard-tag-bat { color: #16a34a; }

.pcard-body { padding: 11px 14px 13px; display: flex; flex-direction: column; flex: 1; }
.pcard-title { font-weight: 700; font-size: 14px; line-height: 1.3; max-height: 2.6em; overflow: hidden;
               display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pcard-specs { font-size: 12px; color: #6b7280; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard-lab { font-size: 11px; color: #9ca3af; margin-top: auto; padding-top: 7px; }
.pcard-neg { color: #047857; font-weight: 600; }   /* MK-021: «· Negociable» */
.pcard-trust { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; color: #1e4fa8; margin-top: 5px; }   /* MK-026 */
.pcard-trust i { color: #3483fa; }
.pcard-price-row { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.pcard-price { font-size: 19px; font-weight: 800; color: #1a1a2e; white-space: nowrap; }
.pcard-price-bid { color: #ea580c; }
.pcard-good { font-size: 10.5px; font-weight: 800; color: #0a7d42; background: #e7f8ef; border-radius: 50px; padding: 2px 8px; white-space: nowrap; }
.pcard-auction-sub { font-size: 11.5px; color: #ea580c; font-weight: 700; margin-top: 3px; }
.pcard-bids { font-size: 11px; color: #9ca3af; margin-top: 2px; }

/* Celular: tarjetas de a 2 → todo un poco más chico */
@media (max-width: 575.98px) {
    .pcard { border-radius: 12px; }
    .pcard-body { padding: 9px 10px 11px; }
    .pcard-title { font-size: 13px; }
    .pcard-specs { font-size: 11px; }
    .pcard-price { font-size: 16px; }
    .pcard-use { width: 22px; height: 22px; font-size: 11px; }
    .pcard-uses .pcard-use:nth-child(n+3) { display: none; }   /* en el celu, hasta 2 íconos */
    .pcard-pill, .pcard-tag { font-size: 9.5px; padding: 2px 6px; }
    .pcard-good { font-size: 9.5px; padding: 2px 6px; }
}

/* Tienda del vendedor (Etapa C, 2026-10-29): línea chica abajo del precio */
.pcard-store { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 11.5px; color: #555; min-width: 0; }
.pcard-store .bi-shop { color: #3483fa; flex-shrink: 0; }
.pcard-store-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.pcard-store-ok { color: #3483fa; flex-shrink: 0; font-size: 11px; }
.pcard-founder { display: inline-flex; align-self: flex-start; align-items: center; gap: 4px; margin-top: 4px; font-size: 10px; font-weight: 700; color: #8a6200; background: #fff4d6; border-radius: 4px; padding: 2px 6px; }
@media (max-width: 575px) { .pcard-store { font-size: 10.5px; } .pcard-founder { font-size: 9.5px; } }
/* Precio en celu / PC (2026-10-31): la tarjeta maneja sus propias clases. El _Layout solo volvía a mostrar span.mobile-only, y la
   línea de subasta es un div: con «Comprar ya» + subasta, en el celu la tarjeta quedaba sin ningún precio (caso #269). */
.pcard .mobile-only { display: none !important; }
@media (max-width: 575.98px) {
    .pcard .pc-only { display: none !important; }
    .pcard div.mobile-only { display: block !important; }
    .pcard .pcard-price-row.mobile-only { display: flex !important; }
}

/* Precio en dólares (2026-10-31): «≈ $X» chico debajo del «US$ X». */
.pcard-approx { font-size: 11.5px; color: #6b7280; margin-top: -1px; line-height: 1.2; }

/* Corazón rápido y «Ideal para …» (2026-11-01, UX-007 y UX-008) */
.pcard-fav { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255,255,255,.95);
             display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.22); padding: 0; z-index: 2; }
.pcard-fav svg { width: 18px; height: 18px; fill: none; stroke: #6b7280; stroke-width: 1.9; stroke-linejoin: round; transition: transform .15s; }
.pcard-fav:hover svg { stroke: #ef4444; transform: scale(1.08); }
.pcard-fav.on svg { fill: #ef4444; stroke: #ef4444; }
/* Chip del uso (2026-11-01, opción B «chip sólido»): fondo del color del uso apenas oscurecido para que el blanco se lea bien. */
.pcard-ideal-row { margin-top: 5px; display: flex; min-width: 0; }
.pcard-ideal { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; background: var(--uc, #3483fa); background: color-mix(in srgb, var(--uc, #3483fa) 80%, #000);
               color: #fff; font-size: 11.5px; font-weight: 700; line-height: 1.25; border-radius: 6px; padding: 3px 8px; white-space: nowrap; overflow: hidden; }
.pcard-ideal .bi { font-size: 12px; flex-shrink: 0; }
.pcard-ideal .pi-short { display: none; }
.pcard-ideal.is-short .pi-long { display: none; }   /* fav.js lo marca si «Ideal para …» no entra en la tarjeta */
.pcard-ideal.is-short .pi-short { display: inline; }
@media (max-width: 575px) {
    .pcard-fav { width: 32px; height: 32px; }
    .pcard-ideal { font-size: 10.5px; padding: 2px 7px; }
    .pcard-ideal .pi-long { display: none; }   /* en el celu, siempre el nombre corto */
    .pcard-ideal .pi-short { display: inline; }
}

/* Provincia de la notebook (2026-11-03) */
.pcard-loc { display: flex; align-items: center; gap: 4px; margin-top: 3px; font-size: 11.5px; color: #555; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard-loc .bi { color: #3483fa; font-size: 11px; flex-shrink: 0; }