/* ============================================================
   PARTS NAVIGATOR — pn-style.css  v4.6
   ============================================================ */

#pn-root .pn-groups-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  padding: 4px 0 2rem !important;
}

#pn-root .pn-group-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 20px 14px 16px !important;
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,.1) !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  text-align: center !important;
  min-height: 180px !important;
  width: 100% !important;
  color: #1a1a1a !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition: border .18s, transform .12s !important;
}

#pn-root .pn-group-card:hover,
#pn-root .pn-group-card:focus {
  border: 2px solid #F5AF20 !important;
  background: #ffffff !important;
  transform: translateY(-2px) !important;
  outline: none !important;
}

#pn-root .pn-group-visual {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 110px !important;
  margin-bottom: 12px !important;
}

#pn-root .pn-group-img {
  height: 100px !important;
  max-width: 30% !important;
  object-fit: contain !important;
}

#pn-root .pn-group-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1a1a1a !important;
  line-height: 1.35 !important;
}

#pn-root .pn-group-subtitle {
  font-size: 11px !important;
  color: #999 !important;
  margin-top: 4px !important;
}

/* ── Cabecera ─────────────────────────────────────────────── */
#pn-root .pn-page-header  { margin-bottom: 1.5rem !important; }
#pn-root .pn-page-title   { font-size: 28px !important; font-weight: 700 !important; color: #1a1a1a !important; margin-bottom: .5rem !important; line-height: 1.2 !important; }
#pn-root .pn-page-desc    { font-size: 15px !important; color: #6b6b6b !important; line-height: 1.6 !important; max-width: 720px !important; }
#pn-root .pn-section-title { font-size: 16px !important; font-weight: 700 !important; color: #1a1a1a !important; margin-bottom: 0 !important; }

/* ── Breadcrumb ───────────────────────────────────────────── */
#pn-root .pn-breadcrumb {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 13px !important;
  color: #6b6b6b !important;
  margin-bottom: 1rem !important;
  flex-wrap: wrap !important;
}
#pn-root .pn-breadcrumb a { color: #F5AF20 !important; text-decoration: none !important; }
#pn-root .pn-breadcrumb a:hover { text-decoration: underline !important; }

/* ── Brands grid ──────────────────────────────────────────── */
#pn-root .pn-brands-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 14px !important;
  margin-bottom: 2rem !important;
}

#pn-root .pn-brand-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding: 22px 24px !important;
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,.1) !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  text-align: left !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  width: 100% !important;
  min-height: 80px !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition: border .15s, transform .12s !important;
}

#pn-root .pn-brand-card:hover,
#pn-root .pn-brand-card:focus,
#pn-root .pn-brand-card.active {
  border: 2px solid #F5AF20 !important;
  background: #ffffff !important;
  outline: none !important;
  transform: translateY(-2px) !important;
}

#pn-root .pn-brand-name { font-size: 18px !important; font-weight: 700 !important; color: #1a1a1a !important; line-height: 1.2 !important; }
#pn-root .pn-brand-desc { font-size: 13px !important; color: #6b6b6b !important; }

/* ── Models bar + grid ────────────────────────────────────── */
#pn-root .pn-models-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  flex-wrap: wrap !important;
  margin-bottom: 1rem !important;
}

#pn-root .pn-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
}

#pn-root #pn-models-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
}

#pn-root .pn-type-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  padding: 14px 36px 12px 14px !important;
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,.1) !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  text-align: left !important;
  width: 100% !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition: border .15s !important;
}

#pn-root .pn-type-card:hover,
#pn-root .pn-type-card:focus {
  border: 2px solid #F5AF20 !important;
  background: #ffffff !important;
  outline: none !important;
}

#pn-root .pn-card-name  { font-size: 13px !important; font-weight: 500 !important; color: #1a1a1a !important; line-height: 1.3 !important; }
#pn-root .pn-card-meta  { font-size: 11px !important; color: #999 !important; }
#pn-root .pn-card-arrow {
  position: absolute !important; top: 50% !important; right: 12px !important;
  transform: translateY(-50%) !important; font-size: 18px !important;
  color: #999 !important; opacity: 0 !important; transition: opacity .15s !important;
}
#pn-root .pn-type-card:hover .pn-card-arrow { opacity: 1 !important; color: #F5AF20 !important; }

/* ── Buscador ─────────────────────────────────────────────── */
#pn-root .pn-search {
  font-size: 13px !important;
  padding: 8px 14px !important;
  border: 1px solid rgba(0,0,0,.1) !important;
  border-radius: 6px !important;
  background: #f7f7f5 !important;
  color: #1a1a1a !important;
  width: 260px !important;
  outline: none !important;
}
#pn-root .pn-search:focus { border-color: #F5AF20 !important; background: #fff !important; }

/* ── Toolbar de resultados ────────────────────────────────── */
#pn-root .pn-res-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
  margin-bottom: 1rem !important;
  margin-top: 1.5rem !important;
}

#pn-root .pn-res-toolbar-right {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  flex-wrap: wrap !important;
}

#pn-root .pn-result-count { font-size: 13px !important; color: #6b6b6b !important; white-space: nowrap !important; }

/* ── Tabla de partes ──────────────────────────────────────── */
#pn-root #pn-parts-table-wrap {
  width: 100% !important;
  overflow-x: auto !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  border-radius: 12px !important;
  margin-bottom: 1.5rem !important;
}

#pn-root .pn-parts-table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 13px !important;
  background: #ffffff !important;
}

#pn-root .pn-parts-table thead tr {
  background: #f7f7f5 !important;
  border-bottom: 1px solid rgba(0,0,0,.08) !important;
}

#pn-root .pn-parts-table th {
  padding: 12px 16px !important;
  text-align: left !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #6b6b6b !important;
  white-space: nowrap !important;
}

#pn-root .pn-parts-table td {
  padding: 14px 16px !important;
  border-bottom: 1px solid rgba(0,0,0,.06) !important;
  color: #1a1a1a !important;
  vertical-align: middle !important;
}

#pn-root .pn-parts-table tbody tr:last-child td {
  border-bottom: none !important;
}

#pn-root .pn-parts-table tbody tr:hover td {
  background: #fafafa !important;
}

#pn-root .pn-part-link {
  color: #F5AF20 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  font-family: monospace !important;
  font-size: 13px !important;
}
#pn-root .pn-part-link:hover { text-decoration: underline !important; }

#pn-root .pn-part-desc { max-width: 340px !important; line-height: 1.4 !important; }

/* Condition badge */
#pn-root .pn-condition {
  display: inline-block !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
  white-space: nowrap !important;
}
#pn-root .pn-cond-new   { background: #E6F4EA !important; color: #1E6F3E !important; }
#pn-root .pn-cond-reman { background: #EEF0FF !important; color: #3730A3 !important; }
#pn-root .pn-cond-used  { background: #FEF9EC !important; color: #92400E !important; }

/* Status */
#pn-root .pn-status-cell { white-space: nowrap !important; }
#pn-root .pn-status-dot {
  display: inline-block !important;
  width: 8px !important; height: 8px !important;
  border-radius: 50% !important;
  margin-right: 5px !important;
  vertical-align: middle !important;
}
#pn-root .pn-status-dot.in  { background: #22C55E !important; }
#pn-root .pn-status-dot.out { background: #EF4444 !important; }

/* Botones de acción */
#pn-root .pn-actions-cell {
  white-space: nowrap !important;
  text-align: right !important;
}

#pn-root .pn-btn-list,
#pn-root .pn-btn-quote {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 7px 14px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  border: none !important;
  transition: opacity .15s, transform .1s !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

#pn-root .pn-btn-list {
  background: #1a1a1a !important;
  color: #ffffff !important;
  margin-right: 6px !important;
}
#pn-root .pn-btn-list:hover { opacity: .85 !important; }

#pn-root .pn-btn-quote {
  background: #F5AF20 !important;
  color: #1a1a1a !important;
}
#pn-root .pn-btn-quote:hover { opacity: .85 !important; }

#pn-root .pn-btn-list:disabled { opacity: .5 !important; cursor: default !important; }

/* ── Paginación ───────────────────────────────────────────── */
#pn-root .pn-pagination { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; margin-top: 1.5rem !important; }
#pn-root .pn-page-btn {
  font-size: 13px !important; padding: 6px 12px !important;
  border: 1px solid rgba(0,0,0,.1) !important; border-radius: 6px !important;
  background: #fff !important; color: #1a1a1a !important; cursor: pointer !important;
}
#pn-root .pn-page-btn:hover  { border-color: #F5AF20 !important; color: #F5AF20 !important; }
#pn-root .pn-page-btn.active { background: #F5AF20 !important; border-color: #F5AF20 !important; color: #fff !important; }

/* ── Estados ──────────────────────────────────────────────── */
#pn-root .pn-empty { font-size: 14px !important; color: #6b6b6b !important; padding: 2rem 0 !important; }
#pn-root .pn-error { font-size: 14px !important; color: #6b6b6b !important; padding: 2rem 0 !important; }
#pn-root .pn-error strong { color: #A32D2D !important; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 960px) {
  #pn-root .pn-groups-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

@media (max-width: 640px) {
  #pn-root .pn-groups-grid  { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  #pn-root .pn-group-card   { min-height: 150px !important; padding: 14px 10px 12px !important; }
  #pn-root .pn-group-visual { height: 80px !important; }
  #pn-root .pn-group-img    { height: 72px !important; }
  #pn-root .pn-group-label  { font-size: 12px !important; }
  #pn-root .pn-brands-grid  { grid-template-columns: 1fr !important; }
  #pn-root .pn-models-bar   { flex-direction: column !important; align-items: flex-start !important; }
  #pn-root .pn-res-toolbar  { flex-direction: column !important; align-items: flex-start !important; }
  #pn-root .pn-page-title   { font-size: 22px !important; }
  #pn-root .pn-search       { width: 100% !important; }
  #pn-root .pn-btn-list,
  #pn-root .pn-btn-quote    { padding: 6px 10px !important; font-size: 11px !important; }
}