/* ============================================================================
   Driver Shop — estilos del catálogo de afiliación, estilo TIENDA.
   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 (chips) ─────────────────────────────────────── */
.dshop-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 6px; }
.dshop-nav-link { display: inline-flex; align-items: center; gap: 7px; 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: .86rem; box-shadow: var(--ds-shadow-sm); }
.dshop-nav-link:hover { border-color: var(--ds-blue); color: var(--ds-blue); }
.dshop-nav-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: rgba(11, 79, 159, .1); color: var(--ds-blue); font-size: .72rem; font-weight: 700; }

/* ── Secciones de categoría (todas el mismo tratamiento) ──────────────────── */
.dshop-category { margin: 30px 0 8px; scroll-margin-top: 90px; }
.dshop-category-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.dshop-category-ico { flex: 0 0 auto; width: 40px; height: 40px; 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: 23px; height: 23px; }
.dshop-category-title { margin: 0; font-size: 1.22rem; color: var(--ds-ink); display: flex; flex-wrap: wrap; align-items: baseline; gap: 9px; }
.dshop-category-count { font-size: .78rem; font-weight: 600; color: var(--ds-muted); }
.dshop-category-sub { margin: 3px 0 0; color: var(--ds-muted); font-size: .92rem; line-height: 1.5; max-width: 90ch; }

/* ── Rejilla tipo tienda: 2 móvil · 3 tablet · 4 escritorio ───────────────── */
.dshop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
@media (min-width: 600px) { .dshop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 940px) { .dshop-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ── Tarjeta de producto (escaparate compacto, altura uniforme) ───────────── */
.dshop-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--ds-line); border-radius: var(--ds-radius-lg); overflow: hidden; box-shadow: var(--ds-shadow-sm); transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; }
.dshop-card:hover { box-shadow: var(--ds-shadow-md); transform: translateY(-2px); border-color: rgba(11, 79, 159, .35); }

/* Imagen / placeholder: marco cuadrado-apaisado uniforme arriba */
.dshop-thumb { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(11, 79, 159, .06), rgba(11, 79, 159, .13)); color: var(--ds-blue); border-bottom: 1px solid var(--ds-line); overflow: hidden; }
.dshop-thumb svg { width: 38px; height: 38px; opacity: .85; }
.dshop-thumb--photo { background: #fff; }
.dshop-thumb--photo img { width: 100%; height: 100%; object-fit: contain; padding: 10px; display: block; }

.dshop-card-body { display: flex; flex-direction: column; gap: 8px; padding: 12px 13px 13px; flex: 1 1 auto; min-width: 0; }
.dshop-card-title { margin: 0; font-size: .96rem; line-height: 1.3; color: var(--ds-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dshop-card-desc { margin: 0; color: var(--ds-muted); font-size: .85rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Chips de specs verificadas */
.dshop-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dshop-chip { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; background: rgba(11, 79, 159, .06); border: 1px solid var(--ds-line); color: var(--ds-ink); font-size: .74rem; font-weight: 600; }

/* Pie de tarjeta: detalle plegable + botón, siempre abajo */
.dshop-card-foot { margin-top: auto; display: flex; flex-direction: column; gap: 9px; padding-top: 4px; }

/* Detalle plegable "A favor y en contra" */
.dshop-more { border-top: 1px dashed var(--ds-line); padding-top: 8px; }
.dshop-more > summary { cursor: pointer; list-style: none; color: var(--ds-blue); font-size: .8rem; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.dshop-more > summary::-webkit-details-marker { display: none; }
.dshop-more > summary::before { content: "+"; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 999px; background: rgba(11, 79, 159, .1); font-weight: 700; line-height: 1; }
.dshop-more[open] > summary::before { content: "–"; }
.dshop-more-body { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 8px; }
.dshop-proscons-label { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 3px; }
.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: 17px; font-size: .82rem; line-height: 1.4; color: var(--ds-ink); margin-bottom: 3px; }
.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; }

/* CTA de afiliado: ancho de la tarjeta, tamaño contenido */
.dshop-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 9px 14px; border-radius: var(--ds-radius-md); background: var(--ds-blue); color: #fff; text-decoration: none; font-weight: 700; font-size: .86rem; box-shadow: var(--ds-shadow-sm); }
.dshop-cta:hover { filter: brightness(1.08); }
.dshop-cta-ico { width: 15px; height: 15px; flex: 0 0 auto; }
.dshop-cta--compact { padding: 8px 13px; }

/* Divulgación y nota 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: 30px 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: .86rem; 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-card .dshop-thumb { flex: 0 0 auto; width: 46px; height: 46px; aspect-ratio: auto; border: 1px solid var(--ds-line); border-radius: var(--ds-radius-sm); }
.dshop-mini-card .dshop-thumb svg { width: 24px; height: 24px; }
.dshop-mini-card .dshop-thumb--photo img { padding: 5px; }
.dshop-mini-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.dshop-mini-title { font-size: .9rem; color: var(--ds-ink); line-height: 1.3; }
.dshop-mini-desc { font-size: .8rem; color: var(--ds-muted); line-height: 1.4; }

@media (min-width: 720px) {
  .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; }
}