{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "offershelf",
  "type": "registry:component",
  "title": "OfferShelf",
  "description": "Componente Concorde OfferShelf — un solo archivo, OfferShelf.tsx.",
  "dependencies": [
    "react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/OfferShelf.tsx",
      "type": "registry:file",
      "target": "components/OfferShelf.tsx",
      "content": "\"use client\";\n\n/**\n * OfferShelf — Generado por Concorde\n * Fuente: Figma VOYAGER · estante de ofertas (Recomendados / Me interesa)\n *\n * Sección 766×352: CardTitle (título + nº de ofertas, con brackets) sobre una\n * fila de 4 OfferCards. Igual que el subastador de la Homepage pero sin el\n * acceso «Ir al Perfil». Compone CardTitle · OfferCard · BadgeStatus.\n */\n\nimport type { JSX } from \"react\";\nimport OfferCard, { type OfferCardVariant } from \"@/concorde/components/OfferCard\";\nimport BadgeStatus from \"@/concorde/components/BadgeStatus\";\nimport CardTitle from \"@/concorde/components/CardTitle\";\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport type OfferShelfBadge = \"none\" | \"live\" | \"proxima\";\n\nexport interface OfferShelfItem {\n  name: string;\n  year: string | number;\n  /** Precio formateado. Omitido en `negotiable` (solo like). */\n  price?: string;\n  /** Variante de la card (barra naranja/teal). Default \"live\". */\n  variant?: OfferCardVariant;\n  imageSrc?: string;\n  /** Pill de estado sobre la imagen. */\n  badge?: OfferShelfBadge;\n}\n\nexport interface OfferShelfProps {\n  /** Título de la sección (default \"RECOMENDADOS\"). */\n  title?: string;\n  /** Etiqueta de ofertas (default \"4 Ofertas\"). */\n  offersLabel?: string;\n  /** Las 4 ofertas (cards). */\n  offers?: OfferShelfItem[];\n  className?: string;\n}\n\nexport const OFFER_SHELF_WIDTH = 766;\nexport const OFFER_SHELF_HEIGHT = 352;\n\nconst IMG = \"/demo/bronco.jpg\";\n\nconst DEFAULT_OFFERS: OfferShelfItem[] = [\n  { name: \"Audi Q3\", year: 2026, price: \"US$ 9,999\", variant: \"live\", imageSrc: IMG },\n  { name: \"Audi Q3\", year: 2026, price: \"US$ 9,999\", variant: \"live\", imageSrc: IMG, badge: \"live\" },\n  { name: \"Audi Q3\", year: 2026, variant: \"negotiable\", imageSrc: IMG },\n  { name: \"Audi Q3\", year: 2026, price: \"US$ 9,999\", variant: \"live\", imageSrc: IMG, badge: \"proxima\" },\n];\n\nfunction badgeFor(badge: OfferShelfBadge | undefined): JSX.Element | undefined {\n  if (badge === \"live\") return <BadgeStatus variant=\"live\" />;\n  if (badge === \"proxima\") return <BadgeStatus variant=\"proxima\" />;\n  return undefined;\n}\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\nexport default function OfferShelf({\n  title = \"RECOMENDADOS\",\n  offersLabel = \"4 Ofertas\",\n  offers = DEFAULT_OFFERS,\n  className = \"\",\n}: OfferShelfProps): JSX.Element {\n  return (\n    <section\n      className={className}\n      data-component=\"offer-shelf\"\n      style={{\n        boxSizing: \"border-box\",\n        width: OFFER_SHELF_WIDTH,\n        height: OFFER_SHELF_HEIGHT,\n        background: \"#ffffff\",\n        borderRadius: 16,\n        boxShadow: \"rgba(0,0,0,0.07) 0px 0px 16px 4px\",\n        padding: \"20px 16px 16px\",\n        display: \"flex\",\n        flexDirection: \"column\",\n        justifyContent: \"space-between\",\n        fontFamily: \"var(--vmc-font-display, 'Plus Jakarta Sans', -apple-system, sans-serif)\",\n      }}\n    >\n      {/* Cabecera: título + nº de ofertas (brackets naranjas) */}\n      <header style={{ padding: \"0 8px\" }}>\n        <CardTitle title={title} subtitle={offersLabel} titleSize={16} subtitleSize={14} />\n      </header>\n\n      {/* Fila de 4 OfferCards */}\n      <div style={{ display: \"flex\", justifyContent: \"space-between\", alignItems: \"flex-end\", padding: \"0 8px\" }}>\n        {offers.map(function renderOffer(o, i) {\n          return (\n            <OfferCard\n              key={i}\n              variant={o.variant ?? \"live\"}\n              name={o.name}\n              year={o.year}\n              price={o.price}\n              imageSrc={o.imageSrc}\n              badge={badgeFor(o.badge)}\n              elevated\n            />\n          );\n        })}\n      </div>\n    </section>\n  );\n}\n"
    },
    {
      "path": "components/OfferCard.tsx",
      "type": "registry:file",
      "target": "components/OfferCard.tsx",
      "content": "\"use client\";\r\n\r\n/**\r\n * OfferCard — Generado por Concorde\r\n * Fuente: https://voyager-ds.vercel.app/preview/components/button-primary\r\n * Generado: 2026-05-28\r\n * EDITAR LIBREMENTE después de generar\r\n *\r\n * Variantes: live (orange bar, pprice+price+like) ·\r\n *            negotiable (teal bar, solo like)\r\n */\r\n\r\nimport { useState, useCallback, useId } from \"react\";\r\nimport type { JSX } from \"react\";\r\n\r\n// ─── Types ────────────────────────────────────────────────────────────────────\r\n\r\nexport type OfferCardVariant = \"live\" | \"negotiable\";\r\n\r\nexport interface OfferCardProps {\r\n  /** Variante — determina barra inferior y fila de precio */\r\n  variant: OfferCardVariant;\r\n  /** Tamaño. \"short\" = card compacta 134×170 (solo imagen + título/año + barra,\r\n   *  con el precio y el like como overlays sobre la imagen). Default \"full\". */\r\n  size?: \"full\" | \"short\";\r\n  /** Nombre del vehículo */\r\n  name: string;\r\n  /** Año */\r\n  year: string | number;\r\n  /**\r\n   * Precio formateado (\"US$ 9,999\").\r\n   * Si no se pasa, la fila de precio no se renderiza.\r\n   * En negotiable solo aparece el like.\r\n   */\r\n  price?: string;\r\n  /** URL imagen */\r\n  imageSrc?: string;\r\n  /** Alt text de imagen */\r\n  imageAlt?: string;\r\n  /** Badge de estado (pill BadgeStatus) — renderizado en img-badge slot */\r\n  badge?: JSX.Element;\r\n  /** Estado like controlado */\r\n  liked?: boolean;\r\n  /** Callback al alternar like */\r\n  onLikeChange?: (liked: boolean) => void;\r\n  /** Click en la card */\r\n  onClick?: () => void;\r\n  /** Aria label */\r\n  \"aria-label\"?: string;\r\n  /** Si false: showcase estático, sin hover/press. Default true */\r\n  interactive?: boolean;\r\n  /** Sombra elevada de Figma (X0 Y0 · Blur16 · Spread4 · #000000 10%). Default false */\r\n  elevated?: boolean;\r\n  className?: string;\r\n}\r\n\r\n// ─── Self-contained CSS ───────────────────────────────────────────────────────\r\n\r\nconst STYLE_ID = \"concorde-offercard-styles\";\r\n\r\nconst OFFERCARD_STYLES = `\r\n@keyframes offercard-heart-pop {\r\n  0%   { transform: scale(1); }\r\n  35%  { transform: scale(1.4); }\r\n  65%  { transform: scale(0.85); }\r\n  85%  { transform: scale(1.1); }\r\n  100% { transform: scale(1); }\r\n}\r\n@keyframes offercard-pulse {\r\n  0%, 100% { opacity: 1; }\r\n  50%       { opacity: 0.5; }\r\n}\r\n\r\n/* ── Card base — ancho y alto fijo, igual en ambas variantes ── */\r\n.pcard {\r\n  width: 170px;\r\n  height: 232px;\r\n  box-sizing: border-box;\r\n  background: #ffffff;\r\n  border-radius: 8px;\r\n  box-shadow:\r\n    rgba(0, 0, 0, 0.07) 0px 0px 16px 4px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  flex-shrink: 0;\r\n  position: relative;\r\n  overflow: hidden;\r\n  transition:\r\n    transform 150ms cubic-bezier(0.3, 0, 0, 1),\r\n    box-shadow 150ms cubic-bezier(0.3, 0, 0, 1);\r\n  cursor: pointer;\r\n}\r\n\r\n.pcard:hover:not(.pcard--disabled):not(.pcard--skeleton) {\r\n  transform: translateY(-3px);\r\n  box-shadow: oklch(0.22 0.18 285 / 0.12) 0px 12px 20px;\r\n}\r\n\r\n/* ── Image ── */\r\n.pcard__img {\r\n  width: 100%;\r\n  height: 112px;\r\n  background: oklch(0.93 0.006 220);\r\n  flex-shrink: 0;\r\n  overflow: hidden;\r\n  border-radius: 8px 8px 0 0;\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n.pcard__img img {\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n  display: block;\r\n}\r\n\r\n.pcard__img-badge {\r\n  position: absolute;\r\n  top: 8px;\r\n  right: 8px;\r\n  z-index: 2;\r\n}\r\n\r\n/* ── Body ── */\r\n.pcard__body {\r\n  display: flex;\r\n  flex-direction: column;\r\n  padding: 12px;\r\n  height: 112px;\r\n  flex-shrink: 0;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.pcard__meta {\r\n  flex: 1;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 2px;\r\n}\r\n\r\n.pcard__name {\r\n  font-family: var(--vmc-font-display, 'Plus Jakarta Sans', sans-serif);\r\n  font-size: 16px;\r\n  font-weight: 700;\r\n  line-height: 20px;\r\n  color: #4c1ebc;\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  margin: 0;\r\n}\r\n\r\n.pcard__year {\r\n  font-family: var(--vmc-font-display, 'Plus Jakarta Sans', sans-serif);\r\n  font-size: 11px;\r\n  font-weight: 500;\r\n  line-height: 16px;\r\n  letter-spacing: 0.06em;\r\n  text-transform: uppercase;\r\n  color: #191c1c;\r\n  margin: 0;\r\n}\r\n\r\n/* Price row — pprice + price text + like */\r\n.pcard__price-row {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  margin-top: 10px;\r\n  flex-shrink: 0;\r\n}\r\n\r\n.pcard__price-left {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 6px;\r\n}\r\n\r\n.pcard__price-text {\r\n  font-family: var(--vmc-font-mono, 'Roboto Mono', monospace);\r\n  font-size: 13px;\r\n  font-weight: 700;\r\n  line-height: 20px;\r\n  font-variant-numeric: tabular-nums;\r\n  color: #4c1ebc;\r\n  white-space: nowrap;\r\n}\r\n\r\n/* Like row — solo like (negotiable) */\r\n.pcard__like-row {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: flex-end;\r\n  margin-top: 10px;\r\n  flex-shrink: 0;\r\n}\r\n\r\n/* ── Variants — bottom bars ── */\r\n.pcard--live {\r\n  position: relative;\r\n}\r\n.pcard--live::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  bottom: 0;\r\n  left: 0;\r\n  right: 0;\r\n  height: 8px;\r\n  background: linear-gradient(90deg, #ff9639 0%, #ef852e 50%, #be3d00 100%);\r\n  border-radius: 0 0 var(--vmc-radius-sm, 4px) var(--vmc-radius-sm, 4px);\r\n}\r\n\r\n.pcard--negotiable {\r\n  position: relative;\r\n}\r\n.pcard--negotiable::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  bottom: 0;\r\n  left: 0;\r\n  right: 0;\r\n  height: 8px;\r\n  background: linear-gradient(90deg, #00edee 0%, #00d2d3 50%, #009597 100%);\r\n  border-radius: 0 0 var(--vmc-radius-sm, 4px) var(--vmc-radius-sm, 4px);\r\n}\r\n\r\n\r\n/* ── Price gem (auction diamond, paths exactos de Figma) ── */\r\n.pcard-pprice {\r\n  width: 30px;\r\n  height: 32px;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex-shrink: 0;\r\n}\r\n\r\n/* ── Mini like button (self-contained) ── */\r\n.pcard-like {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 30px;\r\n  height: 30px;\r\n  border-radius: 9999px;\r\n  border: 1.44px solid transparent;\r\n  background-image:\r\n    linear-gradient(#ffffff, #ffffff),\r\n    linear-gradient(135deg, #e8ddff 0%, #ffffff 40%, #cfbaff 75%, #ae8eff 100%);\r\n  background-origin: padding-box, border-box;\r\n  background-clip: padding-box, border-box;\r\n  cursor: pointer;\r\n  padding: 2px;\r\n  position: relative;\r\n  overflow: hidden;\r\n  box-shadow: rgba(132, 96, 229, 0.14) 0px 2px 8px;\r\n  transition:\r\n    transform 0.15s cubic-bezier(0.25, 0.8, 0.25, 1),\r\n    box-shadow 0.2s;\r\n  flex-shrink: 0;\r\n  outline: none;\r\n}\r\n/* Glass highlight (white 0.55 → transparent) */\r\n.pcard-like::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: 0;\r\n  border-radius: 9999px;\r\n  background: linear-gradient(rgba(255, 255, 255, 0.55) 0%, transparent 50%);\r\n  pointer-events: none;\r\n  z-index: 1;\r\n}\r\n.pcard-like svg { position: relative; z-index: 2; }\r\n.pcard-like:hover {\r\n  transform: scale(1.1) translateY(-1px);\r\n  box-shadow: rgba(32, 0, 104, 0.2) 0px 6px 14px;\r\n}\r\n.pcard-like:active { transform: scale(0.92); }\r\n.pcard-like--active {\r\n  background-image:\r\n    linear-gradient(135deg, #8460e5 0%, #3b1782 100%),\r\n    linear-gradient(135deg, #fbc47d 0%, #fbc47d 100%);\r\n  box-shadow: rgba(132, 96, 229, 0.35) 0px 2px 8px, inset 0px 1px 0px rgba(255,255,255,0.22);\r\n}\r\n.pcard-like--pop svg {\r\n  animation: offercard-heart-pop 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) 1;\r\n}\r\n.pcard-like:focus-visible {\r\n  outline: 2px solid oklch(0.62 0.20 285);\r\n  outline-offset: 2px;\r\n}\r\n\r\n/* ── Sombra elevada — token \"card\" de Figma (X0 Y0 · Blur16 · Spread4 · #000000 10%) ── */\r\n.pcard--elevated { box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 16px 4px; }\r\n.pcard--static.pcard--elevated:hover { box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 16px 4px; }\r\n\r\n/* ── Static showcase (sin hover/press) ── */\r\n.pcard--static, .pcard--static .pcard-like { transition: none; cursor: default; }\r\n.pcard--static:hover { transform: none; box-shadow: rgba(0, 0, 0, 0.07) 0px 0px 16px 4px; }\r\n.pcard--static .pcard-like { pointer-events: none; }\r\n.pcard--static .pcard-like:hover { transform: none; box-shadow: rgba(132, 96, 229, 0.14) 0px 2px 8px; }\r\n.pcard--static .pcard-like:active { transform: none; }\r\n\r\n/* ── Short variant (134×170) — imagen 134×112 + título/año 134×50 + barra 134×8.\r\n   Precio (99×24) y like (24×24) van como overlays SOBRE la imagen. ── */\r\n.pcard--short { width: 134px; height: 170px; }\r\n.pcard--short .pcard__img { height: 112px; }\r\n.pcard__body--short {\r\n  height: 50px;\r\n  box-sizing: border-box;\r\n  padding: 8px 10px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  gap: 1px;\r\n}\r\n.pcard--short .pcard__name { font-size: 15px; line-height: 18px; }\r\n.pcard--short .pcard__year { font-size: 10px; line-height: 14px; }\r\n\r\n/* Precio como badge (99×24) — arriba a la izquierda de la imagen */\r\n.pcard__price-badge {\r\n  position: absolute;\r\n  top: 8px;\r\n  left: 7px;\r\n  height: 24px;\r\n  box-sizing: border-box;\r\n  padding: 0 10px 0 3px;\r\n  border-radius: 12px;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 3px;\r\n  border: 1px solid transparent;\r\n  background-image:\r\n    linear-gradient(135deg, #8460e5 0%, #3b1782 100%),\r\n    linear-gradient(135deg, #8776ff 0%, rgba(255,255,255,0.4) 38%, #532bc7 68%, #8776ff 100%);\r\n  background-origin: padding-box, border-box;\r\n  background-clip: padding-box, border-box;\r\n  box-shadow: rgba(32, 0, 104, 0.5) 0px 2px 6px;\r\n  z-index: 2;\r\n}\r\n.pcard__price-badge::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: 0;\r\n  border-radius: 12px;\r\n  background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, transparent 100%);\r\n  pointer-events: none;\r\n}\r\n.pcard__price-badge-gem { width: 20px; height: 22px; display: inline-flex; position: relative; z-index: 1; flex-shrink: 0; }\r\n.pcard__price-badge-text {\r\n  position: relative;\r\n  z-index: 1;\r\n  font-family: var(--vmc-font-mono, 'Roboto Mono', monospace);\r\n  font-size: 13px;\r\n  font-weight: 700;\r\n  color: #ffffff;\r\n  white-space: nowrap;\r\n  font-variant-numeric: tabular-nums;\r\n}\r\n\r\n/* Like (24×24) — abajo a la derecha de la imagen */\r\n.pcard__img-like { position: absolute; bottom: 8px; right: 9px; z-index: 2; }\r\n.pcard--short .pcard__img-like .pcard-like { width: 22px; height: 22px; }\r\n.pcard--short .pcard__img-like .pcard-like svg { width: 12px; height: 12px; }\r\n\r\n/* ── Reduced motion ── */\r\n@media (prefers-reduced-motion: reduce) {\r\n  .pcard, .pcard-like { transition: none; }\r\n  .pcard-like--pop svg { animation: none; }\r\n}\r\n`;\r\n\r\nconst HEART_PATH  = \"M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z\";\r\n\r\nlet _stylesInjected = false;\r\n\r\n// ─── Which variants show price row vs like row ────────────────────────────────\r\n\r\nconst SHOW_PRICE: Record<OfferCardVariant, boolean> = {\r\n  live:       true,   // pprice + price + like\r\n  negotiable: false,  // solo like\r\n};\r\n\r\n// ─── Component ────────────────────────────────────────────────────────────────\r\n\r\nexport default function OfferCard({\r\n  variant,\r\n  size = \"full\",\r\n  name,\r\n  year,\r\n  price,\r\n  imageSrc,\r\n  imageAlt,\r\n  badge,\r\n  liked: controlledLiked,\r\n  onLikeChange,\r\n  onClick,\r\n  \"aria-label\": ariaLabel,\r\n  interactive = true,\r\n  elevated = false,\r\n  className = \"\",\r\n}: OfferCardProps): JSX.Element {\r\n  if (typeof document !== \"undefined\" && !_stylesInjected) {\r\n    if (!document.getElementById(STYLE_ID)) {\r\n      const el = document.createElement(\"style\");\r\n      el.id = STYLE_ID;\r\n      el.textContent = OFFERCARD_STYLES;\r\n      document.head.appendChild(el);\r\n    }\r\n    _stylesInjected = true;\r\n  }\r\n\r\n  const uid = useId().replace(/:/g, \"-\");\r\n\r\n  const isControlled = controlledLiked !== undefined;\r\n  const [internalLiked, setInternalLiked] = useState(false);\r\n  const isLiked = isControlled ? controlledLiked : internalLiked;\r\n  const [popping, setPopping] = useState(false);\r\n\r\n  const handleLike = useCallback((e: React.MouseEvent) => {\r\n    e.stopPropagation();\r\n    const next = !isLiked;\r\n    if (!isControlled) setInternalLiked(next);\r\n    onLikeChange?.(next);\r\n    if (next) {\r\n      setPopping(true);\r\n      setTimeout(() => { setPopping(false); }, 420);\r\n    }\r\n  }, [isLiked, isControlled, onLikeChange]);\r\n\r\n  const showPriceRow = SHOW_PRICE[variant] && (price != null);\r\n  const showLikeRow  = !showPriceRow;\r\n\r\n  const cardClasses = [\r\n    \"pcard\",\r\n    `pcard--${variant}`,\r\n    size === \"short\" ? \"pcard--short\" : \"\",\r\n    interactive ? \"\" : \"pcard--static\",\r\n    elevated ? \"pcard--elevated\" : \"\",\r\n    className,\r\n  ].filter(Boolean).join(\" \");\r\n\r\n  const likeClasses = [\r\n    \"pcard-like\",\r\n    isLiked ? \"pcard-like--active\" : \"\",\r\n    popping ? \"pcard-like--pop\"    : \"\",\r\n  ].filter(Boolean).join(\" \");\r\n\r\n  const svgFill   = isLiked ? \"rgba(255,255,255,0.92)\" : \"#ffffff\";\r\n  const svgStroke = isLiked ? \"none\" : \"#5a35c2\";\r\n\r\n  const LikeBtn = (\r\n    <button\r\n      type=\"button\"\r\n      className={likeClasses}\r\n      onClick={handleLike}\r\n      aria-label={isLiked ? \"Quitar de favoritos\" : \"Agregar a favoritos\"}\r\n      aria-pressed={isLiked}\r\n    >\r\n      <svg\r\n        width=\"15\" height=\"15\"\r\n        viewBox=\"0 0 24 24\"\r\n        fill={svgFill}\r\n        stroke={svgStroke}\r\n        strokeWidth=\"2\"\r\n        strokeLinecap=\"round\"\r\n        strokeLinejoin=\"round\"\r\n        aria-hidden=\"true\"\r\n      >\r\n        <path d={HEART_PATH} />\r\n      </svg>\r\n    </button>\r\n  );\r\n\r\n  // Gema del precio (diamante de subasta) — reutilizada en la fila (full) y en el badge (short)\r\n  const PriceGem = ({ w, h }: { w: number; h: number }): JSX.Element => (\r\n    <svg width={w} height={h} viewBox=\"30 199 28 30\" fill=\"none\" aria-hidden=\"true\">\r\n      <defs>\r\n        <linearGradient id={`${uid}-d`} gradientUnits=\"userSpaceOnUse\" x1=\"32\" y1=\"215.5\" x2=\"55.12\" y2=\"228.11\">\r\n          <stop stopColor=\"#00A7A8\" /><stop offset=\"0.4\" stopColor=\"#86A4E4\" /><stop offset=\"0.75\" stopColor=\"#4C1EBC\" /><stop offset=\"1\" stopColor=\"#300089\" />\r\n        </linearGradient>\r\n        <linearGradient id={`${uid}-ds`} gradientUnits=\"userSpaceOnUse\" x1=\"32\" y1=\"215.5\" x2=\"55.12\" y2=\"228.11\">\r\n          <stop stopColor=\"#73DFDF\" /><stop offset=\"0.28\" stopColor=\"#ffffff\" stopOpacity=\"0.9\" /><stop offset=\"0.875\" stopColor=\"#452AA2\" stopOpacity=\"0.6\" />\r\n        </linearGradient>\r\n        <linearGradient id={`${uid}-c`} gradientUnits=\"userSpaceOnUse\" x1=\"36.01\" y1=\"199.59\" x2=\"51.99\" y2=\"222.41\">\r\n          <stop stopColor=\"#00ABAD\" /><stop offset=\"0.4\" stopColor=\"#86A4E4\" /><stop offset=\"0.75\" stopColor=\"#4C1EBC\" /><stop offset=\"1\" stopColor=\"#31008A\" />\r\n        </linearGradient>\r\n        <linearGradient id={`${uid}-cg`} gradientUnits=\"userSpaceOnUse\" x1=\"44\" y1=\"203\" x2=\"44\" y2=\"219\">\r\n          <stop stopColor=\"#ffffff\" stopOpacity=\"0.45\" /><stop offset=\"0.5\" stopColor=\"#ffffff\" stopOpacity=\"0\" />\r\n        </linearGradient>\r\n        <linearGradient id={`${uid}-cb`} gradientUnits=\"userSpaceOnUse\" x1=\"36.01\" y1=\"199.59\" x2=\"51.99\" y2=\"222.41\">\r\n          <stop stopColor=\"#44D6D6\" /><stop offset=\"0.207\" stopColor=\"#E4EEFF\" stopOpacity=\"0.5\" /><stop offset=\"0.495\" stopColor=\"#567CD3\" /><stop offset=\"1\" stopColor=\"#3D0D9E\" />\r\n        </linearGradient>\r\n      </defs>\r\n      <path d=\"M44 215.5L56 221L44 226.5L32 221L44 215.5Z\" fill={`url(#${uid}-d)`} />\r\n      <path d=\"M44 215.5L56 221L44 226.5L32 221L44 215.5\" stroke={`url(#${uid}-ds)`} strokeWidth=\"2\" strokeLinejoin=\"round\" />\r\n      <rect x=\"34\" y=\"201\" width=\"20\" height=\"20\" rx=\"10\" fill={`url(#${uid}-c)`} />\r\n      <rect x=\"36\" y=\"203\" width=\"16\" height=\"16\" rx=\"8\" fill={`url(#${uid}-cg)`} />\r\n      <rect x=\"35\" y=\"202\" width=\"18\" height=\"18\" rx=\"9\" stroke={`url(#${uid}-cb)`} strokeWidth=\"2\" />\r\n      <path d=\"M44 206.417V215.583\" stroke=\"#ffffff\" strokeOpacity=\"0.92\" strokeWidth=\"1.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\r\n      <path d=\"M46.0833 208.083H42.9583C42.1535 208.083 41.5 208.737 41.5 209.542C41.5 210.347 42.1535 211 42.9583 211H45.0417C45.8465 211 46.5 211.653 46.5 212.458C46.5 213.263 45.8465 213.917 45.0417 213.917H41.5\" stroke=\"#ffffff\" strokeOpacity=\"0.92\" strokeWidth=\"1.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\r\n    </svg>\r\n  );\r\n\r\n  // ── Short variant: imagen con precio + like overlay, luego título/año, barra por ::after ──\r\n  if (size === \"short\") {\r\n    return (\r\n      <>\r\n        <style id={`${STYLE_ID}-ssr`} suppressHydrationWarning dangerouslySetInnerHTML={{ __html: OFFERCARD_STYLES }} />\r\n        <article\r\n          className={cardClasses}\r\n          onClick={onClick}\r\n          aria-label={ariaLabel ?? name}\r\n          role={onClick ? \"button\" : undefined}\r\n          tabIndex={onClick ? 0 : undefined}\r\n        >\r\n          <div className=\"pcard__img\">\r\n            {imageSrc && <img src={imageSrc} alt={imageAlt ?? name} loading=\"lazy\" />}\r\n            {showPriceRow && (\r\n              <div className=\"pcard__price-badge\">\r\n                <span className=\"pcard__price-badge-gem\"><PriceGem w={20} h={22} /></span>\r\n                <span className=\"pcard__price-badge-text\">{price}</span>\r\n              </div>\r\n            )}\r\n            <div className=\"pcard__img-like\">{LikeBtn}</div>\r\n          </div>\r\n          <div className=\"pcard__body--short\">\r\n            <h3 className=\"pcard__name\">{name}</h3>\r\n            <p className=\"pcard__year\">{String(year)}</p>\r\n          </div>\r\n        </article>\r\n      </>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <>\r\n      <style\r\n        id={`${STYLE_ID}-ssr`}\r\n        suppressHydrationWarning\r\n        dangerouslySetInnerHTML={{ __html: OFFERCARD_STYLES }}\r\n      />\r\n      <article\r\n        className={cardClasses}\r\n        onClick={onClick}\r\n        aria-label={ariaLabel ?? name}\r\n        role={onClick ? \"button\" : undefined}\r\n        tabIndex={onClick ? 0 : undefined}\r\n        onKeyDown={function handleKey(e) {\r\n          if (onClick && (e.key === \"Enter\" || e.key === \" \")) onClick();\r\n        }}\r\n      >\r\n        {/* Image */}\r\n        <div className=\"pcard__img\">\r\n          {imageSrc && (\r\n            <img src={imageSrc} alt={imageAlt ?? name} loading=\"lazy\" />\r\n          )}\r\n          {badge && (\r\n            <div className=\"pcard__img-badge\">{badge}</div>\r\n          )}\r\n        </div>\r\n\r\n        {/* Body */}\r\n        <div className=\"pcard__body\">\r\n          <div className=\"pcard__meta\">\r\n            <h3 className=\"pcard__name\">{name}</h3>\r\n            <p className=\"pcard__year\">{String(year)}</p>\r\n          </div>\r\n\r\n          {/* Price row — live / proxima / when price provided */}\r\n          {showPriceRow && (\r\n            <div className=\"pcard__price-row\">\r\n              <div className=\"pcard__price-left\">\r\n                <div className=\"pcard-pprice\" aria-hidden=\"true\">\r\n                  <PriceGem w={30} h={32} />\r\n                </div>\r\n                <span className=\"pcard__price-text\">{price}</span>\r\n              </div>\r\n              {LikeBtn}\r\n            </div>\r\n          )}\r\n\r\n          {/* Like row — negotiable / expired (no price shown) */}\r\n          {showLikeRow && (\r\n            <div className=\"pcard__like-row\">\r\n              {LikeBtn}\r\n            </div>\r\n          )}\r\n        </div>\r\n      </article>\r\n    </>\r\n  );\r\n}\r\n"
    },
    {
      "path": "components/BadgeStatus.tsx",
      "type": "registry:file",
      "target": "components/BadgeStatus.tsx",
      "content": "\"use client\";\r\n\r\n/**\r\n * BadgeStatus — Generado por Concorde\r\n * Fuente: https://voyager-ds.vercel.app/preview/components/pase1\r\n * Generado: 2026-05-28\r\n *\r\n * Pill badge de estado de subasta: EN VIVO (animated dot) · PRÓXIMA (blinking clock)\r\n */\r\n\r\nimport type { JSX } from \"react\";\r\n\r\n// ─── Types ────────────────────────────────────────────────────────────────────\r\n\r\nexport type BadgeStatusVariant = \"live\" | \"proxima\";\r\n\r\nexport interface BadgeStatusProps {\r\n  variant: BadgeStatusVariant;\r\n  /** Override de label / contenido editable (default: \"EN VIVO\" / \"PRÓXIMA\") */\r\n  label?: string;\r\n  /** Muestra el dot (live) / reloj (proxima). false = solo el texto. Default true. */\r\n  icon?: boolean;\r\n  className?: string;\r\n}\r\n\r\n// ─── Self-contained CSS ───────────────────────────────────────────────────────\r\n\r\nconst STYLE_ID = \"concorde-badgestatus-styles\";\r\n\r\nconst BADGESTATUS_STYLES = `\r\n/* Pulso del punto EN VIVO — frames exactos del SVG: On (6px, opacidad 1) ↔ On-1 (4px, 0.28) */\r\n@keyframes badgestatus-live-pulse {\r\n  0%, 100% { opacity: 1; transform: scale(1); }\r\n  50%      { opacity: 0.28; transform: scale(0.67); }\r\n}\r\n\r\n/* Parpadeo del reloj PRÓXIMA — On (sólido) ↔ Off (0.28) */\r\n@keyframes badgestatus-clock-blink {\r\n  0%, 100% { opacity: 1; transform: scale(1); }\r\n  50%      { opacity: 0.28; transform: scale(0.85); }\r\n}\r\n\r\n/* ── Base pill ── */\r\n.badgestatus {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 5px;\r\n  padding: 3px 8px 3px 6px;\r\n  border-radius: 9999px;\r\n  font-family: var(--vmc-font-display, 'Plus Jakarta Sans', system-ui, sans-serif);\r\n  font-size: 9px;\r\n  font-weight: 700;\r\n  letter-spacing: 0.07em;\r\n  text-transform: uppercase;\r\n  white-space: nowrap;\r\n  backdrop-filter: blur(6px);\r\n  -webkit-backdrop-filter: blur(6px);\r\n  color: oklch(1 0 0);\r\n  border: 1px solid transparent;\r\n  user-select: none;\r\n}\r\n\r\n/* ── EN VIVO — sync EXACTO SVG (1310:11895 / 11904) ──\r\n   bg naranja diagonal + borde gradiente cálido + ring naranja */\r\n.badgestatus--live {\r\n  background-image:\r\n    linear-gradient(135deg, #ff9639 0%, #ef852e 40%, #be3d00 100%),\r\n    linear-gradient(135deg, #ffbc83 0%, rgba(255,255,255,0.45) 40%, #da6c1e 75%, #ffbc83 100%);\r\n  background-origin: padding-box, border-box;\r\n  background-clip: padding-box, border-box;\r\n  box-shadow:\r\n    rgba(239, 133, 46, 0.45) 0px 2px 10px,\r\n    rgba(255, 255, 255, 0.14) 0px 1px 0px inset;\r\n}\r\n\r\n/* ── PRÓXIMA — sync EXACTO SVG (1310:11797 / 11799) ──\r\n   bg morado diagonal + borde gradiente lila + glow morado #200068 */\r\n.badgestatus--proxima {\r\n  background-image:\r\n    linear-gradient(135deg, #8460e5 0%, #3b1782 100%),\r\n    linear-gradient(135deg, #8776ff 0%, rgba(255,255,255,0.4) 38%, #532bc7 68%, #8776ff 100%);\r\n  background-origin: padding-box, border-box;\r\n  background-clip: padding-box, border-box;\r\n  box-shadow:\r\n    rgba(32, 0, 104, 0.5) 0px 2px 10px,\r\n    rgba(255, 255, 255, 0.1) 0px 1px 0px inset;\r\n}\r\n\r\n/* ── Pulsing dot (live) ── */\r\n.badgestatus-dot {\r\n  width: 6px;\r\n  height: 6px;\r\n  border-radius: 9999px;\r\n  background: #ffffff;\r\n  flex-shrink: 0;\r\n  animation: badgestatus-live-pulse 1.4s ease-in-out infinite;\r\n  position: relative;\r\n}\r\n\r\n/* ── Blinking clock (proxima) ── */\r\n.badgestatus-clock {\r\n  flex-shrink: 0;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  animation: badgestatus-clock-blink 1.4s ease-in-out infinite;\r\n}\r\n\r\n/* ── Reduced motion ── */\r\n@media (prefers-reduced-motion: reduce) {\r\n  .badgestatus-dot   { animation: none; }\r\n  .badgestatus-clock { animation: none; }\r\n}\r\n`;\r\n\r\nlet _stylesInjected = false;\r\n\r\n// ─── Clock SVG (Próxima) ──────────────────────────────────────────────────────\r\n\r\nfunction ClockIcon(): JSX.Element {\r\n  return (\r\n    <svg\r\n      width=\"10\"\r\n      height=\"10\"\r\n      viewBox=\"0 0 24 24\"\r\n      fill=\"none\"\r\n      stroke=\"rgba(255,255,255,0.92)\"\r\n      strokeWidth=\"2.2\"\r\n      strokeLinecap=\"round\"\r\n      strokeLinejoin=\"round\"\r\n      aria-hidden=\"true\"\r\n    >\r\n      <circle cx=\"12\" cy=\"12\" r=\"10\" />\r\n      <polyline points=\"12 6 12 12 16 14\" />\r\n    </svg>\r\n  );\r\n}\r\n\r\n// ─── Component ────────────────────────────────────────────────────────────────\r\n\r\nconst LABEL_DEFAULTS: Record<BadgeStatusVariant, string> = {\r\n  live:    \"EN VIVO\",\r\n  proxima: \"PRÓXIMA\",\r\n};\r\n\r\nexport default function BadgeStatus({\r\n  variant,\r\n  label,\r\n  icon = true,\r\n  className = \"\",\r\n}: BadgeStatusProps): JSX.Element {\r\n  if (typeof document !== \"undefined\" && !_stylesInjected) {\r\n    if (!document.getElementById(STYLE_ID)) {\r\n      const el = document.createElement(\"style\");\r\n      el.id = STYLE_ID;\r\n      el.textContent = BADGESTATUS_STYLES;\r\n      document.head.appendChild(el);\r\n    }\r\n    _stylesInjected = true;\r\n  }\r\n\r\n  const displayLabel = label ?? LABEL_DEFAULTS[variant];\r\n\r\n  const classes = [\r\n    \"badgestatus\",\r\n    `badgestatus--${variant}`,\r\n    className,\r\n  ].filter(Boolean).join(\" \");\r\n\r\n  return (\r\n    <>\r\n      <style\r\n        id={`${STYLE_ID}-ssr`}\r\n        suppressHydrationWarning\r\n        dangerouslySetInnerHTML={{ __html: BADGESTATUS_STYLES }}\r\n      />\r\n      <span\r\n        className={classes}\r\n        role=\"status\"\r\n        aria-label={displayLabel}\r\n      >\r\n        {icon && variant === \"live\" ? (\r\n          <span className=\"badgestatus-dot\" aria-hidden=\"true\" />\r\n        ) : null}\r\n        {icon && variant === \"proxima\" ? (\r\n          <span className=\"badgestatus-clock\" aria-hidden=\"true\">\r\n            <ClockIcon />\r\n          </span>\r\n        ) : null}\r\n        <span>{displayLabel}</span>\r\n      </span>\r\n    </>\r\n  );\r\n}\r\n"
    },
    {
      "path": "components/CardTitle.tsx",
      "type": "registry:file",
      "target": "components/CardTitle.tsx",
      "content": "\"use client\";\n\n/**\n * CardTitle — Generado por Concorde\n * Fuente: Figma VOYAGER · \"Title\" (nodo 2877:280)\n * Sincronizado: 2026-06-12\n *\n * Título de sección con subtítulo y brackets naranjas en esquina\n * superior-izquierda (┌) e inferior-derecha (┘). Estático.\n */\n\nimport { useId } from \"react\";\nimport type { JSX, ReactNode } from \"react\";\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport interface CardTitleProps {\n  /** Título (default: \"SANTANDER CONSUMER\"). Acepta texto o nodos (p.ej. un dot + texto). */\n  title?: ReactNode;\n  /** Subtítulo (default: \"10 Ofertas\") */\n  subtitle?: string;\n  /** Tamaño del título en px (default 12 · line-height = size + 4) */\n  titleSize?: number;\n  /** Tamaño del subtítulo en px (default 14) */\n  subtitleSize?: number;\n  className?: string;\n}\n\n// ─── Self-contained CSS ───────────────────────────────────────────────────────\n\nconst STYLE_ID = \"concorde-cardtitle-styles\";\n\nconst CARDTITLE_STYLES = `\n.cardtitle {\n  position: relative;\n  box-sizing: border-box;\n  display: inline-flex;\n  flex-direction: column;\n  padding: 8px 12px;\n  font-family: var(--vmc-font-display, \"Plus Jakarta Sans\", -apple-system, sans-serif);\n}\n.cardtitle__title {\n  margin: 0;\n  font-size: 12px;\n  font-weight: 600;\n  line-height: 16px;\n  letter-spacing: 0;\n  color: #3b1782;\n  white-space: nowrap;\n}\n.cardtitle__subtitle {\n  margin: 2px 0 0;\n  font-size: 13px;\n  font-weight: 400;\n  line-height: 1.2;\n  color: #191c1c;\n}\n.cardtitle__bracket {\n  position: absolute;\n  pointer-events: none;\n}\n.cardtitle__bracket--tl { top: 0; left: 0; }\n.cardtitle__bracket--br { bottom: 0; right: 0; transform: rotate(180deg); }\n`;\n\nlet _stylesInjected = false;\n\n// ─── Bracket (┌) — gradiente naranja #FF9639 → #EF852E 40% → #BE3D00 ────────────\n\nfunction Bracket({ uid, corner }: { uid: string; corner: \"tl\" | \"br\" }): JSX.Element {\n  return (\n    <svg\n      className={`cardtitle__bracket cardtitle__bracket--${corner}`}\n      width=\"10\"\n      height=\"10\"\n      viewBox=\"0 0 10 10\"\n      fill=\"none\"\n      aria-hidden=\"true\"\n    >\n      <path\n        d=\"M7 1.022H3.769C1.923 1.022 1 1.943 1 3.784V7.007\"\n        stroke={`url(#${uid}-${corner})`}\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n      <defs>\n        <linearGradient id={`${uid}-${corner}`} x1=\"4\" y1=\"1.022\" x2=\"4\" y2=\"7.007\" gradientUnits=\"userSpaceOnUse\">\n          <stop stopColor=\"#FF9639\" /><stop offset=\"0.4\" stopColor=\"#EF852E\" /><stop offset=\"1\" stopColor=\"#BE3D00\" />\n        </linearGradient>\n      </defs>\n    </svg>\n  );\n}\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\nexport default function CardTitle({\n  title = \"SANTANDER CONSUMER\",\n  subtitle = \"10 Ofertas\",\n  titleSize = 12,\n  subtitleSize = 14,\n  className = \"\",\n}: CardTitleProps): JSX.Element {\n  const uid = useId().replace(/:/g, \"-\");\n\n  if (typeof document !== \"undefined\" && !_stylesInjected) {\n    if (!document.getElementById(STYLE_ID)) {\n      const el = document.createElement(\"style\");\n      el.id = STYLE_ID;\n      el.textContent = CARDTITLE_STYLES;\n      document.head.appendChild(el);\n    }\n    _stylesInjected = true;\n  }\n\n  return (\n    <>\n      <style id={`${STYLE_ID}-ssr`} suppressHydrationWarning dangerouslySetInnerHTML={{ __html: CARDTITLE_STYLES }} />\n      <div className={[\"cardtitle\", className].filter(Boolean).join(\" \")}>\n        <Bracket uid={uid} corner=\"tl\" />\n        <h3 className=\"cardtitle__title\" style={{ fontSize: titleSize, lineHeight: `${titleSize + 4}px` }}>{title}</h3>\n        {subtitle ? <p className=\"cardtitle__subtitle\" style={{ fontSize: subtitleSize }}>{subtitle}</p> : null}\n        <Bracket uid={uid} corner=\"br\" />\n      </div>\n    </>\n  );\n}\n"
    }
  ]
}