/* ============================================================================
   Driver Shop — estilos exclusivos del catálogo de afiliación.
   REGLAS: todas las clases con prefijo .dshop- y CERO selectores globales o
   de etiqueta sueltos (los descendientes siempre cuelgan de una clase .dshop-).
   Colores, radios y sombras desde los tokens del design system (var(--ds-*)).
   Se carga en /driver-shop y en /driver-tacho (bloque compacto de lectores).
   ========================================================================== */

/* ── Hero de la página ────────────────────────────────────────────────────── */
.dshop-hero { padding: 8px 0 4px; }
.dshop-hero .dshop-kicker { display: inline-flex; align-items: center; gap: 8px; color: var(--ds-blue); font-weight: 700; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; }
.dshop-hero .dshop-lead { max-width: 70ch; color: var(--ds-muted); }

/* ── Navegación de categorías ─────────────────────────────────────────────── */
.dshop-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 6px; }
.dshop-nav-link { display: inline-flex; align-items: center; padding: 7px 14px; border: 1px solid var(--ds-line); border-radius: 999px; background: #fff; color: var(--ds-ink); text-decoration: none; font-weight: 600; font-size: .88rem; box-shadow: var(--ds-shadow-sm); }
.dshop-nav-link:hover { border-color: var(--ds-blue); color: var(--ds-blue); }

/* ── Secciones de categoría ───────────────────────────────────────────────── */
.dshop-category { margin: 26px 0 8px; scroll-margin-top: 90px; }
.dshop-category--featured { border: 1px solid var(--ds-line); border-left: 4px solid var(--ds-blue); border-radius: var(--ds-radius-lg); padding: 18px; background: #fff; box-shadow: var(--ds-shadow-sm); }
.dshop-category-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.dshop-category-ico { flex: 0 0 auto; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--ds-radius-md); background: rgba(11, 79, 159, .08); color: var(--ds-blue); }
.dshop-category-ico svg { width: 22px; height: 22px; }
.dshop-category-title { margin: 0; font-size: 1.25rem; color: var(--ds-ink); }
.dshop-category-sub { margin: 2px 0 0; color: var(--ds-muted); font-size: .95rem; }

/* ── Grid y tarjetas de producto ──────────────────────────────────────────── */
.dshop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.dshop-card { display: flex; flex-direction: column; gap: 10px; background: #fff; border: 1px solid var(--ds-line); border-radius: var(--ds-radius-lg); padding: 16px; box-shadow: var(--ds-shadow-sm); }
.dshop-thumb { display: flex; align-items: center; justify-content: center; height: 84px; border-radius: var(--ds-radius-md); background: linear-gradient(135deg, rgba(11, 79, 159, .07), rgba(11, 79, 159, .14)); color: var(--ds-blue); }
.dshop-thumb svg { width: 40px; height: 40px; }
.dshop-card-title { margin: 0; font-size: 1.02rem; line-height: 1.35; color: var(--ds-ink); }
.dshop-card-desc { margin: 0; color: var(--ds-muted); font-size: .92rem; line-height: 1.5; }

/* Pros / contras */
.dshop-proscons { display: grid; grid-template-columns: 1fr; gap: 8px; }
.dshop-proscons-label { display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px; }
.dshop-proscons-label--pro { color: #15803d; }
.dshop-proscons-label--con { color: #b45309; }
.dshop-list { margin: 0; padding: 0; list-style: none; }
.dshop-list li { position: relative; padding-left: 18px; font-size: .88rem; line-height: 1.45; color: var(--ds-ink); margin-bottom: 4px; }
.dshop-list--pros li::before { content: "✓"; position: absolute; left: 0; color: #15803d; font-weight: 700; }
.dshop-list--contras li::before { content: "—"; position: absolute; left: 0; color: #b45309; font-weight: 700; }

/* Specs (solo se pintan las verificadas) */
.dshop-specs { margin: 0; padding: 10px 12px; background: rgba(11, 79, 159, .04); border-radius: var(--ds-radius-md); display: grid; gap: 4px; }
.dshop-spec { display: flex; gap: 8px; font-size: .85rem; }
.dshop-spec dt { margin: 0; flex: 0 0 auto; font-weight: 600; color: var(--ds-ink); }
.dshop-spec dt::after { content: ":"; }
.dshop-spec dd { margin: 0; color: var(--ds-muted); }

/* CTA de afiliado */
.dshop-cta { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--ds-blue); color: #fff; text-decoration: none; font-weight: 700; font-size: .92rem; box-shadow: var(--ds-shadow-sm); }
.dshop-cta:hover { filter: brightness(1.08); }
.dshop-cta-ico { width: 16px; height: 16px; flex: 0 0 auto; }
.dshop-cta--compact { padding: 8px 13px; font-size: .85rem; margin-top: 0; }

/* Divulgación de afiliado */
.dshop-disclosure { margin: 10px 0 0; color: var(--ds-muted); font-size: .82rem; line-height: 1.5; }
.dshop-disclosure a { color: var(--ds-blue); }
.dshop-footnote { margin: 28px 0 0; padding: 14px 16px; border: 1px solid var(--ds-line); border-radius: var(--ds-radius-md); background: #fff; color: var(--ds-muted); font-size: .88rem; line-height: 1.55; }
.dshop-footnote a { color: var(--ds-blue); }
.dshop-empty { color: var(--ds-muted); }

/* ── Bloque compacto en /driver-tacho ─────────────────────────────────────── */
.dshop-tacho-block { margin: 14px 0 4px; padding: 14px 16px; border: 1px solid var(--ds-line); border-left: 4px solid var(--ds-blue); border-radius: var(--ds-radius-md); background: rgba(11, 79, 159, .03); }
.dshop-block-title { margin: 0 0 10px; font-weight: 700; color: var(--ds-ink); font-size: .98rem; }
.dshop-mini-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.dshop-mini-card { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--ds-line); border-radius: var(--ds-radius-md); padding: 10px 12px; }
.dshop-mini-ico { flex: 0 0 auto; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--ds-radius-sm); background: rgba(11, 79, 159, .08); color: var(--ds-blue); }
.dshop-mini-ico svg { width: 20px; height: 20px; }
.dshop-mini-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.dshop-mini-title { font-size: .92rem; color: var(--ds-ink); line-height: 1.3; }
.dshop-mini-desc { font-size: .82rem; color: var(--ds-muted); line-height: 1.4; }

@media (min-width: 720px) {
  .dshop-proscons { grid-template-columns: 1fr 1fr; }
  .dshop-mini-grid { grid-template-columns: repeat(3, 1fr); }
  .dshop-mini-card { flex-direction: column; align-items: flex-start; }
  .dshop-mini-card .dshop-cta--compact { align-self: stretch; }
}