{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "walletbalancecard",
  "type": "registry:component",
  "title": "WalletBalanceCard",
  "description": "Componente Concorde WalletBalanceCard — un solo archivo, WalletBalanceCard.tsx.",
  "dependencies": [
    "react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/WalletBalanceCard.tsx",
      "type": "registry:file",
      "target": "components/WalletBalanceCard.tsx",
      "content": "\"use client\";\n\n/**\n * WalletBalanceCard — Generado por Concorde\n * Fuente: Figma VOYAGER · \"WalletBalanceCard\" (nodo 2020:13635)\n *\n * Tarjeta «Billetera» 375×221 (blanca, radius 16, drop shadow suave):\n *   · Header: CardTitle «BILLETERA» (brackets) + ProfileButton «Transacciones ›»\n *   · Divisor #E1E3E2\n *   · Filas SubasCoins / Saldo (label morado + valor morado bold)\n *   · CTA «Adquiere SubasCoins» (Button sm-guest, círculo + texto, centrado)\n */\n\nimport type { JSX, MouseEventHandler } from \"react\";\nimport CardTitle from \"@/concorde/components/CardTitle\";\nimport ProfileButton from \"@/concorde/components/ProfileButton\";\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport interface WalletBalanceCardProps {\n  /** Título de la tarjeta (default \"BILLETERA\"). */\n  title?: string;\n  /** Valor de SubasCoins (default \">S< 0\"). */\n  subasCoins?: string;\n  /** Valor de Saldo (default \"US$ 0\"). */\n  saldo?: string;\n  /** Acción / enlace del acceso «Transacciones». */\n  onTransactions?: MouseEventHandler<HTMLElement>;\n  transactionsHref?: string;\n  /** Click del CTA «Adquiere SubasCoins». */\n  onAcquire?: MouseEventHandler<HTMLButtonElement>;\n  className?: string;\n}\n\n// ─── Self-contained CSS ───────────────────────────────────────────────────────\n\nconst STYLE_ID = \"concorde-walletbalancecard-styles\";\n\nconst STYLES = `\n.wbc {\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.wbc__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n}\n.wbc__divider {\n  height: 1px;\n  background: #E1E3E2;\n  margin-top: 8px;\n}\n.wbc__body {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  padding-top: 18px;\n}\n.wbc__rows {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 0 4px;\n}\n.wbc__row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n.wbc__row-label { font-size: 15px; font-weight: 500; color: #3B1782; }\n.wbc__row-value { font-size: 15px; font-weight: 700; color: #3B1782; }\n.wbc__cta {\n  margin-top: auto;\n  display: flex;\n  justify-content: center;\n  padding-bottom: 4px;\n}\n/* Botón CTA autónomo — mismo look que sm-guest, texto realmente centrado */\n.wbc__acquire {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  width: 250px;\n  height: 40px;\n  padding: 0 16px;\n  border-radius: 9999px;\n  border: 2px solid transparent;\n  cursor: pointer;\n  overflow: hidden;\n  font-family: var(--vmc-font-display, \"Plus Jakarta Sans\", sans-serif);\n  font-size: 14px;\n  font-weight: 600;\n  color: #ffffff;\n  text-shadow: rgba(0,0,0,0.2) 0 1px 2px;\n  background-image:\n    linear-gradient(135deg, #ED8936 0%, #ED8936 40%, #8460e5 100%),\n    linear-gradient(135deg, #ffffff 0%, #fbc47d 25%, #ae8eff 75%, #ffffff 100%);\n  background-origin: padding-box, border-box;\n  background-clip: padding-box, border-box;\n  box-shadow: rgba(255,255,255,0.25) 0 1px 0 2px inset, rgba(237,137,54,0.25) 0 2px 6px;\n  transition: transform 0.2s cubic-bezier(0.25,0.8,0.25,1), box-shadow 0.25s;\n}\n.wbc__acquire::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: 9999px;\n  background: linear-gradient(rgba(255,255,255,0.15) 0%, transparent 55%);\n  pointer-events: none;\n}\n.wbc__acquire-circle {\n  position: absolute;\n  left: 4px;\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  background: rgba(255,255,255,0.2);\n}\n.wbc__acquire:hover {\n  transform: translateY(-1px) scale(1.02);\n  box-shadow: rgba(255,255,255,0.2) 0 1px 0 2px inset, rgba(132,96,229,0.3) 0 6px 18px, rgba(237,137,54,0.35) 0 3px 8px;\n}\n.wbc__acquire:active {\n  transform: scale(0.97) translateY(1px);\n  box-shadow: rgba(0,0,0,0.22) 0 2px 4px 2px inset;\n}\n@media (prefers-reduced-motion: reduce) { .wbc__acquire { transition: none; } }\n`;\n\nlet _stylesInjected = false;\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\nexport default function WalletBalanceCard({\n  title = \"BILLETERA\",\n  subasCoins = \">S< 0\",\n  saldo = \"US$ 0\",\n  onTransactions,\n  transactionsHref,\n  onAcquire,\n  className = \"\",\n}: WalletBalanceCardProps): 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={[\"wbc\", className].filter(Boolean).join(\" \")} data-component=\"wallet-balance-card\">\n        {/* Header: título + acceso a transacciones */}\n        <div className=\"wbc__header\">\n          <CardTitle title={title} subtitle=\"\" titleSize={14} />\n          <ProfileButton href={transactionsHref} onClick={onTransactions} aria-label=\"Transacciones\">\n            Transacciones\n          </ProfileButton>\n        </div>\n\n        <div className=\"wbc__divider\" />\n\n        {/* Cuerpo: SubasCoins / Saldo + CTA */}\n        <div className=\"wbc__body\">\n          <div className=\"wbc__rows\">\n            <div className=\"wbc__row\">\n              <span className=\"wbc__row-label\">SubasCoins:</span>\n              <span className=\"wbc__row-value\">{subasCoins}</span>\n            </div>\n            <div className=\"wbc__row\">\n              <span className=\"wbc__row-label\">Saldo:</span>\n              <span className=\"wbc__row-value\">{saldo}</span>\n            </div>\n          </div>\n\n          <div className=\"wbc__cta\">\n            <button className=\"wbc__acquire\" type=\"button\" onClick={onAcquire}>\n              <span className=\"wbc__acquire-circle\" aria-hidden=\"true\" />\n              Adquiere SubasCoins\n            </button>\n          </div>\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"
    },
    {
      "path": "components/ProfileButton.tsx",
      "type": "registry:file",
      "target": "components/ProfileButton.tsx",
      "content": "\"use client\";\n\n/**\n * ProfileButton — Generado por Concorde\n * Fuente: Figma VOYAGER · \"ProfileButton\" (Status=Default|Hover|Pressed)\n * Nodos: 1274:5029 (default) · 1274:3989 (hover) · 1287:5144 (pressed)\n * Sincronizado: 2026-06-12\n *\n * Botón de navegación a perfil: label morado + círculo con chevron.\n * Figma manda en lo visual (colores/dimensiones); Concorde manda en la interacción\n * (transición de relleno + lift en hover, reduced-motion).\n */\n\nimport type { JSX, MouseEventHandler, ReactNode } from \"react\";\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport interface ProfileButtonProps {\n  /** Label (default: \"Ir al Perfil\") */\n  children?: ReactNode;\n  /** Si se pasa, renderiza un <a> en vez de <button> */\n  href?: string;\n  onClick?: MouseEventHandler<HTMLElement>;\n  disabled?: boolean;\n  className?: string;\n  \"aria-label\"?: string;\n}\n\n// ─── Self-contained CSS ───────────────────────────────────────────────────────\n\nconst STYLE_ID = \"concorde-profilebutton-styles\";\n\nconst PROFILEBUTTON_STYLES = `\n.pprofilebtn {\n  display: inline-flex;\n  align-items: center;\n  gap: 10px;\n  padding: 4px;\n  background: none;\n  border: none;\n  cursor: pointer;\n  text-decoration: none;\n  font-family: var(--vmc-font-display, \"Plus Jakarta Sans\", -apple-system, sans-serif);\n  font-size: 15px;\n  font-weight: 600;\n  line-height: 20px;\n  white-space: nowrap;\n  -webkit-tap-highlight-color: transparent;\n}\n\n/* Label — default morado #3B1782 (Figma text fill) */\n.pprofilebtn__label {\n  color: #3b1782;\n  transition: color 0.2s ease;\n}\n\n/* Círculo 16px con chevron. color = color del chevron (currentColor) */\n.pprofilebtn__circle {\n  position: relative;\n  width: 16px;\n  height: 16px;\n  flex-shrink: 0;\n  border-radius: 9999px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background: transparent;\n  color: #ef852e;\n  transition:\n    background 0.2s ease,\n    color 0.2s ease,\n    box-shadow 0.25s ease,\n    transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);\n}\n/* Default: anillo gradiente naranja 1.5px (stroke #FF9C3B → #EF852E 40% → #BE3D00) — mask */\n.pprofilebtn__circle::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  padding: 1.5px;\n  background: linear-gradient(135deg, #ff9c3b 0%, #ef852e 40%, #be3d00 100%);\n  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n  -webkit-mask-composite: xor;\n  mask-composite: exclude;\n  pointer-events: none;\n  transition: opacity 0.2s ease;\n}\n.pprofilebtn__chevron {\n  position: relative;\n  z-index: 1;\n  display: block;\n}\n\n/* ── Hover: círculo RELLENO naranja + sombra, chevron blanco, lift ── */\n.pprofilebtn:hover:not(:disabled) .pprofilebtn__circle {\n  background: linear-gradient(90deg, #ff9639 0%, #ef852e 40%, #be3d00 100%);\n  color: #ffffff;\n  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);\n  transform: translateY(-1px);\n}\n.pprofilebtn:hover:not(:disabled) .pprofilebtn__circle::before { opacity: 0; }\n\n/* ── Pressed: texto + chevron gris #99A1AF, círculo naranja oscuro #B25614 → #93420A ── */\n.pprofilebtn:active:not(:disabled) .pprofilebtn__label { color: #99a1af; }\n.pprofilebtn:active:not(:disabled) .pprofilebtn__circle {\n  background: linear-gradient(90deg, #b25614 0%, #93420a 100%);\n  color: #99a1af;\n  box-shadow: none;\n  transform: translateY(0);\n}\n.pprofilebtn:active:not(:disabled) .pprofilebtn__circle::before { opacity: 0; }\n\n/* ── Focus ── */\n.pprofilebtn:focus-visible {\n  outline: none;\n  border-radius: 8px;\n  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #8460e5;\n}\n\n/* ── Disabled ── */\n.pprofilebtn:disabled {\n  cursor: not-allowed;\n}\n.pprofilebtn:disabled .pprofilebtn__label { color: #99a1af; }\n.pprofilebtn:disabled .pprofilebtn__circle {\n  background: #e1e3e2;\n  color: #ffffff;\n}\n.pprofilebtn:disabled .pprofilebtn__circle::before { opacity: 0; }\n\n/* ── Reduced motion ── */\n@media (prefers-reduced-motion: reduce) {\n  .pprofilebtn__label,\n  .pprofilebtn__circle,\n  .pprofilebtn__circle::before { transition: none; }\n  .pprofilebtn:hover:not(:disabled) .pprofilebtn__circle { transform: none; }\n}\n`;\n\nlet _stylesInjected = false;\n\n// ─── Chevron (M83 22 L87 19 L83 16 normalizado a viewBox 16×16, centro 8,8) ─────\n\nfunction Chevron(): JSX.Element {\n  return (\n    <svg\n      className=\"pprofilebtn__chevron\"\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M6 11L10 8L6 5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  );\n}\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\nexport default function ProfileButton({\n  children = \"Ir al Perfil\",\n  href,\n  onClick,\n  disabled = false,\n  className = \"\",\n  \"aria-label\": ariaLabel,\n}: ProfileButtonProps): 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 = PROFILEBUTTON_STYLES;\n      document.head.appendChild(el);\n    }\n    _stylesInjected = true;\n  }\n\n  const classes = [\"pprofilebtn\", className].filter(Boolean).join(\" \");\n\n  const inner = (\n    <>\n      <span className=\"pprofilebtn__label\">{children}</span>\n      <span className=\"pprofilebtn__circle\" aria-hidden=\"true\">\n        <Chevron />\n      </span>\n    </>\n  );\n\n  return (\n    <>\n      <style id={`${STYLE_ID}-ssr`} suppressHydrationWarning dangerouslySetInnerHTML={{ __html: PROFILEBUTTON_STYLES }} />\n      {href && !disabled ? (\n        <a className={classes} href={href} onClick={onClick} aria-label={ariaLabel}>\n          {inner}\n        </a>\n      ) : (\n        <button type=\"button\" className={classes} onClick={onClick} disabled={disabled} aria-label={ariaLabel}>\n          {inner}\n        </button>\n      )}\n    </>\n  );\n}\n"
    }
  ]
}