{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "userprofilecard",
  "type": "registry:component",
  "title": "UserProfileCard",
  "description": "Componente Concorde UserProfileCard — un solo archivo, UserProfileCard.tsx.",
  "dependencies": [
    "react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/UserProfileCard.tsx",
      "type": "registry:file",
      "target": "components/UserProfileCard.tsx",
      "content": "\"use client\";\n\n/**\n * UserProfileCard — Generado por Concorde\n * Fuente: Figma VOYAGER · \"UserProfileCard\" (nodo 2035:16581)\n *\n * Tarjeta de zona de usuario 766×140 (blanca, radius 16, drop shadow suave).\n * Dos filas internas de 734 de ancho separadas por un divisor #E1E3E2:\n *   1ª (52px): avatar (AvatarZone) + «¡Hola, {usuario}!»  ·······  «Tu perfil ›» (ProfileButton)\n *   2ª (40px): RIESGO DEL PERFIL / valor  +  PUNTOS VMC / ⭐ pts ⓘ  ···  «Historial ›» (ProfileButton)\n *\n * Figma manda en lo visual; Concorde compone los componentes existentes\n * (AvatarZone, ProfileButton, StarIcon) y aporta el layout + accesibilidad.\n */\n\nimport type { JSX, MouseEventHandler } from \"react\";\nimport AvatarZone from \"@/concorde/components/AvatarZone\";\nimport ProfileButton from \"@/concorde/components/ProfileButton\";\nimport StarIcon from \"@/concorde/components/StarIcon\";\nimport InfoIcon from \"@/concorde/components/InfoIcon\";\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport interface UserProfileCardProps {\n  /** Usuario mostrado en «¡Hola, {usuario}!» (default \"ZAEX5G\"). */\n  username?: string;\n  /** Etiqueta de la 1ª estadística (default \"RIESGO DEL PERFIL\"). */\n  riskLabel?: string;\n  /** Valor de riesgo (default \"Muy bajo\"). */\n  riskValue?: string;\n  /** Etiqueta de la 2ª estadística (default \"PUNTOS VMC\"). */\n  pointsLabel?: string;\n  /** Puntos VMC (default \"500 pts\"). */\n  points?: string;\n  /** Acción / enlace del acceso «Tu perfil». */\n  onProfile?: MouseEventHandler<HTMLElement>;\n  profileHref?: string;\n  /** Acción / enlace del acceso «Historial». */\n  onHistory?: MouseEventHandler<HTMLElement>;\n  historyHref?: string;\n  className?: string;\n}\n\n// ─── Self-contained CSS ───────────────────────────────────────────────────────\n\nconst STYLE_ID = \"concorde-userprofilecard-styles\";\n\nconst STYLES = `\n.upc {\n  box-sizing: border-box;\n  width: 766px;\n  height: 140px;\n  padding: 16px;\n  border-radius: 16px;\n  background: #ffffff;\n  /* Drop shadow del filtro Figma (dilate 4 · blur 8 · negro 10%) */\n  box-shadow: 0 0 8px 4px rgba(0,0,0,0.08);\n  font-family: var(--vmc-font-display, \"Plus Jakarta Sans\", -apple-system, sans-serif);\n}\n.upc__inner {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  height: 100%;\n}\n/* ── Fila 1 (734×52) ── */\n.upc__row1 {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  height: 52px;\n}\n.upc__greet {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-width: 0;\n}\n.upc__hello {\n  font-size: 18px;\n  font-weight: 700;\n  letter-spacing: -0.01em;\n  line-height: 24px;\n  white-space: nowrap;\n  /* Texto con gradiente vault del Figma (paint1: #5F3ED8 → #340091 → #140046) */\n  background: linear-gradient(168deg, #5F3ED8 0%, #340091 50%, #140046 100%);\n  -webkit-background-clip: text;\n  background-clip: text;\n  color: transparent;\n}\n/* ── Divisor ── */\n.upc__divider {\n  height: 1px;\n  background: #E1E3E2;\n}\n/* ── Fila 2 (734×40) ── */\n.upc__row2 {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  height: 40px;\n}\n.upc__stats {\n  display: flex;\n  align-items: center;\n  gap: 56px;\n}\n.upc__stat {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n.upc__stat-label {\n  font-size: 10px;\n  font-weight: 600;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n  color: #99A1AF;\n  white-space: nowrap;\n}\n.upc__stat-value {\n  font-size: 14px;\n  font-weight: 700;\n  line-height: 18px;\n  white-space: nowrap;\n}\n.upc__stat-value--risk { color: #ED8936; }\n.upc__points {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n.upc__points-text { color: #3B1782; }\n.upc__info { display: block; flex-shrink: 0; }\n`;\n\nlet _stylesInjected = false;\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\nexport default function UserProfileCard({\n  username = \"ZAEX5G\",\n  riskLabel = \"RIESGO DEL PERFIL\",\n  riskValue = \"Muy bajo\",\n  pointsLabel = \"PUNTOS VMC\",\n  points = \"500 pts\",\n  onProfile,\n  profileHref,\n  onHistory,\n  historyHref,\n  className = \"\",\n}: UserProfileCardProps): 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={[\"upc\", className].filter(Boolean).join(\" \")} data-component=\"user-profile-card\">\n        <div className=\"upc__inner\">\n          {/* Fila 1 — saludo + acceso al perfil */}\n          <div className=\"upc__row1\">\n            <div className=\"upc__greet\">\n              <AvatarZone size=\"md\" title={`Avatar de ${username}`} />\n              <span className=\"upc__hello\">{`¡Hola, ${username}!`}</span>\n            </div>\n            <ProfileButton href={profileHref} onClick={onProfile} aria-label=\"Tu perfil\">\n              Tu perfil\n            </ProfileButton>\n          </div>\n\n          {/* Divisor */}\n          <div className=\"upc__divider\" role=\"separator\" aria-hidden=\"true\" />\n\n          {/* Fila 2 — estadísticas + historial */}\n          <div className=\"upc__row2\">\n            <div className=\"upc__stats\">\n              <div className=\"upc__stat\">\n                <span className=\"upc__stat-label\">{riskLabel}</span>\n                <span className=\"upc__stat-value upc__stat-value--risk\">{riskValue}</span>\n              </div>\n              <div className=\"upc__stat\">\n                <span className=\"upc__stat-label\">{pointsLabel}</span>\n                <span className=\"upc__points\">\n                  {/* StarIcon usa viewBox 28 con padding de sombra: el badge ocupa\n                      16/28 → size 24 lo deja en ~16px, igual que el InfoIcon (16). */}\n                  <StarIcon size={24} />\n                  <span className=\"upc__stat-value upc__points-text\">{points}</span>\n                  <InfoIcon className=\"upc__info\" title=\"Más información sobre los puntos VMC\" />\n                </span>\n              </div>\n            </div>\n            <ProfileButton href={historyHref} onClick={onHistory} aria-label=\"Historial\">\n              Historial\n            </ProfileButton>\n          </div>\n        </div>\n      </section>\n    </>\n  );\n}\n"
    },
    {
      "path": "components/AvatarZone.tsx",
      "type": "registry:file",
      "target": "components/AvatarZone.tsx",
      "content": "\"use client\";\n\n/**\n * AvatarZone — Generado por Concorde\n * Fuente: Figma VOYAGER · \"Avatar Zone\" (nodo 2035:16583)\n *\n * Avatar circular 32×32: relleno gradiente naranja (#FF9639 → #EF852E → #BE3D00)\n * con silueta de persona blanca centrada. Tamaño personalizable:\n * \"sm\" (24px) · \"md\" (32px) · o número de px.\n */\n\nimport { useId } from \"react\";\nimport type { JSX } from \"react\";\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport type AvatarZoneSize = \"sm\" | \"md\";\n\nexport interface AvatarZoneProps {\n  /** Tamaño: \"sm\"=24px · \"md\"=32px · o número de px (default \"md\") */\n  size?: AvatarZoneSize | number;\n  /** Texto accesible — si se omite, el avatar es decorativo (aria-hidden) */\n  title?: string;\n  className?: string;\n}\n\nconst SIZE_PX: Record<AvatarZoneSize, number> = { sm: 24, md: 32 };\n\nconst CIRCLE_PATH =\n  \"M0 16C0 7.16344 7.16344 0 16 0C24.8366 0 32 7.16344 32 16C32 24.8366 24.8366 32 16 32C7.16344 32 0 24.8366 0 16Z\";\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\nexport default function AvatarZone({ size = \"md\", title, className = \"\" }: AvatarZoneProps): JSX.Element {\n  const uid = useId().replace(/:/g, \"-\");\n  const px = typeof size === \"number\" ? size : SIZE_PX[size];\n\n  return (\n    <svg\n      width={px}\n      height={px}\n      viewBox=\"0 0 32 32\"\n      fill=\"none\"\n      className={className}\n      role={title ? \"img\" : undefined}\n      aria-hidden={title ? undefined : true}\n      aria-label={title}\n    >\n      {title ? <title>{title}</title> : null}\n      <g clipPath={`url(#${uid}-c0)`}>\n        <path d={CIRCLE_PATH} fill={`url(#${uid}-bg)`} />\n        <g clipPath={`url(#${uid}-c1)`}>\n          <path\n            d=\"M19.5412 11.36C19.5412 9.52 17.9765 8 16 8C14.0235 8 12.5412 9.52 12.5412 11.36C12.5412 13.28 14.0235 14.8 16 14.8C17.9765 14.8 19.5412 13.28 19.5412 11.36ZM9 20.4C10.4824 22.56 13.1176 24 16 24C18.8824 24 21.5176 22.56 23 20.4C23 18.16 18.3059 16.88 16 16.88C13.6941 16.88 9 18.16 9 20.4Z\"\n            fill=\"white\"\n          />\n        </g>\n      </g>\n      <defs>\n        <linearGradient id={`${uid}-bg`} x1=\"5.42742\" y1=\"-16.8777\" x2=\"43.7544\" y2=\"-4.5528\" gradientUnits=\"userSpaceOnUse\">\n          <stop stopColor=\"#FF9639\" />\n          <stop offset=\"0.5\" stopColor=\"#EF852E\" />\n          <stop offset=\"1\" stopColor=\"#BE3D00\" />\n        </linearGradient>\n        <clipPath id={`${uid}-c0`}>\n          <path d={CIRCLE_PATH} fill=\"white\" />\n        </clipPath>\n        <clipPath id={`${uid}-c1`}>\n          <rect width=\"24\" height=\"24\" fill=\"white\" transform=\"translate(4 4)\" />\n        </clipPath>\n      </defs>\n    </svg>\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"
    },
    {
      "path": "components/StarIcon.tsx",
      "type": "registry:file",
      "target": "components/StarIcon.tsx",
      "content": "\"use client\";\n\n/**\n * StarIcon — Generado por Concorde\n * Fuente: Figma VOYAGER · \"StarIcons\" (nodo 2035:16598)\n *\n * Insignia de estrella 28×28: círculo con relleno gradiente naranja→lila\n * (#ED8936 → #8460E5), borde gradiente (white → #FBC47D → #AE8EFF → white) y\n * estrella blanca. Drop shadow naranja + inner shadow blanco (del filtro Figma).\n * Tamaño personalizable: \"sm\" (20px) · \"md\" (28px) · o número de px.\n */\n\nimport { useId } from \"react\";\nimport type { JSX } from \"react\";\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport type StarIconSize = \"sm\" | \"md\";\n\nexport interface StarIconProps {\n  /** Tamaño: \"sm\"=20px · \"md\"=28px · o número de px (default \"md\") */\n  size?: StarIconSize | number;\n  /** Texto accesible — si se omite, el ícono es decorativo (aria-hidden) */\n  title?: string;\n  className?: string;\n}\n\nconst SIZE_PX: Record<StarIconSize, number> = { sm: 20, md: 28 };\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\nexport default function StarIcon({ size = \"md\", title, className = \"\" }: StarIconProps): JSX.Element {\n  const uid = useId().replace(/:/g, \"-\");\n  const px = typeof size === \"number\" ? size : SIZE_PX[size];\n\n  return (\n    <svg\n      width={px}\n      height={px}\n      viewBox=\"0 0 28 28\"\n      fill=\"none\"\n      className={className}\n      role={title ? \"img\" : undefined}\n      aria-hidden={title ? undefined : true}\n      aria-label={title}\n    >\n      {title ? <title>{title}</title> : null}\n      <g filter={`url(#${uid}-f)`}>\n        <path\n          d=\"M6 12C6 7.58172 9.58172 4 14 4V4C18.4183 4 22 7.58172 22 12V12C22 16.4183 18.4183 20 14 20V20C9.58172 20 6 16.4183 6 12V12Z\"\n          fill={`url(#${uid}-bg)`}\n          shapeRendering=\"crispEdges\"\n        />\n        <path\n          d=\"M14 4.59961C18.0869 4.59961 21.4004 7.91309 21.4004 12C21.4004 16.0869 18.0869 19.4004 14 19.4004C9.91309 19.4004 6.59961 16.0869 6.59961 12C6.59961 7.91309 9.91309 4.59961 14 4.59961Z\"\n          stroke={`url(#${uid}-bd)`}\n          strokeWidth=\"1.2\"\n          shapeRendering=\"crispEdges\"\n        />\n        <path\n          d=\"M14 7L15.236 9.63302L18 10.0578L16 12.1062L16.472 15L14 13.633L11.528 15L12 12.1062L10 10.0578L12.764 9.63302L14 7Z\"\n          stroke=\"white\"\n          strokeWidth=\"1.2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        />\n      </g>\n      <defs>\n        <filter id={`${uid}-f`} x=\"0\" y=\"0\" width=\"28\" height=\"28\" filterUnits=\"userSpaceOnUse\" colorInterpolationFilters=\"sRGB\">\n          <feFlood floodOpacity=\"0\" result=\"BackgroundImageFix\" />\n          <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\n          <feOffset dy=\"2\" />\n          <feGaussianBlur stdDeviation=\"3\" />\n          <feComposite in2=\"hardAlpha\" operator=\"out\" />\n          <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.929412 0 0 0 0 0.537255 0 0 0 0 0.211765 0 0 0 0.3 0\" />\n          <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow\" />\n          <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow\" result=\"shape\" />\n          <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\n          <feMorphology radius=\"2\" operator=\"erode\" in=\"SourceAlpha\" result=\"effect2_innerShadow\" />\n          <feOffset dy=\"1\" />\n          <feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\" />\n          <feColorMatrix type=\"matrix\" values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.28 0\" />\n          <feBlend mode=\"normal\" in2=\"shape\" result=\"effect2_innerShadow\" />\n        </filter>\n        <linearGradient id={`${uid}-bg`} x1=\"6\" y1=\"4\" x2=\"22\" y2=\"20\" gradientUnits=\"userSpaceOnUse\">\n          <stop stopColor=\"#ED8936\" />\n          <stop offset=\"0.4\" stopColor=\"#ED8936\" />\n          <stop offset=\"1\" stopColor=\"#8460E5\" />\n        </linearGradient>\n        <linearGradient id={`${uid}-bd`} x1=\"6\" y1=\"4\" x2=\"22\" y2=\"20\" gradientUnits=\"userSpaceOnUse\">\n          <stop stopColor=\"white\" />\n          <stop offset=\"0.25\" stopColor=\"#FBC47D\" />\n          <stop offset=\"0.75\" stopColor=\"#AE8EFF\" />\n          <stop offset=\"1\" stopColor=\"white\" />\n        </linearGradient>\n      </defs>\n    </svg>\n  );\n}\n"
    },
    {
      "path": "components/InfoIcon.tsx",
      "type": "registry:file",
      "target": "components/InfoIcon.tsx",
      "content": "\"use client\";\n\n/**\n * InfoIcon — Generado por Concorde\n * Fuente: Figma VOYAGER · \"InfoIcon Outline\" (nodo 2035:16600)\n *\n * Ícono de información ⓘ 16×16: círculo + «i» con trazo gradiente naranja→lila\n * (#ED8936 → #8460E5, vector 2,3.36 → 14,12.64). Tamaño personalizable.\n * El id del gradiente se aísla con useId para no colisionar entre instancias.\n */\n\nimport { useId } from \"react\";\nimport type { JSX } from \"react\";\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport interface InfoIconProps {\n  /** Ancho y alto en px (default 16). */\n  size?: number;\n  /** Texto accesible — si se omite, el ícono es decorativo (aria-hidden). */\n  title?: string;\n  className?: string;\n}\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\nexport default function InfoIcon({ size = 16, title, className = \"\" }: InfoIconProps): JSX.Element {\n  const uid = useId().replace(/:/g, \"-\");\n\n  return (\n    <svg\n      width={size}\n      height={size}\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      className={className}\n      role={title ? \"img\" : undefined}\n      aria-hidden={title ? undefined : true}\n      aria-label={title}\n    >\n      {title ? <title>{title}</title> : null}\n      <path\n        d=\"M7.5 7.5L7.52733 7.48667C7.61282 7.44396 7.70875 7.42664 7.80378 7.43677C7.8988 7.4469 7.98893 7.48404 8.0635 7.54381C8.13806 7.60357 8.19394 7.68345 8.22451 7.77399C8.25508 7.86453 8.25907 7.96193 8.236 8.05467L7.764 9.94533C7.74076 10.0381 7.74463 10.1356 7.77513 10.2263C7.80563 10.3169 7.86149 10.3969 7.93609 10.4568C8.01069 10.5166 8.10089 10.5538 8.196 10.564C8.2911 10.5741 8.38712 10.5568 8.47267 10.514L8.5 10.5M14 8C14 8.78793 13.8448 9.56815 13.5433 10.2961C13.2417 11.0241 12.7998 11.6855 12.2426 12.2426C11.6855 12.7998 11.0241 13.2417 10.2961 13.5433C9.56815 13.8448 8.78793 14 8 14C7.21207 14 6.43185 13.8448 5.7039 13.5433C4.97595 13.2417 4.31451 12.7998 3.75736 12.2426C3.20021 11.6855 2.75825 11.0241 2.45672 10.2961C2.15519 9.56815 2 8.78793 2 8C2 6.4087 2.63214 4.88258 3.75736 3.75736C4.88258 2.63214 6.4087 2 8 2C9.5913 2 11.1174 2.63214 12.2426 3.75736C13.3679 4.88258 14 6.4087 14 8ZM8 5.5H8.00533V5.50533H8V5.5Z\"\n        stroke={`url(#${uid}-g)`}\n        strokeWidth=\"1.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n      <defs>\n        <linearGradient id={`${uid}-g`} x1=\"2\" y1=\"3.35944\" x2=\"14\" y2=\"12.6406\" gradientUnits=\"userSpaceOnUse\">\n          <stop stopColor=\"#ED8936\" />\n          <stop offset=\"0.4\" stopColor=\"#ED8936\" />\n          <stop offset=\"1\" stopColor=\"#8460E5\" />\n        </linearGradient>\n      </defs>\n    </svg>\n  );\n}\n"
    }
  ]
}