{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "activitycard",
  "type": "registry:component",
  "title": "ActivityCard",
  "description": "Componente Concorde ActivityCard — un solo archivo, ActivityCard.tsx.",
  "dependencies": [
    "react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/ActivityCard.tsx",
      "type": "registry:file",
      "target": "components/ActivityCard.tsx",
      "content": "\"use client\";\n\n/**\n * ActivityCard — Generado por Concorde\n * Fuente: Figma VOYAGER · \"Activity Card\" (nodo 2020:13636)\n *\n * Tarjeta «Tu actividad» 375×221 (blanca, radius 16, drop shadow suave):\n *   · Header: CardTitle «TU ACTIVIDAD» (brackets)\n *   · Divisor #E1E3E2\n *   · Grid 2×2 de pills de conteo (badge translúcido + label):\n *       Ganadas (gradiente naranja→lila) · Consignaciones · Procesos de compra ·\n *       Rechazadas (gradiente lila). Cada pill 142×40, borde gradiente.\n */\n\nimport type { JSX, ReactNode } from \"react\";\nimport CardTitle from \"@/concorde/components/CardTitle\";\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport interface ActivityCardProps {\n  /** Título de la tarjeta (default \"TU ACTIVIDAD\"). */\n  title?: string;\n  /** Conteo «Ganadas» (default 1). */\n  won?: number | string;\n  /** Conteo «Consignaciones» (default 1). */\n  consignments?: number | string;\n  /** Conteo «Procesos de compra» (default 1). */\n  purchases?: number | string;\n  /** Conteo «Rechazadas» (default 1). */\n  rejected?: number | string;\n  className?: string;\n}\n\n// ─── Self-contained CSS ───────────────────────────────────────────────────────\n\nconst STYLE_ID = \"concorde-activitycard-styles\";\n\nconst STYLES = `\n.actcard {\n  box-sizing: border-box;\n  width: 375px;\n  height: 221px;\n  border-radius: 16px;\n  background: #ffffff;\n  box-shadow: 0 0 8px 4px rgba(0,0,0,0.08);\n  padding: 16px;\n  display: flex;\n  flex-direction: column;\n  font-family: var(--vmc-font-display, \"Plus Jakarta Sans\", -apple-system, sans-serif);\n}\n.actcard__header { display: flex; align-items: center; }\n.actcard__divider { height: 1px; background: #E1E3E2; margin-top: 8px; }\n.actcard__grid {\n  flex: 1;\n  width: 318px;\n  margin: 0 auto;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  column-gap: 34px;\n  row-gap: 28px;\n  align-content: center;\n}\n/* ── Pill de actividad — badge absoluto izquierda + label centrado ── */\n.actpill {\n  display: flex;\n  align-items: center;\n  height: 40px;\n  padding: 0 8px 0 40px;\n  border-radius: 9999px;\n  border: 2px solid transparent;\n  position: relative;\n  color: #ffffff;\n}\n.actpill--orange {\n  /* Fill VYGradientOrange (#ED8936 → #8460E5) + borde white→#FBC47D→#AE8EFF→white */\n  background:\n    linear-gradient(131deg, #ED8936 0%, #ED8936 40%, #8460E5 100%) padding-box,\n    linear-gradient(135deg, #FFFFFF 0%, #FBC47D 25%, #AE8EFF 75%, #FFFFFF 100%) border-box;\n  box-shadow: 0 4px 10px rgba(237,137,54,0.30), inset 0 1px 0 rgba(255,255,255,0.25);\n}\n.actpill--purple {\n  /* Fill vault (#8460E5 → #3B1782) + borde #CFBAFF→white→#AE8EFF→#CFBAFF */\n  background:\n    linear-gradient(159deg, #8460E5 0%, #3B1782 100%) padding-box,\n    linear-gradient(135deg, #CFBAFF 0%, #FFFFFF 35%, #AE8EFF 65%, #CFBAFF 100%) border-box;\n  box-shadow: 0 4px 10px rgba(59,23,130,0.32), inset 0 1px 0 rgba(255,255,255,0.22);\n}\n/* Badge absoluto — no ocupa espacio flex, siempre pegado a la izquierda */\n.actpill__badge {\n  position: absolute;\n  left: 4px;\n  top: 4px;\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  background: rgba(255,255,255,0.2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 15px;\n  font-weight: 600;\n  color: #ffffff;\n}\n/* Label centrado respecto al ancho total del pill */\n.actpill__label {\n  flex: 1;\n  min-width: 0;\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 1.15;\n  letter-spacing: -0.01em;\n  text-align: center;\n}\n`;\n\nlet _stylesInjected = false;\n\n// ─── Pill ───────────────────────────────────────────────────────────────────\n\nfunction ActivityPill({ tone, count, label }: { tone: \"orange\" | \"purple\"; count: ReactNode; label: string }): JSX.Element {\n  return (\n    <div className={`actpill actpill--${tone}`}>\n      <span className=\"actpill__badge\">{count}</span>\n      <span className=\"actpill__label\">{label}</span>\n    </div>\n  );\n}\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\nexport default function ActivityCard({\n  title = \"TU ACTIVIDAD\",\n  won = 1,\n  consignments = 1,\n  purchases = 1,\n  rejected = 1,\n  className = \"\",\n}: ActivityCardProps): JSX.Element {\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 = STYLES;\n      document.head.appendChild(el);\n    }\n    _stylesInjected = true;\n  }\n\n  return (\n    <>\n      <style id={`${STYLE_ID}-ssr`} suppressHydrationWarning dangerouslySetInnerHTML={{ __html: STYLES }} />\n      <section className={[\"actcard\", className].filter(Boolean).join(\" \")} data-component=\"activity-card\">\n        <div className=\"actcard__header\">\n          <CardTitle title={title} subtitle=\"\" titleSize={14} />\n        </div>\n\n        <div className=\"actcard__divider\" />\n\n        <div className=\"actcard__grid\">\n          <ActivityPill tone=\"orange\" count={won} label=\"Ganadas\" />\n          <ActivityPill tone=\"purple\" count={consignments} label=\"Consignaciones\" />\n          <ActivityPill tone=\"purple\" count={purchases} label=\"Procesos de compra\" />\n          <ActivityPill tone=\"purple\" count={rejected} label=\"Rechazadas\" />\n        </div>\n      </section>\n    </>\n  );\n}\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"
    }
  ]
}