/* ==========================================================================
   PROMI - Listado de productos (categorias, busqueda, favoritos, novedades, promociones)
   Tarjeta de producto, encabezado de la categoria, filtros y paginacion.
   Mismo lenguaje que las tarjetas de "Productos destacados" del home.
   Se usa junto con js/listado.js
   ========================================================================== */

/* Mientras listado.js arma las tarjetas no se ve el formato viejo */
.pc-js #resultados .familia:not(.pc-card){visibility:hidden;}

/* ---------- Pagina de categoria ---------- */
body.pc-page{background:#f4f1ef !important;}
.pc-wrap{background:#f4f1ef !important;background-image:none !important;padding-top:34px;padding-bottom:48px;}
.pc-head{padding:8px 10px 18px;}
.pc-crumb{font-size:12.5px;color:#6d5b61;margin-bottom:6px;}
.pc-crumb a{color:#6d5b61 !important;text-decoration:none !important;}
.pc-crumb a:hover{color:#ec008e !important;}
.pc-head h1{font-family:'Montserrat','MEB',sans-serif !important;font-weight:800 !important;font-size:34px !important;line-height:1.1;color:#1e1a1d !important;margin:0 0 4px;letter-spacing:-.01em;}
.pc-count{font-size:13.5px;color:#6d5b61;min-height:1.2em;}
.pc-benef{display:block;font-size:13.5px;color:#6d5b61;margin-top:6px;}
.pc-benef:empty{display:none;}
.pc-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:0 10px 14px !important;margin-bottom:6px;border-bottom:1px solid #e6dcd7;}

/* ---------- Filtros: botones redondos con panel flotante ---------- */
#filtros.pc-filtros{width:auto !important;max-width:none !important;flex:1 1 auto;padding:0 !important;text-align:left !important;background:none !important;border:none !important;box-shadow:none !important;border-radius:0 !important;min-height:0 !important;display:flex !important;align-items:center;gap:8px;flex-wrap:wrap;font-size:13.5px !important;}
.pc-flabel{font-family:'Montserrat','MEB',sans-serif;font-weight:700;font-size:12.5px;color:#6d5b61;margin-right:4px;display:inline-flex;align-items:center;gap:6px;}
#filtros.pc-filtros .accordion{display:flex;gap:8px;flex-wrap:wrap;align-items:center;background:none !important;border:none !important;box-shadow:none !important;padding:0 !important;margin:0 !important;}
#filtros.pc-filtros .accordion-item{position:relative;border:none !important;background:none !important;margin:0 !important;}
#filtros.pc-filtros .accordion-item.pc-vacio{display:none;}
#filtros.pc-filtros .accordion-header{margin:0 !important;}
#filtros.pc-filtros .accordion-button{background:#ffffff !important;border:1.5px solid #e6dcd7 !important;border-radius:999px !important;padding:8px 14px !important;font-family:'Montserrat','MEB',sans-serif;font-weight:700;font-size:12.5px !important;color:#2a2226 !important;text-transform:none !important;letter-spacing:0 !important;box-shadow:none !important;width:auto !important;}
#filtros.pc-filtros .accordion-button::after{width:12px;height:12px;background-size:12px;margin-left:8px;}
#filtros.pc-filtros .accordion-button:hover{border-color:#1e1a1d !important;}
#filtros.pc-filtros .accordion-button:not(.collapsed){border-color:#1e1a1d !important;background:#1e1a1d !important;color:#ffffff !important;}
#filtros.pc-filtros .accordion-button:not(.collapsed)::after{filter:invert(1) brightness(2);}
#filtros.pc-filtros .accordion-collapse{position:absolute;top:calc(100% + 8px);left:0;z-index:60;background:#ffffff;border-radius:14px;box-shadow:0 4px 12px rgba(30,26,29,.08),0 18px 40px rgba(30,26,29,.16);}
#filtros.pc-filtros .accordion-body{padding:16px !important;max-height:440px;overflow:auto;}
#filtros.pc-filtros .promi-clear-filtros{display:inline-block;width:auto;margin:0 0 0 4px;padding:8px 6px;border:none !important;color:#6d5b61 !important;background:none !important;font-weight:600;font-size:12.5px;text-decoration:underline !important;text-underline-offset:3px;}
#filtros.pc-filtros .promi-clear-filtros:hover{color:#ec008e !important;}
.pc-chipcount{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;border-radius:999px;background:#f14194;color:#fff;font-size:10.5px;margin-left:6px;padding:0 5px;}
.pc-oculto{display:none !important;}

/* Color: familias */
.pc-colorfam{display:grid;grid-template-columns:1fr 1fr;gap:4px 8px;min-width:360px;}
.pc-cf{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:10px;cursor:pointer;font-size:13px;color:#2a2226;border:1.5px solid transparent;user-select:none;transition:background .15s ease,border-color .15s ease;text-align:left;background:none;}
.pc-cf:hover{background:#faf6f3;}
.pc-cf.on{border-color:#1e1a1d;background:#faf6f3;font-weight:600;}
.pc-cf i{width:22px;height:22px;border-radius:50%;flex:0 0 22px;box-shadow:inset 0 0 0 1px rgba(30,26,29,.18);}
.pc-cf small{margin-left:auto;color:#6d5b61;font-size:11.5px;font-weight:400;}
.pc-cf i.f-metalicos{background:linear-gradient(135deg,#f5f6f7 0%,#a7acb1 55%,#e4e6e8 100%);}
.pc-cf i.f-transparentes{background:conic-gradient(#e6e0dd 25%,#fff 0 50%,#e6e0dd 0 75%,#fff 0) 0 0/8px 8px;}
.pc-cf i.f-combinados{background:conic-gradient(#C8102E,#FFD100,#2E9E48,#1F48C4,#6B3FA0,#C8102E);}

/* Precio */
.pc-pricepanel{min-width:330px;}
.pc-presets{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;}
.pc-preset{border:1.5px solid #e6dcd7;background:#fff;border-radius:999px;padding:6px 12px;font-size:12px;font-weight:600;color:#2a2226;cursor:pointer;}
.pc-preset:hover,.pc-preset.on{border-color:#1e1a1d;}
.pc-price-row{display:flex;gap:10px;}
.pc-pf{flex:1;}
.pc-pf label{display:block;font-size:11.5px;color:#6d5b61;margin-bottom:4px;}
.pc-in{display:flex;align-items:center;border:1.5px solid #e6dcd7;border-radius:10px;padding:0 10px;height:40px;background:#fff;}
.pc-in:focus-within{border-color:#1e1a1d;}
.pc-in span{color:#6d5b61;margin-right:4px;font-size:13px;}
.pc-in input{border:none !important;outline:none !important;box-shadow:none !important;width:100%;padding:0 !important;font-size:14px;background:transparent;min-width:0;}
.pc-panel-foot{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid #efe8e4;gap:10px;}
.pc-link{background:none;border:none;color:#6d5b61;text-decoration:underline;text-underline-offset:3px;font-size:12.5px;padding:0;cursor:pointer;}
.pc-link:hover{color:#ec008e;}
.pc-apply{background:#1e1a1d;color:#fff;border:none;border-radius:999px;padding:9px 20px;font-weight:700;font-size:12.5px;cursor:pointer;transition:background .2s ease;}
.pc-apply:hover{background:#f14194;}

/* ---------- Paginacion ---------- */
.pc-pages{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.pc-pages .paginacion{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 12px;border-radius:999px;border:1.5px solid #e6dcd7;background:#ffffff !important;color:#2a2226 !important;font-weight:700;font-size:12.5px;text-decoration:none !important;margin:0 !important;transition:border-color .15s ease;}
.pc-pages .paginacion:hover{border-color:#1e1a1d;}
.pc-pages .paginacion.pc-current{background:#1e1a1d !important;border-color:#1e1a1d;color:#ffffff !important;}

.pc-pages-bottom{justify-content:center;padding:28px 0 8px;}

/* ---------- Tarjeta de producto ---------- */
#resultados > .pc-col{padding:10px !important;}
.familia.pc-card{height:100% !important;border:none !important;border-radius:18px !important;background:#ffffff !important;padding:14px 14px 16px !important;margin:0 !important;text-align:left !important;display:flex !important;flex-direction:column;position:relative;z-index:1 !important;transform:none !important;box-shadow:0 1px 3px rgba(30,26,29,.06),0 10px 24px rgba(30,26,29,.08) !important;transition:box-shadow .2s ease,transform .2s ease !important;}
.familia.pc-card:hover{transform:translateY(-4px) !important;box-shadow:0 2px 6px rgba(30,26,29,.08),0 18px 36px rgba(30,26,29,.16) !important;}
.pc-img{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:#ffffff;margin-bottom:12px;}
.pc-img img{max-width:96%;max-height:96%;width:auto !important;height:auto !important;object-fit:contain;display:block;transition:transform .3s ease;}
.pc-card:hover .pc-img img{transform:scale(1.05);}
.pc-card .pc-fav{position:absolute;top:22px;right:22px;width:34px;height:34px;border-radius:50%;background:#ffffff;box-shadow:0 2px 8px rgba(30,26,29,.14);display:flex !important;align-items:center;justify-content:center;font-size:15px;cursor:pointer;float:none !important;margin:0 !important;z-index:2;transition:transform .15s ease;}
.pc-card .pc-fav:hover{transform:scale(1.08);}
.pc-name{font-family:'Montserrat','MEB',sans-serif;font-weight:600;font-size:13.5px;line-height:1.3;color:#2a2226 !important;text-decoration:none !important;min-height:2.6em;margin:0 0 8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.pc-name:hover{color:#ec008e !important;}
.pc-pricelabel{font-style:italic;font-size:11.5px;color:#6d5b61;display:block;margin:0 0 1px;}
.pc-price{font-family:'Montserrat','MEB',sans-serif;font-weight:900;font-size:24px;line-height:1.1;color:#2a2226;display:block;margin:0 0 4px;}
.pc-stock{font-size:12px;color:#6d5b61;display:block;margin:0 0 14px;}
.pc-ctas{display:flex;gap:8px;margin-top:auto;}
.pc-ctas a{flex:1;text-align:center;font-weight:700;font-size:12px;padding:10px 6px;border-radius:999px;text-decoration:none !important;white-space:nowrap;transition:background .2s ease,color .2s ease,border-color .2s ease;}
.pc-btn-ghost{border:1.5px solid #e6dcd7;color:#2a2226 !important;background:#ffffff;}
.pc-btn-ghost:hover{border-color:#f14194;color:#f14194 !important;}
.pc-btn{background:#1e1a1d;color:#ffffff !important;border:1.5px solid #1e1a1d;}
.pc-btn:hover{background:#f14194;border-color:#f14194;}
.pc-ctas .pc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;font-size:13px;}
.pc-ctas .pc-btn svg{flex:none;transition:transform .2s ease;}
.pc-ctas .pc-btn:hover svg{transform:translateX(3px);}
/* precio + boton Cotizar pequeno en la misma linea (2026-09-29) */
.pc-card .pc-pricelabel{margin-top:auto;}
.pc-pricerow{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 10px;margin:0 0 4px;}
.pc-pricerow .pc-price{margin:0;white-space:nowrap;}
.pc-card .pc-stock{margin:0;}
.pc-btn-mini{flex:none;display:inline-flex;align-items:center;gap:6px;background:#1e1a1d;color:#ffffff !important;border-radius:999px;padding:8px 12px;font-family:'Montserrat','MEB',sans-serif;font-weight:800;font-size:12px;line-height:1;white-space:nowrap;text-decoration:none !important;box-shadow:0 8px 16px -10px rgba(30,26,29,.7);transition:background .2s ease;}
.pc-btn-mini:hover{background:#ec008e;}
.pc-btn-mini svg{flex:none;transition:transform .2s ease;}
.pc-btn-mini:hover svg{transform:translateX(3px);}

/* ---------- Muestras de color (tarjeta y filtro) ---------- */
.pc-colors{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:16px;margin:0 0 12px;}
.pc-colors .color_cuadro{width:16px !important;height:16px !important;border-radius:50% !important;overflow:hidden;display:flex !important;border:none !important;margin:0 !important;padding:0 !important;box-shadow:inset 0 0 0 1px rgba(30,26,29,.28);float:none !important;}
.pc-colors .color_cuadro > div{flex:1;height:100% !important;width:auto !important;border:none !important;margin:0 !important;float:none !important;}
.color_cuadro.sw-hide{display:none !important;}
.sw-more{font-size:11px;font-weight:700;color:#6d5b61;line-height:16px;padding:0 2px;cursor:default;}
.color_cuadro[data-fam="metalicos"] > div{background-image:linear-gradient(135deg,rgba(255,255,255,.7) 0%,rgba(255,255,255,0) 50%,rgba(0,0,0,.2) 100%) !important;}
.color_cuadro[data-fam="transparentes"]{background:conic-gradient(#e6e0dd 25%,#fff 0 50%,#e6e0dd 0 75%,#fff 0) 0 0/8px 8px !important;}
.color_cuadro[data-fam="transparentes"] > div{opacity:.5;}
.color_cuadro.sw-sin{background:repeating-linear-gradient(45deg,#e7dfdb 0 2px,#fff 2px 5px) !important;}
.color_cuadro.sw-sin > div{background:transparent !important;}
.color_cuadro[title="Personalizado"]{background:conic-gradient(#C8102E,#FFD100,#2E9E48,#1F48C4,#6B3FA0,#C8102E) !important;}
.color_cuadro[title="Personalizado"] > div{background:transparent !important;}

/* ---------- Celular ---------- */
@media (max-width:768px){
  .pc-wrap{padding-top:20px;}
  .pc-head h1{font-size:26px !important;}
  .pc-toolbar{align-items:flex-start;}
}
@media (max-width:576px){
  #resultados > .pc-col{padding:6px !important;}
  .familia.pc-card{padding:10px 10px 12px !important;border-radius:14px !important;}
  .pc-card .pc-fav{top:16px;right:16px;width:30px;height:30px;font-size:13px;}
  .pc-name{font-size:12.5px;}
  .pc-price{font-size:19px;}
  .pc-ctas{flex-direction:column;gap:6px;}
  .pc-btn-mini{padding:7px 11px;font-size:11.5px;}
  /* los paneles de filtro se abren como hoja desde abajo */
  #filtros.pc-filtros .accordion-item{position:static;}
  #filtros.pc-filtros .accordion-collapse{position:fixed;left:12px;right:12px;top:auto;bottom:12px;max-height:75vh;overflow:auto;}
  .pc-colorfam,.pc-pricepanel{min-width:0;}
}