/* ================================================================
   TIENDA DE AUTOPARTES — shop.css
   Config rápida de marca: edite las variables de este bloque.
   ================================================================ */
/* ----------------------------------------------------------------
   AIRE DE GOOGLE, COLORES DE LA CASA

   Se tomó de Google la MANERA, no la paleta: fondo blanco, mucho
   aire, bordes de un pelo en vez de sombras, esquinas redondas y
   botones de píldora. Los colores siguen siendo los de la tienda,
   porque un taller que compró una vez tiene que reconocerla la
   siguiente; el azul de Google lo usa medio internet.

   *** LA REGLA DEL NARANJA — no la rompa ***

   El naranja quiere decir COMPRAR: «Agregar al carrito», «Comprar
   ahora», «Proceder al pago», «Pagar». Nada más.

   Antes el naranja estaba también en el botón de buscar, en «Elige
   tu vehículo», en los enlaces del panel, al pasar el ratón por las
   facetas… y cuando cinco cosas son naranjas, ninguna es LA que hay
   que tocar. Todo eso pasó a azul marino. Lo único que conserva el
   calor son las señales de dinero —promoción, reloj de oferta— y en
   tono suave, para que no compitan con el botón.

   Si mañana agrega un botón y duda: ¿se compra algo al tocarlo? Si
   no, no lleva naranja.
   ---------------------------------------------------------------- */
:root {
  --brand:   #12365D;   /* azul taller */
  --brand-2: #0B2542;
  --brand-3: #EAF0F7;   /* azul apenas teñido: fondos y hover */
  --accent:  #E8681A;   /* naranja refacción — SÓLO para comprar */
  --accent-2:#C9550F;
  --accent-3:#FDF0E7;   /* naranja de fondo: señales de dinero */
  --bg:      #FFFFFF;
  --surface: #FFFFFF;
  --ink:     #1F2328;
  --muted:   #5F6368;
  --line:    #DADCE0;   /* el pelo de Google: se ve sin pesar */
  --line-2:  #EDEFF2;
  --ok:      #1E7E34;
  --warn:    #8A6D00;
  --bad:     #B42318;
  --radius:  12px;
  --radius-s:8px;
  --pill:    999px;
  --shadow:  0 1px 2px rgba(32,33,36,.08);
  --shadow-2:0 1px 3px rgba(32,33,36,.1), 0 4px 12px rgba(32,33,36,.12);
  --font:    "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.55; color: var(--ink); background: var(--bg); }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
/* Títulos de peso medio y buen tamaño: Google no grita en negritas. */
h1 { font-size: 30px; line-height: 1.22; margin: 0 0 18px; font-weight: 500; letter-spacing: -.2px; }
h2 { font-size: 21px; margin: 0 0 14px; font-weight: 500; }
h3 { font-size: 16px; margin: 18px 0 8px; font-weight: 500; }
img { max-width: 100%; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
main.wrap { padding-top: 28px; padding-bottom: 72px; min-height: 60vh; }
.skip { position: absolute; left: -999px; top: 0; background: #fff; padding: 8px; z-index: 100; }
.skip:focus { left: 8px; }
small, .fineprint { font-size: .86rem; color: var(--muted); }
.fineprint { margin: .5rem 0; }
.fineprint a { color: inherit; text-decoration: underline; }
code { background: #F1F3F4; padding: 2px 6px; border-radius: 6px; font-size: .9em; }
.table-wrap { overflow-x: auto; }
.hp { position: absolute; left: -9999px; }

/* ---------- Cabecera ---------- */
/* Un pelo abajo en vez de sombra: sobre fondo blanco la sombra ensucia. */
.site-head { background: var(--surface); border-bottom: 1px solid var(--line); position: relative; z-index: 20; }
.head-strip { background: var(--brand-2); color: #DCE6F2; font-size: 13px; }
.head-strip .wrap { display: flex; gap: 18px; align-items: center; min-height: 32px; flex-wrap: wrap; }
.head-strip a { color: #fff; font-weight: 600; }
.head-strip .grow { flex: 1; }
.head-main { display: flex; align-items: center; gap: 22px; padding-top: 12px; padding-bottom: 12px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--brand); }
.brand:hover { text-decoration: none; }
.brand-mark { font-size: 34px; line-height: 1; }
.brand b { display: block; font-size: 20px; letter-spacing: .3px; line-height: 1.1; }
.brand small { display: block; color: var(--muted); font-size: 12px; }
/* ---------- El buscador grande de la portada ----------
   Donde sale éste, se esconde el chico de la cabecera: dos cajas de búsqueda
   compitiendo en la misma pantalla sólo hacen dudar a quien llega. */
.buscon { background: var(--brand-2); padding: 30px 0 26px; }
.buscon form { position: relative; }
.buscon-tit { display: block; color: #DCE6F2; font-size: 15.5px; font-weight: 600;
  letter-spacing: .01em; margin: 0 0 12px; text-align: center; }
.buscon-caja { position: relative; display: flex; align-items: center;
  background: #fff; border-radius: 999px; box-shadow: 0 2px 10px rgba(0,0,0,.22);
  width: 100%; max-width: 54rem; margin-left: auto; margin-right: auto; }
.buscon-lupa { flex: 0 0 auto; display: flex; align-items: center;
  padding: 0 6px 0 22px; color: #7A8794; }
.buscon-lupa svg { width: 20px; height: 20px; display: block; }
.buscon-caja input { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 18px;
  padding: 18px 12px; border: 0; background: transparent; color: var(--ink);
  margin: 0; max-width: none; }
.buscon-caja input:focus { outline: 0; }
.buscon-caja:focus-within { box-shadow: 0 0 0 3px rgba(255,255,255,.6), 0 2px 10px rgba(0,0,0,.22); }
/* Los dos iconos, al estilo de Google: sin línea que los separe, grises, y con
   un círculo suave sólo al pasar el ratón. La superficie que se toca es de 44 px
   aunque el dibujo mida 22: en un teléfono, lo que se falla es el blanco chico. */
.buscon-mic, .buscon-cam { flex: 0 0 auto; display: flex; align-items: center;
  justify-content: center; width: 44px; height: 44px; margin: 0 2px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: #5F6B78;
  cursor: pointer; transition: background .15s, color .15s; }
.buscon-mic svg, .buscon-cam svg { width: 22px; height: 22px; display: block; }
.buscon-mic:hover, .buscon-cam:hover { background: #F1F3F4; color: var(--brand); }
.buscon-mic:focus-visible, .buscon-cam:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.buscon-mic.oyendo { background: var(--bad); color: #fff;
  animation: buscon-late 1.1s ease-in-out infinite; }
@keyframes buscon-late { 0%,100% { opacity: 1 } 50% { opacity: .55 } }
@media (prefers-reduced-motion: reduce) { .buscon-mic.oyendo { animation: none } }
.buscon-btn { flex: 0 0 auto; font: inherit; font-size: 16px; font-weight: 700;
  border: 0; border-radius: 999px; margin: 6px 6px 6px 8px; padding: 0 32px;
  align-self: stretch; background: var(--brand); color: #fff; cursor: pointer; }
.buscon-btn:hover { background: var(--brand-2); }
.buscon-pie { margin: 14px 0 0; text-align: center; font-size: 13.5px; color: #B9CBE0; }
.buscon-pie a { color: #fff; text-decoration: underline; }
.buscon .suggest { left: 50%; transform: translateX(-50%); top: calc(100% + 6px);
  width: 100%; max-width: 54rem; }
/* La casilla grande manda: la chica de la cabecera se retira. */
body.con-buscon .head-search { display: none; }
@media (max-width: 700px) {
  .buscon { padding: 20px 0 18px; }
  .buscon-caja input { font-size: 16px; padding: 14px 8px; }
  .buscon-lupa { padding-left: 16px; }
  .buscon-mic, .buscon-cam { width: 40px; height: 40px; }
  .buscon-btn { padding: 0 20px; font-size: 15px; margin-left: 4px; }
  .buscon-pie { font-size: 12.5px; }
  .buscon-tit { font-size: 14.5px; }
}

.head-search { flex: 1 1 340px; position: relative; display: flex; }
.head-search input { flex: 1; font: inherit; padding: 11px 18px; border: 1px solid var(--line); border-right: 0; border-radius: var(--pill) 0 0 var(--pill); margin: 0; max-width: none; }
.head-search input:focus { outline: none; border-color: var(--brand); }
/* Buscar NO es comprar: azul. */
.head-search button { font: inherit; font-weight: 500; padding: 0 24px; border: 0; border-radius: 0 var(--pill) var(--pill) 0; background: var(--brand); color: #fff; cursor: pointer; }
.head-search button:hover { background: var(--brand-2); }
.suggest { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--shadow-2); z-index: 30; max-height: 380px; overflow: auto; }
.suggest a { display: grid; grid-template-columns: 110px 1fr; gap: 2px 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); color: var(--ink); }
.suggest a:hover { background: #F1F3F4; text-decoration: none; }
.suggest .sg-sku { font-weight: 700; color: var(--brand); font-size: 13px; }
.suggest small { grid-column: 2; }
/* ---------- El carrito ----------
   Es donde termina la venta, así que se encuentra por la FORMA antes de leer
   nada: píldora con fondo propio, separada de los enlaces de texto. Vacío va
   discreto; con algo dentro se pone naranja y dice cuántas piezas y cuánto.
   Un carrito siempre encendido se vuelve parte del decorado. */
/* Vacío ya va MACIZO, en azul: aunque no haya nada dentro tiene que ser lo
   único de la barra que se ve como un botón. En contorno blanco se confundía
   con «Entrar» y «Favoritos», que es justo lo que había que evitar. */
/* OJO CON LA ESPECIFICIDAD: `.head-nav a` (una clase + un elemento) le gana a
   `.cart-btn` (una clase), así que el color del texto se lo comía el del menú.
   Con el fondo blanco no se notaba —negro sobre blanco se lee—; al ponerle
   fondo azul quedó texto casi negro sobre azul oscuro, ilegible. Por eso va
   `.head-nav a.cart-btn`, que sí gana. */
.head-nav a.cart-btn, .cart-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px;
  border: 1px solid var(--brand); border-radius: var(--pill); background: var(--brand);
  color: #fff; font-weight: 600; font-size: 14px; line-height: 1;
  min-height: 42px; transition: background .15s, border-color .15s, box-shadow .15s; }
.cart-btn:hover { text-decoration: none; background: var(--brand-2); border-color: var(--brand-2);
  box-shadow: var(--shadow-2); }
.cb-svg { width: 19px; height: 19px; flex: 0 0 auto; }
/* Con piezas dentro: naranja, que aquí sí es dinero. */
.head-nav a.cart-btn.con, .cart-btn.con { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.cart-btn.con:hover { background: var(--accent-2); border-color: var(--accent-2);
  box-shadow: var(--shadow-2); }
.cb-n { display: inline-flex; align-items: center; justify-content: center;
  min-width: 21px; height: 21px; padding: 0 6px; border-radius: var(--pill);
  background: #fff; color: var(--accent-2); font-size: 12.5px; font-weight: 700; }
.cb-imp { font-variant-numeric: tabular-nums; font-weight: 700; }

/* `margin-left:auto` los pega a la derecha. En las páginas normales ya
   quedaban ahí porque el buscador de la cabecera, que crece, los empujaba; en
   la PORTADA ese buscador se esconde —manda el grande— y sin nada que empuje
   se quedaban pegados al nombre de la tienda, con medio renglón vacío al lado. */
.head-nav { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-left: auto; }
.head-nav a { color: var(--ink); font-weight: 600; font-size: 14px; }
.head-nav .admin-link { color: var(--brand); }
.pill { display: inline-block; min-width: 20px; padding: 1px 6px; border-radius: 10px; background: var(--brand); color: #fff; font-size: 12px; text-align: center; font-weight: 700; }
/* Un aviso pendiente es urgencia, no una compra: rojo. */
.pill.hot { background: var(--bad); }
.cat-nav { background: var(--brand); color: #fff; }
.cat-nav .wrap { display: flex; align-items: center; gap: 8px; min-height: 44px; flex-wrap: wrap; }
.cat-links { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.cat-links a { color: #fff; padding: 10px 14px; font-weight: 500; font-size: 14px; border-radius: var(--pill); }
.cat-links a:hover { background: rgba(255,255,255,.12); text-decoration: none; }
.menu-btn { display: none; font: inherit; background: none; color: #fff; border: 1px solid rgba(255,255,255,.4); padding: 6px 12px; border-radius: 6px; cursor: pointer; }
.veh-box { display: flex; align-items: center; gap: 4px; }
.my-vehicle { color: #fff; background: rgba(255,255,255,.14); padding: 6px 12px; border-radius: 20px; font-size: 14px; font-weight: 600; }
.my-vehicle.on { background: var(--brand-2); }
.my-vehicle:hover { text-decoration: none; filter: brightness(1.1); }
.veh-clear { color: #fff; padding: 4px 8px; font-size: 13px; opacity: .8; }

.flash { padding: 12px 16px; border-radius: 8px; margin: 0 0 18px; background: #E7F5EA; border: 1px solid #BFE3C6; color: var(--ok); font-weight: 600; }
.flash.err { background: #FDECEA; border-color: #F5C2BC; color: var(--bad); }

/* ---------- Portada ---------- */
.hero { background: linear-gradient(135deg, var(--brand-2), var(--brand) 60%, #1F4F82); color: #fff; border-radius: 14px; padding: 36px 32px; margin-bottom: 30px; }
/* ---------- La mascota ----------
   Se apoya en el borde derecho del bloque azul, recortada por abajo, como se
   apoyan las mascotas de siempre. Tiene sentido donde está —ella trae un
   amortiguador y el bloque sirve para elegir el coche—, pero sigue siendo
   adorno: `aria-hidden`, y se retira en cuanto la pantalla se estrecha, porque
   quien llega en un teléfono viene a elegir su auto, no a mirar un dibujo. */
.hero.con-mascota { position: relative; overflow: hidden; padding-right: 235px; }
.mascota { position: absolute; right: 10px; bottom: -8px; width: auto; height: 104%;
  max-height: 240px; object-fit: contain; object-position: bottom right;
  pointer-events: none; user-select: none; filter: drop-shadow(0 6px 18px rgba(0,0,0,.28)); }
@media (max-width: 1080px) {
  .hero.con-mascota { padding-right: 32px; }
  .mascota { display: none; }
}
.hero h1 { font-size: 32px; margin: 0 0 6px; }
.hero-text p { margin: 0 0 20px; opacity: .9; font-size: 17px; }
.finder { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 12px; align-items: end; background: rgba(255,255,255,.1); padding: 16px; border-radius: 10px; }
.finder label { color: #fff; font-size: 13px; font-weight: 600; margin: 0; }
.finder label span { display: block; margin-bottom: 4px; }
.finder select { width: 100%; max-width: none; font: inherit; padding: 11px 12px; border-radius: 8px; border: 0; margin: 0; background: #fff; color: var(--ink); }
.finder select:disabled { background: #DCE3EA; color: #667085; }
.finder .btn { padding: 12px 26px; }
.hero-alt { margin: 14px 0 0; font-size: 14px; opacity: .9; }
.hero-alt a { color: #FFD9B8; text-decoration: underline; }
.home-sec { margin: 34px 0; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.sec-head h2 { font-size: 22px; margin: 0; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 14px; color: var(--ink); transition: .15s; }
.tile:hover { border-color: var(--brand); text-decoration: none; box-shadow: var(--shadow-2); }
.tile b { display: block; font-size: 15px; }
.tile small { color: var(--muted); }
.trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 34px 0; }
.trust div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.trust span { font-size: 28px; display: block; margin-bottom: 6px; }
.trust b { display: block; margin-bottom: 4px; }
.brand-row { display: flex; gap: 10px; flex-wrap: wrap; }
.brand-chip { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 8px 16px; font-weight: 700; color: var(--brand); }
.brand-chip small { font-weight: 400; color: var(--muted); }
.faq-teaser details, .faq-list details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 18px; margin-bottom: 8px; }
.faq-teaser summary, .faq-list summary { cursor: pointer; font-weight: 600; }
.faq-list details div, .faq-teaser details div { padding: 8px 0 4px; color: #333; }
.cta-box { text-align: center; background: var(--surface); border: 1px dashed var(--line); padding: 22px; border-radius: var(--radius); }

/* ---------- Banners de promociones ---------- */
.promo-banners { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin: 0 0 30px; }
/* Tinte, no bloque macizo. Era un rectángulo naranja a toda página y le
   ganaba al carrito, que es lo que de verdad hay que encontrar. La promoción
   se sigue leyendo —el descuento va grande y en naranja fuerte—, pero deja de
   competir: naranja macizo es para tocar, naranja suave es para enterarse. */
.promo-banner { display: flex; gap: 16px; align-items: center; background: var(--accent-3);
  border: 1px solid #F3D3BC; color: var(--ink); border-radius: var(--radius); padding: 16px 20px; }
.promo-banner:hover { text-decoration: none; border-color: var(--accent); box-shadow: var(--shadow-2); }
.pb-value { font-size: 34px; font-weight: 800; letter-spacing: -1px; white-space: nowrap; color: var(--accent-2); }
.pb-text b { display: block; font-size: 17px; font-weight: 500; }
.pb-text small { display: block; color: var(--muted); }
.promo-line { color: var(--accent); font-weight: 700; margin: 4px 0; }

/* ---------- Tarjetas de producto ---------- */
/* Tarjetas más anchas y con más aire: la foto es lo que se mira primero en
   una refacción, y a 215 px salía del tamaño de una estampilla. */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 5px; color: var(--ink); transition: box-shadow .15s, border-color .15s; position: relative; }
.card:hover { text-decoration: none; box-shadow: var(--shadow-2); border-color: transparent; }
/* Cuadrada y más alta: una pieza alargada —un amortiguador— se veía diminuta
   metida en un 4:3. */
.card-img { position: relative; aspect-ratio: 1/1; background: #F8F9FA; border-radius: var(--radius-s); overflow: hidden; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.card-img img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.noimg { font-size: 42px; color: #B7C0CC; }
.noimg.big { font-size: 96px; }
.badges { position: absolute; top: 8px; left: 8px; display: flex; gap: 4px; flex-wrap: wrap; }
.badge { display: inline-block; font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: var(--pill); background: #F1F3F4; color: var(--ink); text-transform: uppercase; letter-spacing: .3px; }
/* Señal de dinero, no botón: naranja suave para no competir con el de comprar. */
.badge.promo { background: var(--accent-3); color: var(--accent-2); }
.badge.new { background: var(--brand-3); color: var(--brand); }
.badge.sale { background: var(--bad); color: #fff; }
.card .meta, .detail .meta { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; }
.card h3 { font-size: 15px; margin: 0; line-height: 1.35; font-weight: 500; min-height: 2.7em; }
.card .sku { font-size: 12px; color: var(--muted); }
/* Precio abajo a la izquierda y existencia a la derecha, en su propio renglón
   con una línea de separación: son las dos cosas que se miran antes de entrar
   a la ficha, y antes competían con el nombre. */
/* `wrap`: en una tarjeta angosta el precio y la existencia no caben en el
   mismo renglón, y sin esto la existencia empujaba la página de lado. */
.card-foot { display: flex; align-items: baseline; justify-content: space-between;
  gap: 2px 8px; flex-wrap: wrap; margin-top: auto; padding-top: 10px;
  border-top: 1px solid var(--line-2); }
.price { color: var(--ink); font-weight: 700; font-size: 19px; letter-spacing: -.2px; }
.price.quote { color: var(--warn); font-size: 14px; font-weight: 500; }
.price.big { font-size: 30px; }
/* La existencia, dicha siempre. Antes sólo se avisaba cuando estaba agotado,
   así que «sí hay» —que es lo que anima a comprar— no se decía nunca. */
.stk { font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.stk.ok    { color: var(--ok); }
.stk.low   { color: var(--warn); }
.stk.order { color: var(--muted); }
.stk.quote { color: var(--muted); }
.stk.oos   { color: var(--bad); }
/* «¿Le queda a mi coche?» — la pregunta de siempre, contestada en la tarjeta.
   Verde y con el nombre del coche: un ✔ solo no dice de qué habla. */
/* Bloque, no píldora: el nombre del coche puede ocupar dos renglones y una
   píldora partida se ve rota. */
.fit-si { display: block; background: #E6F4EA; color: #137333; font-size: 11.5px;
  font-weight: 500; line-height: 1.35; padding: 4px 9px; border-radius: var(--radius-s);
  margin-bottom: 2px; }
.card.le-queda { border-color: #C6E7CF; }
.card.le-queda:hover { border-color: transparent; }
.compare { color: var(--muted); font-size: 14px; }
.oos { color: var(--bad); font-size: 12px; font-weight: 700; }
.empty { color: var(--muted); background: var(--surface); border: 1px dashed var(--line); padding: 20px; border-radius: var(--radius); }
.empty ul { margin: 8px 0 0; }
.fav-item { position: relative; }
.fav-item form { position: absolute; top: 8px; right: 8px; }

/* ---------- Catálogo ---------- */
.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.cat-layout { display: grid; grid-template-columns: 250px 1fr; gap: 24px; align-items: start; }
.facets { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; }
.facet-box > summary { cursor: pointer; list-style: none; }
.facet-box > summary::-webkit-details-marker { display: none; }
/* En la computadora no hay nada que plegar: el panel va al lado y sobra sitio. */
@media (min-width: 901px) { .facet-box > summary { cursor: default; pointer-events: none; } }
@media (max-width: 900px) {
  .facets { padding: 10px 14px; }
  .facet-box > summary { display: flex; align-items: center; justify-content: space-between;
    margin: 0; padding: 6px 0; font-size: 15px; }
  .facet-box > summary::after { content: 'Mostrar'; font-size: 13px; font-weight: 400; color: var(--brand); }
  .facet-box[open] > summary::after { content: 'Ocultar'; }
}
.facet-title { font-size: 15px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin: 0 0 10px; }
.facet { border-top: 1px solid var(--line); padding: 12px 0; }
.facet h3 { margin: 0 0 8px; font-size: 14px; }
.facet ul { list-style: none; margin: 0; padding: 0; }
.facet li a { display: flex; justify-content: space-between; padding: 4px 0; font-size: 14px; color: var(--ink); }
.facet li a:hover { color: var(--brand); text-decoration: none; }
.facet li small { color: var(--muted); }
.facet li.on a { font-weight: 700; color: var(--brand); }
.chip-x { color: var(--bad); font-size: 12px; }
.veh-on { font-weight: 600; }
.cat-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.cat-bar h1 { margin: 0; font-size: 24px; }
.cat-bar h1 small { font-size: 14px; font-weight: 400; color: var(--muted); }
.sort-form label { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; }
.sort-form select { margin: 0; width: auto; padding: 7px 10px; }
.parsed { margin: 0 0 10px; font-size: 14px; color: var(--muted); }
.parsed .chip { background: #E7F5EA; color: var(--ok); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.chip { background: #E8F0FE; color: var(--brand); border-radius: 16px; padding: 4px 12px; font-size: 13px; font-weight: 600; }
.chip.clear { background: transparent; text-decoration: underline; }
.pager { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 26px 0; }
.pager a { padding: 7px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); font-size: 14px; }
.pager a.on { font-weight: 700; border-color: var(--brand); background: var(--brand); color: #fff; }
.pager .gap { padding: 7px 4px; color: var(--muted); }

/* ---------- Acceso al despiece ----------
   Antes era un renglón de letra chica entre otros dos enlaces y no lo veía
   nadie. Es de lo mejor que tiene la tienda, así que se enseña como lo enseñan
   los catálogos de refacciones: un recuadro con el dibujo. Azul, no naranja:
   lleva a mirar, no a comprar. */
.despiece-cta { display: flex; align-items: center; gap: 12px; margin: 12px 0;
  padding: 12px 14px; background: var(--brand-3); border: 1px solid #C7D6E6;
  border-radius: var(--radius); color: var(--ink); text-decoration: none;
  transition: border-color .15s, box-shadow .15s, background .15s; }
.despiece-cta:hover { text-decoration: none; background: #E1EAF4;
  border-color: var(--brand); box-shadow: var(--shadow-2); }
.dc-svg { flex: 0 0 auto; width: 82px; height: 51px; }
.dc-body { fill: #fff; stroke: var(--brand); stroke-width: 2.4; stroke-linejoin: round; }
.dc-rueda { fill: #fff; stroke: var(--brand); stroke-width: 2.4; }
.dc-eje { fill: var(--brand); stroke: none; }
.dc-guia { stroke: var(--brand); stroke-width: 1.3; stroke-dasharray: 3 3; opacity: .5; fill: none; }
.dc-pieza { fill: #fff; stroke: var(--brand); stroke-width: 2.2; stroke-linecap: round; }
.dc-muelle { stroke-width: 2; }
.despiece-cta:hover .dc-pieza { fill: #FFF; stroke: var(--brand-2); }
.dc-txt { flex: 1 1 auto; min-width: 0; line-height: 1.35; }
.dc-txt b { display: block; font-size: 15px; font-weight: 500; color: var(--brand); }
.dc-txt small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.dc-flecha { flex: 0 0 auto; font-size: 20px; color: var(--brand); }
/* En la columna de filtros el recuadro es angosto: el dibujo arriba y el texto
   debajo, en vez de apretarlos en una fila de 200 px. */
.facets .despiece-cta { flex-direction: column; align-items: flex-start; gap: 6px; }
.facets .dc-svg { width: 100%; height: auto; max-width: 140px; }
.facets .dc-flecha { display: none; }
.facets .dc-txt small { font-size: 12px; }

/* ---------- Detalle ---------- */
.detail { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 32px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 26px; }
.media-main { aspect-ratio: 4/3; background: #F1F3F6; border-radius: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.media-main img, .media-main video, .media-main iframe { width: 100%; height: 100%; object-fit: contain; border: 0; cursor: zoom-in; }
.media-main img.zoom { object-fit: cover; transform: scale(1.6); cursor: zoom-out; }
.thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.thumb { padding: 0; border: 2px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; line-height: 0; overflow: hidden; width: 72px; height: 72px; position: relative; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb.on { border-color: var(--brand); }
.thumb.video { display: flex; align-items: center; justify-content: center; background: #1B1F24; color: #fff; font-size: 12px; font-weight: 700; line-height: 1; }
.thumb.video span { position: absolute; inset: auto 0 0 0; background: rgba(0,0,0,.55); padding: 3px; text-align: center; }
.detail h1 { font-size: 26px; margin: 4px 0 8px; }
.sku-line { margin: 0 0 8px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.stars { color: #F5A623; letter-spacing: 1px; }
.fit-check { padding: 10px 14px; border-radius: 8px; font-weight: 700; }
.fit-check.yes { background: #E7F5EA; color: var(--ok); }
.fit-check.no { background: #FDECEA; color: var(--bad); }
.buy-box { border: 1px solid var(--line); border-radius: 12px; padding: 18px; margin: 14px 0; background: #FBFCFD; }
.price-row .price { font-size: 30px; }
.stock { font-weight: 700; margin: 6px 0; }
.stock.ok { color: var(--ok); } .stock.low { color: var(--warn); } .stock.order { color: var(--brand); } .stock.oos { color: var(--bad); } .stock.quote { color: var(--warn); font-weight: 500; }
.add-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.qty { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
.qty input { width: 58px; text-align: center; border: 0; margin: 0; padding: 10px 4px; }
.qty-btn { font: inherit; font-size: 18px; background: #F1F3F6; border: 0; width: 38px; cursor: pointer; }
.qty-btn:hover { background: #E3E6EA; }
.side-actions { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 12px; font-size: 14px; }
.assure { list-style: none; padding: 0; margin: 10px 0 0; font-size: 14px; color: #333; }
.assure li { padding: 3px 0; }
.tabs { display: flex; gap: 4px; margin: 26px 0 0; border-bottom: 2px solid var(--line); flex-wrap: wrap; }
.tabs button { font: inherit; font-weight: 600; background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px; padding: 12px 16px; cursor: pointer; color: var(--muted); }
.tabs button.on { color: var(--brand); border-color: var(--brand); }
.tab-panel { background: var(--surface); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 12px 12px; padding: 22px; }
.desc { white-space: pre-line; margin-bottom: 14px; }
.spec-table { border-collapse: collapse; width: 100%; max-width: 640px; }
.spec-table th, .spec-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); font-size: 14px; }
.spec-table th { width: 200px; color: var(--muted); font-weight: 600; }
#fit-filter { max-width: 360px; margin-bottom: 10px; }
.fit-table { border-collapse: collapse; width: 100%; font-size: 14px; }
.fit-table th, .fit-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.fit-table th { background: #F4F6F8; position: sticky; top: 0; }
.fit-table tr.mine td { background: #E7F5EA; font-weight: 600; }
.review { border-bottom: 1px solid var(--line); padding: 12px 0; }
.review p { margin: 6px 0 0; }
.review-form { margin-top: 18px; max-width: 560px; }
.ref, .ref-card { background: #F4F6F8; border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; }
.ref-card { display: flex; gap: 14px; align-items: center; }
.ref-card img { width: 80px; height: 60px; object-fit: contain; background: #fff; border-radius: 6px; }

/* ---------- Botones y formularios ---------- */
/* El botón de siempre: azul. Píldora, como los de Google. */
.btn { display: inline-block; font: inherit; font-weight: 500; background: var(--brand); color: #fff; border: 0; border-radius: var(--pill); padding: 11px 26px; cursor: pointer; text-align: center; transition: background .15s, box-shadow .15s; }
.btn:hover { background: var(--brand-2); text-decoration: none; box-shadow: var(--shadow-2); }
.btn.ghost { background: #fff; color: var(--brand); border: 1px solid var(--line); padding: 10px 25px; font-weight: 500; }
.btn.ghost:hover { background: var(--brand-3); border-color: var(--brand); box-shadow: none; }
/* *** EL NARANJA ES ESTO Y NADA MÁS: comprar. ***
   Se pone en «Agregar al carrito», «Comprar ahora», «Proceder al pago» y
   «Pagar». Si en una pantalla hay un solo naranja, no hay dónde equivocarse. */
.btn.comprar { background: var(--accent); font-weight: 700; }
.btn.comprar:hover { background: var(--accent-2); }
.btn.ghost.comprar { background: #fff; color: var(--accent-2); border-color: var(--accent); font-weight: 700; }
.btn.ghost.comprar:hover { background: var(--accent-3); }
.btn.small { padding: 7px 16px; font-size: 14px; }
.btn.wide { display: block; width: 100%; }
.btn:disabled { opacity: .6; cursor: wait; }
.link-btn { background: none; border: 0; cursor: pointer; color: var(--brand); font: inherit; padding: 0; text-decoration: underline; }
.link-btn.danger { color: var(--bad); }
.link-btn.copy { font-size: 13px; }
label { display: block; margin: 0 0 12px; font-weight: 600; font-size: 14px; }
label small { font-weight: 400; }
input, textarea, select { font: inherit; width: 100%; max-width: 480px; display: block; padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--radius-s); margin-top: 5px; background: #fff; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(18,54,93,.14); }
input[type="number"] { width: 120px; }
input[type="file"] { padding: 8px; }
input[type="checkbox"], input[type="radio"] { width: auto; display: inline; margin: 0 6px 0 0; }
label.check, label.radio { font-weight: 500; display: flex; align-items: center; gap: 6px; }
label.check input, label.radio input { margin-top: 0; }
form .btn { margin-top: 6px; }
form.narrow { max-width: 440px; }
.row { display: flex; gap: 14px; flex-wrap: wrap; }
.row > label { flex: 1 1 180px; }
.row > label.narrow-f { flex: 0 0 110px; }
.inline { display: flex; gap: 6px; }
.inline input { margin: 0; }
.inline-form { display: inline-block; margin: 0 6px 0 0; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin: 0 0 16px; }
legend { font-weight: 500; font-size: 14px; padding: 0 6px; }
.ship-choice label { margin: 6px 0; }

/* ---------- Carrito / pago ---------- */
.cart-layout { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start; }
.cart-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.cart-table th, .cart-table td { text-align: left; padding: 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.cart-table th { font-size: 13px; color: var(--muted); }
.cart-table tfoot td { font-weight: 600; }
.cart-table tr.total td { font-size: 18px; }
.cart-img img { width: 70px; height: 54px; object-fit: contain; background: #F1F3F6; border-radius: 6px; }
.cart-form fieldset { margin-top: 14px; background: var(--surface); }
.totals { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; position: sticky; top: 12px; }
.totals dl, .totals-list { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; margin: 12px 0; }
.totals dd, .totals-list dd { margin: 0; text-align: right; font-weight: 600; }
.totals dt, .totals-list dt { color: var(--muted); }
.totals .total, .totals-list .total { font-size: 20px; color: var(--ink); font-weight: 800; border-top: 1px solid var(--line); padding-top: 8px; }
.coupon-form label { margin-bottom: 0; }
.steps { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0 0 20px; counter-reset: s; flex-wrap: wrap; }
.steps li { counter-increment: s; font-size: 13px; color: var(--muted); padding: 6px 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.steps li::before { content: counter(s) " · "; font-weight: 700; }
.steps li.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.checkout-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.checkout-cols section, .checkout-cols aside { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.summary { list-style: none; margin: 0 0 12px; padding: 0; }
.summary li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }
.paynote { font-size: 13px; color: var(--muted); }
.bank { background: #FFF8E6; border: 1px solid #F0DCA0; padding: 14px; border-radius: 8px; white-space: pre-wrap; font-family: inherit; font-size: 14px; }
#paypal-buttons { margin: 14px 0; }
.done-box { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 30px; max-width: 760px; }
.done-box h1 { color: var(--ok); }

/* ---------- Pedido ---------- */
.timeline { display: flex; list-style: none; padding: 0; margin: 20px 0; gap: 0; counter-reset: t; }
.timeline li { flex: 1; text-align: center; font-size: 13px; position: relative; padding-top: 26px; color: var(--muted); }
.timeline li::before { content: ""; position: absolute; top: 8px; left: 0; right: 0; height: 4px; background: var(--line); }
.timeline li::after { content: ""; position: absolute; top: 2px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: #fff; border: 3px solid var(--line); }
.timeline li.done { color: var(--ink); font-weight: 600; }
.timeline li.done::before { background: var(--ok); }
.timeline li.done::after { border-color: var(--ok); background: var(--ok); }
.timeline li.now::after { border-color: var(--brand); background: var(--brand); box-shadow: 0 0 0 4px rgba(18,54,93,.18); }
.order-cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: start; }
.order-cols section, .order-cols aside { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.order-cols .cart-table { border: 0; }
.log { list-style: none; padding: 0; margin: 0; font-size: 14px; }
.log li { padding: 4px 0; border-bottom: 1px dashed var(--line); }
.track { background: #E8F0FE; padding: 10px 12px; border-radius: 8px; }
.status { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 10px; background: #EEF1F4; white-space: nowrap; vertical-align: middle; }
.status.pagado, .status.entregado { background: #E7F5EA; color: var(--ok); }
.status.pendiente_transferencia, .status.pendiente { background: #FFF8E6; color: var(--warn); }
.status.enviado, .status.preparando, .status.listo_recoger { background: #E8F0FE; color: var(--brand); }
.status.cancelado { background: #FDECEA; color: var(--bad); }

/* ---------- Mensajes ---------- */
.thread { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }
.msg { max-width: 78%; padding: 10px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.msg.user { align-self: flex-start; }
.msg.admin { align-self: flex-end; background: #E8F0FE; border-color: #CFE0FA; }
.msg small { color: var(--muted); }
.msg p { margin: 4px 0 0; white-space: pre-line; }
.reply-form { max-width: 720px; }
.reply-form textarea { max-width: none; }
.conv-list { list-style: none; padding: 0; margin: 0; }
.conv-list li a { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px; margin-bottom: 8px; color: var(--ink); }
.conv-list li a:hover { border-color: var(--brand); text-decoration: none; }
.conv-list li.unread a { border-left: 4px solid var(--brand); }
.conv-list small { display: block; }

/* ---------- Cuenta / auth ---------- */
.auth-cols { display: flex; gap: 24px; flex-wrap: wrap; }
.auth-cols section { flex: 1 1 320px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }

/* ---------- Admin ---------- */
.admin-tabs { display: flex; gap: 6px; margin-bottom: 20px; flex-wrap: wrap; }
.admin-tabs a { padding: 8px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: 14px; font-weight: 600; color: var(--ink); }
.admin-tabs a.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.admin-tabs a:hover { text-decoration: none; border-color: var(--brand); }
.admin-tabs.sub a { font-size: 13px; padding: 5px 10px; }
.admin-table { width: 100%; border-collapse: collapse; background: var(--surface); font-size: 14px; border: 1px solid var(--line); border-radius: var(--radius); }
.admin-table th, .admin-table td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.admin-table th { background: #F4F6F8; font-size: 13px; }
.admin-table tr.dim td { opacity: .55; }
.admin-form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin-bottom: 20px; }
.admin-form.compact { padding: 14px 18px; margin-bottom: 10px; }
.admin-form h3 { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 16px; }
.admin-form textarea { max-width: none; }
.admin-search { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.admin-search input, .admin-search select { margin: 0; width: auto; }
.admin-search input[type="search"] { min-width: 260px; }
.thumb-mini { width: 54px; height: 40px; object-fit: contain; background: #F1F3F6; border-radius: 4px; }
.action-box { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; margin: 10px 0; background: #FBFCFD; }
.action-box summary { cursor: pointer; font-weight: 700; color: var(--brand); }
.action-box form { margin-top: 8px; }
fieldset.fiscal { background: #FFFDF6; border-color: #F0DCA0; }
/* El auto del cliente en el checkout: sobrio, para que no compita con los
   datos de entrega, que son los obligatorios. */
fieldset.auto-cliente { background: #F7FAFC; border-color: #D8E2EA; }
/* Los accesos a las consolas, arriba del panel. Cada uno con el color de su
   consola: es la misma marca que ve en el letrero al entrar. */
.consolas { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.consolas a { flex: 1 1 12rem; display: block; text-decoration: none; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--c);
  border-radius: 9px; padding: 9px 14px; line-height: 1.35; }
.consolas a:hover { border-color: var(--c); background: #FAFCFD; }
.consolas a b { display: block; font-size: 15px; }
.consolas a small { color: var(--muted); font-size: 12.5px; }
.quick-edit { display: flex; gap: 4px; align-items: center; }
.quick-edit input { width: 84px; margin: 0; padding: 5px 6px; font-size: 13px; }
.quick-edit button { padding: 5px 8px; font-size: 12px; }
.report-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.report-cols section { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.report-cols h3 { margin-top: 0; }
.bars td .bar { margin: 0; height: 10px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 22px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.kpi b { display: block; font-size: 22px; color: var(--brand); }
.kpi span { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; }
.dash-cols { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; }
.gal-admin { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.gal-item { width: 120px; text-align: center; border: 2px solid transparent; border-radius: 8px; padding: 4px; }
.gal-item.main { border-color: var(--brand); }
.gal-item img, .gal-item video { width: 110px; height: 82px; object-fit: cover; border-radius: 6px; display: block; background: #111; }
.gal-item span { display: block; font-size: 11px; word-break: break-all; color: var(--muted); }
.gal-actions { display: flex; justify-content: center; gap: 10px; }
.review.admin { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px; margin-bottom: 8px; }
.page-text { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 30px; max-width: 860px; }
.page-text h2 { margin-top: 22px; }

/* ---------- Importación ---------- */
.import-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; }
.import-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 22px; margin: 0 0 16px; }
.import-box h2 { font-size: 16px; margin: 18px 0 6px; }
.import-box h2:first-child { margin-top: 0; }
table.mini { border-collapse: collapse; width: 100%; margin: 8px 0; font-size: 13px; background: var(--surface); }
table.mini th, table.mini td { border: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top; }
.bar { height: 14px; border-radius: 7px; background: #E3E6EA; overflow: hidden; margin: 12px 0 6px; }
.bar-fill { height: 100%; width: 0; background: var(--brand); transition: width .25s; }

/* ---------- Pie ---------- */
.site-foot { background: var(--brand-2); color: #C9D6E5; margin-top: 30px; }
.foot-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; padding: 36px 16px 20px; }
.foot-cols h4 { color: #fff; margin: 0 0 10px; font-size: 15px; }
.foot-cols a { display: block; color: #C9D6E5; padding: 3px 0; font-size: 14px; }
.foot-cols a:hover { color: #fff; }
.foot-cols p { margin: 0 0 8px; font-size: 14px; }
.foot-bottom { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 16px 22px; border-top: 1px solid rgba(255,255,255,.12); font-size: 13px; }
/* «by Grupo Bunka» en blanco: es quien responde por la tienda, no letra chica. */
.foot-por { color: #fff; font-weight: 500; }

/* ---------- Atención a clientes ---------- */
.lead { font-size: 17px; color: #333; margin: 0 0 20px; max-width: 70ch; }
.support-channels { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 14px; margin: 0 0 30px; }
.channel { display: flex; flex-direction: column; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; color: var(--ink); transition: .15s; }
.channel:hover { text-decoration: none; border-color: var(--brand); box-shadow: var(--shadow-2); }
.channel .ch-ico { font-size: 26px; line-height: 1.1; }
.channel b { font-size: 15px; }
.channel .ch-main { font-weight: 700; color: var(--brand); font-size: 17px; }
.channel small { color: var(--muted); font-size: 12px; }
.channel.wa { background: #F1FAF3; border-color: #BFE3C6; }
.channel.wa .ch-main { color: #128C7E; }
.ticket-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 6px; }
.folio { font-weight: 800; letter-spacing: .5px; background: var(--brand); color: #fff; padding: 4px 12px; border-radius: 6px; font-size: 14px; }
.tk-cat { font-size: 12px; color: var(--muted); }

/* Botón flotante de WhatsApp */
.wa-float { position: fixed; right: 18px; bottom: 18px; z-index: 60; width: 56px; height: 56px; border-radius: 50%;
            background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center;
            box-shadow: 0 4px 14px rgba(0,0,0,.28); }
.wa-float:hover { filter: brightness(1.06); text-decoration: none; }
@media (max-width: 640px) { .wa-float { right: 12px; bottom: 12px; width: 50px; height: 50px; } }

.cat-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }
.gen-buttons { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 0; }

/* ---------- Personal y niveles de acceso ---------- */
.rol-chip { margin-left: auto; align-self: center; background: #EEF3F9; border: 1px solid #CFE0FA; color: var(--brand);
            border-radius: 20px; padding: 5px 14px; font-size: 12.5px; font-weight: 700; }
.niveles { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin: 0 0 20px; }
.nivel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.nivel b { display: block; margin-bottom: 6px; color: var(--brand); font-size: 14px; }
.nivel ul { margin: 0; padding-left: 18px; }
.nivel li { font-size: 12.5px; color: var(--muted); padding: 1px 0; }

/* ---------- Segunda capa: confirmar con la contraseña ---------- */
.sudo-box { max-width: 460px; margin: 40px auto; background: var(--surface); border: 1px solid var(--line);
            border-left: 4px solid var(--brand); border-radius: var(--radius); padding: 26px 28px; }
.sudo-box h1 { margin: 0 0 8px; font-size: 22px; }
.sudo-form label { display: block; margin: 16px 0 14px; font-weight: 600; font-size: 13.5px; }
.sudo-form input { display: block; width: 100%; margin-top: 6px; padding: 11px 12px; font-size: 15px;
                   border: 1px solid var(--line); border-radius: 8px; }
.sudo-chip { align-self: center; background: #FFF6E5; border: 1px solid #F0D9A8; color: #8A6100;
             border-radius: 20px; padding: 5px 12px; font-size: 12px; font-weight: 700; }
.sudo-chip.abierta { background: #E8F6EC; border-color: #B7E0C4; color: #1B6B33; }

/* ---------- Códigos originales (OEM) ---------- */
.oem-line { margin: 0 0 8px; font-size: 14px; color: var(--muted); }
.oem-chip { display: inline-block; background: #EEF3F9; border: 1px solid #CFE0FA; color: var(--brand);
            border-radius: 6px; padding: 2px 9px; margin: 0 4px 4px 0; font-weight: 700; font-size: 13px; letter-spacing: .3px; }
.oem-chip:hover { background: var(--brand); color: #fff; text-decoration: none; }
.oem-sm { color: var(--brand) !important; font-weight: 600; }
.ct-oem { font-size: 11px; color: #333; }
.ci-oem { color: var(--brand) !important; font-weight: 600; }

.equivalentes .sec-head small { color: var(--muted); }
.eq-wrap { position: relative; }
.eq-brand { position: absolute; top: 8px; right: 8px; background: var(--brand); color: #fff;
            border-radius: 6px; padding: 2px 9px; font-size: 11px; font-weight: 800; letter-spacing: .4px; }

/* ---------- Despiece por vehículo (diagrama) ---------- */
.dz-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 26px; align-items: start;
             background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px; margin-bottom: 26px; }
.dz-diagram { text-align: center; }
.car-svg { width: 100%; max-width: 560px; height: auto; }
.car-svg .body { fill: #F1F4F8; stroke: #C3CCD8; stroke-width: 2.5; }
.car-svg .glass { fill: #DCE6F2; stroke: #B6C4D6; stroke-width: 2; }
.car-svg .engine { fill: #E6EBF2; stroke: #B6C4D6; stroke-width: 2; }
.car-svg .caja { fill: none; stroke: #B6C4D6; stroke-width: 2; stroke-dasharray: 7 5; }
.car-svg .wheel { fill: #2C3542; }
.car-svg .axis { stroke: #94A3B4; stroke-width: 3; stroke-linecap: round; }
.car-svg .det { stroke: #B6C4D6; stroke-width: 1.5; }
.car-svg .front { fill: #94A3B4; font-size: 13px; font-weight: 700; letter-spacing: 2px; text-anchor: middle; }
.car-svg .lead { fill: none; stroke: #B6C4D6; stroke-width: 1.5; }
.car-svg .lt { fill: var(--brand); font-size: 15px; font-weight: 700; }
.car-svg .ls { fill: var(--muted); font-size: 11.5px; }
.car-svg .zh { fill: transparent; }
/* El diagrama se queda con el naranja a propósito: marca la zona elegida
   sobre un dibujo gris, es una señal funcional y no un botón, y esa página no
   tiene ninguna compra que pueda taparse. */
.car-svg .zb { fill: var(--accent); stroke: #fff; stroke-width: 3; }
.car-svg .zn { fill: #fff; font-size: 15px; font-weight: 800; text-anchor: middle; }
.car-svg .zona { cursor: pointer; }
.car-svg .zona:focus { outline: none; }
.car-svg .zona:focus .zb, .car-svg .zona:hover .zb, .car-svg .zona.hi .zb { fill: var(--brand); r: 21; }
.car-svg .zona.vacia { cursor: default; }
.car-svg .zona.vacia .zb { fill: #C3CCD8; }
.car-svg .zlbl.hi .lt { fill: var(--accent); }
.car-svg .zlbl.hi .lead { stroke: var(--accent); }
.dz-legend h2 { font-size: 17px; }
.zlist { list-style: none; margin: 0 0 10px; padding: 0; }
.zlist a { display: grid; grid-template-columns: 42px 1fr; gap: 2px 12px; align-items: center;
           padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 7px; color: var(--ink); }
.zlist a:hover, .zlist a.hi { text-decoration: none; border-color: var(--accent); background: #FFF6F0; }
.zlist .zc { grid-row: span 2; background: var(--brand); color: #fff; border-radius: 8px; text-align: center;
             font-weight: 800; padding: 7px 0; font-size: 15px; }
.zlist small { color: var(--muted); font-size: 12px; }

.zona-sec { margin: 0 0 26px; scroll-margin-top: 16px; border-radius: 12px; transition: background .4s; }
.zona-sec.flash-zona, .zona-sec.hi { background: #FFF6F0; box-shadow: 0 0 0 10px #FFF6F0; }
.dz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(275px, 1fr)); gap: 12px; }
.dz-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.dz-card.on { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(18,54,93,.18); }
.dz-link { display: flex; gap: 12px; padding: 11px; color: var(--ink); flex: 1; }
.dz-link:hover { text-decoration: none; background: #FAFBFC; }
.dz-img { width: 84px; height: 68px; flex: none; background: #F1F3F6; border-radius: 7px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.dz-img img { width: 100%; height: 100%; object-fit: contain; }
.dz-img .noimg { font-size: 26px; }
.dz-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dz-txt b { font-size: 14px; line-height: 1.3; font-weight: 600; }
.dz-txt small { color: var(--muted); font-size: 11.5px; }
.dz-price .price { font-size: 15px; }
.dz-buy { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 9px 11px; border-top: 1px solid var(--line); background: #FBFCFD; }
.dz-check { margin: 0; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 5px; }
.dz-buy .qty input { width: 46px; padding: 6px 2px; }
.dz-buy .qty-btn { width: 30px; font-size: 16px; }
.dz-buy .btn.small { margin-left: auto; }
.dz-bar { position: sticky; bottom: 0; z-index: 40; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
          background: var(--brand); color: #fff; padding: 12px 18px; border-radius: 12px 12px 0 0; margin-top: 10px;
          box-shadow: 0 -4px 16px rgba(0,0,0,.18); }
.dz-bar span { font-weight: 700; }
.dz-bar .link-btn { color: #DCE6F2; margin-right: auto; }
.how { margin: 0 0 12px; padding-left: 20px; }
.how li { margin-bottom: 5px; }

/* ---------- Catálogo imprimible ---------- */
body.printable { background: #E9ECEF; }
.print-bar { background: var(--brand-2); color: #fff; padding: 10px 0; position: sticky; top: 0; z-index: 10; }
.print-bar .wrap { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.print-bar a { color: #DCE6F2; font-size: 14px; font-weight: 600; }
.print-bar a:hover { color: #fff; }
.print-bar .grow { flex: 1; }
.sheet { max-width: 1000px; margin: 18px auto 40px; background: #fff; padding: 26px 30px 34px; box-shadow: 0 2px 12px rgba(0,0,0,.12); }
.sheet-head { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; border-bottom: 3px solid var(--brand); padding-bottom: 12px; flex-wrap: wrap; }
.sheet-head h1 { font-size: 24px; margin: 0; color: var(--brand); }
.sh-sub { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.sh-contact { font-size: 12.5px; text-align: right; color: #333; line-height: 1.6; }
.sheet-title { margin: 18px 0 14px; }
.sheet-title h2 { font-size: 21px; margin: 0; }
.sheet-title p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.cat-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.cat-table th { background: #EEF1F4; text-align: left; padding: 7px 8px; border-bottom: 2px solid var(--line); font-size: 11.5px; text-transform: uppercase; letter-spacing: .3px; }
.cat-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.cat-table tbody tr:nth-child(even) { background: #FAFBFC; }
.ct-sku { font-weight: 700; white-space: nowrap; }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.cat-item { display: flex; gap: 10px; border: 1px solid var(--line); border-radius: 8px; padding: 8px; break-inside: avoid; }
.ci-img { width: 76px; height: 62px; flex: none; background: #F1F3F6; border-radius: 5px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ci-img img { width: 100%; height: 100%; object-fit: contain; }
.ci-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ci-sku { font-size: 12.5px; color: var(--brand); }
.ci-name { font-size: 12.5px; line-height: 1.3; }
.ci-txt small { font-size: 11px; color: var(--muted); line-height: 1.3; }
.ci-app { color: #444 !important; }
.sheet-foot { margin-top: 22px; padding-top: 12px; border-top: 2px solid var(--line); font-size: 12px; }
.sh-note { color: var(--muted); }

@media print {
  @page { margin: 12mm 10mm; }
  body.printable { background: #fff; }
  .print-bar, .wa-float { display: none !important; }
  .sheet { max-width: none; margin: 0; padding: 0; box-shadow: none; }
  .sheet-head, .sheet-title { break-after: avoid; }
  .cat-table { font-size: 10.5px; }
  .cat-table thead { display: table-header-group; }
  .cat-table tr { break-inside: avoid; }
  .cat-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .cat-item { padding: 5px; }
  .sheet-foot { break-inside: avoid; }
  a { color: #000; text-decoration: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  /* `minmax(0,1fr)` y `min-width:0`, no `1fr` a secas: una columna de rejilla
     no baja de lo que mide su contenido, así que en el teléfono el panel de
     filtros se quedaba en 550 px sobre una pantalla de 375 y empujaba la
     página de lado. Es el desbordamiento clásico de CSS Grid. */
  .cat-layout, .cart-layout, .checkout-cols, .order-cols, .dash-cols, .import-grid, .report-cols, .dz-layout { grid-template-columns: minmax(0, 1fr); }
  .cat-layout > *, .cart-layout > *, .checkout-cols > *, .order-cols > *,
  .dash-cols > *, .import-grid > *, .report-cols > *, .dz-layout > * { min-width: 0; }
  .facets, .totals { position: static; max-height: none; }
  .detail { grid-template-columns: 1fr; padding: 16px; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .finder { grid-template-columns: 1fr 1fr; }
  .finder .btn { grid-column: span 2; }
}
@media (max-width: 640px) {
  h1 { font-size: 24px; }
  .head-strip .hours, .head-strip .ship-note { display: none; }
  .head-main { gap: 10px; }
  .brand small { display: none; }
  .head-nav a { font-size: 13px; }
  /* En el teléfono la palabra «Carrito» sobra: el icono ya se entiende, y lo
     que hace falta ver son las piezas y el importe. */
  .cart-btn { padding: 8px 12px; gap: 6px; }
  .cart-btn.con .cb-txt { display: none; }
  .menu-btn { display: inline-block; }
  .cat-links { display: none; width: 100%; flex-direction: column; }
  .cat-links.open { display: flex; }
  .hero { padding: 24px 18px; }
  .hero h1 { font-size: 24px; }
  .finder { grid-template-columns: 1fr; }
  .finder .btn { grid-column: auto; }
  /* `minmax(0,1fr)`, no `1fr`: una columna de rejilla no baja de lo que mide
     su contenido, y el distintivo «Compatible con su Volkswagen Vento 2014»
     es largo. Con `1fr` a secas las dos columnas se abrían a 540 px sobre una
     pantalla de 375 y la página se iba de lado. */
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .card { padding: 10px; }
  .card-img img { padding: 3px; }
  /* En dos columnas el precio y la existencia van uno debajo del otro. */
  .card-foot { flex-direction: column; align-items: flex-start; }
  .price { font-size: 17px; }
  /* Un distintivo largo —«15% EN AMORTIGUADORES»— tapaba la foto entera. */
  .badges { max-width: calc(100% - 16px); }
  .badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .card h3 { font-size: 14px; }
  .cart-table th:nth-child(3), .cart-table td:nth-child(3) { display: none; }
  .foot-cols { grid-template-columns: 1fr; }
  .timeline li { font-size: 11px; }
  .msg { max-width: 95%; }
  .tab-panel { padding: 14px; }
}
@media print {
  .site-head, .site-foot, .btn, .tabs, .facets, form { display: none !important; }
  main.wrap { padding: 0; }
}

/* ---------- Aviso: correos de pedido que no salieron ---------- */
.aviso-fallo { background: #FFF4F4; border: 1px solid #F3C9C9; border-left: 4px solid #C0392B;
               border-radius: var(--radius); padding: 14px 18px; margin: 0 0 22px; }
.aviso-fallo b { color: #A5281B; }
.aviso-fallo p { margin: 6px 0; font-size: 13px; color: var(--muted); }
.aviso-fallo ul { margin: 6px 0 0; padding-left: 20px; font-size: 13px; }

/* ---------- Prueba del envío de correo (panel) ---------- */
.correo-caja { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
               padding: 16px 20px; margin: 0 0 22px; }
.correo-caja h2 { font-size: 17px; margin: 0 0 6px; }
.correo-caja input[type=email] { font: inherit; padding: 8px 11px; border: 1px solid var(--line);
                                 border-radius: 8px; min-width: 230px; margin-right: 6px; }
.prueba-correo { margin-top: 14px; padding: 12px 16px; border-radius: 8px; font-size: 14px; }
.prueba-correo.bien { background: #E7F5EA; border: 1px solid #BFE3C6; color: #1E7E34; }
.prueba-correo.mal  { background: #FDECEA; border: 1px solid #F5C2BC; color: #B42318; }
.prueba-correo p { margin: 6px 0; }
.prueba-correo pre { background: #FFF; border: 1px solid var(--line); border-radius: 6px; padding: 10px;
                     overflow-x: auto; font-size: 12px; color: var(--ink); max-height: 320px; }
.prueba-correo summary { cursor: pointer; font-weight: 600; }

/* ---------- Nivel de precio del cliente (mayoreo) ---------- */
.nivel-cliente { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent);
                 border-radius: var(--radius); padding: 14px 18px; margin: 0 0 20px; }
.nivel-cliente select { font: inherit; padding: 8px 11px; border: 1px solid var(--line); border-radius: 8px; margin: 0 8px; }
.aviso-nivel { background: #E8F6EC; border: 1px solid #B7E0C4; color: #1B6B33; border-radius: 8px;
               padding: 10px 14px; margin: 0 0 16px; font-size: 14px; font-weight: 600; }

/* ---------- Oferta con reloj («cómprelo ahora») ---------- */
.reloj-oferta { background: #FFF4E5; border: 1px solid #F3C98B; border-left: 4px solid var(--accent);
                border-radius: 8px; padding: 10px 14px; margin: 10px 0; font-size: 14px; color: #8A4B00; }
.reloj-oferta b { color: var(--accent-2); }
/* Urgencia = dinero, no botón: tinte, para no competir con «comprar». */
.badge.urge { background: var(--accent-3); color: var(--accent-2); }

/* ---------- Aviso de tienda en pruebas ---------- */
.aviso-vitrina { background: #FFF4E5; border: 1px solid #F0C48B; border-left: 4px solid #E8681A;
                 border-radius: 8px; padding: 11px 16px; margin: 0 0 18px; font-size: 14px;
                 color: #8A4B00; font-weight: 600; }

/* Márgenes de aviso de precio (Panel → Auditoría) */
.margenes { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center;
            background: #f7f8fa; border: 1px solid #e3e6ea; border-radius: 8px;
            padding: .85rem 1rem; margin: .5rem 0 1rem; }
.margenes label { display: inline-flex; align-items: center; gap: .4rem; font-size: .92rem; }
.margenes input[type=number] { width: 5rem; }
.margenes .chk { gap: .35rem; }

/* Enlace de la consola de operación (Panel → Operación) */
.ops-liga { background:#f7f8fa; border:1px solid #e3e6ea; border-radius:8px;
            padding:1rem 1.1rem; margin:.5rem 0 1.25rem; }
.ops-liga p { margin:.4rem 0; }
.ops-liga code { background:#fff; border:1px solid #dde2e8; border-radius:5px;
                 padding:.35rem .6rem; font-size:.95rem; user-select:all; }
.ops-liga .inline-form { display:flex; flex-wrap:wrap; gap:.5rem; align-items:flex-end; }
.ops-liga .inline-form label { display:flex; flex-direction:column; gap:.25rem; font-size:.9rem; }

/* Panel → Ayuda */
.ayuda { max-width: 52rem; }
.ayuda h2 { margin: 1.8rem 0 .6rem; padding-bottom: .3rem; border-bottom: 1px solid #e3e6ea; }
.ayuda dl { margin: 0; }
.ayuda dt { font-weight: 700; margin-top: .9rem; }
.ayuda dd { margin: .2rem 0 0 1.1rem; color: #444; }
.ayuda p { max-width: 62ch; }