/* Seminuevos CAMSOL — /seminuevos/.
   La página se arma con los componentes compartidos de producto.css (.pp-section, .pp-head, .pp-product,
   .pp-cards, .pp-field, .pp-cta-band, .pp-sticky-cta…), los botones de style.css (.btn-primary, .btn-link) y la
   paginación de Bootstrap. Aquí solo va lo que esos componentes no cubren: logotipo de Quality Trucks,
   panel de filtros, foto/precio/datos de la tarjeta de unidad y avisos sin resultados. */

/* ── Hero: logotipo de Quality Trucks junto al descriptor ── */
.hero-text-secondary .pp-hero-eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem 0.6rem; }
.pp-hero-eyebrow .sn-hero-qt { display: block; width: auto; height: 20px; }

/* Ícono de WhatsApp dentro de botones */
.sn-page .btn img { width: 20px; height: 20px; margin-right: 0.5rem; }

/* ── Franja de Quality Trucks: más compacta que una sección normal ── */
.pp-section.sn-qt { padding: clamp(1.75rem, 3.5vw, 2.5rem) 0; }
.sn-qt-in { display: grid; gap: 1rem 3rem; align-items: center; }
.sn-qt-logo { width: min(240px, 60%); height: auto; }
.sn-qt .pp-head { margin: 0; }
.sn-qt .pp-lead + .pp-lead { margin-top: 0.5rem; }
@media (min-width: 992px) { .sn-qt-in { grid-template-columns: 240px 1fr; } .sn-qt-logo { width: 100%; } }

/* Enlace con flecha (.btn-link + .pp-arrow, igual que en .pp-product) en línea con el texto */
.sn-page .btn-link { min-height: 2.75rem; display: inline-flex; align-items: center; font-weight: 700; vertical-align: baseline; }
.sn-page .btn-link .pp-arrow { margin-left: 0.4rem; }

/* ── Filtros. Sin JS: formulario GET visible y botón "Aplicar". Con JS: se aplican al cambiar cada campo. ── */
#inventario { scroll-margin-top: 70px; }
.sn-filtros { margin-bottom: 1.5rem; background: var(--blanco); border: 1px solid var(--gray-100); border-radius: 8px; }
.sn-filtros-toggle {
  display: flex; align-items: center; gap: 0.75rem; min-height: 3.25rem; padding: 0.5rem 1.25rem;
  list-style: none; cursor: pointer; font-family: "International Headline"; font-weight: 700; text-transform: uppercase;
}
.sn-filtros-toggle::-webkit-details-marker { display: none; }
.sn-filtros-toggle::after {
  content: ""; width: 10px; height: 10px; margin-left: auto; border: solid currentColor; border-width: 0 2px 2px 0;
  transform: rotate(45deg); transition: transform 0.2s;
}
.sn-filtros[open] > .sn-filtros-toggle::after { transform: rotate(-135deg); }
.sn-filtros-toggle:focus-visible { outline: 3px solid var(--international-orange); outline-offset: 3px; }
.sn-filtros-n {
  display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; padding: 0 0.4rem; border-radius: 999px;
  background: var(--international-orange); color: var(--negro); font-family: "International Text"; font-size: 0.85rem;
}
.sn-filtros-n[hidden] { display: none; }
.sn-filtros-form { display: grid; gap: 1rem; padding: 0.25rem 1.25rem 1.25rem; }
.sn-filtros-campos { display: grid; gap: 1rem; }
.sn-filtros-aplicar .btn { width: 100%; min-height: 2.75rem; }
html.sn-js .sn-filtros-aplicar { display: none; }
@media (min-width: 576px) { .sn-filtros-campos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) {
  /* Escritorio: filtros siempre visibles en una fila; el botón plegable solo existe en móvil/tablet */
  .sn-filtros-toggle { display: none; }
  .sn-filtros-form { grid-template-columns: 1fr auto; align-items: end; gap: 1rem 1.5rem; padding: 1.25rem; }
  .sn-filtros-campos { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
  .sn-orden { min-width: 240px; }
  .sn-filtros-aplicar { grid-column: 1 / -1; }
  .sn-filtros-aplicar .btn { width: auto; }
}

/* ── Resultados ── */
.sn-resultados { min-height: 12rem; transition: opacity 0.15s; }
.sn-resultados.is-loading { opacity: 0.45; pointer-events: none; }
.sn-conteo-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1rem; margin-bottom: 1rem; }
.sn-conteo { margin: 0; color: var(--gray-700); }
.sn-conteo strong { color: var(--negro); }

/* Rejilla: .pp-products fija 3 columnas; aquí se llena el ancho disponible (4 en pantallas grandes) */
.pp-products.sn-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }

/* Tarjeta de unidad (.pp-product): foto 4:3 de Quality Trucks, datos en dos columnas, precio y acciones */
.sn-card-media { aspect-ratio: 4 / 3; background: var(--blanco); overflow: hidden; }
.sn-card .sn-card-media img { height: 100%; aspect-ratio: auto; }
.sn-card-noimg {
  display: flex; align-items: center; justify-content: center; height: 100%; padding: 1rem; text-align: center;
  background: var(--negro); color: #fff; font-family: "International Headline"; font-weight: 700; text-transform: uppercase;
}
.sn-tags { gap: 0.4rem; }
.sn-tags li { padding: 0.15rem 0.6rem; font-size: var(--pp-fs-small); }
.sn-card .pp-datos { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem; margin: 0; }
.sn-card .pp-datos li { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.sn-card .pp-datos span { font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray-700); }
.sn-precio { margin-top: auto !important; padding-top: 0.5rem; font-family: "International Headline"; font-weight: 700; font-size: 1.4rem; line-height: 1.1; }
.sn-precio--consultar { font-size: var(--pp-fs-lead); color: var(--gray-700); }
/* Lado a lado si caben; si la tarjeta es angosta, uno debajo del otro a todo el ancho */
.sn-card .pp-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 0.5rem; margin-top: 0.25rem; }
.sn-card .pp-actions .btn { padding: 0.6rem 0.9rem; white-space: nowrap; }
.sn-card .btn img { aspect-ratio: auto; display: inline; }
/* WhatsApp queda por encima del enlace estirado de la tarjeta (.stretched-link) */
.sn-wa { position: relative; z-index: 2; }

/* Avisos: sin resultados, sin unidades, API no disponible */
.sn-aviso { padding: clamp(1.75rem, 4vw, 2.75rem); text-align: center; background: var(--blanco); }
.sn-aviso p { max-width: 38rem; margin: 0 auto; color: var(--gray-700); }
.sn-aviso .pp-actions { justify-content: center; margin-top: 1.25rem; }

/* Paginación de Bootstrap con los colores del sitio */
.sn-paginacion { margin-top: 2rem; }
.sn-paginacion .pagination {
  --bs-pagination-color: var(--negro); --bs-pagination-hover-color: var(--negro); --bs-pagination-hover-bg: #fff;
  --bs-pagination-hover-border-color: var(--international-orange); --bs-pagination-focus-color: var(--negro);
  --bs-pagination-focus-box-shadow: 0 0 0 3px var(--international-orange); --bs-pagination-active-bg: var(--negro);
  --bs-pagination-active-border-color: var(--negro); --bs-pagination-disabled-bg: transparent; --bs-pagination-disabled-border-color: transparent;
  flex-wrap: wrap; justify-content: center; gap: 0.4rem; margin: 0;
}
.sn-paginacion .page-link { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: 0 !important; border-radius: 8px !important; font-weight: 700; }

/* ── Respaldo CAMSOL (.pp-cards) ── */
.sn-respaldo .pp-card { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.sn-respaldo .pp-card h3 { margin: 0; }
.sn-respaldo .pp-card p { margin: 0; color: var(--gray-700); }
.sn-respaldo .btn-link { display: inline-block; margin-top: auto; padding: 0.6rem 0 0; text-align: left; }

/* ── Banda final: tarjeta clara con filete naranja sobre fondo blanco (como la del blog), separada del pie oscuro ── */
.sn-banda-in {
  display: flex; flex-direction: column; gap: 1.5rem; padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--blanco); border: 1px solid var(--gray-100); border-left: 6px solid var(--international-orange); border-radius: 8px;
}
.sn-banda .pp-h2 { margin-bottom: 0.5rem; }
.sn-banda .pp-lead { margin: 0; }
.sn-banda-in > div:first-child { flex: 1 1 auto; }
@media (min-width: 992px) {
  .sn-banda-in { flex-direction: row; align-items: center; justify-content: space-between; gap: 3rem; }
  .sn-banda .pp-actions { flex-shrink: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sn-resultados, .sn-filtros-toggle::after { transition: none; }
}