/* Catálogo de repuestos (sin precios ni compra en línea: se cotiza por WhatsApp).
   Lo usan /repuestos/ y las páginas que genera deploy/catalogo/generar.php.
   Reutiliza los tokens de color (--bg, --surface, --accent...) que ya definen las páginas. */

/* ---------- migas ---------- */
.migas{ font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.04em; color:var(--text-muted); margin:0 0 22px; display:flex; flex-wrap:wrap; gap:6px; }
.migas a{ color:var(--text-muted); text-decoration:none; }
.migas a:hover{ color:var(--accent); }
.migas span[aria-current]{ color:var(--text); }

/* ---------- chips de compatibilidad ---------- */
.chips{ display:flex; flex-wrap:wrap; gap:6px; }
.chip{ font-family:"IBM Plex Mono",monospace; font-size:12px; padding:4px 9px; border-radius:3px; border:1px solid var(--border); background:var(--surface-alt); color:var(--text); white-space:nowrap; }

/* ---------- tarjeta de producto ---------- */
.prod-lista{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:16px; margin:12px 0 8px; }
.prod-card{ display:flex; flex-direction:column; text-decoration:none; color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:10px; overflow:hidden; transition:border-color .15s ease, transform .12s ease; }
.prod-card:hover{ border-color:var(--accent); transform:translateY(-2px); }
.prod-card-foto{ width:100%; aspect-ratio:4/3; object-fit:contain; background:#fff; padding:14px; display:block; }
.prod-card-body{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:8px; flex:1; }
.prod-card h3{ font-size:18px; margin:0; line-height:1.2; }
.prod-marca{ font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); }
.prod-card .go{ margin-top:auto; font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); }
.prod-card:hover .go{ color:var(--accent); }

/* foto que todavía no llega */
.foto-pendiente{ display:flex; align-items:center; justify-content:center; background:repeating-linear-gradient(45deg, var(--surface-alt), var(--surface-alt) 10px, var(--surface) 10px, var(--surface) 20px); color:var(--text-muted); font-family:"IBM Plex Mono",monospace; font-size:12px; text-transform:uppercase; letter-spacing:.1em; }

/* ---------- ficha de producto ---------- */
.prod{ padding:40px 0 36px; border-bottom:1px solid var(--border); }
.prod-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; align-items:start; }
.prod-foto{ background:#fff; border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.prod-foto-img{ width:100%; aspect-ratio:1/1; object-fit:contain; padding:24px; display:block; }
.prod-titulo{ font-size:clamp(28px,4vw,42px); line-height:1.08; margin:0 0 20px; }
.prod-titulo span{ color:var(--accent); }
.prod-datos{ margin:0 0 18px; display:grid; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.prod-datos > div{ display:grid; grid-template-columns:120px 1fr; gap:12px; padding:11px 14px; background:var(--surface); }
.prod-datos dt{ font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); align-self:center; }
.prod-datos dd{ margin:0; }
.prod-datos a{ color:var(--text); text-decoration-color:var(--accent); text-underline-offset:3px; }
.muted{ color:var(--text-muted); }
.mono{ font-family:"IBM Plex Mono",monospace; }
.prod-label{ display:block; font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); margin-bottom:8px; }
.prod-compat{ margin:0 0 22px; }
.prod-acciones{ display:flex; flex-direction:column; gap:10px; margin:0 0 18px; }
.btn-wa{ justify-content:center; flex-wrap:wrap; }
.btn-wa small{ font-weight:400; opacity:.85; }
.prod-notas{ margin:0; padding-left:18px; color:var(--text-muted); font-size:14px; line-height:1.6; }
.prod-notas li{ margin-bottom:4px; }
.prod-notas a{ color:var(--text); text-decoration-color:var(--accent); text-underline-offset:3px; }

.prod-mas{ padding:40px 0 64px; }
.prod-mas .wrap{ max-width:900px; }
.prod-mas h2{ font-size:clamp(20px,2.6vw,26px); margin:8px 0 12px; }
.prod-mas p{ color:var(--text-muted); max-width:70ch; }
.prod-mas a{ color:var(--text); text-decoration-color:var(--accent); text-underline-offset:3px; }
.volver{ margin-top:24px; }
.volver a{ font-family:"IBM Plex Mono",monospace; font-size:12.5px; letter-spacing:.04em; text-decoration:none; color:var(--text-muted); }
.volver a:hover{ color:var(--accent); }

/* ---------- página de categoría ---------- */
.cat-hero{ padding:48px 0 20px; }
.cat-hero .wrap{ max-width:900px; }
.cat-lista{ padding:8px 0 64px; }

/* ---------- bloque catálogo en /repuestos/ ---------- */
.catalogo{ padding:40px 0 8px; }
.catalogo-titulo{ font-size:clamp(24px,3vw,32px); margin:0 0 6px; }
.catalogo-sub{ color:var(--text-muted); margin:0 0 18px; }
.catalogo-h3{ font-size:18px; margin:34px 0 10px; }
.buscador input{ width:100%; font:inherit; font-size:16px; padding:14px 16px; background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:8px; }
.buscador input:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.buscador .muted a{ color:var(--text); }
.cat-tiles{ display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:10px; }
.cat-tile{ display:flex; flex-direction:column; gap:4px; padding:14px 16px; background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:8px; text-decoration:none; color:var(--text); }
.cat-tile span{ font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; }
a.cat-tile:hover{ border-color:var(--accent); }
.cat-tile.vacia{ border-left-color:var(--border); opacity:.55; }

@media (max-width:760px){
  .prod{ padding:28px 0; }
  .prod-grid{ grid-template-columns:minmax(0,1fr); gap:22px; }
  .prod-datos > div{ grid-template-columns:96px 1fr; }
}

/* el recuadro de "Foto pendiente" usa las mismas clases que la foto real: centrar su texto */
.prod-foto-img.foto-pendiente, .prod-card-foto.foto-pendiente{ display:flex; }
/* barra fija con dos botones de cotizar: en celular queda solo el primero */
@media (max-width:560px){ .cta-fija .btn-wa + .btn-wa{ display:none; } .cta-fija .btn-wa small{ display:none; } }

/* enlaces del catálogo: letras rojas en vez de subrayado rojo (pedido de Carolina) */
.prod-datos a, .prod-compat a, .prod-notas a, .prod-mas a, .buscador .muted a{ color:var(--accent); text-decoration:none; }
.prod-datos a:hover, .prod-compat a:hover, .prod-notas a:hover, .prod-mas a:hover, .buscador .muted a:hover{ color:var(--accent-hover); text-decoration:underline; }
.prod-datos dd .chips{ margin:0; }

/* compatibilidad dentro del cuadro: etiquetas destacadas (antes heredaban el estilo de fila y se estiraban) */
.prod-datos dd .chips{ gap:8px; }
.prod-datos dd .chip{ font-family:"IBM Plex Sans",sans-serif; font-weight:600; font-size:14px; padding:5px 12px; border-radius:999px; background:rgba(227,36,28,0.12); border:1px solid rgba(227,36,28,0.55); color:var(--text); }
.prod-datos > div:has(.chips) dt{ align-self:center; }
/* botones de cotizar: que el número baje de línea en pantallas angostas en vez de salirse */
.btn-wa{ white-space:normal; text-align:center; }
@media (max-width:420px){
  .prod-datos > div{ grid-template-columns:1fr; gap:6px; }
}

/* línea "para camiones Mercedes-Benz" bajo el nombre del repuesto (va dentro del h1 por SEO) */
.prod-titulo .prod-para{ display:block; margin-top:10px; font-family:"IBM Plex Mono",monospace; font-size:13px; font-weight:500; letter-spacing:.12em; color:var(--text-muted); }

/* compatibilidad con motores y camiones: dos líneas rotuladas */
.compat-grupo{ display:grid; grid-template-columns:62px 1fr; gap:10px; align-items:center; background:none !important; padding:0 !important; }
.compat-grupo + .compat-grupo{ margin-top:8px; }
.compat-sub{ font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); }
/* motor y camión separados por una línea, rótulo siempre al lado (si va arriba parece que "Actros" fuera un motor) */
.compat-grupo + .compat-grupo{ margin-top:10px; padding-top:10px !important; border-top:1px dashed var(--border); }
.compat-sub{ color:var(--text); }
@media (max-width:420px){
  .compat-grupo{ grid-template-columns:54px 1fr; gap:8px; }
  .prod-datos dd .chips{ gap:6px; }
  .prod-datos dd .chip{ font-size:12px; padding:3px 9px; }
}

/* fila de compatibilidad a todo el ancho del cuadro: título arriba, grupos debajo con su rótulo al lado */
.prod-datos > div.fila-compat{ grid-template-columns:1fr; gap:10px; }
.fila-compat .compat-grupo{ grid-template-columns:64px 1fr; }

/* todas las filas del cuadro igual que la compatibilidad: rótulo arriba, dato pegado a la izquierda */
.prod-datos > div{ grid-template-columns:1fr; gap:8px; }
@media (max-width:760px){ .prod-datos > div{ grid-template-columns:1fr; } }