/* ============================
   RF CDE SHOP - Productos
   ============================ */

/* ---- BREADCRUMB + BANNER DE CATEGORIA ---- */
.cat-breadcrumb { display:flex; align-items:center; gap:.5rem; font-size:.8rem; color:var(--text-2); margin-bottom:1rem; }
.cat-breadcrumb a { color:var(--text-2); transition:.15s; }
.cat-breadcrumb a:hover { color:var(--primary); }
.cat-breadcrumb i { font-size:.65rem; color:var(--text-2); opacity:.6; }
.cat-breadcrumb #catBreadcrumbCurrent { color:var(--text); font-weight:600; display:inline-flex; align-items:center; gap:.5rem; }

/* El banner en si (tarjeta + icono) ahora es el componente generico
   .section-banner de style.css, reutilizado por varias secciones —
   ver ahi. Acá solo queda lo especifico de esta pagina (breadcrumb). */

/* Es la seccion que mas debe aprovechar la pantalla — en monitores grandes
   el .container general (1280px) dejaba franjas vacias enormes a los
   costados del catalogo, justo en la parte que mas tiene que vender.
   Se amplia SOLO aca (el resto del sitio sigue en 1280px). */
.products .container { max-width:1800px; }

/* ---- LAYOUT: SIDEBAR + GRID ---- */
.products-layout { display:grid; grid-template-columns:270px minmax(0,1fr); gap:1.8rem; align-items:start; }
.pf-mobile-toggle { display:none; }

.products-sidebar { background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.2rem; position:sticky; top:90px; max-height:calc(100vh - 110px); overflow-y:auto; }
/* Busqueda propia del catalogo, fija junto con el resto de la sidebar —
   para no perder de vista los filtros ni tener que volver a subir hasta
   el buscador general del header mientras se recorren los productos. */
.pf-search { position:relative; margin-bottom:1rem; }
.pf-search i.fa-search { position:absolute; left:.8rem; top:50%; transform:translateY(-50%); color:var(--text-2); font-size:.8rem; }
.pf-search input { width:100%; padding:.6rem .8rem .6rem 2.1rem; border:1.5px solid var(--border); border-radius:var(--radius); font-size:.85rem; color:var(--text); transition:.2s; }
.pf-search input:focus { border-color:var(--primary); outline:none; box-shadow:0 0 0 3px rgba(0,136,204,.1); }
.pf-search-clear { position:absolute; right:.5rem; top:50%; transform:translateY(-50%); width:22px; height:22px; border:none; background:var(--bg-2); color:var(--text-2); border-radius:50%; font-size:.68rem; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.pf-search-clear:hover { background:var(--border); color:var(--text); }
.pf-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:.8rem; padding-bottom:.8rem; border-bottom:1px solid var(--border); }
.pf-head h4 { font-size:.9rem; font-weight:700; color:var(--text); display:flex; align-items:center; gap:.5rem; }
.pf-clear { font-size:.75rem; color:var(--primary-dark); font-weight:600; }
.pf-clear:hover { text-decoration:underline; }
.pf-group { padding:1rem 0; border-bottom:1px solid var(--border); }
.pf-group:last-child { border-bottom:none; padding-bottom:0; }
.pf-group h5 { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-2); margin-bottom:.7rem; }
.pf-check { display:flex; align-items:center; gap:.55rem; padding:.35rem 0; font-size:.84rem; color:var(--text); cursor:pointer; }
.pf-check input { accent-color:var(--primary); width:15px; height:15px; cursor:pointer; }
.pf-check small { color:var(--text-2); margin-left:auto; font-size:.72rem; }
.pf-price-row { display:flex; align-items:center; gap:.5rem; }
.pf-price-row input { width:0; flex:1; padding:.45rem .5rem; border:1.5px solid var(--border); border-radius:var(--radius); font-size:.8rem; }
.pf-price-row span { color:var(--text-2); }

.pf-result-count { font-size:.85rem; color:var(--text-2); font-weight:600; }
.pf-compare-btn { display:flex; align-items:center; gap:.4rem; padding:.4rem .8rem; border:1.5px solid var(--border); border-radius:var(--radius-pill); font-size:.82rem; font-weight:600; color:var(--text-2); background:#fff; transition:.2s; }
.pf-compare-btn:hover { border-color:var(--primary); color:var(--primary); }
.pf-compare-btn.has-items { border-color:var(--primary); color:var(--primary); background:rgba(0,136,204,.06); }

@media(max-width:1024px) {
  /* Sin min-width:0 el track "1fr" crece al min-content del hijo mas
     ancho (mismo bug de flexbox/grid que ya paso con los filtros de
     categoria) y el toggle/sidebar/grid se salen del viewport. */
  .products-layout { grid-template-columns:minmax(0,1fr); min-width:0; }
  .products-layout > * { min-width:0; }
  .pf-mobile-toggle {
    display:flex; align-items:center; gap:.5rem; width:100%; margin-bottom:1rem;
    padding:.7rem 1rem; background:#fff; border:1.5px solid var(--border); border-radius:var(--radius-pill);
    font-size:.85rem; font-weight:600; color:var(--text);
  }
  .products-sidebar { display:none; position:static; }
  .products-sidebar.open { display:block; margin-bottom:1.5rem; }
  /* La fila de acciones del toolbar (deseos, ordenar, vista, comparar) no
     entra en una sola linea en mobile — se envuelve en vez de desbordar
     horizontalmente. */
  .toolbar-right { flex-wrap:wrap; flex-shrink:1; width:100%; }
  .products-toolbar { justify-content:flex-start; }
}

/* ---- TOOLBAR ---- */
.products-toolbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.5rem; padding:1rem 1.2rem; background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius-lg); }
.pf-tabs-wrap { display:flex; gap:.4rem; flex-wrap:wrap; flex:1; }
.pf-tab { padding:.45rem 1rem; border:1.5px solid var(--border); border-radius:50px; font-size:.82rem; font-weight:600; background:#fff; color:var(--text-2); cursor:pointer; transition:.2s; display:flex; align-items:center; gap:.35rem; white-space:nowrap; }
.pf-tab:hover { border-color:var(--primary); color:var(--primary); }
.pf-tab.active { background:var(--primary); border-color:var(--primary); color:#fff; }
.pf-tab-used { border-color:#059669; color:#059669; }
.pf-tab-used:hover { border-color:#059669; color:#059669; background:rgba(5,150,105,.06); }
.pf-tab-used.active { background:#059669; border-color:#059669; color:#fff; }
.pf-tab .pf-count { background:rgba(255,255,255,.3); border-radius:50px; padding:.05rem .35rem; font-size:.7rem; }
.pf-tab.active .pf-count { background:rgba(255,255,255,.25); }
.toolbar-right { display:flex; align-items:center; gap:.6rem; flex-shrink:0; }
.sort-select { padding:.4rem .7rem; border:1.5px solid var(--border); border-radius:var(--radius); font-size:.82rem; background:#fff; color:var(--text); cursor:pointer; outline:none; }
.view-btn { width:34px; height:34px; border:1.5px solid var(--border); border-radius:var(--radius-pill); background:#fff; color:var(--text-2); font-size:.9rem; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.2s; }
.view-btn.active, .view-btn:hover { border-color:var(--primary); color:var(--primary); background:rgba(0,136,204,.06); }
.products-counter { font-size:.8rem; color:var(--text-2); white-space:nowrap; }
#wishBar { display:none; align-items:center; gap:.5rem; background:#fff0f5; border:1px solid #fda4af; border-radius:var(--radius-pill); padding:.4rem .8rem; font-size:.8rem; color:#e11d48; font-weight:600; cursor:pointer; flex-shrink:0; }
#wishBar i { color:#e11d48; }

/* ---- PRODUCT CARDS ---- */
.products-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(270px, 1fr)); gap:1.4rem; }
.products-list-view { grid-template-columns:1fr; }
.products-list-view .pc-card { display:grid; grid-template-columns:220px 1fr; }
.products-list-view .pc-header { border-radius:var(--radius-lg) 0 0 var(--radius-lg); }

.pc-card { background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; transition:.2s; position:relative; display:flex; flex-direction:column; box-shadow:var(--shadow); }
.pc-card:hover { border-color:var(--primary); box-shadow:var(--shadow-lg); transform:translateY(-2px); }

.pc-header { position:relative; background:var(--pc-color, #eef2f6); padding:1.5rem; height:200px; min-height:200px; max-height:200px; display:flex; align-items:center; justify-content:center; overflow:hidden; cursor:pointer; }
.pc-img-bg { font-size:4rem; color:rgba(0,0,0,.15); transition:.2s; position:relative; z-index:1; width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.pc-img-bg img { width:100%; height:100%; object-fit:contain; object-position:center; }
.pc-card:hover .pc-img-bg { transform:scale(1.04); }
.pc-quick-look { position:absolute; bottom:0; left:0; right:0; background:rgba(22,32,43,.85); color:#fff; font-size:.78rem; font-weight:700; text-align:center; padding:.55rem; transform:translateY(100%); transition:.2s; display:flex; align-items:center; justify-content:center; gap:.4rem; }
.pc-card:hover .pc-quick-look { transform:translateY(0); }
.pc-wish { position:absolute; top:.7rem; right:.7rem; background:#fff; border:1px solid var(--border); color:var(--text-2); width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.85rem; z-index:2; transition:.2s; cursor:pointer; }
.pc-wish:hover, .pc-wish.active { background:#e11d48; border-color:#e11d48; color:#fff; }
.pc-badge { position:absolute; top:.7rem; left:.7rem; padding:.25rem .55rem; border-radius:4px; font-size:.64rem; font-weight:700; z-index:2; text-transform:uppercase; letter-spacing:.04em; background:#fff; box-shadow:0 1px 3px rgba(16,24,40,.15); }
.pc-badge-new { color:#0088CC; border-left:3px solid #0088CC; }
.pc-badge-sale { color:#b45309; border-left:3px solid #ff6600; }
.pc-badge-hot { color:#be123c; border-left:3px solid #e11d48; }
.pc-badge-out { color:#475569; border-left:3px solid #94a3b8; }
.pc-badge-usado { color:#047857; border-left:3px solid #059669; top:.7rem; left:.7rem; }
.pc-badge + .pc-badge-usado, .pc-badge-usado + .pc-badge { top:2.3rem; }
.dm-badge.pc-badge-usado { position:absolute; top:.8rem; left:.8rem; }
.dm-badge.pc-badge-usado ~ .dm-badge, .dm-badge.pc-badge-usado { z-index:3; }
.dm-img-main .dm-badge.pc-badge-usado:nth-of-type(2) { top:2.6rem; }
.dm-used-notes { background:rgba(5,150,105,.06); border:1px solid rgba(5,150,105,.25); color:#065f46; border-radius:var(--radius); padding:.7rem .9rem; font-size:.85rem; margin-top:.8rem; line-height:1.5; }
.dm-used-notes i { color:#059669; margin-right:.3rem; }
.dm-used-condition-chip { display:inline-flex; align-items:center; gap:.4rem; background:rgba(5,150,105,.1); color:#047857; border:1px solid rgba(5,150,105,.3); border-radius:50px; padding:.35rem .8rem; font-size:.78rem; font-weight:700; margin-top:.8rem; }
.dm-used-condition-chip i { color:#059669; font-size:.7rem; }

.pc-body { padding:1rem; flex:1; display:flex; flex-direction:column; gap:.5rem; }
.pc-meta { display:flex; justify-content:space-between; align-items:center; }
.pc-brand { font-size:.72rem; font-weight:700; color:var(--primary-dark); text-transform:uppercase; letter-spacing:.5px; }
.pc-sku { font-size:.68rem; color:var(--text-2); font-family:var(--font-mono); }
.pc-name { font-size:.92rem; font-weight:700; line-height:1.35; color:var(--text); cursor:pointer; margin:0; }
.pc-name:hover { color:var(--primary); }
.pc-stars-row { display:flex; align-items:center; gap:.4rem; }
.pc-stars { color:#f59e0b; font-size:.72rem; display:flex; gap:.1rem; }
.pc-rating-val { font-size:.72rem; font-weight:700; color:var(--text); }
.pc-review-count { font-size:.68rem; color:var(--text-2); }
.pc-short-desc { font-size:.78rem; color:var(--text-2); line-height:1.5; margin:0; flex:1; }
.pc-highlights-preview { display:flex; flex-direction:column; gap:.2rem; }
.pc-hl { font-size:.72rem; color:var(--text-2); display:flex; align-items:center; gap:.3rem; }
.pc-hl i { color:var(--success); font-size:.65rem; flex-shrink:0; }
.pc-price-row { display:flex; flex-direction:column; gap:.45rem; padding-top:.4rem; border-top:1px solid var(--border); }
.pc-prices { display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap; }
.pc-price { font-size:1.4rem; font-weight:800; color:var(--text); letter-spacing:-.01em; font-family:var(--font-mono); }
.pc-old-price { font-size:.78rem; color:var(--text-2); text-decoration:line-through; font-family:var(--font-mono); }
.pc-discount { font-size:.7rem; color:var(--orange); font-weight:600; }

/* STOCK — punto + texto, sin barra de progreso ni fondo tipo pildora */
.pc-stock-wrap { display:flex; align-items:center; gap:.4rem; font-size:.74rem; font-weight:600; background:none; }
.pc-stock-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.pc-stock-wrap.pc-stock-ok { color:#166534; }
.pc-stock-wrap.pc-stock-ok .pc-stock-dot { background:#16a34a; }
.pc-stock-wrap.pc-stock-low { color:#9a3412; }
.pc-stock-wrap.pc-stock-low .pc-stock-dot { background:var(--orange); }
.pc-stock-wrap.pc-stock-ask { color:#92400e; }
.pc-stock-wrap.pc-stock-ask .pc-stock-dot { background:#d97706; }
.pc-stock-wrap.pc-stock-out { color:var(--text-2); }
.pc-stock-wrap.pc-stock-out .pc-stock-dot { background:var(--border); }

/* ACTIONS */
.pc-actions { display:flex; gap:.4rem; margin-top:.3rem; flex-wrap:wrap; }
.pc-btn-cart { flex:1; background:var(--primary); color:#fff; padding:.55rem .5rem; border-radius:var(--radius-pill); font-size:.8rem; font-weight:700; transition:.2s; display:flex; align-items:center; justify-content:center; gap:.35rem; cursor:pointer; border:none; }
.pc-btn-cart:hover { background:var(--primary-dark); }
.pc-btn-wa { background:#25d366; color:#fff; width:34px; height:34px; border-radius:var(--radius-pill); font-size:.95rem; display:flex; align-items:center; justify-content:center; border:none; cursor:pointer; transition:.2s; flex-shrink:0; }
.pc-btn-wa:hover { background:#1db954; }
.pc-btn-detail { border:1.5px solid var(--border); background:#fff; color:var(--text-2); width:34px; height:34px; border-radius:var(--radius-pill); font-size:.85rem; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.2s; flex-shrink:0; }
.pc-btn-detail:hover { border-color:var(--primary); color:var(--primary); }
.pc-btn-compare { border:1.5px solid var(--border); background:#fff; color:var(--text-2); width:34px; height:34px; border-radius:var(--radius-pill); font-size:.78rem; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.2s; flex-shrink:0; }
.pc-btn-compare:hover, .pc-btn-compare.active { border-color:var(--orange); color:var(--orange); background:rgba(255,102,0,.06); }

/* ---- PRODUCT DETAIL MODAL ---- */
.product-detail-overlay { position:fixed; inset:0; background:rgba(16,24,40,.55); z-index:1200; display:none; }
.product-detail-overlay.active { display:block; }
.product-detail-modal { position:fixed; top:3%; left:50%; transform:translateX(-50%); width:96%; max-width:1180px; max-height:94vh; overflow-y:auto; background:#fff; border-radius:18px; z-index:1201; display:none; box-shadow:0 24px 60px rgba(16,24,40,.3); }
.product-detail-modal.active { display:block; animation:modalIn .25s ease; }
@keyframes modalIn { from{transform:translateX(-50%) scale(.97);opacity:0} to{transform:translateX(-50%) scale(1);opacity:1} }
.dm-close-btn { position:sticky; top:.8rem; float:right; margin:.8rem .8rem 0; background:var(--bg-2); border:none; width:36px; height:36px; border-radius:50%; color:var(--text-2); font-size:1rem; cursor:pointer; z-index:10; display:flex; align-items:center; justify-content:center; }
.dm-close-btn:hover { background:rgba(220,38,38,.08); color:var(--error); }
#detailModalInner { display:grid; grid-template-columns:280px 1fr 240px; gap:0; clear:both; }
.dm-full { grid-column:1 / -1; padding:0 1.5rem 1.5rem; }

/* DM LEFT: galeria */
.dm-left { background:var(--bg-2); border-right:1px solid var(--border); padding:1.5rem; display:flex; flex-direction:column; gap:1rem; }
.dm-img-main { border-radius:var(--radius-lg); height:220px; background:var(--pc-color, #eef2f6); display:flex; align-items:center; justify-content:center; font-size:5rem; color:rgba(0,0,0,.15); position:relative; overflow:hidden; cursor:zoom-in; }
.dm-img-main img { width:100%; height:100%; object-fit:contain; object-position:center; border-radius:var(--radius-lg); }
.dm-img-zoom-hint { position:absolute; bottom:.6rem; right:.6rem; background:rgba(0,0,0,.55); color:#fff; width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.75rem; }
.dm-thumbs { display:flex; gap:.5rem; flex-wrap:wrap; }
.dm-thumb { width:46px; height:46px; border-radius:8px; border:1.5px solid var(--border); background:#fff; overflow:hidden; padding:0; cursor:pointer; transition:.15s; flex-shrink:0; }
.dm-thumb img { width:100%; height:100%; object-fit:contain; }
.dm-thumb:hover { border-color:var(--primary); }
.dm-thumb.active { border-color:var(--primary); box-shadow:0 0 0 2px rgba(0,136,204,.2); }
.dm-badge { position:absolute; top:.8rem; right:.8rem; padding:.25rem .7rem; border-radius:50px; font-size:.72rem; font-weight:800; }
.dm-wish-fab { position:absolute; top:.8rem; left:.8rem; width:34px; height:34px; border-radius:50%; background:#fff; border:none; color:var(--text-2); font-size:.95rem; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--shadow); transition:.2s; z-index:2; }
.dm-wish-fab:hover, .dm-wish-fab.active { color:#e11d48; }
.dm-trust-badges { display:flex; flex-direction:column; gap:.5rem; }
.dm-trust { display:flex; align-items:center; gap:.6rem; font-size:.78rem; color:var(--text-2); padding:.4rem .6rem; background:#fff; border-radius:var(--radius); border:1px solid var(--border); }
.dm-trust i { color:var(--primary); font-size:.9rem; flex-shrink:0; }

/* Zoom overlay (lightbox simple) */
.img-zoom-overlay { position:fixed; inset:0; background:rgba(5,7,15,.9); z-index:1400; display:none; align-items:center; justify-content:center; padding:2rem; cursor:zoom-out; }
.img-zoom-overlay.active { display:flex; }
.img-zoom-overlay img { max-width:90%; max-height:90%; object-fit:contain; border-radius:8px; }

/* DM MID: info principal */
.dm-right { padding:1.5rem; display:flex; flex-direction:column; gap:.8rem; }
.dm-breadcrumb { display:flex; align-items:center; gap:.4rem; font-size:.72rem; color:var(--text-2); flex-wrap:wrap; }
.dm-breadcrumb i { font-size:.6rem; opacity:.6; }
.dm-breadcrumb a { color:var(--text-2); }
.dm-breadcrumb a:hover { color:var(--primary); }
.dm-breadcrumb span:last-child { color:var(--primary); font-weight:600; }
.dm-brand-tag { font-size:.72rem; font-weight:700; color:var(--primary-dark); text-transform:uppercase; letter-spacing:.04em; }
.dm-title { font-size:1.35rem; font-weight:700; line-height:1.3; margin:0; color:var(--text); }
.dm-meta-row { display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; }
.dm-reviews { font-size:.78rem; color:var(--text-2); }
.dm-sku, .dm-model { font-size:.72rem; background:var(--bg-2); padding:.2rem .5rem; border-radius:4px; color:var(--text-2); font-family:var(--font-mono); }
.dm-short { font-size:.86rem; color:var(--text-2); line-height:1.55; }

/* Fila de specs rapidas (iconos) */
.dm-spec-icons { display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; }
.dm-spec-icon { display:flex; align-items:center; gap:.55rem; padding:.55rem .6rem; background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius); }
.dm-spec-icon i { color:var(--primary); font-size:1rem; flex-shrink:0; }
.dm-spec-icon-val { font-size:.78rem; font-weight:700; color:var(--text); line-height:1.2; }
.dm-spec-icon-key { font-size:.66rem; color:var(--text-2); text-transform:uppercase; letter-spacing:.03em; }

.dm-price-row { display:flex; align-items:baseline; gap:.8rem; flex-wrap:wrap; }
.dm-price { font-size:1.9rem; font-weight:800; color:var(--orange); font-family:var(--font-mono); }
.dm-discount { background:rgba(220,38,38,.08); color:var(--error); font-size:.78rem; font-weight:700; border-radius:50px; padding:.2rem .6rem; }
.dm-price-note { font-size:.72rem; color:var(--text-2); }
.dm-highlights { display:grid; grid-template-columns:1fr 1fr; gap:.35rem; }
.dm-hl { font-size:.78rem; color:var(--text-2); display:flex; align-items:center; gap:.4rem; }
.dm-hl i { color:var(--success); flex-shrink:0; }

/* CTA: 2x2 en desktop */
.dm-cta { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.dm-btn-cart, .dm-btn-wa, .dm-btn-quote, .dm-btn-cmp { padding:.75rem 1rem; border-radius:var(--radius-pill); font-weight:700; font-size:.86rem; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:.4rem; transition:.2s; }
.dm-btn-cart { background:var(--primary); color:#fff; }
.dm-btn-cart:hover { background:var(--primary-dark); }
.dm-btn-wa { background:#25d366; color:#fff; }
.dm-btn-wa:hover { background:#1db954; }
.dm-btn-quote, .dm-btn-cmp { background:#fff; border:1.5px solid var(--border); color:var(--text); }
.dm-btn-quote:hover, .dm-btn-cmp:hover { border-color:var(--primary); color:var(--primary); }
.dm-btn-cmp.active { border-color:var(--orange); color:var(--orange); background:rgba(255,102,0,.06); }

/* DM HELP: sidebar "necesitas ayuda" */
.dm-help { padding:1.5rem 1.5rem 1.5rem 0; }
.dm-help-card { background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.2rem; position:sticky; top:1rem; }
.dm-help-card h4 { font-size:.92rem; font-weight:700; color:var(--text); margin-bottom:.3rem; }
.dm-help-card > p { font-size:.78rem; color:var(--text-2); margin-bottom:1rem; line-height:1.5; }
.dm-help-wa { display:flex; align-items:center; justify-content:center; gap:.5rem; width:100%; background:#25d366; color:#fff; padding:.7rem; border-radius:var(--radius); font-weight:700; font-size:.85rem; margin-bottom:.6rem; transition:.2s; }
.dm-help-wa:hover { background:#1db954; }
.dm-help-quote { display:flex; align-items:center; justify-content:center; gap:.5rem; width:100%; background:#fff; border:1.5px solid var(--border); color:var(--text); padding:.65rem; border-radius:var(--radius); font-weight:600; font-size:.82rem; margin-bottom:1.1rem; transition:.2s; }
.dm-help-quote:hover { border-color:var(--primary); color:var(--primary); }
.dm-help-list { display:flex; flex-direction:column; gap:.7rem; }
.dm-help-item { display:flex; align-items:flex-start; gap:.6rem; }
.dm-help-item i { color:var(--primary); font-size:.9rem; margin-top:.15rem; flex-shrink:0; }
.dm-help-item strong { display:block; font-size:.78rem; color:var(--text); }
.dm-help-item span { font-size:.7rem; color:var(--text-2); }

/* TABS */
.dm-tabs { display:flex; gap:.3rem; flex-wrap:wrap; border-bottom:2px solid var(--border); padding-bottom:.5rem; }
.dm-tab { background:none; border:none; padding:.5rem .8rem; font-size:.8rem; font-weight:600; color:var(--text-2); cursor:pointer; border-radius:var(--radius) var(--radius) 0 0; transition:.2s; display:flex; align-items:center; gap:.3rem; }
.dm-tab:hover { color:var(--primary); background:rgba(0,136,204,.05); }
.dm-tab.active { color:var(--primary); border-bottom:2.5px solid var(--primary); margin-bottom:-2.5px; background:rgba(0,136,204,.05); }
.dm-tab-content { min-height:120px; }

/* TAB CONTENTS */
.dm-desc p { font-size:.88rem; color:var(--text-2); line-height:1.7; }
.dm-specs { overflow-x:auto; }
.specs-table { width:100%; border-collapse:collapse; font-size:.82rem; }
.specs-table tr { border-bottom:1px solid var(--border); }
.specs-table tr:hover { background:var(--bg-2); }
.spec-key { padding:.55rem .7rem; font-weight:600; color:var(--text); width:45%; background:var(--bg-2); }
.spec-val { padding:.55rem .7rem; color:var(--text-2); }
.dm-includes { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.dm-include-item { display:flex; align-items:center; gap:.5rem; padding:.5rem .7rem; background:rgba(22,163,74,.06); border-radius:var(--radius); font-size:.82rem; color:var(--text); border:1px solid rgba(22,163,74,.2); }
.dm-include-item i { color:var(--success); flex-shrink:0; }
.dm-warranty { text-align:center; padding:1rem 0; }
.dw-icon { font-size:2.5rem; color:var(--primary); margin-bottom:.5rem; }
.dm-warranty p { font-size:.88rem; color:var(--text-2); margin-bottom:1rem; }
.dw-extra { display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; margin-top:1rem; text-align:left; }
.dw-item { background:rgba(0,136,204,.05); border-radius:var(--radius); padding:.8rem; border:1px solid rgba(0,136,204,.18); }
.dw-item i { color:var(--primary); font-size:1.1rem; display:block; margin-bottom:.3rem; }
.dw-item strong { display:block; font-size:.8rem; margin-bottom:.2rem; color:var(--text); }
.dw-item p { font-size:.72rem; color:var(--text-2); margin:0; }
.dm-related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; }
.dm-rel-card { border:1.5px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; cursor:pointer; transition:.2s; }
.dm-rel-card:hover { border-color:var(--primary); box-shadow:var(--shadow); }
.dm-rel-img { height:80px; display:flex; align-items:center; justify-content:center; font-size:1.8rem; color:rgba(0,0,0,.15); }
.dm-rel-info { padding:.5rem .6rem; }
.dm-rel-name { font-size:.75rem; font-weight:700; line-height:1.3; color:var(--text); }
.dm-rel-price { font-size:.82rem; font-weight:800; color:var(--orange); margin-top:.2rem; font-family:var(--font-mono); }

/* Tabs "extra": Para quien es / Instalacion / Compatibilidad — mismo
   patron visual que Garantia, solo se muestran si el admin cargo el
   dato (buildTabContent en products-ui.js), nunca con texto inventado. */
.dm-extra-tab { text-align:center; padding:1rem 0; }
.dm-extra-tab .dw-icon { }
.dm-extra-tab p { font-size:.88rem; color:var(--text-2); line-height:1.6; max-width:560px; margin:0 auto; }
.dm-install-level { display:inline-flex; align-items:center; gap:.4rem; background:rgba(255,102,0,.1); color:var(--orange); font-weight:700; font-size:.78rem; padding:.35rem .8rem; border-radius:50px; margin-bottom:.8rem; }

/* "Explicado de forma simple" — callout condicional */
.dm-simple-explain { display:flex; gap:1rem; background:rgba(0,136,204,.05); border:1px solid rgba(0,136,204,.18); border-radius:var(--radius-lg); padding:1.1rem 1.3rem; margin-top:1.2rem; }
.dm-simple-explain-icon { font-size:1.3rem; color:var(--primary); flex-shrink:0; }
.dm-simple-explain h5 { font-size:.85rem; font-weight:700; color:var(--text); margin-bottom:.3rem; }
.dm-simple-explain p { font-size:.82rem; color:var(--text-2); line-height:1.6; }

/* "Completa tu sistema" — franja de productos relacionados con datos
   reales (mismo p.related que la pestaña Relacionados), scroll horizontal */
.dm-complete-system { margin-top:1.6rem; padding-top:1.4rem; border-top:1px solid var(--border); }
.dm-complete-system h4 { font-size:1.05rem; font-weight:700; color:var(--text); margin-bottom:.2rem; }
.dm-complete-system > p { font-size:.8rem; color:var(--text-2); margin-bottom:1rem; }
.dm-cs-row { display:flex; gap:.9rem; overflow-x:auto; padding-bottom:.5rem; }
.dm-cs-card { flex:0 0 150px; border:1.5px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; cursor:pointer; transition:.2s; background:#fff; }
.dm-cs-card:hover { border-color:var(--primary); box-shadow:var(--shadow); }
.dm-cs-img { height:90px; background:var(--bg-2); display:flex; align-items:center; justify-content:center; font-size:1.6rem; color:rgba(0,0,0,.15); position:relative; }
.dm-cs-wish { position:absolute; top:.3rem; right:.3rem; width:22px; height:22px; border-radius:50%; background:#fff; border:none; color:var(--text-2); font-size:.65rem; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow); z-index:1; }
.dm-cs-wish.active, .dm-cs-wish:hover { color:#e11d48; }
.dm-cs-img img { width:100%; height:100%; object-fit:contain; }
.dm-cs-body { padding:.6rem .7rem; }
.dm-cs-name { font-size:.74rem; font-weight:700; color:var(--text); line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.4em; }
.dm-cs-brand { font-size:.65rem; color:var(--text-2); text-transform:uppercase; margin-top:.2rem; }
.dm-cs-bottom { display:flex; align-items:center; justify-content:space-between; margin-top:.4rem; }
.dm-cs-price { font-size:.78rem; font-weight:800; color:var(--orange); font-family:var(--font-mono); }
.dm-cs-bottom button { width:26px; height:26px; border-radius:50%; background:var(--primary); color:#fff; font-size:.68rem; }
.dm-cs-bottom button:hover { background:var(--primary-dark); }

/* ---- WISHLIST MODAL ---- */
.wishlist-overlay { position:fixed; inset:0; background:rgba(16,24,40,.5); z-index:1300; display:none; }
.wishlist-overlay.active { display:block; }
.wishlist-modal { position:fixed; top:5%; left:50%; transform:translateX(-50%); width:92%; max-width:640px; max-height:90vh; overflow-y:auto; background:#fff; border-radius:var(--radius-lg); z-index:1301; display:none; box-shadow:0 24px 60px rgba(16,24,40,.3); }
.wishlist-modal.active { display:block; }
.wishlist-header { display:flex; justify-content:space-between; align-items:center; padding:1.2rem 1.5rem; border-bottom:1px solid var(--border); position:sticky; top:0; background:#fff; z-index:5; }
.wishlist-header h3 { font-weight:700; font-size:1.1rem; color:var(--text); }
.wishlist-header button { background:none; font-size:1.2rem; color:var(--text-2); cursor:pointer; }
.wishlist-body { padding:1rem 1.5rem 1.5rem; }
.wishlist-empty { text-align:center; padding:3rem 1rem; color:var(--text-2); }
.wishlist-empty i { font-size:3rem; display:block; margin-bottom:1rem; opacity:.3; }
.wishlist-empty button { margin-top:1rem; }
.wishlist-footer { padding:1rem 1.5rem 1.5rem; border-top:1px solid var(--border); }
.wishlist-item { display:flex; gap:1rem; align-items:center; padding:.9rem 0; border-bottom:1px solid var(--border); }
.wishlist-item-img { width:60px; height:60px; background:var(--bg-2); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; font-size:1.4rem; color:var(--text-2); flex-shrink:0; overflow:hidden; }
.wishlist-item-img img { width:100%; height:100%; object-fit:contain; }
.wishlist-item-info { flex:1; }
.wishlist-item-name { font-size:.88rem; font-weight:600; color:var(--text); cursor:pointer; }
.wishlist-item-name:hover { color:var(--primary); }
.wishlist-item-price { font-size:.88rem; color:var(--orange); font-weight:700; margin-top:.2rem; font-family:var(--font-mono); }
.wishlist-item-actions { display:flex; gap:.4rem; }
.wishlist-item-actions button { width:34px; height:34px; border-radius:var(--radius); display:flex; align-items:center; justify-content:center; font-size:.85rem; cursor:pointer; transition:.2s; }
.wishlist-btn-cart { background:var(--primary); color:#fff; border:none; }
.wishlist-btn-cart:hover { background:var(--primary-dark); }
.wishlist-btn-remove { background:none; border:1px solid var(--border); color:var(--text-2); }
.wishlist-btn-remove:hover { border-color:var(--error); color:var(--error); }

/* ---- COMPARE BAR ---- */
#compareBar { display:none; position:fixed; bottom:1rem; left:50%; transform:translateX(-50%); background:var(--dark); color:#fff; border-radius:var(--radius-lg); padding:.8rem 1.2rem; z-index:1000; box-shadow:0 10px 30px rgba(16,24,40,.3); align-items:center; gap:1rem; flex-wrap:wrap; max-width:90vw; }
#compareBar .compare-label { font-size:.8rem; font-weight:700; color:rgba(255,255,255,.7); }
#compareNames { display:flex; gap:.4rem; flex-wrap:wrap; }
.cmp-chip { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); border-radius:50px; padding:.2rem .6rem; font-size:.72rem; display:flex; align-items:center; gap:.3rem; }
.cmp-chip button { background:none; color:rgba(255,255,255,.6); font-size:.75rem; cursor:pointer; padding:0; line-height:1; }
.cmp-chip button:hover { color:#f43f5e; }
#compareBtn { background:var(--orange); color:#fff; padding:.5rem 1rem; border-radius:var(--radius); font-size:.82rem; font-weight:700; border:none; cursor:pointer; transition:.2s; }
#compareBtn:disabled { opacity:.5; cursor:not-allowed; }
#compareBtn:not(:disabled):hover { background:var(--orange-dark); }
#compareClearBtn { background:none; border:1px solid rgba(255,255,255,.2); color:rgba(255,255,255,.6); padding:.5rem .8rem; border-radius:var(--radius); font-size:.78rem; cursor:pointer; }

/* ---- COMPARE MODAL ---- */
.compare-overlay { position:fixed; inset:0; background:rgba(16,24,40,.55); z-index:1300; display:none; }
.compare-overlay.active { display:block; }
.compare-modal { position:fixed; top:3%; left:50%; transform:translateX(-50%); width:96%; max-width:900px; max-height:94vh; background:#fff; border-radius:18px; z-index:1301; display:none; overflow:hidden; box-shadow:0 24px 60px rgba(16,24,40,.3); }
.compare-modal.active { display:flex; flex-direction:column; }
.compare-modal-header { display:flex; justify-content:space-between; align-items:center; padding:1rem 1.5rem; border-bottom:1px solid var(--border); flex-shrink:0; }
.compare-modal-header h3 { font-weight:700; font-size:1.1rem; color:var(--text); }
.compare-modal-header button { background:none; font-size:1.2rem; color:var(--text-2); cursor:pointer; }
#compareTableWrap { overflow:auto; flex:1; padding:1rem; }
.compare-table { width:100%; border-collapse:collapse; font-size:.82rem; }
.compare-table th { padding:.8rem 1rem; background:var(--bg-2); border:1px solid var(--border); font-weight:600; text-align:center; vertical-align:top; color:var(--text); }
.compare-table td { padding:.55rem .8rem; border:1px solid var(--border); color:var(--text-2); }
.compare-table tr:nth-child(even) td { background:var(--bg-2); }
.cmp-key { font-weight:700; color:var(--text); background:var(--bg-2) !important; }
.cmp-prod-head { display:flex; flex-direction:column; align-items:center; gap:.4rem; }
.cmp-prod-head i { font-size:1.5rem; color:var(--primary); }
.cmp-pname { font-size:.78rem; font-weight:700; text-align:center; color:var(--text); }
.cmp-pprice { font-size:.9rem; font-weight:800; color:var(--orange); font-family:var(--font-mono); }
.cmp-recommend { margin-top:1.2rem; background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.2rem 1.4rem; }
.cmp-recommend h4 { display:flex; align-items:center; gap:.5rem; font-size:.92rem; font-weight:700; color:var(--text); margin-bottom:.5rem; }
.cmp-recommend h4 i { color:var(--orange); }
.cmp-recommend p { font-size:.85rem; color:var(--text-2); line-height:1.6; margin-bottom:.8rem; }
.cmp-recommend .btn-wa-sm { display:inline-flex; }

/* ---- LOAD MORE ---- */
.load-more-wrap { text-align:center; margin-top:2rem; display:flex; flex-direction:column; align-items:center; gap:.5rem; }
#productCounter { font-size:.82rem; color:var(--text-2); }
.btn-load-more { background:#fff; border:1.5px solid var(--primary); color:var(--primary); padding:.75rem 2rem; border-radius:var(--radius); font-weight:700; cursor:pointer; transition:.2s; display:inline-flex; align-items:center; gap:.5rem; }
.btn-load-more:hover { background:var(--primary); color:#fff; }

/* ---- RESPONSIVE ---- */
/* Bug real (reportado: "en notebook se encima demasiado las cosas"):
   el modal de detalle de producto es una grilla de 3 columnas FIJAS
   (280px + contenido + 240px = ~900px minimo) que antes solo se
   aplanaba a 1 columna recien en max-width:768px — pero el modal mide
   96% del viewport, asi que en cualquier notebook con esa ventana
   entre ~769px y ~1000px (muy comun con el escalado de Windows al
   125%/150% en pantallas de 13-14", no hace falta un monitor chico de
   verdad) la grilla no entraba y la columna "¿Necesitás ayuda?" quedaba
   literalmente encimada/desbordada fuera del modal. Se sube el punto
   de corte de las reglas de la grilla del modal a 1024px — el resto de
   los ajustes puntuales de mobile (ocultar botones, achicar tarjetas)
   se quedan en 768px porque esos sí son mobile-especificos. */
@media(max-width:1024px) {
  #detailModalInner { grid-template-columns:1fr; }
  .dm-left { border-right:none; border-bottom:1px solid var(--border); }
  .dm-help { padding:0 1.5rem 1.5rem; border-top:1px solid var(--border); padding-top:1.2rem; }
  .dm-help-card { position:static; }
  .dm-highlights { grid-template-columns:1fr; }
  .dm-spec-icons { grid-template-columns:1fr 1fr; }
  .dm-cta { grid-template-columns:1fr; }
  .dw-extra { grid-template-columns:1fr; }
  .dm-related-grid { grid-template-columns:repeat(2,1fr); }
  .dm-includes { grid-template-columns:1fr; }
}
@media(max-width:768px) {
  .products-grid { grid-template-columns:repeat(2,1fr); gap:.8rem; }
  .products-toolbar { padding:.7rem; flex-direction:column; align-items:stretch; }
  /* Los filtros se partian en 3 filas apiladas — ahora es una sola fila
     que se desliza horizontalmente, mismo patron que usan las cintas de
     categorias/tabs en apps de compras mobile. */
  .pf-tabs-wrap { flex-wrap:nowrap; overflow-x:auto; gap:.4rem; padding-bottom:.3rem; -webkit-overflow-scrolling:touch; scrollbar-width:none; min-width:0; width:100%; }
  .pf-tabs-wrap::-webkit-scrollbar { display:none; }
  .pf-tab { flex-shrink:0; }
  .toolbar-right { justify-content:space-between; }
  /* Tarjeta compacta: solo las 2 acciones principales entran comodas
     en una columna angosta — Ver detalle ya se abre tocando la imagen
     o el nombre, Comparar sigue disponible en desktop/tablet. */
  .pc-btn-detail, .pc-btn-compare { display:none; }
  .pc-btn-cart { font-size:.78rem; }
  .pc-highlights-preview { display:none; }
  .pc-short-desc { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .pc-body { padding:.7rem; gap:.35rem; }
  .pc-header { height:120px; min-height:120px; max-height:120px; padding:.7rem; }
  .pc-stars-row { margin:0; }
  .pc-price-row { gap:.3rem; padding-top:.3rem; }
}
@media(max-width:480px) {
  .pc-name { font-size:.85rem; }
  .pc-price { font-size:1.05rem; }
}