/**
 * styles.css — Hoja de estilos completa de MDC · Maquinaria de Chiapas.
 *
 * Los colores de marca viven en :root y el panel de administración los
 * sobreescribe en caliente, así que evita fijar el amarillo a mano.
 */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --y:#F5C400;--yd:#D4A900;
  --bg:#F2F2F2;--white:#fff;
  --dark:#1A1A1A;--text:#333;--muted:#5F5F5F;--light:#767676;
  --border:#E0E0E0;--border2:#CACACA;
  --red:#D32F2F;--green:#2E7D32;--blue:#1565C0;
  --radius:8px;
}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--text);font-size:14px;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font-family:inherit}
:focus-visible{outline:2px solid var(--y);outline-offset:2px;border-radius:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-999px;top:0;z-index:999;background:var(--y);color:var(--dark);padding:10px 16px;font-weight:600;border-radius:0 0 6px 0}
.skip-link:focus{left:0}

/* ── TOP BAR ── */
.topbar{background:var(--dark);color:#b5b5b5;font-size:12px;padding:6px 0}
.topbar-inner{max-width:1280px;margin:0 auto;padding:0 20px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.topbar a,.topbar button{color:#b5b5b5;text-decoration:none;background:none;border:none;font-size:12px;cursor:pointer;padding:0}
.topbar a:hover,.topbar button:hover{color:var(--y);text-decoration:underline}
.topbar-links{display:flex;gap:20px;align-items:center}

/* ── HEADER ── */
header{background:var(--dark);padding:12px 0;position:sticky;top:0;z-index:200;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.header-inner{max-width:1280px;margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;white-space:nowrap}
.logo-text{font-size:22px;font-weight:700;color:var(--white);letter-spacing:-0.5px}
.logo-text span{color:var(--y)}
.logo-sub{font-size:10px;color:#999;letter-spacing:1px;text-transform:uppercase;display:block;font-weight:500;margin-top:1px}
.logo-img{height:40px;width:auto;max-width:180px;object-fit:contain;display:block}

.search-wrap{flex:1;display:flex;min-width:240px;max-width:660px;height:40px}
.search-cat{background:#2A2A2A;border:none;border-right:1px solid #444;color:#ddd;padding:0 14px;font-size:13px;cursor:pointer;white-space:nowrap;border-radius:6px 0 0 6px}
.search-input{flex:1;min-width:0;border:none;padding:0 16px;font-size:14px;background:#fff;outline:none;color:var(--text)}
.search-input:focus{box-shadow:inset 0 0 0 2px var(--y)}
.search-btn{background:var(--y);border:none;padding:0 20px;cursor:pointer;font-size:18px;border-radius:0 6px 6px 0;transition:background .2s}
.search-btn:hover{background:var(--yd)}

.header-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.hbtn{background:transparent;border:1px solid #444;color:#ddd;padding:8px 14px;font-size:12px;cursor:pointer;border-radius:6px;white-space:nowrap;transition:all .2s;display:flex;align-items:center;gap:6px;text-decoration:none}
.hbtn:hover{border-color:var(--y);color:var(--y)}
.hbtn.primary{background:var(--y);border-color:var(--y);color:var(--dark);font-weight:600}
.hbtn.primary:hover{background:var(--yd);border-color:var(--yd);color:var(--dark)}
.cart-btn{position:relative}
.cart-badge{position:absolute;top:-6px;right:-6px;background:var(--red);color:#fff;font-size:10px;font-weight:700;min-width:18px;height:18px;padding:0 4px;border-radius:9px;display:flex;align-items:center;justify-content:center}
.cart-badge[hidden]{display:none}

/* ── BARRA ADMIN ── */
.admin-bar{background:#0B3D2E;color:#CDEFE0;font-size:12px;padding:8px 20px;display:none;align-items:center;gap:14px;flex-wrap:wrap}
body.is-admin .admin-bar{display:flex}
.admin-bar strong{color:#7EE2B8}
.admin-bar button{background:#7EE2B8;color:#08281E;border:none;border-radius:5px;padding:5px 12px;font-size:12px;font-weight:600;cursor:pointer}
.admin-bar button.ghost{background:transparent;color:#CDEFE0;border:1px solid #3D7A63}
.admin-bar .spacer{margin-left:auto}

/* ── NAV CATS ── */
.nav-cats{background:var(--white);border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:thin}
.nav-cats-inner{max-width:1280px;margin:0 auto;padding:0 20px;display:flex;white-space:nowrap}
.nav-cat{padding:10px 16px;font-size:13px;font-weight:500;color:var(--muted);background:none;border:none;cursor:pointer;border-bottom:2px solid transparent;transition:all .2s}
.nav-cat:hover{color:var(--dark);border-bottom-color:var(--border2)}
.nav-cat[aria-current="true"]{color:var(--dark);border-bottom-color:var(--y);font-weight:600}

/* ── HERO ── */
.hero-banner{background:linear-gradient(135deg,#1A1A1A 0%,#2C2C2C 100%);padding:36px 20px;position:relative;overflow:hidden}
.hero-banner::after{content:'';position:absolute;right:0;top:0;bottom:0;width:45%;pointer-events:none;background:repeating-linear-gradient(-45deg,transparent,transparent 20px,rgba(245,196,0,.04) 20px,rgba(245,196,0,.04) 40px)}
.hero-inner{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:2rem;position:relative;z-index:1}
.hero-tag{font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--y);margin-bottom:10px}
.hero-h{font-size:32px;font-weight:700;color:#fff;line-height:1.2;margin-bottom:10px}
.hero-h span{color:var(--y)}
.hero-p{font-size:14px;color:#bbb;margin-bottom:20px;max-width:440px}
.hero-btns{display:flex;gap:10px;flex-wrap:wrap}
.hbtn-lg{padding:12px 24px;font-size:14px;font-weight:600;border-radius:6px;cursor:pointer;text-decoration:none;display:inline-block;border:none}
.hbtn-lg.yel{background:var(--y);color:var(--dark)}
.hbtn-lg.yel:hover{background:var(--yd)}
.hbtn-lg.out{background:transparent;color:#ddd;border:1px solid #666}
.hbtn-lg.out:hover{border-color:var(--y);color:var(--y)}
.hero-badges{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}
.badge{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:#ddd;padding:6px 12px;border-radius:20px;font-size:12px;display:flex;align-items:center;gap:6px}
.badge span{color:var(--y);font-weight:600}
.hero-art{flex-shrink:0;opacity:.9}
.hero-art svg{width:340px;height:auto}
.hero-art img{width:340px;height:auto;border-radius:10px;display:block}

/* ── LAYOUT ── */
.main{max-width:1280px;margin:0 auto;padding:24px 20px;display:grid;grid-template-columns:250px 1fr;gap:24px;scroll-margin-top:110px}

/* ── SIDEBAR ── */
.filter-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:16px;position:sticky;top:130px}
.filter-title{font-size:14px;font-weight:600;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:8px}
.filter-title button{font-size:11px;color:var(--blue);background:none;border:none;cursor:pointer;text-decoration:underline}
.filter-group{margin-bottom:16px}
.filter-group:last-child{margin-bottom:0}
.filter-group-title{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.filter-opt{display:flex;align-items:center;gap:8px;padding:5px 0;cursor:pointer;font-size:13px}
.filter-opt input{accent-color:var(--y);width:15px;height:15px;cursor:pointer;flex-shrink:0}
.filter-opt:hover{color:var(--dark)}
.filter-opt.disabled{opacity:.45;cursor:not-allowed}
.filter-count{margin-left:auto;color:var(--light);font-size:11px;font-variant-numeric:tabular-nums}
.price-inputs{display:flex;gap:8px;align-items:center}
.price-input{flex:1;min-width:0;border:1px solid var(--border2);border-radius:4px;padding:7px 10px;font-size:13px;outline:none;color:var(--text)}
.price-input:focus{border-color:var(--y)}
.price-sep{color:var(--muted);font-size:13px}
.price-hint{font-size:11px;color:var(--light);margin-top:6px}

/* ── RESULTADOS ── */
.results-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:10px}
.results-count{font-size:13px;color:var(--muted)}
.results-count strong{color:var(--dark)}
.results-sort{display:flex;align-items:center;gap:8px;font-size:13px}
.sort-sel{border:1px solid var(--border2);border-radius:4px;padding:6px 10px;font-size:13px;background:var(--white);color:var(--text);cursor:pointer;outline:none}
.sort-sel:focus{border-color:var(--y)}
.view-btns{display:flex;gap:4px}
.view-btn{width:32px;height:32px;border:1px solid var(--border2);background:var(--white);border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;transition:all .2s;color:var(--text)}
.view-btn:hover{border-color:var(--dark)}
.view-btn[aria-pressed="true"]{background:var(--y);border-color:var(--y)}
.filters-toggle{display:none;align-items:center;gap:6px;background:var(--white);border:1px solid var(--border2);border-radius:6px;padding:7px 12px;font-size:13px;cursor:pointer;color:var(--text)}
.filters-toggle strong{background:var(--y);color:var(--dark);border-radius:10px;padding:0 6px;font-size:11px}

.active-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.active-filters:empty{display:none}
.af-tag{background:var(--white);border:1px solid var(--border2);border-radius:20px;padding:4px 6px 4px 12px;font-size:12px;display:flex;align-items:center;gap:4px;color:var(--text)}
.af-tag button{background:none;border:none;cursor:pointer;color:var(--muted);font-size:15px;line-height:1;padding:0 4px}
.af-tag button:hover{color:var(--red)}
.af-clear{background:none;border:none;color:var(--blue);font-size:12px;cursor:pointer;text-decoration:underline;padding:4px}

/* ── GRID ── */
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pcard{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:box-shadow .2s,transform .15s,border-color .2s;display:flex;flex-direction:column;position:relative}
.pcard:hover{box-shadow:0 4px 20px rgba(0,0,0,.12);transform:translateY(-2px);border-color:var(--border2)}
.pcard:focus-within{border-color:var(--y)}
.pcard-img{background:#F8F8F8;height:180px;display:flex;align-items:center;justify-content:center;position:relative;border-bottom:1px solid var(--border);overflow:hidden}
.pcard-img svg{width:auto;height:140px}
/* contain, no cover: una excavadora recortada deja fuera justo el brazo o la
   cuchara. Además cover en una caja alta AMPLÍA la foto hasta verse borrosa. */
.pcard-img img{width:100%;height:100%;object-fit:contain;display:block;padding:10px}
.pcard-badge{position:absolute;top:10px;left:10px;font-size:10px;font-weight:700;padding:3px 8px;border-radius:3px;text-transform:uppercase;letter-spacing:.5px;z-index:2}
.badge-new{background:#E3F2FD;color:var(--blue)}
.badge-used{background:#FFF3E0;color:#B34700}
.badge-hot{background:#FFEBEE;color:var(--red)}
.badge-rent{background:#E8F5E9;color:var(--green)}
.pcard-fav{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.92);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:15px;cursor:pointer;transition:all .2s;color:var(--muted);z-index:3}
.pcard-fav:hover{background:#FFEBEE;border-color:#FFCDD2;color:var(--red)}
.pcard-fav[aria-pressed="true"]{background:#FFEBEE;border-color:#FFCDD2;color:var(--red)}
.pcard-edit{position:absolute;top:44px;right:8px;width:30px;height:30px;border-radius:50%;background:#0B3D2E;border:none;color:#7EE2B8;display:none;align-items:center;justify-content:center;font-size:13px;cursor:pointer;z-index:3}
body.is-admin .pcard-edit{display:flex}
.pcard-edit:hover{background:#155F47}

.pcard-body{padding:12px;flex:1;display:flex;flex-direction:column;gap:4px}
.pcard-cat{font-size:11px;color:var(--light);text-transform:uppercase;letter-spacing:.5px}
.pcard-name{font-size:14px;font-weight:600;line-height:1.35;color:var(--dark);background:none;border:none;padding:0;text-align:left;cursor:pointer;font-family:inherit}
.pcard-name::after{content:'';position:absolute;inset:0}
.pcard-name:hover{color:#000;text-decoration:underline}
.pcard-meta{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pcard-seller-tag{background:#E8F5E9;color:var(--green);padding:1px 6px;border-radius:3px;font-size:10px;font-weight:600}
.pcard-specs-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.pcard-spec{font-size:11px;background:#F5F5F5;padding:3px 7px;border-radius:3px;color:var(--muted)}
.pcard-price-area{padding:8px 12px 12px;border-top:1px solid var(--border);margin-top:auto}
.pcard-price{font-size:20px;font-weight:700;color:var(--dark);display:inline}
.pcard-price small{font-size:13px;font-weight:500}
.pcard-original{font-size:12px;color:var(--light);text-decoration:line-through;margin-left:4px}
.pcard-disc{font-size:12px;color:var(--red);font-weight:600;margin-left:4px}
.pcard-finance,.pcard-shipping{font-size:12px;color:var(--green);margin-top:2px}
.pcard-actions{display:flex;gap:8px;margin-top:10px;position:relative;z-index:1}
.btn-add{flex:1;background:var(--y);border:none;padding:9px;font-size:13px;font-weight:600;border-radius:6px;cursor:pointer;color:var(--dark);transition:background .2s}
.btn-add:hover{background:var(--yd)}
.btn-quote{border:1px solid var(--border2);background:var(--white);padding:9px 12px;border-radius:6px;cursor:pointer;font-size:12px;color:var(--text);transition:all .2s;white-space:nowrap}
.btn-quote:hover{border-color:var(--dark);color:var(--dark)}

.product-grid.list{grid-template-columns:1fr}
.list .pcard{flex-direction:row;align-items:stretch}
.list .pcard-img{width:230px;height:auto;min-height:170px;flex-shrink:0;border-bottom:none;border-right:1px solid var(--border)}
.list .pcard-img svg{height:110px}
.list .pcard-body{padding:16px}
.list .pcard-price-area{border-top:none;border-left:1px solid var(--border);width:250px;flex-shrink:0;display:flex;flex-direction:column;justify-content:center;padding:16px;margin-top:0}
.list .pcard-actions{flex-direction:column}

.empty-state{grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--muted);background:var(--white);border:1px dashed var(--border2);border-radius:var(--radius)}
.empty-state .icon{font-size:44px;margin-bottom:12px}
.empty-state h3{font-size:16px;color:var(--dark);margin-bottom:6px}
.empty-state button{margin-top:14px;background:var(--y);border:none;padding:9px 18px;border-radius:6px;font-weight:600;cursor:pointer;color:var(--dark)}

.pagination{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:28px;flex-wrap:wrap}
.pag-btn{min-width:36px;height:36px;padding:0 8px;border:1px solid var(--border2);background:var(--white);border-radius:6px;cursor:pointer;font-size:13px;color:var(--text);transition:all .2s;display:flex;align-items:center;justify-content:center}
.pag-btn:hover:not(:disabled){border-color:var(--dark)}
.pag-btn[aria-current="page"]{background:var(--y);border-color:var(--y);color:var(--dark);font-weight:700}
.pag-btn:disabled{opacity:.4;cursor:not-allowed}
.pag-gap{color:var(--light);padding:0 2px}

/* ── DRAWERS ── */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:400;opacity:0;pointer-events:none;transition:opacity .3s}
.overlay.open{opacity:1;pointer-events:all}
.cart-drawer{position:fixed;right:0;top:0;bottom:0;width:420px;max-width:100%;background:var(--white);z-index:500;display:flex;flex-direction:column;transition:transform .3s ease;box-shadow:-4px 0 20px rgba(0,0,0,.15);transform:translateX(100%);visibility:hidden}
.cart-drawer.open{transform:translateX(0);visibility:visible}
.cart-header{padding:20px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:12px}
.cart-header h2{font-size:16px;font-weight:600}
.cart-close{background:none;border:none;font-size:24px;cursor:pointer;color:var(--muted);line-height:1;padding:0 4px}
.cart-close:hover{color:var(--dark)}
.cart-items{flex:1;overflow-y:auto;padding:16px}
.cart-empty{text-align:center;padding:40px 20px;color:var(--muted)}
.cart-empty-icon{font-size:48px;margin-bottom:12px;opacity:.4}
.cart-item{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}
.cart-item-img{width:70px;height:70px;background:#F8F8F8;border-radius:6px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
.cart-item-img svg{width:auto;height:48px}
.cart-item-img img{width:100%;height:100%;object-fit:cover}
.cart-item-info{flex:1;min-width:0}
.cart-item-name{font-size:13px;font-weight:500;line-height:1.4;margin-bottom:4px}
.cart-item-price{font-size:15px;font-weight:700;color:var(--dark)}
.cart-item-price small{font-size:12px;font-weight:500;color:var(--muted)}
.cart-item-qty{display:flex;align-items:center;gap:8px;margin-top:8px}
.qty-btn{width:28px;height:28px;border:1px solid var(--border2);background:var(--white);border-radius:4px;cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;color:var(--text)}
.qty-btn:hover{background:var(--bg)}
.qty-num{font-size:13px;font-weight:600;min-width:22px;text-align:center;font-variant-numeric:tabular-nums}
.cart-item-del{color:var(--light);background:none;border:none;cursor:pointer;font-size:15px;margin-left:auto;align-self:flex-start;padding:2px}
.cart-item-del:hover{color:var(--red)}
.cart-footer{padding:16px;border-top:1px solid var(--border);background:var(--white)}
.cart-row{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:4px 0}
.cart-row.total{font-size:16px;font-weight:700;border-top:1px solid var(--border);margin-top:8px;padding-top:10px}
.cart-note{font-size:11px;color:var(--light);margin:8px 0 12px;line-height:1.5}
.btn-checkout{width:100%;background:var(--y);border:none;padding:14px;font-size:15px;font-weight:700;border-radius:6px;cursor:pointer;color:var(--dark);transition:background .2s;margin-bottom:8px}
.btn-checkout:hover:not(:disabled){background:var(--yd)}
.btn-checkout:disabled{opacity:.5;cursor:not-allowed}
.btn-quote-all{width:100%;background:var(--white);border:1px solid var(--dark);padding:12px;font-size:14px;font-weight:600;border-radius:6px;cursor:pointer;color:var(--dark);transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
.btn-quote-all:hover{background:var(--dark);color:#fff}
.btn-quote-all[aria-disabled="true"]{opacity:.5}

.filter-drawer{position:fixed;left:0;top:0;bottom:0;width:300px;max-width:85%;background:var(--white);z-index:500;transform:translateX(-100%);visibility:hidden;transition:transform .3s ease;overflow-y:auto;box-shadow:4px 0 20px rgba(0,0,0,.15)}
.filter-drawer.open{transform:translateX(0);visibility:visible}
.filter-drawer .filter-card{border:none;border-radius:0;position:static}

/* ── MODAL PRODUCTO ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:600;opacity:0;pointer-events:none;transition:opacity .3s;display:flex;align-items:center;justify-content:center;padding:20px}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal{background:var(--white);border-radius:10px;width:100%;max-width:880px;max-height:90vh;overflow-y:auto;position:relative;transform:translateY(20px);transition:transform .3s}
.modal-overlay.open .modal{transform:translateY(0)}
.modal-close{position:absolute;top:12px;right:14px;font-size:26px;background:rgba(255,255,255,.9);border:1px solid var(--border);width:34px;height:34px;border-radius:50%;cursor:pointer;color:var(--muted);z-index:10;line-height:1;display:flex;align-items:center;justify-content:center}
.modal-close:hover{color:var(--dark);border-color:var(--border2)}
.modal-grid{display:grid;grid-template-columns:1fr 1fr;min-height:400px}
/* align-self:start impide que la columna de la foto se estire a lo alto de la
   información —que con el simulador es larguísima— y deforme la imagen.
   Sticky la deja a la vista mientras el cliente lee las especificaciones. */
.modal-img{background:#F5F5F5;display:flex;align-items:center;justify-content:center;padding:32px;border-right:1px solid var(--border);border-radius:10px 0 0 10px;overflow:hidden;align-self:start;position:sticky;top:0}
.modal-img svg{width:100%;max-width:280px;height:auto}
.modal-img img{width:100%;height:100%;object-fit:contain;border-radius:10px 0 0 10px}
.modal-img.has-photo{padding:0;display:block}

/* ── Galería de la ficha: foto grande + miniaturas ── */
/* Proporción fija en vez de "el alto que sobre": así la foto siempre se ve
   entera y el hueco no cambia de tamaño al pasar de una imagen a otra. */
.gal{position:relative;background:#F5F5F5;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center}
.gal-main{width:100%;height:100%;object-fit:contain;display:block;border-radius:10px 0 0 0}
.gal-nav{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.9);border:none;font-size:22px;line-height:1;color:#1A1A1A;cursor:pointer;
  display:flex;align-items:center;justify-content:center;z-index:2}
.gal-nav:hover{background:#fff}
.gal-nav.prev{left:10px}
.gal-nav.next{right:10px}
.gal-count{position:absolute;bottom:10px;right:10px;background:rgba(0,0,0,.65);color:#fff;
  font-size:11px;padding:3px 9px;border-radius:12px}
.gal-thumbs{display:flex;gap:6px;padding:8px;overflow-x:auto;background:var(--white);
  border-top:1px solid var(--border);height:74px}
.gal-thumb{flex:0 0 auto;width:72px;height:56px;border:2px solid transparent;border-radius:6px;
  overflow:hidden;padding:0;background:#F5F5F5;cursor:pointer}
.gal-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.gal-thumb.on{border-color:var(--y)}
.pcard-fotos{position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,.65);color:#fff;
  font-size:10px;font-weight:600;padding:3px 8px;border-radius:12px;z-index:2}
.modal-info{padding:28px;min-width:0}
.modal-cat{font-size:11px;color:var(--light);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.modal-name{font-size:22px;font-weight:700;line-height:1.25;margin-bottom:8px}
.modal-seller-row{display:flex;align-items:center;gap:8px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.modal-seller{font-size:12px;color:var(--muted)}
.modal-verified{background:#E8F5E9;color:var(--green);padding:2px 8px;border-radius:3px;font-size:11px;font-weight:600}
.modal-price-area{margin-bottom:16px}
.modal-price{font-size:28px;font-weight:700}
.modal-price small{font-size:15px;font-weight:500;color:var(--muted)}
.modal-price-sub{font-size:13px;color:var(--green);margin-top:4px}
.modal-specs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:20px}
.modal-spec{background:#F8F8F8;border-radius:6px;padding:10px 12px}
.modal-spec-label{font-size:11px;color:var(--muted);margin-bottom:3px}
.modal-spec-val{font-size:13px;font-weight:600}
.modal-desc{font-size:13px;color:var(--muted);line-height:1.7;margin-bottom:20px;white-space:pre-line}
.modal-actions{display:flex;gap:10px;flex-wrap:wrap}
.modal-add{flex:1;min-width:180px;background:var(--y);border:none;padding:13px;font-size:14px;font-weight:700;border-radius:6px;cursor:pointer;color:var(--dark)}
.modal-add:hover{background:var(--yd)}
.modal-quote{border:1px solid var(--border2);background:var(--white);padding:13px 20px;border-radius:6px;cursor:pointer;font-size:13px;color:var(--text)}
.modal-quote:hover{border-color:var(--dark)}

/* ══ PANEL ADMIN ══ */
.admin-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:800;display:none;align-items:flex-start;justify-content:center;padding:20px;overflow-y:auto}
.admin-overlay.open{display:flex}
.admin-panel{background:var(--white);border-radius:10px;width:100%;max-width:1000px;margin:auto;position:relative;overflow:hidden}
.admin-head{background:var(--dark);color:#fff;padding:16px 20px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.admin-head h2{font-size:16px;font-weight:600}
.admin-head .tag{background:#0B3D2E;color:#7EE2B8;font-size:11px;padding:3px 8px;border-radius:4px;font-weight:600}
.admin-head .close{margin-left:auto;background:none;border:1px solid #555;color:#ddd;width:32px;height:32px;border-radius:6px;cursor:pointer;font-size:20px;line-height:1}
.admin-head .close:hover{border-color:var(--y);color:var(--y)}
.admin-tabs{display:flex;background:#F8F8F8;border-bottom:1px solid var(--border);overflow-x:auto}
/* El atributo hidden vale display:none, pero cualquier display del autor le gana.
   Sin esta línea, `hidden = true` no esconde nada: las pestañas del panel seguían
   a la vista en la pantalla de acceso, y desde ahí se entraba sin contraseña. */
.admin-tabs[hidden]{display:none}
.admin-tab{padding:12px 18px;background:none;border:none;border-bottom:2px solid transparent;font-size:13px;font-weight:500;color:var(--muted);cursor:pointer;white-space:nowrap}
.admin-tab:hover{color:var(--dark)}
.admin-tab[aria-selected="true"]{color:var(--dark);border-bottom-color:var(--y);font-weight:600;background:var(--white)}
.admin-body{padding:20px;max-height:calc(100vh - 220px);overflow-y:auto}

.adm-toolbar{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.adm-search{flex:1;min-width:180px;border:1px solid var(--border2);border-radius:6px;padding:8px 12px;font-size:13px;outline:none}
.adm-search:focus{border-color:var(--y)}
.btn-primary{background:var(--y);border:none;color:var(--dark);font-weight:600;font-size:13px;padding:9px 16px;border-radius:6px;cursor:pointer}
.btn-primary:hover{background:var(--yd)}
.btn-ghost{background:var(--white);border:1px solid var(--border2);color:var(--text);font-size:13px;padding:9px 14px;border-radius:6px;cursor:pointer}
.btn-ghost:hover{border-color:var(--dark)}
.btn-danger{background:#FFF0F0;border:1px solid #F3C9C9;color:var(--red);font-size:13px;padding:9px 14px;border-radius:6px;cursor:pointer}
.btn-danger:hover{background:var(--red);color:#fff;border-color:var(--red)}

.adm-table{width:100%;border-collapse:collapse;font-size:13px}
.adm-table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);padding:8px;border-bottom:1px solid var(--border)}
.adm-table td{padding:8px;border-bottom:1px solid var(--border);vertical-align:middle}
.adm-table tr:hover td{background:#FAFAFA}
.adm-thumb{width:52px;height:40px;object-fit:cover;display:block}
.adm-thumb-wrap{width:52px;height:40px;border-radius:4px;background:#F5F5F5;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;overflow:hidden}
.adm-thumb-wrap svg{height:30px;width:auto}
.adm-row-actions{display:flex;gap:6px;justify-content:flex-end}
.icon-btn{border:1px solid var(--border2);background:var(--white);border-radius:5px;width:30px;height:30px;cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center}
.icon-btn:hover{border-color:var(--dark)}
.icon-btn.del:hover{border-color:var(--red);color:var(--red)}
.pill{font-size:11px;padding:2px 8px;border-radius:10px;font-weight:600;white-space:nowrap}
.pill.nuevo{background:#E3F2FD;color:var(--blue)}
.pill.usado{background:#FFF3E0;color:#B34700}
.pill.renta{background:#E8F5E9;color:var(--green)}

.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.field{display:flex;flex-direction:column;gap:5px}
.field.full{grid-column:1/-1}
.field label{font-size:12px;font-weight:600;color:var(--muted)}
.field .hint{font-size:11px;color:var(--light);font-weight:400}
.field input[type=text],.field input[type=number],.field select,.field textarea{
  border:1px solid var(--border2);border-radius:6px;padding:9px 11px;font-size:13px;outline:none;color:var(--text);background:var(--white);width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--y)}
.field textarea{resize:vertical;min-height:88px;line-height:1.6}
.field.err input,.field.err textarea{border-color:var(--red)}
.field .errmsg{font-size:11px;color:var(--red);display:none}
.field.err .errmsg{display:block}
.checks{display:flex;gap:18px;flex-wrap:wrap}
.check{display:flex;align-items:center;gap:7px;font-size:13px;cursor:pointer}
.check input{accent-color:var(--y);width:16px;height:16px;cursor:pointer}

.dropzone{border:2px dashed var(--border2);border-radius:8px;padding:18px;text-align:center;cursor:pointer;transition:all .2s;background:#FAFAFA}
.dropzone:hover,.dropzone.drag{border-color:var(--y);background:#FFFDF2}
.dropzone .dz-icon{font-size:28px;margin-bottom:6px}
.dropzone p{font-size:12px;color:var(--muted)}
.dropzone strong{color:var(--dark)}
.img-preview{position:relative;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:#F5F5F5}
.img-preview img{width:100%;max-height:220px;object-fit:contain;display:block}
.img-preview .rm{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.7);color:#fff;border:none;border-radius:6px;padding:5px 10px;font-size:12px;cursor:pointer}
.img-preview .rm:hover{background:var(--red)}
.img-meta{font-size:11px;color:var(--light);padding:6px 10px;background:var(--white);border-top:1px solid var(--border)}

/* ── Galería en el panel: rejilla de fotos con orden y borrado ── */
.fotos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.foto-item{position:relative;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:#F5F5F5;margin:0}
.foto-item.portada{border-color:var(--y);box-shadow:0 0 0 2px var(--y)}
.foto-item img{width:100%;height:100px;object-fit:cover;display:block}
.foto-tag{position:absolute;top:6px;left:6px;background:var(--y);color:#1A1A1A;font-size:10px;font-weight:700;padding:2px 7px;border-radius:4px}
.foto-tools{position:absolute;top:6px;right:6px;display:flex;gap:3px}
.foto-tools button{background:rgba(0,0,0,.72);color:#fff;border:none;border-radius:5px;width:24px;height:24px;font-size:11px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.foto-tools button:hover:not(:disabled){background:#000}
.foto-tools button:disabled{opacity:.3;cursor:default}
.foto-tools .rm:hover{background:var(--red)}
.foto-peso{font-size:10px;color:var(--light);padding:4px 8px;background:var(--white);border-top:1px solid var(--border)}
.dropzone.compacta{padding:16px;margin-top:12px}
.dropzone.compacta .dz-icon{font-size:22px}

.form-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;padding-top:16px;border-top:1px solid var(--border);flex-wrap:wrap}
.adm-note{background:#FFF8E1;border:1px solid #FFE9A8;border-radius:8px;padding:12px 14px;font-size:12px;line-height:1.6;color:#6B5400;margin-bottom:16px}
.adm-note strong{color:#4A3A00}
.adm-section{margin-bottom:26px}
.adm-section h3{font-size:14px;margin-bottom:4px}
.adm-section .sub{font-size:12px;color:var(--light);margin-bottom:12px}
.storage-bar{height:8px;background:var(--border);border-radius:4px;overflow:hidden;margin:8px 0 4px}
.storage-bar div{height:100%;background:var(--green);transition:width .3s}
.storage-bar.warn div{background:#E68A00}
.storage-bar.full div{background:var(--red)}

.login-box{max-width:340px;margin:20px auto;text-align:center}
.login-box .dz-icon{font-size:40px;margin-bottom:10px}
.login-box h3{font-size:16px;margin-bottom:6px}
.login-box p{font-size:12px;color:var(--muted);margin-bottom:16px;line-height:1.6}
.login-box input{width:100%;text-align:center;letter-spacing:8px;font-size:20px;padding:12px;border:1px solid var(--border2);border-radius:8px;outline:none}
.login-box input:focus{border-color:var(--y)}
.login-box .err{color:var(--red);font-size:12px;margin-top:8px;min-height:18px}

/* ── TOAST ── */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(140px);background:var(--dark);color:#fff;padding:12px 24px;border-radius:8px;font-size:13px;font-weight:500;z-index:900;transition:transform .3s;display:flex;align-items:center;gap:8px;max-width:90vw}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast.error{background:#7A1B1B}
.toast-icon{color:var(--y);flex-shrink:0}

/* ── FOOTER ── */
footer{background:var(--dark);color:#aaa;margin-top:40px;padding:32px 20px;font-size:13px}
.footer-inner{max-width:1280px;margin:0 auto;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
footer a{color:#aaa;text-decoration:none}
footer a:hover{color:var(--y);text-decoration:underline}
.footer-col h4{color:#fff;font-size:13px;margin-bottom:10px}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:6px}
.footer-legal{max-width:1280px;margin:24px auto 0;padding-top:16px;border-top:1px solid #333;font-size:11px;color:#777}

/* ══ PÁGINAS (Ayuda, Sucursales, Vender, Cuenta, Privacidad) ══ */
.page-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:650;display:none;align-items:flex-start;justify-content:center;padding:20px;overflow-y:auto}
.page-overlay.open{display:flex}
.page-panel{background:var(--white);border-radius:10px;width:100%;max-width:720px;margin:auto;position:relative;overflow:hidden}
.page-head{background:var(--dark);color:#fff;padding:18px 22px;display:flex;align-items:center;gap:12px}
.page-head h2{font-size:17px;font-weight:600}
.page-head .close{margin-left:auto;background:none;border:1px solid #555;color:#ddd;width:32px;height:32px;border-radius:6px;cursor:pointer;font-size:20px;line-height:1;flex-shrink:0}
.page-head .close:hover{border-color:var(--y);color:var(--y)}
.page-body{padding:22px;max-height:calc(100vh - 180px);overflow-y:auto}
.page-intro{font-size:13px;color:var(--muted);line-height:1.7;margin-bottom:18px}
.page-body h3{font-size:14px;margin:20px 0 8px}
.page-body h3:first-child{margin-top:0}
.page-body p{font-size:13px;line-height:1.7;color:var(--muted)}

/* FAQ */
.faq{border:1px solid var(--border);border-radius:8px;overflow:hidden}
.faq details{border-bottom:1px solid var(--border)}
.faq details:last-child{border-bottom:none}
.faq summary{padding:14px 16px;cursor:pointer;font-weight:600;font-size:13px;list-style:none;display:flex;align-items:center;gap:10px;color:var(--dark)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:'+';color:var(--y);font-weight:700;font-size:17px;width:14px;flex-shrink:0}
.faq details[open] summary::before{content:'−'}
.faq summary:hover{background:#FAFAFA}
.faq .ans{padding:0 16px 14px 40px;font-size:13px;color:var(--muted);line-height:1.7}

/* Sucursales */
.branch{border:1px solid var(--border);border-radius:8px;padding:16px;margin-bottom:12px}
.branch h3{font-size:14px;margin:0 0 8px;display:flex;align-items:center;gap:8px}
.branch h3 .dot{width:8px;height:8px;border-radius:50%;background:var(--y);flex-shrink:0}
.branch p{font-size:13px;color:var(--muted);line-height:1.7}
.branch .links{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.branch .links a{font-size:12px;color:var(--text);text-decoration:none;border:1px solid var(--border2);border-radius:6px;padding:6px 12px}
.branch .links a:hover{border-color:var(--dark);background:#FAFAFA}

/* Cuenta y solicitudes */
.acct-card{background:#F8F8F8;border-radius:8px;padding:14px 16px;margin-bottom:16px;font-size:13px;line-height:1.8}
.acct-card strong{color:var(--dark)}
.req-item{border:1px solid var(--border);border-radius:8px;padding:10px 14px;margin-bottom:8px;font-size:12px;line-height:1.6}
.req-item .when{color:var(--light);font-size:11px}
.privacy-note{background:#F1F6FF;border:1px solid #CFE0FA;border-radius:8px;padding:12px 14px;font-size:12px;color:#1B3B66;line-height:1.6;margin-top:16px}
.send-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;padding-top:16px;border-top:1px solid var(--border)}
.send-row .btn-primary,.send-row .btn-ghost{flex:1;min-width:170px;padding:12px 16px;font-size:14px}
.cart-recap{border:1px solid var(--border);border-radius:8px;padding:12px 14px;margin-bottom:18px;font-size:13px}
.cart-recap li{list-style:none;padding:4px 0;display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--border)}
.cart-recap li:last-child{border-bottom:none;font-weight:700;color:var(--dark)}

/* Trampa para bots: invisible para personas, irresistible para robots de spam. */
.hp-field{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}

footer button{color:#aaa;background:none;border:none;padding:0;font-size:13px;cursor:pointer;text-align:left;font-family:inherit}
footer button:hover{color:var(--y);text-decoration:underline}

/* ══ FICHA DE EQUIPO (páginas estáticas generadas) ══ */
.ficha{max-width:1080px;margin:0 auto;padding:24px 20px 48px}
.miga{font-size:12px;color:var(--light);margin-bottom:20px}
.miga a{color:var(--muted);text-decoration:none}
.miga a:hover{color:var(--dark);text-decoration:underline}
.ficha-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;background:var(--white);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.ficha-media{background:#F5F5F5;display:flex;align-items:center;justify-content:center;padding:32px;border-right:1px solid var(--border);min-height:360px}
.ficha-media svg{width:100%;max-width:340px;height:auto}
.ficha-media img{width:100%;height:100%;object-fit:contain}
/* Galería de la ficha estática. Sin JavaScript: el carril hace scroll-snap y
   las miniaturas son anclas, así que funciona aunque el CSP prohíba scripts. */
.ficha-media.galeria{padding:0;display:block}
.fgal{display:flex;flex-direction:column;height:100%}
.fgal-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;flex:1;background:#111}
.fgal-track img{flex:0 0 100%;width:100%;height:100%;min-height:300px;object-fit:contain;scroll-snap-align:center;background:#F5F5F5}
.fgal-thumbs{display:flex;gap:6px;padding:8px;overflow-x:auto;background:var(--white);border-top:1px solid var(--border)}
.fgal-thumbs a{flex:0 0 auto;width:76px;height:58px;border:2px solid var(--border);border-radius:6px;overflow:hidden;display:block}
.fgal-thumbs a:hover{border-color:var(--y)}
.fgal-thumbs img{width:100%;height:100%;object-fit:cover;display:block;min-height:0}
.ficha-info{padding:32px 32px 32px 0}
.ficha-cat{font-size:11px;color:var(--light);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.ficha-info h1{font-size:26px;font-weight:700;line-height:1.25;margin-bottom:10px}
.ficha-meta{font-size:12px;color:var(--muted);margin-bottom:18px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ficha-precio{font-size:30px;font-weight:700;color:var(--dark);margin-bottom:6px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.ficha-precio small{font-size:16px;font-weight:500;color:var(--muted)}
.ficha-extra{font-size:13px;color:var(--green);margin-top:3px}
.ficha-specs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:22px 0}
.ficha-desc{font-size:14px;color:var(--muted);line-height:1.8;margin-bottom:24px;white-space:pre-line}
.ficha-acciones{display:flex;gap:10px;flex-wrap:wrap}
.ficha-acciones .btn-primary,.ficha-acciones .btn-ghost{
  padding:13px 22px;font-size:14px;text-decoration:none;display:inline-flex;align-items:center;gap:8px;
}

/* ── RESPONSIVE ── */
@media(max-width:1080px){.hero-art{display:none}}
@media(max-width:820px){
  .ficha-grid{grid-template-columns:1fr}
  .ficha-media{border-right:none;border-bottom:1px solid var(--border);min-height:0;max-height:320px}
  /* La galería trae carril + miniaturas: recortarla a 320 px las escondería. */
  .ficha-media.galeria{max-height:none}
  .fgal-track img{min-height:230px}
  .ficha-info{padding:24px}
}
@media(max-width:900px){
  .main{grid-template-columns:1fr}
  .sidebar{display:none}
  .filters-toggle{display:flex}
  .product-grid{grid-template-columns:repeat(2,1fr)}
  .modal-grid{grid-template-columns:1fr}
  .modal-img{border-right:none;border-bottom:1px solid var(--border);border-radius:10px 10px 0 0;padding:24px;position:static}
  .modal-img img{border-radius:10px 10px 0 0}
  .modal-img svg{max-width:200px}
  .list .pcard{flex-direction:column}
  .list .pcard-img{width:100%;border-right:none;border-bottom:1px solid var(--border)}
  .list .pcard-price-area{width:100%;border-left:none;border-top:1px solid var(--border)}
  .list .pcard-actions{flex-direction:row}
  .form-grid{grid-template-columns:1fr}
  .adm-table .hide-sm{display:none}
}
@media(max-width:600px){
  .product-grid{grid-template-columns:1fr}
  .topbar-links a,.hero-badges{display:none}
  .hero-h{font-size:22px}
  .header-inner{gap:10px}
  .search-wrap{order:3;flex-basis:100%;max-width:none}
  .hbtn span.label{display:none}
  .admin-overlay{padding:0}
  .admin-panel{border-radius:0;min-height:100vh}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .pcard:hover{transform:none}
}

/* ══════════════════ SIMULADOR DE FINANCIAMIENTO ══════════════════ */
.calc{border:1px solid var(--border);border-radius:10px;padding:18px;margin-top:22px;background:#FAFAFA}
.calc h3{font-size:15px;font-weight:700;margin-bottom:14px}
/* Se acomoda al ancho del CONTENEDOR, no al de la ventana: dentro del modal la
   columna es angosta aunque el monitor sea enorme, y una media query de
   viewport no se entera. Por eso auto-fit y flex-wrap en vez de columnas fijas. */
.calc{max-width:100%;min-width:0}
.calc-campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:16px}
.calc-campo label{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:6px}
.calc-campo output{color:var(--dark);font-weight:700}
.calc-campo input[type=range]{width:100%;accent-color:var(--y)}
.calc-campo select,.calc-tasa input{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:6px;font:inherit;font-size:13px;background:var(--white)}
.calc-tasa{display:flex;align-items:center;gap:6px}
.calc-tasa span{font-size:13px;color:var(--muted)}
.calc-salida{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;
  background:var(--white);border:1px solid var(--border);border-radius:8px;padding:16px}
.calc-mensual{flex:1 1 150px;min-width:0}
.calc-etq{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.calc-mensual strong{display:block;font-size:28px;font-weight:700;line-height:1.15;color:var(--dark)}
.calc-plazo-txt{font-size:12px;color:var(--muted)}
/* Etiqueta ARRIBA del valor, no al lado: en columna angosta el precio se salía
   de la caja. Además queda igual que las especificaciones de la ficha. */
.calc-desglose{flex:2 1 240px;min-width:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px 16px;margin:0}
.calc-desglose div{min-width:0;border-bottom:1px dotted var(--border);padding-bottom:4px}
.calc-desglose dt{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.calc-desglose dd{font-size:13px;font-weight:600;margin:2px 0 0;overflow-wrap:anywhere}
.calc-msi{font-size:12px;color:var(--green);margin-top:12px;background:#E8F5E9;border-radius:6px;padding:9px 12px}
.calc-supuestos{display:none;font-size:12px;font-weight:600;color:var(--dark);margin-top:10px}
.calc-nota{font-size:11px;color:var(--light);line-height:1.6;margin-top:12px}

/* ══════════════════ COMPARADOR ══════════════════ */
.pcard-cmp{position:absolute;top:44px;right:8px;width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,.92);border:1px solid var(--border);display:flex;align-items:center;
  justify-content:center;font-size:14px;cursor:pointer;color:var(--muted);z-index:3;transition:all .2s}
.pcard-cmp:hover{border-color:var(--dark);color:var(--dark)}
.pcard-cmp[aria-pressed="true"]{background:var(--dark);border-color:var(--dark);color:var(--y)}
body.is-admin .pcard-cmp{top:80px}

body.con-cmp{padding-bottom:78px}
.cmp-bar{position:fixed;left:0;right:0;bottom:0;background:var(--dark);color:#fff;z-index:70;
  box-shadow:0 -4px 20px rgba(0,0,0,.25)}
.cmp-bar-inner{max-width:1280px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;
  gap:12px;flex-wrap:wrap}
.cmp-chips{display:flex;gap:8px;flex:1;overflow-x:auto;min-width:0}
.cmp-chip{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.1);border-radius:8px;
  padding:5px 8px 5px 5px;flex:0 0 auto;max-width:240px}
.cmp-chip-img{width:34px;height:26px;border-radius:4px;overflow:hidden;background:#fff;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center}
.cmp-chip-img img{width:100%;height:100%;object-fit:cover}
.cmp-chip-img svg{height:20px;width:auto}
.cmp-chip-name{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmp-chip button{background:none;border:none;color:rgba(255,255,255,.65);font-size:15px;cursor:pointer;padding:0 2px}
.cmp-chip button:hover{color:#fff}
.cmp-bar-btns{display:flex;gap:8px;flex:0 0 auto}
.cmp-bar-btns .btn-ghost{background:transparent;color:rgba(255,255,255,.8);border-color:rgba(255,255,255,.3)}
.cmp-bar-btns .btn-ghost:hover{color:#fff;border-color:#fff}
.cmp-bar-btns .btn-primary:disabled{opacity:.45;cursor:not-allowed}

.cmp-wrap{overflow-x:auto}
.cmp-tabla{width:100%;border-collapse:collapse;font-size:13px;min-width:520px}
.cmp-tabla th,.cmp-tabla td{border:1px solid var(--border);padding:10px;vertical-align:top;text-align:left}
.cmp-tabla thead th{background:#FAFAFA;text-align:center;width:auto}
.cmp-tabla tbody th{background:#FAFAFA;font-size:12px;color:var(--muted);font-weight:600;width:150px}
.cmp-th-img{height:80px;display:flex;align-items:center;justify-content:center;margin-bottom:6px;overflow:hidden}
.cmp-th-img img{width:100%;height:100%;object-fit:contain;border-radius:6px}
.cmp-th-img svg{height:64px;width:auto}
.cmp-th-name{font-size:13px;font-weight:700;line-height:1.3}
.cmp-th-quita{background:none;border:none;color:var(--muted);font-size:11px;text-decoration:underline;cursor:pointer;margin-top:5px}
.cmp-gana{background:#E8F5E9;font-weight:700}
.cmp-tabla td .btn-add,.cmp-tabla td .btn-quote{width:100%;margin-bottom:5px}
.cmp-nota{font-size:11px;color:var(--light);margin-top:12px;line-height:1.6}

/* ══════════════════ IMPRESIÓN ══════════════════
   Una ficha impresa es un documento comercial: sólo el equipo, su precio y
   cómo contactar. Nada de menús, botones ni controles que en papel no sirven. */
.solo-impresion,.print-marca{display:none}
@media print{
  @page{margin:14mm}
  html,body{background:#fff!important;color:#000!important}

  /* ── Imprimir desde la aplicación ──
     Se esconde TODO lo que no sea la ficha abierta, en vez de ir nombrando
     barra por barra lo que estorba. Esa lista se queda vieja en cuanto se
     agrega una sección nueva, y el papel sale con menús encima. */
  body:has(.modal-overlay.open) > *:not(.modal-overlay){display:none!important}

  /* El modal vive en una caja con scroll propio: en papel eso RECORTA la ficha
     a la altura de la pantalla. Hay que devolverle el alto natural. */
  .modal-overlay.open{position:static!important;display:block!important;
    background:none!important;padding:0!important;opacity:1!important;
    pointer-events:auto!important;overflow:visible!important}
  .modal-overlay.open .modal{box-shadow:none!important;max-height:none!important;
    max-width:none!important;width:100%!important;overflow:visible!important;
    transform:none!important;border-radius:0!important}
  .modal-grid{display:block!important;min-height:0!important}
  .modal-info{padding:6mm 0 0!important}
  .modal-img{border:1px solid #ccc!important;border-radius:0!important;
    max-height:70mm;padding:0!important;page-break-inside:avoid}

  /* ── Imprimir una ficha estática ── */
  header,footer,.miga,.ficha-acciones{display:none!important}
  .ficha,.ficha-grid{display:block!important;box-shadow:none!important;border:none!important}
  .ficha-media{max-height:70mm;border:1px solid #ccc!important;padding:0!important;page-break-inside:avoid}
  .ficha-info{padding:6mm 0 0!important}
  .ficha-specs{page-break-inside:avoid}

  /* ── Común ── */
  .cmp-bar,.toast,.overlay,.filter-drawer,.cart-drawer,.admin-overlay,.admin-bar,
  .page-overlay,.topbar,.nav-cats,.hero-banner,.pcard-fav,.pcard-cmp,.pcard-edit,
  .modal-close,.modal-actions,.calc-campos,.skip-link{display:none!important}

  /* En papel se imprime UNA foto, y completa: recortarla puede cortar
     justamente la parte del equipo que el cliente quiere ver. */
  .gal-nav,.gal-thumbs,.gal-count,.fgal-thumbs{display:none!important}
  .gal,.fgal{height:auto!important;background:none!important}
  .fgal-track{overflow:visible!important;display:block!important}
  .fgal-track img:not(:first-child){display:none!important}
  .gal-main,.fgal-track img,.ficha-media img,.modal-img img{
    height:auto!important;max-height:70mm;object-fit:contain!important;min-height:0!important}

  .calc{page-break-inside:avoid;background:#fff!important;border:1px solid #999!important}
  .calc-salida{border:none!important}
  .calc-supuestos{display:block!important}
  .calc-nota{display:block!important;color:#333!important}

  .print-marca{display:block!important;font-size:12pt;font-weight:700;color:#000!important;
    border-bottom:2px solid #000;padding-bottom:2mm;margin-bottom:5mm;letter-spacing:.3px}
  .solo-impresion{display:block!important;font-size:9pt;line-height:1.5;white-space:pre-line;
    margin-top:10mm;padding-top:3mm;border-top:1px solid #999;color:#333}

  a[href^="http"]::after{content:" (" attr(href) ")";font-size:8pt;color:#555;word-break:break-all}
}

/* ── Página de financiamiento ── */
.fin-intro{font-size:13px;color:var(--muted);line-height:1.7;margin-bottom:16px}
.fin-selector{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:4px}
.fin-selector .field label{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:6px}
.fin-selector select,.fin-selector input{width:100%;padding:9px 10px;border:1px solid var(--border);border-radius:6px;font:inherit;font-size:13px;background:var(--white)}
.fin-acciones{margin-top:16px}
.fin-acciones .btn-primary{width:100%;padding:12px}
.fin-opciones{margin-top:26px}
.fin-opciones h3{font-size:15px;font-weight:700;margin-bottom:12px}
.fin-op{border-left:3px solid var(--y);background:#FAFAFA;padding:12px 14px;margin-bottom:10px;border-radius:0 6px 6px 0}
.fin-op strong{display:block;font-size:13px;margin-bottom:4px}
.fin-op p{font-size:12px;color:var(--muted);line-height:1.65}
@media(max-width:600px){ .fin-selector{grid-template-columns:1fr} }