{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "zona",
  "type": "registry:block",
  "title": "zona",
  "description": "Bloque Concorde zona — incluye sus 11 componentes.",
  "dependencies": [
    "react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "bloques/zona/desktop/dimensions.ts",
      "type": "registry:file",
      "target": "bloques/zona/desktop/dimensions.ts",
      "content": "/**\n * Dimensiones del bloque Zona — módulo PLANO (sin \"use client\") para que los\n * Server Components (catálogo /blocks, página del bloque) puedan importar estas\n * constantes sin que se evalúen a undefined → NaN en los cálculos de escala.\n *\n * Zona = Header (vault, 64) + área blanca (24px arriba/abajo · 16px a los lados)\n * con una columna de 766 y gap 16:\n *   UserProfileCard (140) · 2 cards (221) · Secondary banner (100) ·\n *   OfferShelf Recomendados (352) · OfferShelf Me interesa (352) ·\n *   Centro de ayuda banner (100)\n */\n\nexport const ZONA_WIDTH = 798;\n// 64 (header) + 24 + [140+16+221+16+100+16+352+16+352+16+100] + 24\nexport const ZONA_HEIGHT = 1457;\n"
    },
    {
      "path": "bloques/zona/desktop/Zona.tsx",
      "type": "registry:file",
      "target": "bloques/zona/desktop/Zona.tsx",
      "content": "/**\n * Zona — Bloque de Concorde (Voyager DS)\n *\n * Zona de usuario (Header logueado + contenido blanco):\n *   · UserProfileCard — saludo, riesgo, puntos VMC, accesos\n *   · 2 columnas: WalletBalanceCard (Billetera) · ActivityCard (Tu actividad)\n *   · Secondary banner (placeholder)\n *   · OfferShelf «Recomendados» · OfferShelf «Me interesa» (4 OfferCards c/u)\n *   · Centro de ayuda banner (placeholder)\n *\n * Bloque = composición de componentes existentes (reusa el bloque Header).\n */\n\nimport type { CSSProperties, JSX } from \"react\";\nimport AppHeader from \"@/concorde/bloques/header/desktop/Header\";\nimport UserProfileCard from \"@/concorde/components/UserProfileCard\";\nimport WalletBalanceCard from \"@/concorde/components/WalletBalanceCard\";\nimport ActivityCard from \"@/concorde/components/ActivityCard\";\nimport OfferShelf from \"@/concorde/components/OfferShelf\";\nimport { ZONA_WIDTH, ZONA_HEIGHT } from \"./dimensions\";\n\nexport { ZONA_WIDTH, ZONA_HEIGHT } from \"./dimensions\";\n\nexport interface ZonaProps {\n  /** Usuario logueado — alimenta el CTA del header y el saludo de la card. */\n  username?: string;\n  /** Renderiza el AppHeader interno. Ponlo en `false` cuando el visor dibuja el\n   *  header por separado (para escalarlo aparte del cuerpo). Por defecto `true`. */\n  renderHeader?: boolean;\n  className?: string;\n}\n\n// Banner placeholder gris 766×100 (igual que en Homepage) — secondary / centro de ayuda.\nconst BANNER_PLACEHOLDER: CSSProperties = {\n  width: 766,\n  height: 100,\n  borderRadius: 8,\n  background: \"#E9EAEC\",\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  fontSize: 13,\n  fontWeight: 600,\n  letterSpacing: \"0.06em\",\n  color: \"#9AA1AC\",\n};\n\nexport default function Zona({ username = \"ZAEX5G\", renderHeader = true, className = \"\" }: ZonaProps): JSX.Element {\n  return (\n    <div\n      className={className}\n      data-block=\"zona\"\n      style={{\n        width: ZONA_WIDTH,\n        minHeight: ZONA_HEIGHT,\n        background: \"#ffffff\",\n        display: \"flex\",\n        flexDirection: \"column\",\n        overflow: \"hidden\",\n        fontFamily: 'var(--vmc-font-display, \"Plus Jakarta Sans\", -apple-system, sans-serif)',\n      }}\n    >\n      {renderHeader ? <AppHeader width={ZONA_WIDTH} username={username} /> : null}\n\n      {/* Área blanca: columna de 766 (16px a cada lado = 798), gap 16 entre secciones */}\n      <div style={{ flex: 1, padding: \"24px 16px\", display: \"flex\", justifyContent: \"center\" }}>\n        <div style={{ width: 766, display: \"flex\", flexDirection: \"column\", gap: 16 }}>\n          {/* Tarjeta de perfil */}\n          <UserProfileCard username={username} />\n\n          {/* 2 columnas — Billetera (izq) · Tu actividad (der) */}\n          <div style={{ display: \"flex\", gap: 16 }}>\n            <WalletBalanceCard />\n            <ActivityCard />\n          </div>\n\n          {/* Secondary banner */}\n          <div data-slot=\"secondary-banner\" style={BANNER_PLACEHOLDER}>\n            SECONDARY BANNER\n          </div>\n\n          {/* Estantes de ofertas — Recomendados / Me interesa */}\n          <OfferShelf title=\"RECOMENDADOS\" offersLabel=\"4 Ofertas\" />\n          <OfferShelf title=\"ME INTERESA\" offersLabel=\"4 Ofertas\" />\n\n          {/* Centro de ayuda banner */}\n          <div data-slot=\"help-banner\" style={BANNER_PLACEHOLDER}>\n            CENTRO DE AYUDA\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"
    },
    {
      "path": "bloques/zona/mobile/dimensions.ts",
      "type": "registry:file",
      "target": "bloques/zona/mobile/dimensions.ts",
      "content": "/**\n * Dimensiones del bloque ZonaMobile — módulo plano sin \"use client\".\n */\n\nexport const ZONA_MOBILE_WIDTH = 420;\nexport const ZONA_MOBILE_HEIGHT = 2059;\n"
    },
    {
      "path": "bloques/zona/mobile/ZonaMobile.tsx",
      "type": "registry:file",
      "target": "bloques/zona/mobile/ZonaMobile.tsx",
      "content": "\"use client\";\n\n/**\n * ZonaMobile — Bloque de Concorde (Voyager DS)\n *\n * Zona de usuario · mobile (420 de ancho):\n *   · Header 420×64 logueado → «Bienvenido, ZAEX5G»\n *   · UserProfileCard mobile 388×132 (2 filas: saludo + stats)\n *   · WalletBalanceCard mobile 388×206 (botón CTA morado)\n *   · ActivityCard mobile 388×221 (grid 2×2 de pills)\n *   · Banner secundario 388×120\n */\n\nimport type { JSX } from \"react\";\nimport { useState } from \"react\";\nimport AppHeader from \"../../header/desktop/Header\";\nimport AvatarZone from \"../../../components/AvatarZone\";\nimport StarIcon from \"../../../components/StarIcon\";\nimport InfoIcon from \"../../../components/InfoIcon\";\nimport ProfileButton from \"../../../components/ProfileButton\";\nimport WalletBalanceCard from \"../../../components/WalletBalanceCard\";\nimport ActivityCard from \"../../../components/ActivityCard\";\nimport CardTitle from \"../../../components/CardTitle\";\nimport OfferCard from \"../../../components/OfferCard\";\nimport BadgeStatus from \"../../../components/BadgeStatus\";\nimport SidebarMobile, { SidebarMenuButton } from \"../../sidebar/mobile/SidebarMobile\";\n\nimport { ZONA_MOBILE_WIDTH, ZONA_MOBILE_HEIGHT } from \"./dimensions\";\nexport { ZONA_MOBILE_WIDTH, ZONA_MOBILE_HEIGHT } from \"./dimensions\";\n\nconst ZM_STYLES = `\n/* WalletBalanceCard — override mobile (388×206, botón morado) */\n.zm-wallet.wbc { width: 388px; height: 206px; border-radius: 8px; }\n/* ActivityCard — override mobile (388×221) */\n.zm-activity.actcard { width: 388px; border-radius: 8px; }\n.zm-wallet .wbc__acquire {\n  background-image:\n    linear-gradient(159deg, #8460E5 0%, #3B1782 100%),\n    linear-gradient(135deg, #CFBAFF 0%, #FFFFFF 35%, #AE8EFF 65%, #CFBAFF 100%);\n  box-shadow: rgba(255,255,255,0.22) 0 1px 0 2px inset, rgba(132,96,229,0.3) 0 2px 8px;\n}\n.zm-wallet .wbc__acquire:hover {\n  box-shadow: rgba(255,255,255,0.2) 0 1px 0 2px inset, rgba(132,96,229,0.4) 0 8px 24px, rgba(132,96,229,0.25) 0 4px 10px;\n}\n/* Texto degradado \"¡Hola, {username}!\" */\n.zm-greeting {\n  background: linear-gradient(90deg, #ED8936 0%, #ED8936 40%, #8460E5 100%);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  background-clip: text;\n  font-size: 16px;\n  font-weight: 700;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.zm-stat-label {\n  font-size: 10px;\n  font-weight: 500;\n  color: #9AA1AC;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n}\n.zm-stat-value {\n  font-size: 13px;\n  font-weight: 700;\n  color: #ED8936;\n  margin-top: 2px;\n}\n.zm-pts {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 13px;\n  font-weight: 700;\n  color: #3B1782;\n  margin-top: 2px;\n}\n/* Mobile OfferShelf — 388px wide, grid 2×2 de OfferCards 170×232 */\n.zm-shelf {\n  width: 388px;\n  box-sizing: border-box;\n  background: #ffffff;\n  border-radius: 8px;\n  box-shadow: 0 0 8px 4px rgba(0,0,0,0.08);\n  padding: 20px 16px 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n.zm-shelf__grid {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 16px;\n}\n`;\n\nexport interface ZonaMobileProps {\n  username?: string;\n  className?: string;\n  /** Alto del marco para previsualizaciones (px). En producción se omite. Ver `SidebarMobile`. */\n  frameHeight?: number;\n}\n\nexport default function ZonaMobile({ username = \"ZAEX5G\", className = \"\", frameHeight }: ZonaMobileProps): JSX.Element {\n  const [menuOpen, setMenuOpen] = useState(false);\n\n  const page = (\n    <div\n      className={className}\n      data-block=\"zona-mobile\"\n      style={{\n        width: ZONA_MOBILE_WIDTH,\n        background: \"#ffffff\",\n        display: \"flex\",\n        flexDirection: \"column\",\n        fontFamily: \"var(--vmc-font-display, 'Plus Jakarta Sans', -apple-system, sans-serif)\",\n      }}\n    >\n      <style suppressHydrationWarning dangerouslySetInnerHTML={{ __html: ZM_STYLES }} />\n\n      {/* Header 420×64 — logueado → \"Bienvenido, ZAEX5G\" */}\n      <AppHeader\n        width={ZONA_MOBILE_WIDTH}\n        username={username}\n        logo={\n          <div style={{ display: \"flex\", alignItems: \"center\", gap: 8 }}>\n            <SidebarMenuButton onClick={() => setMenuOpen(true)} expanded={menuOpen} />\n            <img src=\"/logo-preview.png\" alt=\"VMC Subastas\" style={{ height: 26, width: \"auto\", display: \"block\" }} />\n          </div>\n        }\n      />\n\n      {/* Contenido a 16px de margen */}\n      <div style={{ display: \"flex\", flexDirection: \"column\", gap: 16, padding: 16 }}>\n\n        {/* UserProfileCard mobile — 388×132 */}\n        <div\n          style={{\n            width: 388,\n            boxSizing: \"border-box\",\n            background: \"#ffffff\",\n            borderRadius: 8,\n            boxShadow: \"0 0 8px 4px rgba(0,0,0,0.08)\",\n            padding: 16,\n            display: \"flex\",\n            flexDirection: \"column\",\n          }}\n        >\n          {/* Row 1 (356×40): avatar + saludo + \"Ir al Perfil\" */}\n          <div style={{ display: \"flex\", alignItems: \"center\", gap: 8, height: 40 }}>\n            <AvatarZone />\n            <span className=\"zm-greeting\" style={{ flex: 1, minWidth: 0 }}>¡Hola, {username}!</span>\n            <ProfileButton>Ir al Perfil</ProfileButton>\n          </div>\n\n          {/* Divider */}\n          <div style={{ height: 1, background: \"#E1E3E2\", margin: \"8px 0\" }} />\n\n          {/* Row 2 (356×44): stats izquierda + \"Historial\" derecha */}\n          <div style={{ display: \"flex\", alignItems: \"center\", height: 44 }}>\n            <div style={{ display: \"flex\", alignItems: \"center\", gap: 20, flex: 1, minWidth: 0 }}>\n              {/* RIESGO DEL PERFIL */}\n              <div>\n                <div className=\"zm-stat-label\">RIESGO DEL PERFIL</div>\n                <div className=\"zm-stat-value\">Muy bajo</div>\n              </div>\n              {/* PUNTOS VMC */}\n              <div>\n                <div className=\"zm-stat-label\">PUNTOS VMC</div>\n                <div className=\"zm-pts\">\n                  <StarIcon size={24} />\n                  <span>500 pts</span>\n                  <InfoIcon size={16} />\n                </div>\n              </div>\n            </div>\n            <ProfileButton>Historial</ProfileButton>\n          </div>\n        </div>\n\n        {/* WalletBalanceCard mobile — 388×206, botón CTA morado */}\n        <WalletBalanceCard className=\"zm-wallet\" />\n\n        {/* ActivityCard mobile — 388×221, mismo grid 2×2 de pills */}\n        <ActivityCard className=\"zm-activity\" />\n\n        {/* Banner secundario — 388×120 */}\n        <div\n          data-slot=\"secondary-banner\"\n          style={{\n            width: 388,\n            height: 120,\n            boxSizing: \"border-box\",\n            borderRadius: 8,\n            background: \"#E9EAEC\",\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n            fontFamily: \"monospace\",\n            fontSize: 12,\n            letterSpacing: \"0.08em\",\n            color: \"#9AA1AC\",\n          }}\n        >\n          SECONDARY BANNER\n        </div>\n\n        {/* OfferShelf mobile — RECOMENDADOS (2×2 grid) */}\n        <div className=\"zm-shelf\">\n          <header style={{ padding: \"0 8px\" }}>\n            <CardTitle title=\"RECOMENDADOS\" subtitle=\"4 Ofertas\" titleSize={16} subtitleSize={14} />\n          </header>\n          <div className=\"zm-shelf__grid\">\n            <OfferCard variant=\"live\" name=\"Audi Q3\" year={2026} price=\"US$ 9,999\" imageSrc=\"/demo/bronco.jpg\" elevated />\n            <OfferCard variant=\"live\" name=\"Audi Q3\" year={2026} price=\"US$ 9,999\" imageSrc=\"/demo/bronco.jpg\" badge={<BadgeStatus variant=\"live\" />} elevated />\n            <OfferCard variant=\"negotiable\" name=\"Audi Q3\" year={2026} imageSrc=\"/demo/bronco.jpg\" elevated />\n            <OfferCard variant=\"live\" name=\"Audi Q3\" year={2026} price=\"US$ 9,999\" imageSrc=\"/demo/bronco.jpg\" elevated />\n          </div>\n        </div>\n\n        {/* OfferShelf mobile — ME INTERESA (2×2 grid) */}\n        <div className=\"zm-shelf\">\n          <header style={{ padding: \"0 8px\" }}>\n            <CardTitle title=\"ME INTERESA\" subtitle=\"4 Ofertas\" titleSize={16} subtitleSize={14} />\n          </header>\n          <div className=\"zm-shelf__grid\">\n            <OfferCard variant=\"live\" name=\"Audi Q3\" year={2026} price=\"US$ 9,999\" imageSrc=\"/demo/bronco.jpg\" elevated />\n            <OfferCard variant=\"live\" name=\"Audi Q3\" year={2026} price=\"US$ 9,999\" imageSrc=\"/demo/bronco.jpg\" badge={<BadgeStatus variant=\"live\" />} elevated />\n            <OfferCard variant=\"negotiable\" name=\"Audi Q3\" year={2026} imageSrc=\"/demo/bronco.jpg\" elevated />\n            <OfferCard variant=\"live\" name=\"Audi Q3\" year={2026} price=\"US$ 9,999\" imageSrc=\"/demo/bronco.jpg\" elevated />\n          </div>\n        </div>\n\n        {/* CENTRO DE AYUDA — 388×116 */}\n        <div\n          data-slot=\"help-banner\"\n          style={{\n            width: 388,\n            height: 116,\n            boxSizing: \"border-box\",\n            borderRadius: 8,\n            background: \"#E9EAEC\",\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n            fontFamily: \"monospace\",\n            fontSize: 12,\n            letterSpacing: \"0.08em\",\n            color: \"#9AA1AC\",\n          }}\n        >\n          CENTRO DE AYUDA\n        </div>\n\n      </div>\n    </div>\n  );\n\n  return (\n    <SidebarMobile open={menuOpen} onOpenChange={setMenuOpen} frameHeight={frameHeight}>\n      {page}\n    </SidebarMobile>\n  );\n}\n"
    },
    {
      "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"
    },
    {
      "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/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/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": "bloques/header/desktop/dimensions.ts",
      "type": "registry:file",
      "target": "bloques/header/desktop/dimensions.ts",
      "content": "/**\n * Dimensiones del bloque Header — módulo PLANO (sin \"use client\") para que los\n * Server Components (catálogo /blocks, páginas de bloque) puedan importar estas\n * constantes sin que se evalúen a undefined → NaN en los cálculos de escala.\n */\n\nexport const HEADER_WIDTH = 798;\nexport const HEADER_HEIGHT = 64;\n"
    },
    {
      "path": "bloques/header/desktop/Header.tsx",
      "type": "registry:file",
      "target": "bloques/header/desktop/Header.tsx",
      "content": "/**\n * Header — Bloque de Concorde (Voyager DS)\n *\n * Barra superior 798 × 64 con fondo vault (#2E0F70). A la derecha lleva el\n * Button «Ingresa» (variante sm-guest, con UserIcon), a 16px del borde y\n * centrado verticalmente — igual que el export de Figma (1312:4674).\n *\n * Si se pasa `username`, el CTA cambia a la variante logueada: «Bienvenido,\n * {username}» (Button sm-logged-in) — usado p.ej. en la Zona de usuario.\n */\n\n\"use client\";\n\nimport type { JSX, ReactNode } from \"react\";\nimport Button, { UserIcon } from \"../../../components/Button\";\nimport { HEADER_WIDTH, HEADER_HEIGHT } from \"./dimensions\";\n\nexport interface HeaderProps {\n  /** Ancho de la barra. Por defecto HEADER_WIDTH (798, desktop); 420 en mobile. */\n  width?: number | string;\n  /** Logo a la izquierda (slot). En desktop no se usa (el logo va en el Sidebar);\n   *  en mobile se pasa el logo de la marca. */\n  logo?: ReactNode;\n  /** Usuario logueado. Si se pasa, el CTA muestra «Bienvenido, {username}»\n   *  (variante sm-logged-in) en vez de «Ingresa» (sm-guest). */\n  username?: string;\n  /** En mobile el ancho es 420 y el botón «Bienvenido, {username}» no entra junto\n   *  al logo+hamburguesa: con `compact` se muestra solo el ícono de usuario. */\n  compact?: boolean;\n  className?: string;\n}\n\nexport default function Header({ width = HEADER_WIDTH, logo, username, compact = false, className = \"\" }: HeaderProps): JSX.Element {\n  return (\n    <header\n      className={className}\n      data-block=\"header\"\n      style={{\n        width,\n        height: HEADER_HEIGHT,\n        background: \"#2E0F70\",\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: logo ? \"space-between\" : \"flex-end\",\n        padding: \"0 16px\",\n        flexShrink: 0,\n        boxSizing: \"border-box\",\n      }}\n    >\n      {logo}\n      {username && compact ? (\n        // Solo el ícono circular (mobile) — el botón con texto no entra en 420px.\n        <button\n          type=\"button\"\n          aria-label={`Perfil de ${username}`}\n          style={{\n            width: 40,\n            height: 40,\n            flexShrink: 0,\n            borderRadius: \"50%\",\n            border: \"2px solid rgba(255,255,255,0.7)\",\n            background: \"linear-gradient(135deg, #ED8936 0%, #ED8936 40%, #8460E5 100%)\",\n            boxShadow: \"rgba(255,255,255,0.28) 0 1px 0 2px inset, rgba(237,137,54,0.3) 0 2px 6px\",\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n            color: \"#ffffff\",\n            cursor: \"pointer\",\n            padding: 0,\n          }}\n        >\n          <UserIcon />\n        </button>\n      ) : username ? (\n        <Button variant=\"sm-logged-in\" username={username} icon={<UserIcon />} />\n      ) : (\n        <Button variant=\"sm-guest\" icon={<UserIcon />}>\n          Ingresa\n        </Button>\n      )}\n    </header>\n  );\n}\n"
    },
    {
      "path": "components/Button.tsx",
      "type": "registry:file",
      "target": "components/Button.tsx",
      "content": "// Button.tsx — Generado por Concorde\r\n// Fuente: https://voyager-ds.vercel.app/preview/components/pase1\r\n// Generado: 2026-05-25\r\n// EDITAR LIBREMENTE después de generar\r\n\r\n\"use client\";\r\n\r\nimport { forwardRef } from \"react\";\r\nimport type { ButtonHTMLAttributes, JSX, ReactNode } from \"react\";\r\n\r\nexport type ButtonVariant =\r\n  | \"primary\"\r\n  | \"negotiable\"\r\n  | \"secondary\"\r\n  | \"secondary-sm\"\r\n  | \"ghost\"\r\n  | \"outline\"\r\n  | \"sm-guest\"\r\n  | \"sm-logged-in\";\r\n\r\n/**\r\n * Hereda todos los atributos nativos de <button> (type, name, className, style,\r\n * onMouseEnter, data-*, etc.) — basta con props, no hace falta editar el archivo.\r\n */\r\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\r\n  /** Estilo visual del botón. */\r\n  variant?: ButtonVariant;\r\n  /** Ícono opcional en el slot circular (variantes sm-guest, secondary-sm, sm-logged-in). */\r\n  icon?: ReactNode;\r\n  /** Nombre de usuario — usado cuando variant=\"sm-logged-in\". */\r\n  username?: string;\r\n}\r\n\r\n// ── CSS self-contained ────────────────────────────────────────────────────\r\n\r\nconst BUTTON_STYLES = `\r\n@property --vbtn-angle { syntax: \"<angle>\"; inherits: false; initial-value: 135deg; }\r\n@property --vbtn-stop-a { syntax: \"<color>\"; inherits: false; initial-value: oklch(0.72 0.16 55); }\r\n@property --vbtn-stop-b { syntax: \"<color>\"; inherits: false; initial-value: oklch(0.55 0.22 285); }\r\n@property --vsec-angle { syntax: \"<angle>\"; inherits: false; initial-value: 160deg; }\r\n@property --vsec-stop-a { syntax: \"<color>\"; inherits: false; initial-value: oklch(0.38 0.20 285); }\r\n@property --vsec-stop-b { syntax: \"<color>\"; inherits: false; initial-value: oklch(0.28 0.18 285); }\r\n@property --vneg-angle { syntax: \"<angle>\"; inherits: false; initial-value: 135deg; }\r\n@property --vneg-stop-a { syntax: \"<color>\"; inherits: false; initial-value: #00aeb1; }\r\n@property --vneg-stop-b { syntax: \"<color>\"; inherits: false; initial-value: #8460e5; }\r\n@property --vss-angle { syntax: \"<angle>\"; inherits: false; initial-value: 160deg; }\r\n@property --vss-stop-a { syntax: \"<color>\"; inherits: false; initial-value: #8460e5; }\r\n@property --vss-stop-b { syntax: \"<color>\"; inherits: false; initial-value: #3b1782; }\r\n\r\n/* ── primary ─────────────────────────────────────────────────────────── */\r\n.pvbtn {\r\n  --vbtn-stop-a: var(--vmc-color-orange-600, #ed8936);\r\n  --vbtn-stop-b: var(--vmc-color-vault-500, #8460e5);\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  height: 48px;\r\n  padding: 0 56px;\r\n  border-radius: var(--vmc-radius-full, 9999px);\r\n  /* Borde GRADIENTE de Figma (1130:1778): white → #FBC47D 25% → #AE8EFF 75% → white */\r\n  border: 2px solid transparent;\r\n  cursor: pointer;\r\n  position: relative;\r\n  overflow: hidden;\r\n  font-family: var(--vmc-font-display, \"Plus Jakarta Sans\", sans-serif);\r\n  font-size: 16px;\r\n  line-height: 20px;\r\n  font-weight: 600;\r\n  color: var(--vmc-color-base-white, #ffffff);\r\n  text-shadow: rgba(0,0,0,0.25) 0 1px 3px;\r\n  background-image:\r\n    linear-gradient(var(--vbtn-angle), var(--vbtn-stop-a) 0%, var(--vbtn-stop-a) 40%, var(--vbtn-stop-b) 100%),\r\n    linear-gradient(135deg, #ffffff 0%, #fbc47d 25%, #ae8eff 75%, #ffffff 100%);\r\n  background-origin: padding-box, border-box;\r\n  background-clip: padding-box, border-box;\r\n  box-shadow: rgba(255,255,255,0.28) 0 1px 0 2px inset, rgba(237,137,54,0.3) 0 2px 6px;\r\n  transition:\r\n    --vbtn-angle 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),\r\n    --vbtn-stop-a 0.35s,\r\n    --vbtn-stop-b 0.35s,\r\n    transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1),\r\n    box-shadow 0.25s;\r\n  transform: translateZ(0);\r\n}\r\n.pvbtn::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: 0;\r\n  border-radius: var(--vmc-radius-full, 9999px);\r\n  background: linear-gradient(rgba(255,255,255,0.17) 0%, transparent 55%);\r\n  pointer-events: none;\r\n  z-index: 1;\r\n}\r\n.pvbtn::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: -4px;\r\n  border-radius: var(--vmc-radius-full, 9999px);\r\n  background: linear-gradient(135deg,\r\n    var(--vmc-color-orange-600, oklch(0.72 0.16 55)),\r\n    var(--vmc-color-vault-500, oklch(0.55 0.22 285))\r\n  );\r\n  filter: blur(14px);\r\n  opacity: 0;\r\n  z-index: -1;\r\n  transition: opacity 0.3s, filter 0.3s;\r\n}\r\n.pvbtn:hover {\r\n  --vbtn-angle: 220deg;\r\n  --vbtn-stop-a: var(--vmc-color-orange-400, #fbc47d);\r\n  --vbtn-stop-b: var(--vmc-color-vault-400, #ae8eff);\r\n  transform: translateY(-2px) scale(1.02);\r\n  box-shadow: rgba(255,255,255,0.22) 0 1px 0 2px inset, rgba(132,96,229,0.35) 0 8px 24px, rgba(237,137,54,0.4) 0 4px 10px;\r\n}\r\n.pvbtn:hover::after { opacity: 0.45; filter: blur(18px); }\r\n.pvbtn:active {\r\n  --vbtn-angle: 135deg;\r\n  --vbtn-stop-a: var(--vmc-color-orange-700, #d46e20);\r\n  --vbtn-stop-b: var(--vmc-color-vault-600, #5a35c2);\r\n  color: #d1d5dc;\r\n  transform: scale(0.97) translateY(1px);\r\n  box-shadow: rgba(0,0,0,0.22) 0 2px 5px 2px inset, rgba(0,0,0,0.12) 0 1px 3px;\r\n}\r\n.pvbtn:active::after { opacity: 0; }\r\n.pvbtn:disabled {\r\n  background-image: none;\r\n  background-color: var(--vmc-color-background-disabled, #e1e3e2);\r\n  color: var(--vmc-color-neutral-700, #99a1af);\r\n  text-shadow: none;\r\n  box-shadow: none;\r\n  cursor: not-allowed;\r\n  transform: none;\r\n  border-color: transparent;\r\n}\r\n.pvbtn:disabled::after { display: none; }\r\n.pvbtn:focus-visible {\r\n  outline: transparent solid 3px;\r\n  outline-offset: 4px;\r\n  transform: scale(0.98);\r\n  box-shadow:\r\n    0 0 0 2px var(--vmc-color-base-white, #fff),\r\n    0 0 0 5px var(--vmc-color-vault-500, oklch(0.55 0.22 285)),\r\n    0 8px 16px -4px rgb(51.76% 37.65% 89.8% / 0.30);\r\n}\r\n\r\n/* ── secondary ───────────────────────────────────────────────────────── */\r\n.psec {\r\n  --vsec-stop-a: var(--vmc-color-vault-500, #8460e5);\r\n  --vsec-stop-b: var(--vmc-color-vault-700, #3b1782);\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  height: 48px;\r\n  padding: 0 56px;\r\n  border-radius: var(--vmc-radius-full, 9999px);\r\n  /* Borde GRADIENTE lila de Figma (1133:2294): #CFBAFF → white 35% → #AE8EFF 65% → #CFBAFF */\r\n  border: 2px solid transparent;\r\n  cursor: pointer;\r\n  position: relative;\r\n  overflow: hidden;\r\n  font-family: var(--vmc-font-display, \"Plus Jakarta Sans\", sans-serif);\r\n  font-size: 16px;\r\n  line-height: 20px;\r\n  font-weight: 600;\r\n  color: var(--vmc-color-base-white, #ffffff);\r\n  text-shadow: rgba(0,0,0,0.3) 0 1px 3px;\r\n  background-image:\r\n    linear-gradient(var(--vsec-angle), var(--vsec-stop-a) 0%, var(--vsec-stop-b) 100%),\r\n    linear-gradient(135deg, #cfbaff 0%, #ffffff 35%, #ae8eff 65%, #cfbaff 100%);\r\n  background-origin: padding-box, border-box;\r\n  background-clip: padding-box, border-box;\r\n  box-shadow: rgba(255,255,255,0.22) 0 1px 0 2px inset, rgba(132,96,229,0.3) 0 2px 8px;\r\n  transition:\r\n    --vsec-angle 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),\r\n    --vsec-stop-a 0.35s,\r\n    --vsec-stop-b 0.35s,\r\n    transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1),\r\n    box-shadow 0.25s;\r\n  transform: translateZ(0);\r\n}\r\n.psec::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: 0;\r\n  border-radius: var(--vmc-radius-full, 9999px);\r\n  background: linear-gradient(rgba(255,255,255,0.15) 0%, transparent 55%);\r\n  pointer-events: none;\r\n  z-index: 1;\r\n}\r\n.psec::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: -4px;\r\n  border-radius: var(--vmc-radius-full, 9999px);\r\n  background: linear-gradient(135deg,\r\n    var(--vmc-color-vault-500, oklch(0.55 0.22 285)),\r\n    var(--vmc-color-vault-700, oklch(0.38 0.20 285))\r\n  );\r\n  filter: blur(14px);\r\n  opacity: 0;\r\n  z-index: -1;\r\n  transition: opacity 0.3s, filter 0.3s;\r\n}\r\n.psec:hover {\r\n  --vsec-angle: 219deg;\r\n  --vsec-stop-a: var(--vmc-color-vault-400, #ae8eff);\r\n  --vsec-stop-b: var(--vmc-color-vault-600, #5a35c2);\r\n  transform: translateY(-2px) scale(1.02);\r\n  box-shadow: rgba(255,255,255,0.2) 0 1px 0 2px inset, rgba(132,96,229,0.4) 0 8px 24px, rgba(132,96,229,0.25) 0 4px 10px;\r\n}\r\n.psec:hover::after { opacity: 0.45; filter: blur(18px); }\r\n.psec:active {\r\n  --vsec-angle: 160deg;\r\n  --vsec-stop-a: var(--vmc-color-vault-700, #3b1782);\r\n  --vsec-stop-b: var(--vmc-color-vault-900, #22005c);\r\n  color: #d1d5dc;\r\n  transform: scale(0.97) translateY(1px);\r\n  box-shadow: rgba(0,0,0,0.28) 0 2px 5px 2px inset, rgba(0,0,0,0.14) 0 1px 3px;\r\n}\r\n.psec:active::after { opacity: 0; }\r\n.psec:disabled {\r\n  background-image: none;\r\n  background-color: var(--vmc-color-background-disabled, #e1e3e2);\r\n  color: var(--vmc-color-neutral-700, #99a1af);\r\n  text-shadow: none;\r\n  box-shadow: none;\r\n  cursor: not-allowed;\r\n  transform: none;\r\n  border-color: transparent;\r\n}\r\n.psec:disabled::after { display: none; }\r\n.psec:focus-visible {\r\n  outline: transparent solid 3px;\r\n  outline-offset: 4px;\r\n  transform: scale(0.98);\r\n  box-shadow:\r\n    0 0 0 2px var(--vmc-color-base-white, #fff),\r\n    0 0 0 5px var(--vmc-color-vault-500, oklch(0.55 0.22 285)),\r\n    0 8px 16px -4px rgb(51.76% 37.65% 89.8% / 0.30);\r\n}\r\n\r\n/* ── ghost · \"Ver Ofertas relacionadas\" ─────────────────────────────────\r\n   Sync SVG Figma (1143:1709/1885/1909): frame 215×48 con texto casi al\r\n   borde → padding 12px (antes 28px). Estados ya coincidían exacto. */\r\n.pghost {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  height: 48px;\r\n  padding: 0 12px;\r\n  border-radius: var(--vmc-radius-full, 9999px);\r\n  border: 2px solid rgba(255,255,255,0.75);\r\n  cursor: pointer;\r\n  position: relative;\r\n  overflow: hidden;\r\n  font-family: var(--vmc-font-display, \"Plus Jakarta Sans\", sans-serif);\r\n  font-size: 16px;\r\n  line-height: 20px;\r\n  font-weight: 600;\r\n  color: var(--vmc-color-base-white, #ffffff);\r\n  background: transparent;\r\n  text-shadow: rgba(0,0,0,0.18) 0 1px 3px;\r\n  box-shadow: rgba(255,255,255,0.2) 0 1px 0 2px inset, rgba(255,255,255,0.15) 0 0 0 1px;\r\n  transition:\r\n    background 0.25s,\r\n    border-color 0.25s,\r\n    color 0.25s,\r\n    transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1),\r\n    box-shadow 0.25s;\r\n  transform: translateZ(0);\r\n}\r\n.pghost::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: 0;\r\n  border-radius: var(--vmc-radius-full, 9999px);\r\n  background: linear-gradient(rgba(255,255,255,0.1) 0%, transparent 55%);\r\n  pointer-events: none;\r\n  z-index: 1;\r\n}\r\n.pghost::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: -4px;\r\n  border-radius: var(--vmc-radius-full, 9999px);\r\n  background: linear-gradient(135deg,\r\n    var(--vmc-color-orange-600, oklch(0.72 0.16 55)),\r\n    var(--vmc-color-vault-500, oklch(0.55 0.22 285))\r\n  );\r\n  filter: blur(16px);\r\n  opacity: 0;\r\n  z-index: -1;\r\n  transition: opacity 0.3s, filter 0.3s;\r\n}\r\n.pghost:hover {\r\n  background: linear-gradient(146.64deg, #fff 0%, rgb(255,240,226) 100%);\r\n  border-color: #fff;\r\n  color: #ed8936;\r\n  text-shadow: rgba(0,0,0,0.25) 0 1px 3px;\r\n  transform: translateY(-2px) scale(1.02);\r\n  box-shadow: rgba(255,255,255,0.5) 0 1px 0 2px inset, rgba(0,0,0,0.2) 0 6px 20px;\r\n}\r\n.pghost:hover::after { opacity: 0.4; filter: blur(18px); }\r\n.pghost:active {\r\n  background: linear-gradient(146.56deg, rgb(212,110,32) 0%, rgb(183,55,0) 100%);\r\n  border-color: #d46e20;\r\n  color: var(--vmc-color-icon-disabled, #e1e3e2);\r\n  text-shadow: rgba(0,0,0,0.25) 0 1px 3px;\r\n  transform: scale(0.97) translateY(1px);\r\n  box-shadow: rgba(0,0,0,0.22) 0 2px 5px 2px inset;\r\n}\r\n.pghost:active::after { opacity: 0; }\r\n.pghost:disabled {\r\n  /* SVG Ghost/Disabled (1153:2443): borde white 0.3, glass white 0.1→transparent, texto white 0.35 */\r\n  background: linear-gradient(rgba(255,255,255,0.1) 0%, transparent 55%);\r\n  border: 2px solid rgba(255,255,255,0.3);\r\n  color: rgba(255,255,255,0.35);\r\n  text-shadow: none;\r\n  box-shadow: none;\r\n  cursor: not-allowed;\r\n  transform: none;\r\n}\r\n.pghost:focus-visible {\r\n  outline: transparent solid 3px;\r\n  outline-offset: 4px;\r\n  transform: scale(0.98);\r\n  box-shadow:\r\n    0 0 0 2px var(--vmc-color-base-white, #fff),\r\n    0 0 0 5px var(--vmc-color-vault-500, oklch(0.55 0.22 285)),\r\n    0 8px 16px -4px rgb(51.76% 37.65% 89.8% / 0.30);\r\n}\r\n\r\n/* ── sm-guest ─────────────────────────────────────────────────────────── */\r\n.pvbtn-sm {\r\n  --vbtn-stop-a: var(--vmc-color-orange-600, #ed8936);\r\n  --vbtn-stop-b: var(--vmc-color-vault-500, #8460e5);\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  height: 40px;\r\n  min-width: 116px;\r\n  padding: 0 16px 0 4px;\r\n  border-radius: var(--vmc-radius-full, 9999px);\r\n  /* Borde GRADIENTE de Figma (1159:4466): white → #FBC47D 25% → #AE8EFF 75% → white */\r\n  border: 2px solid transparent;\r\n  cursor: pointer;\r\n  position: relative;\r\n  overflow: hidden;\r\n  font-family: var(--vmc-font-display, \"Plus Jakarta Sans\", sans-serif);\r\n  font-size: 14px;\r\n  line-height: 16px;\r\n  font-weight: 600;\r\n  color: var(--vmc-color-base-white, #ffffff);\r\n  text-shadow: rgba(0,0,0,0.2) 0 1px 2px;\r\n  background-image:\r\n    linear-gradient(var(--vbtn-angle), var(--vbtn-stop-a) 0%, var(--vbtn-stop-a) 40%, var(--vbtn-stop-b) 100%),\r\n    linear-gradient(135deg, #ffffff 0%, #fbc47d 25%, #ae8eff 75%, #ffffff 100%);\r\n  background-origin: padding-box, border-box;\r\n  background-clip: padding-box, border-box;\r\n  box-shadow: rgba(255,255,255,0.25) 0 1px 0 2px inset, rgba(237,137,54,0.25) 0 2px 6px;\r\n  transition:\r\n    --vbtn-angle 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),\r\n    --vbtn-stop-a 0.35s,\r\n    --vbtn-stop-b 0.35s,\r\n    transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1),\r\n    box-shadow 0.25s;\r\n  transform: translateZ(0);\r\n}\r\n.pvbtn-sm::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: 0;\r\n  border-radius: var(--vmc-radius-full, 9999px);\r\n  background: linear-gradient(rgba(255,255,255,0.15) 0%, transparent 55%);\r\n  pointer-events: none;\r\n  z-index: 1;\r\n}\r\n.pvbtn-sm:hover {\r\n  --vbtn-angle: 220deg;\r\n  --vbtn-stop-a: var(--vmc-color-orange-400, #fbc47d);\r\n  --vbtn-stop-b: var(--vmc-color-vault-400, #ae8eff);\r\n  transform: translateY(-1px) scale(1.02);\r\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;\r\n}\r\n.pvbtn-sm:active {\r\n  --vbtn-angle: 135deg;\r\n  --vbtn-stop-a: var(--vmc-color-orange-700, #d46e20);\r\n  --vbtn-stop-b: var(--vmc-color-vault-600, #5a35c2);\r\n  color: #d1d5dc;\r\n  transform: scale(0.97) translateY(1px);\r\n  box-shadow: rgba(0,0,0,0.22) 0 2px 4px 2px inset, rgba(255,255,255,0.28) 0 1px 0 inset, rgba(0,0,0,0.1) 0 1px 2px;\r\n}\r\n.pvbtn-sm:disabled {\r\n  background-image: none;\r\n  background-color: var(--vmc-color-background-disabled, #e1e3e2);\r\n  color: var(--vmc-color-neutral-700, #99a1af);\r\n  text-shadow: none;\r\n  box-shadow: none;\r\n  cursor: not-allowed;\r\n  transform: none;\r\n}\r\n.pvbtn-sm:focus-visible {\r\n  outline: transparent solid 2px;\r\n  outline-offset: 3px;\r\n  box-shadow:\r\n    0 0 0 2px var(--vmc-color-base-white, #fff),\r\n    0 0 0 4px var(--vmc-color-vault-500, oklch(0.55 0.22 285));\r\n}\r\n.pvbtn-icon {\r\n  width: 32px;\r\n  height: 32px;\r\n  border-radius: 50%;\r\n  /* Figma SVG 1159:4466: círculo blanco translúcido (no oscuro) */\r\n  background: rgba(255,255,255,0.2);\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex-shrink: 0;\r\n  position: relative;\r\n  z-index: 2;\r\n}\r\n\r\n/* ── sm-logged-in ─────────────────────────────────────────────────────── */\r\n.pvbtn-auth-d {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  height: 40px;\r\n  padding: 0 16px 0 4px;\r\n  border-radius: var(--vmc-radius-full, 9999px);\r\n  border: 2px solid rgba(255,255,255,0.7);\r\n  cursor: pointer;\r\n  position: relative;\r\n  overflow: hidden;\r\n  font-family: var(--vmc-font-display, \"Plus Jakarta Sans\", sans-serif);\r\n  font-size: 14px;\r\n  line-height: 16px;\r\n  font-weight: 600;\r\n  color: var(--vmc-color-base-white, #ffffff);\r\n  text-shadow: rgba(0,0,0,0.22) 0 1px 2px;\r\n  background-image: linear-gradient(var(--vbtn-angle), var(--vbtn-stop-a) 0%, var(--vbtn-stop-a) 40%, var(--vbtn-stop-b) 100%);\r\n  box-shadow: rgba(255,255,255,0.28) 0 1px 0 2px inset, rgba(237,137,54,0.3) 0 2px 6px;\r\n  transition:\r\n    --vbtn-angle 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),\r\n    --vbtn-stop-a 0.35s,\r\n    --vbtn-stop-b 0.35s,\r\n    transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1),\r\n    box-shadow 0.25s;\r\n  transform: translateZ(0);\r\n}\r\n.pvbtn-auth-d:hover {\r\n  --vbtn-angle: 220deg;\r\n  --vbtn-stop-a: var(--vmc-color-orange-400, #fbc47d);\r\n  --vbtn-stop-b: var(--vmc-color-vault-400, #ae8eff);\r\n  transform: translateY(-2px) scale(1.02);\r\n  box-shadow: rgba(255,255,255,0.22) 0 1px 0 2px inset, rgba(132,96,229,0.35) 0 8px 24px, rgba(237,137,54,0.4) 0 4px 10px;\r\n}\r\n.pvbtn-auth-d:active {\r\n  --vbtn-angle: 135deg;\r\n  --vbtn-stop-a: var(--vmc-color-orange-700, #d46e20);\r\n  --vbtn-stop-b: var(--vmc-color-vault-600, #5a35c2);\r\n  color: #d1d5dc;\r\n  transform: scale(0.97) translateY(1px);\r\n  box-shadow: rgba(0,0,0,0.22) 0 2px 5px 2px inset, rgba(0,0,0,0.12) 0 1px 3px;\r\n}\r\n.pvbtn-auth-d:disabled {\r\n  background-image: none;\r\n  background-color: var(--vmc-color-background-disabled, #e1e3e2);\r\n  color: var(--vmc-color-neutral-700, #99a1af);\r\n  text-shadow: none;\r\n  box-shadow: none;\r\n  cursor: not-allowed;\r\n  transform: none;\r\n}\r\n.pvbtn-auth-d:focus-visible {\r\n  outline: transparent solid 3px;\r\n  outline-offset: 4px;\r\n  transform: scale(0.98);\r\n  box-shadow:\r\n    0 0 0 2px var(--vmc-color-base-white, #fff),\r\n    0 0 0 5px var(--vmc-color-vault-500, oklch(0.55 0.22 285)),\r\n    0 8px 16px -4px rgb(51.76% 37.65% 89.8% / 0.30);\r\n}\r\n.pvbtn-auth-d-icon {\r\n  width: 32px;\r\n  height: 32px;\r\n  border-radius: 50%;\r\n  background: rgba(0,0,0,0.18);\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex-shrink: 0;\r\n  position: relative;\r\n  z-index: 2;\r\n}\r\n.pvbtn-auth-d-username {\r\n  font-weight: 700;\r\n  opacity: 0.92;\r\n}\r\n\r\n/* ── prefers-reduced-motion ──────────────────────────────────────────── */\r\n/* ── negotiable (teal → vault) · sync EXACTO del SVG export de Figma ────\r\n   Nodos 1807:14907/14943/14957 · 200×48 FIJO · borde gradiente teal→vault\r\n   Spec: .claude/concorde/inbox/figma-ButtonNegotiable-svg-export.json */\r\n.pneg {\r\n  --vneg-stop-a: var(--vmc-color-teal-500, #00aeb1);\r\n  --vneg-stop-b: var(--vmc-color-vault-500, #8460e5);\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  height: 48px;\r\n  min-width: 200px;\r\n  padding: 0 24px;\r\n  border-radius: var(--vmc-radius-full, 9999px);\r\n  /* Borde GRADIENTE de Figma (no blanco sólido): capa border-box bajo el fill */\r\n  border: 2px solid transparent;\r\n  cursor: pointer;\r\n  position: relative;\r\n  overflow: hidden;\r\n  font-family: var(--vmc-font-display, \"Plus Jakarta Sans\", sans-serif);\r\n  font-size: 16px;\r\n  line-height: 20px;\r\n  font-weight: 600;\r\n  color: var(--vmc-color-base-white, #ffffff);\r\n  text-shadow: rgba(0,0,0,0.25) 0 1px 3px;\r\n  background-image:\r\n    linear-gradient(var(--vneg-angle), var(--vneg-stop-a) 0%, var(--vneg-stop-a) 40%, var(--vneg-stop-b) 100%),\r\n    linear-gradient(135deg, #ffffff 0%, #4ddcdc 25%, #6445df 75%, #ffffff 100%);\r\n  background-origin: padding-box, border-box;\r\n  background-clip: padding-box, border-box;\r\n  box-shadow: rgba(255,255,255,0.28) 0 1px 0 2px inset, rgba(0,174,177,0.35) 0 2px 6px;\r\n  transition:\r\n    --vneg-angle 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),\r\n    --vneg-stop-a 0.35s,\r\n    --vneg-stop-b 0.35s,\r\n    transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1),\r\n    box-shadow 0.25s;\r\n  transform: translateZ(0);\r\n}\r\n.pneg::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: 0;\r\n  border-radius: var(--vmc-radius-full, 9999px);\r\n  background: linear-gradient(rgba(255,255,255,0.17) 0%, transparent 55%);\r\n  pointer-events: none;\r\n  z-index: 1;\r\n}\r\n.pneg::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: -4px;\r\n  border-radius: var(--vmc-radius-full, 9999px);\r\n  background: linear-gradient(135deg,\r\n    var(--vmc-color-teal-500, #00aeb1),\r\n    var(--vmc-color-vault-500, #8460e5)\r\n  );\r\n  filter: blur(14px);\r\n  opacity: 0;\r\n  z-index: -1;\r\n  transition: opacity 0.3s, filter 0.3s;\r\n}\r\n.pneg:hover {\r\n  --vneg-angle: 220deg;\r\n  --vneg-stop-a: var(--vmc-color-teal-400, #00cccc);\r\n  --vneg-stop-b: var(--vmc-color-vault-400, #ae8eff);\r\n  transform: translateY(-2px) scale(1.02);\r\n  /* Sombras exactas del SVG hover: teal cercana + glow púrpura #6445DF */\r\n  box-shadow: rgba(255,255,255,0.22) 0 1px 0 2px inset, rgba(0,174,177,0.4) 0 4px 10px, rgba(100,69,223,0.35) 0 8px 24px;\r\n}\r\n.pneg:hover::after { opacity: 0.45; filter: blur(18px); }\r\n.pneg:active {\r\n  --vneg-angle: 135deg;\r\n  --vneg-stop-a: var(--vmc-color-teal-600, #009095);\r\n  --vneg-stop-b: var(--vmc-color-vault-600, #5a35c2);\r\n  color: #d1d5dc; /* exacto del SVG pressed */\r\n  transform: scale(0.97) translateY(1px);\r\n  box-shadow: rgba(0,0,0,0.22) 0 2px 5px 2px inset, rgba(0,0,0,0.12) 0 1px 3px;\r\n}\r\n.pneg:active::after { opacity: 0; }\r\n.pneg:disabled {\r\n  background-image: none;\r\n  background-color: var(--vmc-color-background-disabled, #e1e3e2);\r\n  color: var(--vmc-color-neutral-700, #99a1af);\r\n  text-shadow: none;\r\n  box-shadow: none;\r\n  cursor: not-allowed;\r\n  transform: none;\r\n  border-color: transparent;\r\n}\r\n.pneg:disabled::after { display: none; }\r\n.pneg:focus-visible {\r\n  outline: transparent solid 3px;\r\n  outline-offset: 4px;\r\n  transform: scale(0.98);\r\n  box-shadow:\r\n    0 0 0 2px var(--vmc-color-base-white, #fff),\r\n    0 0 0 5px var(--vmc-color-teal-500, #00aeb1),\r\n    0 8px 16px -4px rgba(0,174,177,0.3);\r\n}\r\n\r\n/* ── outline · \"Regístrate\" — RECONSTRUIDO desde cero con SVGs de Figma ──\r\n   Default 1932:10613 · Hover 1934:10627 · Pressed 1935:10631 (215×48, radius full)\r\n   3 capas Figma por estado: relleno (paint0) + borde 1px gradiente (stroke) + glass white 0.1 (paint2)\r\n   Borde = STROKE de 1px (sin stroke-width = 1px), NO 2px. Glass presente en TODOS los estados. */\r\n.poutline {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  height: 48px;\r\n  padding: 0 56px;\r\n  border-radius: var(--vmc-radius-full, 9999px);\r\n  border: none;\r\n  cursor: pointer;\r\n  position: relative;\r\n  font-family: var(--vmc-font-display, \"Plus Jakarta Sans\", sans-serif);\r\n  font-size: 16px;\r\n  line-height: 20px;\r\n  font-weight: 600;\r\n  color: var(--vmc-color-orange-600, #ed8936);\r\n  /* Default: relleno transparente + glass white 0.1 → transparent 55% (paint1) */\r\n  background-image: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 55%);\r\n  box-shadow: none;\r\n  transition:\r\n    background 0.25s,\r\n    color 0.25s,\r\n    transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1),\r\n    box-shadow 0.25s;\r\n  transform: translateZ(0);\r\n}\r\n/* Borde = anillo gradiente de 1px (centro 100% transparente, sin doble borde) — mask trick.\r\n   Default/Hover: naranja diagonal #FF9639 → #EF852E 50% → #BE3D00 (vector ~144deg) */\r\n.poutline::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: 0;\r\n  border-radius: inherit;\r\n  padding: 1px;\r\n  background: linear-gradient(144deg, #ff9639 0%, #ef852e 50%, #be3d00 100%);\r\n  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\r\n  -webkit-mask-composite: xor;\r\n  mask-composite: exclude;\r\n  pointer-events: none;\r\n  z-index: 1;\r\n  transition: background 0.25s;\r\n}\r\n/* Glow exterior — interacción Concorde (no existe en Figma estático) */\r\n.poutline::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: -4px;\r\n  border-radius: inherit;\r\n  background: linear-gradient(144deg,\r\n    var(--vmc-color-orange-600, #ed8936),\r\n    var(--vmc-color-orange-tint, #fff0e2)\r\n  );\r\n  filter: blur(16px);\r\n  opacity: 0;\r\n  z-index: -1;\r\n  transition: opacity 0.3s, filter 0.3s;\r\n}\r\n.poutline:hover {\r\n  /* Hover 1934:10627: relleno white→#FFF0E2 horizontal (paint0) + glass (paint2). Un solo borde 1px */\r\n  background-image:\r\n    linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 55%),\r\n    linear-gradient(90deg, #ffffff 0%, var(--vmc-color-orange-tint, #fff0e2) 100%);\r\n  color: var(--vmc-color-orange-600, #ed8936);\r\n  text-shadow: rgba(0,0,0,0.08) 0 1px 2px;\r\n  transform: translateY(-2px) scale(1.02);\r\n  box-shadow: rgba(190,61,0,0.18) 0 6px 18px -4px;\r\n}\r\n.poutline:hover::after { opacity: 0.35; filter: blur(18px); }\r\n.poutline:active {\r\n  /* Pressed 1935:10631: relleno #D46E20→#B73700 (paint0 ~156deg) + glass. Borde oscuro vertical */\r\n  background-image:\r\n    linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 55%),\r\n    linear-gradient(156deg, #d46e20 0%, #b73700 100%);\r\n  color: var(--vmc-color-base-white, #fff);\r\n  text-shadow: rgba(0,0,0,0.22) 0 1px 2px;\r\n  transform: scale(0.97) translateY(1px);\r\n  box-shadow: rgba(0,0,0,0.16) 0 1px 3px;\r\n}\r\n/* Pressed: anillo oscuro #B25614 → #93420A VERTICAL (paint1 vector 180deg) */\r\n.poutline:active::before { background: linear-gradient(180deg, #b25614 0%, #93420a 100%); }\r\n.poutline:active::after { opacity: 0; }\r\n.poutline:disabled {\r\n  background-image: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 55%);\r\n  color: rgba(237,137,54,0.4);\r\n  box-shadow: none;\r\n  cursor: not-allowed;\r\n  transform: none;\r\n}\r\n.poutline:disabled::before { background: rgba(237,137,54,0.3); }\r\n.poutline:disabled::after { opacity: 0; }\r\n.poutline:focus-visible {\r\n  outline: transparent solid 3px;\r\n  outline-offset: 4px;\r\n  transform: scale(0.98);\r\n  box-shadow:\r\n    0 0 0 2px var(--vmc-color-base-white, #fff),\r\n    0 0 0 5px var(--vmc-color-orange-600, #ed8936);\r\n}\r\n\r\n/* ── secondary-sm · \"Agenda tu visita\" ──────────────────────────────────\r\n   Sync EXACTO del SVG export de Figma (Variant=Secondary, Size=Small)\r\n   Nodos 1442:10976 / 1464:19933 / 1464:20511 · 160×40 fijo · ícono calendario\r\n   Spec: .claude/concorde/inbox/figma-ButtonGhost-SecondarySm-svg-export.json */\r\n.psec-sm {\r\n  --vss-stop-a: var(--vmc-color-vault-500, #8460e5);\r\n  --vss-stop-b: var(--vmc-color-vault-700, #3b1782);\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 4px;\r\n  height: 40px;\r\n  min-width: 160px;\r\n  padding: 0 12px 0 4px;\r\n  border-radius: var(--vmc-radius-full, 9999px);\r\n  /* Borde GRADIENTE lila de Figma (constante en los 3 estados) */\r\n  border: 2px solid transparent;\r\n  cursor: pointer;\r\n  position: relative;\r\n  overflow: hidden;\r\n  font-family: var(--vmc-font-display, \"Plus Jakarta Sans\", sans-serif);\r\n  font-size: 14px;\r\n  line-height: 16px;\r\n  font-weight: 600;\r\n  color: var(--vmc-color-base-white, #ffffff);\r\n  text-shadow: rgba(0,0,0,0.25) 0 1px 3px;\r\n  background-image:\r\n    linear-gradient(var(--vss-angle), var(--vss-stop-a) 0%, var(--vss-stop-b) 100%),\r\n    linear-gradient(135deg, #cfbaff 0%, #ffffff 35%, #ae8eff 65%, #cfbaff 100%);\r\n  background-origin: padding-box, border-box;\r\n  background-clip: padding-box, border-box;\r\n  box-shadow: rgba(255,255,255,0.22) 0 1px 0 2px inset, rgba(132,96,229,0.3) 0 2px 8px;\r\n  transition:\r\n    --vss-angle 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),\r\n    --vss-stop-a 0.35s,\r\n    --vss-stop-b 0.35s,\r\n    transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1),\r\n    box-shadow 0.25s;\r\n  transform: translateZ(0);\r\n}\r\n.psec-sm::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: 0;\r\n  border-radius: var(--vmc-radius-full, 9999px);\r\n  background: linear-gradient(rgba(255,255,255,0.16) 0%, transparent 55%);\r\n  pointer-events: none;\r\n  z-index: 1;\r\n}\r\n.psec-sm:hover {\r\n  --vss-angle: 219deg;\r\n  --vss-stop-a: var(--vmc-color-vault-400, #ae8eff);\r\n  --vss-stop-b: var(--vmc-color-vault-600, #5a35c2);\r\n  transform: translateY(-1px) scale(1.02);\r\n  box-shadow: rgba(255,255,255,0.2) 0 1px 0 2px inset, rgba(132,96,229,0.25) 0 4px 10px, rgba(132,96,229,0.4) 0 8px 24px;\r\n}\r\n.psec-sm:active {\r\n  --vss-angle: 160deg;\r\n  --vss-stop-a: var(--vmc-color-vault-700, #3b1782);\r\n  --vss-stop-b: var(--vmc-color-vault-900, #22005c);\r\n  color: #d1d5dc;\r\n  transform: scale(0.97) translateY(1px);\r\n  box-shadow: rgba(0,0,0,0.28) 0 2px 5px 2px inset, rgba(0,0,0,0.14) 0 1px 3px;\r\n}\r\n.psec-sm:disabled {\r\n  background-image: none;\r\n  background-color: var(--vmc-color-background-disabled, #e1e3e2);\r\n  color: var(--vmc-color-neutral-700, #99a1af);\r\n  text-shadow: none;\r\n  box-shadow: none;\r\n  cursor: not-allowed;\r\n  transform: none;\r\n  border-color: transparent;\r\n}\r\n.psec-sm:focus-visible {\r\n  outline: transparent solid 2px;\r\n  outline-offset: 3px;\r\n  box-shadow:\r\n    0 0 0 2px var(--vmc-color-base-white, #fff),\r\n    0 0 0 4px var(--vmc-color-vault-500, #8460e5);\r\n}\r\n.psec-sm-icon {\r\n  width: 32px;\r\n  height: 32px;\r\n  border-radius: 50%;\r\n  background: rgba(255,255,255,0.2);\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex-shrink: 0;\r\n  position: relative;\r\n  z-index: 2;\r\n}\r\n\r\n/* ── prefers-reduced-motion ──────────────────────────────────────────── */\r\n@media (prefers-reduced-motion: reduce) {\r\n  .pvbtn, .psec, .psec-sm, .pneg, .pghost, .poutline, .pvbtn-sm, .pvbtn-auth-d {\r\n    transition: none;\r\n  }\r\n  .pvbtn::after, .psec::after, .pneg::after, .pghost::after, .poutline::after {\r\n    transition: none;\r\n  }\r\n}\r\n`;\r\n\r\n// ── Style injection ───────────────────────────────────────────────────────\r\n\r\nconst STYLE_ID = \"concorde-button-styles\";\r\nlet stylesInjected = false;\r\n\r\nfunction injectStyles(): void {\r\n  if (typeof document === \"undefined\" || stylesInjected) return;\r\n  if (!document.getElementById(STYLE_ID)) {\r\n    const el = document.createElement(\"style\");\r\n    el.id = STYLE_ID;\r\n    el.textContent = BUTTON_STYLES;\r\n    document.head.appendChild(el);\r\n  }\r\n  stylesInjected = true;\r\n}\r\n\r\n// ── Icon ─────────────────────────────────────────────────────────────────\r\n\r\n// Ícono \"user\" — path EXACTO del SVG export de Figma (Primary/Small \"Ingresa\",\r\n// nodo 1159:4466). Cabeza circular + cuerpo (hombros) rellenos. 24px dentro del\r\n// círculo de 32px (igual que Figma). fill=currentColor → en pressed hereda #E1E3E2.\r\nexport function UserIcon(): JSX.Element {\r\n  return (\r\n    <svg\r\n      width=\"24\"\r\n      height=\"24\"\r\n      viewBox=\"0 0 24 24\"\r\n      fill=\"currentColor\"\r\n      aria-hidden=\"true\"\r\n    >\r\n      <path d=\"M15.5412 7.36C15.5412 5.52 13.9765 4 12 4C10.0235 4 8.5412 5.52 8.5412 7.36C8.5412 9.28 10.0235 10.8 12 10.8C13.9765 10.8 15.5412 9.28 15.5412 7.36ZM5 16.4C6.4824 18.56 9.1176 20 12 20C14.8824 20 17.5176 18.56 19 16.4C19 14.16 14.3059 12.88 12 12.88C9.6941 12.88 5 14.16 5 16.4Z\" />\r\n    </svg>\r\n  );\r\n}\r\n\r\n// Ícono calendario — paths EXACTOS del SVG de Figma (Secondary/Small \"Agenda tu visita\").\r\n// stroke currentColor → en pressed hereda #e1e3e2 igual que en Figma.\r\nexport function CalendarIcon(): JSX.Element {\r\n  return (\r\n    <svg\r\n      width=\"24\"\r\n      height=\"24\"\r\n      viewBox=\"0 0 24 24\"\r\n      fill=\"none\"\r\n      stroke=\"currentColor\"\r\n      strokeWidth=\"1.5\"\r\n      strokeLinecap=\"round\"\r\n      strokeLinejoin=\"round\"\r\n      aria-hidden=\"true\"\r\n    >\r\n      <rect x=\"6\" y=\"7\" width=\"12\" height=\"11\" rx=\"2\" />\r\n      <path d=\"M6 11h12\" />\r\n      <path d=\"M9 5.5v3\" />\r\n      <path d=\"M15 5.5v3\" />\r\n    </svg>\r\n  );\r\n}\r\n\r\n// ── Variant → class map ───────────────────────────────────────────────────\r\n\r\nconst VARIANT_CLASS: Record<ButtonVariant, string> = {\r\n  primary: \"pvbtn\",\r\n  negotiable: \"pneg\",\r\n  secondary: \"psec\",\r\n  \"secondary-sm\": \"psec-sm\",\r\n  ghost: \"pghost\",\r\n  outline: \"poutline\",\r\n  \"sm-guest\": \"pvbtn-sm\",\r\n  \"sm-logged-in\": \"pvbtn-auth-d\",\r\n};\r\n\r\n// ── Component ─────────────────────────────────────────────────────────────\r\n\r\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\r\n  { variant = \"primary\", icon, username, className, type = \"button\", children, ...rest },\r\n  ref,\r\n) {\r\n  injectStyles();\r\n\r\n  const cls = VARIANT_CLASS[variant];\r\n\r\n  let content: ReactNode;\r\n  if (variant === \"sm-guest\") {\r\n    content = (\r\n      <>\r\n        {icon ? <span className=\"pvbtn-icon\">{icon}</span> : null}\r\n        {children}\r\n      </>\r\n    );\r\n  } else if (variant === \"secondary-sm\") {\r\n    content = (\r\n      <>\r\n        {icon ? <span className=\"psec-sm-icon\">{icon}</span> : null}\r\n        {children}\r\n      </>\r\n    );\r\n  } else if (variant === \"sm-logged-in\") {\r\n    content = (\r\n      <>\r\n        {icon ? <span className=\"pvbtn-auth-d-icon\">{icon}</span> : null}\r\n        Bienvenido,{\" \"}\r\n        <span className=\"pvbtn-auth-d-username\">{username ?? children}</span>\r\n      </>\r\n    );\r\n  } else {\r\n    content = children;\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: BUTTON_STYLES }}\r\n      />\r\n      <button\r\n        ref={ref}\r\n        className={[cls, className].filter(Boolean).join(\" \")}\r\n        type={type}\r\n        {...rest}\r\n      >\r\n        {content}\r\n      </button>\r\n    </>\r\n  );\r\n});\r\n\r\nexport default Button;\r\n"
    },
    {
      "path": "bloques/sidebar/desktop/dimensions.ts",
      "type": "registry:file",
      "target": "bloques/sidebar/desktop/dimensions.ts",
      "content": "/**\n * Dimensiones del bloque Sidebar — en un módulo PLANO (sin \"use client\") para\n * que los Server Components (catálogo /blocks, páginas de bloque) puedan importar\n * estas constantes. Importar valores desde un módulo \"use client\" hacia un Server\n * Component devuelve undefined → NaN en los cálculos de escala.\n */\n\nexport const SIDEBAR_WIDTH = 226;\nexport const SIDEBAR_HEIGHT = 1171;\nexport const SIDEBAR_COLLAPSED_WIDTH = 76; // solo iconos\n"
    },
    {
      "path": "bloques/sidebar/desktop/Sidebar.tsx",
      "type": "registry:file",
      "target": "bloques/sidebar/desktop/Sidebar.tsx",
      "content": "\"use client\";\n\n/**\n * Sidebar — Bloque de navegación lateral (Voyager DS)\n * Fuente: Figma VOYAGER · \"SideBarDefault\" (226×1042)\n *\n * Estructura:\n *   ┌──────────────────────────────┐ ← y=0\n *   │  SidebarHeader  (60px)       │\n *   ├──────────────────────────────┤ ← y=60   ← borde VYStrokes1\n *   │  Nav primary items (4)       │\n *   │  ─── separator ───           │\n *   │  Nav secondary items (1)     │\n *   │                              │\n *   │   ┌──────────────────────┐   │\n *   │   │  SidebarBanner 200×264│  │\n *   │   └──────────────────────┘   │\n *   └──────────────────────────────┘ ← y=1042\n */\n\nimport { useState } from \"react\";\nimport type { JSX, ReactNode } from \"react\";\nimport SidebarHeader from \"./SidebarHeader\";\nimport SidebarBanner from \"./SidebarBanner\";\nimport SidebarItem, { SidebarSeparator, type SidebarNavItem } from \"./SidebarItem\";\nimport TodayIcon from \"@/concorde/components/TodayIcon\";\nimport OfferIcon from \"@/concorde/components/OfferIcon\";\nimport CategoryIcon from \"@/concorde/components/CategoryIcon\";\nimport BusinessIcon from \"@/concorde/components/BusinessIcon\";\nimport ServiceCenterIcon from \"@/concorde/components/ServiceCenterIcon\";\n\n// Dimensiones en un módulo plano (no-client) para que los Server Components puedan\n// importarlas sin obtener undefined. Se re-exportan para los consumidores cliente.\nexport { SIDEBAR_WIDTH, SIDEBAR_HEIGHT, SIDEBAR_COLLAPSED_WIDTH } from \"./dimensions\";\nimport { SIDEBAR_WIDTH, SIDEBAR_HEIGHT, SIDEBAR_COLLAPSED_WIDTH } from \"./dimensions\";\n\nconst EASE = \"cubic-bezier(0.4,0,0.2,1)\";\n\nconst DEFAULT_PRIMARY: SidebarNavItem[] = [\n  { id: \"hoy\",       icon: (s) => <TodayIcon        size={22} state={s} />, label: \"Hoy\" },\n  {\n    id: \"oferta\",    icon: (s) => <OfferIcon         size={22} state={s} />, label: \"Tipo de oferta\",  count: 2,\n    subitems: [\n      { id: \"en-vivo\",    label: \"En Vivo\",    count: 38 },\n      { id: \"negociable\", label: \"Negociable\" },\n    ],\n  },\n  { id: \"categoria\", icon: (s) => <CategoryIcon      size={22} state={s} />, label: \"Categoría\",       count: 2 },\n  { id: \"empresas\",  icon: (s) => <BusinessIcon      size={22} state={s} />, label: \"Empresas\",        count: 2 },\n];\n\nconst DEFAULT_SECONDARY: SidebarNavItem[] = [\n  { id: \"centro\",    icon: (s) => <ServiceCenterIcon size={22} state={s} />, label: \"Centro de Ayuda\" },\n];\n\nconst STYLE_ID = \"concorde-sidebar-styles\";\nconst STYLES = `\n.sb-root {\n  transition: width 0.28s ${EASE}, height 0.28s ${EASE};\n}\n.sb-content-frame {\n  border: 1.5px solid transparent;\n  /* Borde VYStrokes1 — dirección exacta del SVG (paint20: vector 283.9,21.1 → 94deg) */\n  background:\n    linear-gradient(#2E0F70, #2E0F70) padding-box,\n    linear-gradient(94deg, #FFFFFF 0%, #F4AC59 22.1%, #8460E5 74.5%, #FFFFFF 100%) border-box;\n  transition: width 0.28s ${EASE};\n}\n.sb-banner {\n  display: flex;\n  justify-content: center;\n  padding: 0 7px 4px;\n  opacity: 1;\n  max-height: 280px;\n  overflow: hidden;\n  transition: opacity 0.18s ease, max-height 0.28s ${EASE}, padding 0.28s ${EASE};\n}\n.sb-banner--collapsed {\n  opacity: 0;\n  max-height: 0;\n  padding: 0;\n  pointer-events: none;\n}\n@media (prefers-reduced-motion: reduce) {\n  .sb-root, .sb-content-frame, .sb-banner { transition: none; }\n}\n`;\n\nlet _injected = false;\n\nexport type { SidebarNavItem };\n\nexport interface SidebarProps {\n  logo?: ReactNode;\n  primaryItems?: SidebarNavItem[];\n  secondaryItems?: SidebarNavItem[];\n  defaultActiveId?: string;\n  /** Alto del sidebar. Por defecto SIDEBAR_HEIGHT; pásale el alto del canvas\n   *  cuando el contenido a la derecha sea más alto, para que crezca con él. */\n  height?: number | string;\n  /** Alto del bloque interno fijo (header + nav + banner). Por defecto\n   *  SIDEBAR_HEIGHT (igual que siempre: si `height` es mayor, el sobrante\n   *  queda como relleno morado plano debajo, sin estirar nav/banner).\n   *  Edítalo SOLO cuando el contenido de al lado sea más CORTO que el\n   *  sidebar — pásale ese mismo alto (igual a `height`) para que el spacer\n   *  interno se comprima y el sidebar no sobre por debajo del contenido. */\n  contentHeight?: number;\n  /** Alto de la cabecera fija (logo + hamburguesa), en px. Por defecto 60. Cuando\n   *  el contenido de al lado tiene su propio header y se escala, pásale la altura\n   *  de ESE header escalada (p.ej. HEADER_HEIGHT × scale) para que el top de los\n   *  iconos del sidebar quede alineado con el top del contenido. */\n  headerHeight?: number;\n  /** Colapsado (controlado). Si se omite, el Sidebar maneja su estado interno. */\n  collapsed?: boolean;\n  /** Callback al alternar el colapsado (para reaccionar desde el contenedor). */\n  onCollapsedChange?: (collapsed: boolean) => void;\n  onItemClick?: (id: string) => void;\n  onBannerCta?: () => void;\n}\n\nexport default function Sidebar({\n  logo,\n  primaryItems  = DEFAULT_PRIMARY,\n  secondaryItems = DEFAULT_SECONDARY,\n  defaultActiveId,\n  height = SIDEBAR_HEIGHT,\n  contentHeight = SIDEBAR_HEIGHT,\n  headerHeight = 60,\n  collapsed: collapsedProp,\n  onCollapsedChange,\n  onItemClick,\n  onBannerCta,\n}: SidebarProps): JSX.Element {\n  const [internalCollapsed, setInternalCollapsed] = useState(false);\n  const collapsed = collapsedProp ?? internalCollapsed;\n  const [activeId,  setActiveId]  = useState(defaultActiveId);\n\n  function toggleCollapsed(): void {\n    const next = !collapsed;\n    if (collapsedProp === undefined) setInternalCollapsed(next);\n    onCollapsedChange?.(next);\n  }\n\n  if (typeof document !== \"undefined\" && !_injected) {\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    _injected = true;\n  }\n\n  function handleItemClick(id: string) {\n    setActiveId(id);\n    onItemClick?.(id);\n  }\n\n  return (\n    <>\n      <style id={`${STYLE_ID}-ssr`} suppressHydrationWarning dangerouslySetInnerHTML={{ __html: STYLES }} />\n      <div\n        data-slot=\"sidebar\"\n        className=\"sb-root\"\n        style={{\n          width:         collapsed ? SIDEBAR_COLLAPSED_WIDTH : SIDEBAR_WIDTH,\n          height,\n          background:    \"#2E0F70\",\n          fontFamily:    'var(--vmc-font-display, \"Plus Jakarta Sans\", -apple-system, sans-serif)',\n          flexShrink:    0,\n          position:      \"relative\",\n          /* Sin overflow:hidden en la raíz — la cabecera (logo+hamburguesa) se\n             mantiene a 226px aunque el resto colapse a 76px. */\n        }}\n      >\n        {/* Cabecera FIJA (logo + hamburguesa) — ancho completo 226, no colapsa.\n            Va como overlay en el top; el bloque de contenido de abajo deja headerHeight px. */}\n        <div\n          style={{\n            position:  \"absolute\",\n            top:       0,\n            left:      0,\n            width:     SIDEBAR_WIDTH,\n            height:    headerHeight,\n            zIndex:    2,\n            background: \"#2E0F70\",\n          }}\n        >\n          <SidebarHeader logo={logo} collapsed={collapsed} onToggle={toggleCollapsed} height={headerHeight} />\n        </div>\n\n        {/* Bloque colapsable (nav + banner) — este SÍ encoge su ancho. Recortado\n            con overflow:hidden y desplazado headerHeight px para no tapar la cabecera. */}\n        <div\n          style={{\n            height:        contentHeight,\n            width:         collapsed ? SIDEBAR_COLLAPSED_WIDTH : SIDEBAR_WIDTH,\n            paddingTop:    headerHeight,\n            boxSizing:     \"border-box\",\n            flexShrink:    0,\n            display:       \"flex\",\n            flexDirection: \"column\",\n            overflow:      \"hidden\",\n            transition:    `width 0.28s ${EASE}`,\n          }}\n        >\n        {/* Área de contenido 216×935 — borde VYStrokes1 */}\n        <div\n          className=\"sb-content-frame\"\n          style={{\n            width:         collapsed ? SIDEBAR_COLLAPSED_WIDTH - 10 : 216,\n            flex:          1,\n            margin:        \"0 5px 47px\",\n            display:       \"flex\",\n            flexDirection: \"column\",\n            overflow:      \"hidden\",\n            borderRadius:  17,\n          }}\n        >\n          {/* Nav items */}\n          <nav\n            aria-label=\"Navegación principal\"\n            style={{ padding: 0, display: \"flex\", flexDirection: \"column\", gap: 6 }}\n          >\n            {primaryItems.map((item) => (\n              <SidebarItem\n                key={item.id}\n                {...item}\n                isActive={activeId === item.id}\n                collapsed={collapsed}\n                onClick={handleItemClick}\n              />\n            ))}\n\n            {secondaryItems.length > 0 && <SidebarSeparator />}\n\n            {secondaryItems.map((item) => (\n              <SidebarItem\n                key={item.id}\n                {...item}\n                isActive={activeId === item.id}\n                collapsed={collapsed}\n                onClick={handleItemClick}\n              />\n            ))}\n          </nav>\n\n          {/* Spacer */}\n          <div style={{ flex: 1 }} />\n\n          {/* Banner inferior 200×264 */}\n          <div className={`sb-banner${collapsed ? \" sb-banner--collapsed\" : \"\"}`}>\n            <SidebarBanner onCta={onBannerCta} />\n          </div>\n        </div>\n        </div>\n      </div>\n    </>\n  );\n}\n"
    },
    {
      "path": "components/TodayIcon.tsx",
      "type": "registry:file",
      "target": "components/TodayIcon.tsx",
      "content": "\"use client\";\n\nimport { useId, useState } from \"react\";\nimport type { JSX } from \"react\";\n\nexport interface TodayIconProps {\n  size?: number;\n  /** Controlled visual state — omit to let the icon track its own hover/active */\n  state?: \"default\" | \"hover\" | \"active\";\n  title?: string;\n  className?: string;\n}\n\nexport default function TodayIcon({ size = 24, state: controlled, title, className = \"\" }: TodayIconProps): JSX.Element {\n  const uid = useId().replace(/:/g, \"-\");\n  const [hovered, setHovered] = useState(false);\n  const [pressed,  setPressed]  = useState(false);\n\n  const resolved = controlled ?? (pressed ? \"active\" : hovered ? \"hover\" : \"default\");\n  const isActive = resolved === \"active\";\n  const isHover  = resolved === \"hover\";\n  const paint    = isActive ? \"white\" : `url(#${uid}g)`;\n\n  const handlers = controlled ? {} : {\n    onMouseEnter: () => setHovered(true),\n    onMouseLeave: () => { setHovered(false); setPressed(false); },\n    onMouseDown:  () => setPressed(true),\n    onMouseUp:    () => setPressed(false),\n  };\n\n  return (\n    <svg\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={className}\n      role={title ? \"img\" : undefined}\n      aria-hidden={title ? undefined : true}\n      style={{ flexShrink: 0 }}\n      {...handlers}\n    >\n      {title && <title>{title}</title>}\n\n      {!isActive && (\n        <defs>\n          {isHover ? (\n            <linearGradient id={`${uid}g`} x1=\"12\" y1=\"1\" x2=\"12\" y2=\"21\" gradientUnits=\"userSpaceOnUse\">\n              <stop stopColor=\"#FF9639\"/>\n              <stop offset=\"0.4\" stopColor=\"#EF852E\"/>\n              <stop offset=\"1\" stopColor=\"#BE3D00\"/>\n            </linearGradient>\n          ) : (\n            <linearGradient id={`${uid}g`} x1=\"5.58549\" y1=\"-11.674\" x2=\"29.3422\" y2=\"-4.95314\" gradientUnits=\"userSpaceOnUse\">\n              <stop stopColor=\"#CFBAFF\"/>\n              <stop offset=\"0.35\" stopColor=\"white\"/>\n              <stop offset=\"0.65\" stopColor=\"#AE8EFF\"/>\n              <stop offset=\"1\" stopColor=\"#CFBAFF\"/>\n            </linearGradient>\n          )}\n        </defs>\n      )}\n\n      <path\n        d=\"M9 1V3H15V1H17V3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H7V1H9ZM20 11H4V19H20V11ZM11 13V17H6V13H11ZM7 5H4V9H20V5H17V7H15V5H9V7H7V5Z\"\n        fill={paint}\n      />\n    </svg>\n  );\n}\n"
    },
    {
      "path": "components/OfferIcon.tsx",
      "type": "registry:file",
      "target": "components/OfferIcon.tsx",
      "content": "\"use client\";\n\nimport { useId, useState } from \"react\";\nimport type { JSX } from \"react\";\n\nexport interface OfferIconProps {\n  size?: number;\n  /** Controlled visual state — omit to let the icon track its own hover/active */\n  state?: \"default\" | \"hover\" | \"active\";\n  title?: string;\n  className?: string;\n}\n\nexport default function OfferIcon({ size = 24, state: controlled, title, className = \"\" }: OfferIconProps): JSX.Element {\n  const uid = useId().replace(/:/g, \"-\");\n  const [hovered, setHovered] = useState(false);\n  const [pressed,  setPressed]  = useState(false);\n\n  const resolved = controlled ?? (pressed ? \"active\" : hovered ? \"hover\" : \"default\");\n  const isActive = resolved === \"active\";\n  const isHover  = resolved === \"hover\";\n  const paint    = isActive ? \"white\" : `url(#${uid}g)`;\n\n  const handlers = controlled ? {} : {\n    onMouseEnter: () => setHovered(true),\n    onMouseLeave: () => { setHovered(false); setPressed(false); },\n    onMouseDown:  () => setPressed(true),\n    onMouseUp:    () => setPressed(false),\n  };\n\n  return (\n    <svg\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={className}\n      role={title ? \"img\" : undefined}\n      aria-hidden={title ? undefined : true}\n      style={{ flexShrink: 0 }}\n      {...handlers}\n    >\n      {title && <title>{title}</title>}\n\n      {!isActive && (\n        <defs>\n          {isHover ? (\n            <linearGradient id={`${uid}g`} x1=\"12\" y1=\"1\" x2=\"12\" y2=\"21\" gradientUnits=\"userSpaceOnUse\">\n              <stop stopColor=\"#FF9639\"/>\n              <stop offset=\"0.4\" stopColor=\"#EF852E\"/>\n              <stop offset=\"1\" stopColor=\"#BE3D00\"/>\n            </linearGradient>\n          ) : (\n            <linearGradient id={`${uid}g`} x1=\"6.03047\" y1=\"-10.674\" x2=\"30.1148\" y2=\"-3.74975\" gradientUnits=\"userSpaceOnUse\">\n              <stop stopColor=\"#CFBAFF\"/>\n              <stop offset=\"0.35\" stopColor=\"white\"/>\n              <stop offset=\"0.65\" stopColor=\"#AE8EFF\"/>\n              <stop offset=\"1\" stopColor=\"#CFBAFF\"/>\n            </linearGradient>\n          )}\n        </defs>\n      )}\n\n      <path\n        d=\"M15.3867 4H9.38672V11H15.3867V4ZM20.3867 4H17.3867V11H20.3867V4ZM14.7617 13H8.38672V19H13.9367C14.2867 19 14.6242 18.9417 14.9492 18.825C15.2742 18.7083 15.5701 18.5333 15.8367 18.3L19.9867 14.875C19.8534 14.7417 19.7034 14.6417 19.5367 14.575C19.3701 14.5083 19.1951 14.4583 19.0117 14.425C18.7284 14.375 18.4534 14.3833 18.1867 14.45C17.9201 14.5167 17.6701 14.6417 17.4367 14.825L14.7367 17H10.3867V15H14.0367L15.1367 14.1C15.2201 14.05 15.2826 13.9833 15.3242 13.9C15.3659 13.8167 15.3867 13.725 15.3867 13.625C15.3867 13.4583 15.3242 13.3125 15.1992 13.1875C15.0742 13.0625 14.9284 13 14.7617 13ZM6.38672 13H4.38672V20H6.38672V13ZM7.38672 13V4C7.38672 3.45 7.58255 2.97917 7.97422 2.5875C8.36589 2.19583 8.83672 2 9.38672 2H20.3867C20.9367 2 21.4076 2.19583 21.7992 2.5875C22.1909 2.97917 22.3867 3.45 22.3867 4V11C22.3867 11.55 22.1909 12.0208 21.7992 12.4125C21.4076 12.8042 20.9367 13 20.3867 13H7.38672ZM6.38672 22H4.38672C3.83672 22 3.36589 21.8042 2.97422 21.4125C2.58255 21.0208 2.38672 20.55 2.38672 20V13C2.38672 12.45 2.58255 11.9792 2.97422 11.5875C3.36589 11.1958 3.83672 11 4.38672 11H14.7617C16.1784 11 17.5451 11.2417 18.8617 11.725C20.1784 12.2083 21.2367 13.025 22.0367 14.175L22.7117 15.2L17.1367 19.85C16.6867 20.2333 16.1867 20.5208 15.6367 20.7125C15.0867 20.9042 14.5201 21 13.9367 21H8.11172C7.92839 21.3 7.68672 21.5417 7.38672 21.725C7.08672 21.9083 6.75339 22 6.38672 22Z\"\n        fill={paint}\n      />\n    </svg>\n  );\n}\n"
    },
    {
      "path": "components/CategoryIcon.tsx",
      "type": "registry:file",
      "target": "components/CategoryIcon.tsx",
      "content": "\"use client\";\n\nimport { useId, useState } from \"react\";\nimport type { JSX } from \"react\";\n\nexport interface CategoryIconProps {\n  size?: number;\n  /** Controlled visual state — omit to let the icon track its own hover/active */\n  state?: \"default\" | \"hover\" | \"active\";\n  title?: string;\n  className?: string;\n}\n\nexport default function CategoryIcon({ size = 24, state: controlled, title, className = \"\" }: CategoryIconProps): JSX.Element {\n  const uid = useId().replace(/:/g, \"-\");\n  const [hovered, setHovered] = useState(false);\n  const [pressed,  setPressed]  = useState(false);\n\n  const resolved = controlled ?? (pressed ? \"active\" : hovered ? \"hover\" : \"default\");\n  const isActive = resolved === \"active\";\n  const isHover  = resolved === \"hover\";\n  const paint    = isActive ? \"white\" : `url(#${uid}g)`;\n\n  const handlers = controlled ? {} : {\n    onMouseEnter: () => setHovered(true),\n    onMouseLeave: () => { setHovered(false); setPressed(false); },\n    onMouseDown:  () => setPressed(true),\n    onMouseUp:    () => setPressed(false),\n  };\n\n  return (\n    <svg\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={className}\n      role={title ? \"img\" : undefined}\n      aria-hidden={title ? undefined : true}\n      style={{ flexShrink: 0 }}\n      {...handlers}\n    >\n      {title && <title>{title}</title>}\n\n      {!isActive && (\n        <defs>\n          {isHover ? (\n            <linearGradient id={`${uid}g`} x1=\"12\" y1=\"1\" x2=\"12\" y2=\"21\" gradientUnits=\"userSpaceOnUse\">\n              <stop stopColor=\"#FF9639\"/>\n              <stop offset=\"0.4\" stopColor=\"#EF852E\"/>\n              <stop offset=\"1\" stopColor=\"#BE3D00\"/>\n            </linearGradient>\n          ) : (\n            <linearGradient id={`${uid}g`} x1=\"6.48147\" y1=\"-6.70602\" x2=\"26.0807\" y2=\"-1.16134\" gradientUnits=\"userSpaceOnUse\">\n              <stop stopColor=\"#CFBAFF\"/>\n              <stop offset=\"0.35\" stopColor=\"white\"/>\n              <stop offset=\"0.65\" stopColor=\"#AE8EFF\"/>\n              <stop offset=\"1\" stopColor=\"#CFBAFF\"/>\n            </linearGradient>\n          )}\n        </defs>\n      )}\n\n      <path\n        d=\"M9.52344 3.75H5.02344C4.62561 3.75 4.24408 3.90804 3.96278 4.18934C3.68147 4.47064 3.52344 4.85218 3.52344 5.25V9.75C3.52344 10.1478 3.68147 10.5294 3.96278 10.8107C4.24408 11.092 4.62561 11.25 5.02344 11.25H9.52344C9.92126 11.25 10.3028 11.092 10.5841 10.8107C10.8654 10.5294 11.0234 10.1478 11.0234 9.75V5.25C11.0234 4.85218 10.8654 4.47064 10.5841 4.18934C10.3028 3.90804 9.92126 3.75 9.52344 3.75ZM9.52344 9.75H5.02344V5.25H9.52344V9.75ZM18.5234 3.75H14.0234C13.6256 3.75 13.2441 3.90804 12.9628 4.18934C12.6815 4.47064 12.5234 4.85218 12.5234 5.25V9.75C12.5234 10.1478 12.6815 10.5294 12.9628 10.8107C13.2441 11.092 13.6256 11.25 14.0234 11.25H18.5234C18.9213 11.25 19.3028 11.092 19.5841 10.8107C19.8654 10.5294 20.0234 10.1478 20.0234 9.75V5.25C20.0234 4.85218 19.8654 4.47064 19.5841 4.18934C19.3028 3.90804 18.9213 3.75 18.5234 3.75ZM18.5234 9.75H14.0234V5.25H18.5234V9.75ZM9.52344 12.75H5.02344C4.62561 12.75 4.24408 12.908 3.96278 13.1893C3.68147 13.4706 3.52344 13.8522 3.52344 14.25V18.75C3.52344 19.1478 3.68147 19.5294 3.96278 19.8107C4.24408 20.092 4.62561 20.25 5.02344 20.25H9.52344C9.92126 20.25 10.3028 20.092 10.5841 19.8107C10.8654 19.5294 11.0234 19.1478 11.0234 18.75V14.25C11.0234 13.8522 10.8654 13.4706 10.5841 13.1893C10.3028 12.908 9.92126 12.75 9.52344 12.75ZM9.52344 18.75H5.02344V14.25H9.52344V18.75ZM18.5234 12.75H14.0234C13.6256 12.75 13.2441 12.908 12.9628 13.1893C12.6815 13.4706 12.5234 13.8522 12.5234 14.25V18.75C12.5234 19.1478 12.6815 19.5294 12.9628 19.8107C13.2441 20.092 13.6256 20.25 14.0234 20.25H18.5234C18.9213 20.25 19.3028 20.092 19.5841 19.8107C19.8654 19.5294 20.0234 19.1478 20.0234 18.75V14.25C20.0234 13.8522 19.8654 13.4706 19.5841 13.1893C19.3028 12.908 18.9213 12.75 18.5234 12.75ZM18.5234 18.75H14.0234V14.25H18.5234V18.75Z\"\n        fill={paint}\n      />\n    </svg>\n  );\n}\n"
    },
    {
      "path": "components/BusinessIcon.tsx",
      "type": "registry:file",
      "target": "components/BusinessIcon.tsx",
      "content": "\"use client\";\n\nimport { useId, useState } from \"react\";\nimport type { JSX } from \"react\";\n\nexport interface BusinessIconProps {\n  size?: number;\n  /** Controlled visual state — omit to let the icon track its own hover/active */\n  state?: \"default\" | \"hover\" | \"active\";\n  title?: string;\n  className?: string;\n}\n\nexport default function BusinessIcon({ size = 24, state: controlled, title, className = \"\" }: BusinessIconProps): JSX.Element {\n  const uid = useId().replace(/:/g, \"-\");\n  const [hovered, setHovered] = useState(false);\n  const [pressed,  setPressed]  = useState(false);\n\n  const resolved = controlled ?? (pressed ? \"active\" : hovered ? \"hover\" : \"default\");\n  const isActive = resolved === \"active\";\n  const isHover  = resolved === \"hover\";\n  const paint    = isActive ? \"white\" : `url(#${uid}g)`;\n\n  const handlers = controlled ? {} : {\n    onMouseEnter: () => setHovered(true),\n    onMouseLeave: () => { setHovered(false); setPressed(false); },\n    onMouseDown:  () => setPressed(true),\n    onMouseUp:    () => setPressed(false),\n  };\n\n  return (\n    <svg\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={className}\n      role={title ? \"img\" : undefined}\n      aria-hidden={title ? undefined : true}\n      style={{ flexShrink: 0 }}\n      {...handlers}\n    >\n      {title && <title>{title}</title>}\n\n      {!isActive && (\n        <defs>\n          {isHover ? (\n            <linearGradient id={`${uid}g`} x1=\"12\" y1=\"1\" x2=\"12\" y2=\"21\" gradientUnits=\"userSpaceOnUse\">\n              <stop stopColor=\"#FF9639\"/>\n              <stop offset=\"0.4\" stopColor=\"#EF852E\"/>\n              <stop offset=\"1\" stopColor=\"#BE3D00\"/>\n            </linearGradient>\n          ) : (\n            <linearGradient id={`${uid}g`} x1=\"6.87209\" y1=\"-8.40656\" x2=\"26.7061\" y2=\"-3.26306\" gradientUnits=\"userSpaceOnUse\">\n              <stop stopColor=\"#CFBAFF\"/>\n              <stop offset=\"0.35\" stopColor=\"white\"/>\n              <stop offset=\"0.65\" stopColor=\"#AE8EFF\"/>\n              <stop offset=\"1\" stopColor=\"#CFBAFF\"/>\n            </linearGradient>\n          )}\n        </defs>\n      )}\n\n      {/* Building — stroke-based icon */}\n      <path\n        d=\"M3.91406 21H20.4141M4.66406 3H19.6641M5.41406 3V21M18.9141 3V21M9.16406 6.75H10.6641M9.16406 9.75H10.6641M9.16406 12.75H10.6641M13.6641 6.75H15.1641M13.6641 9.75H15.1641M13.6641 12.75H15.1641M9.16406 21V17.625C9.16406 17.004 9.66806 16.5 10.2891 16.5H14.0391C14.6601 16.5 15.1641 17.004 15.1641 17.625V21\"\n        stroke={paint}\n        strokeWidth=\"1.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  );\n}\n"
    },
    {
      "path": "components/ServiceCenterIcon.tsx",
      "type": "registry:file",
      "target": "components/ServiceCenterIcon.tsx",
      "content": "\"use client\";\n\nimport { useId, useState } from \"react\";\nimport type { JSX } from \"react\";\n\nexport interface ServiceCenterIconProps {\n  size?: number;\n  /** Controlled visual state — omit to let the icon track its own hover/active */\n  state?: \"default\" | \"hover\" | \"active\";\n  title?: string;\n  className?: string;\n}\n\nexport default function ServiceCenterIcon({ size = 24, state: controlled, title, className = \"\" }: ServiceCenterIconProps): JSX.Element {\n  const uid = useId().replace(/:/g, \"-\");\n  const [hovered, setHovered] = useState(false);\n  const [pressed,  setPressed]  = useState(false);\n\n  const resolved = controlled ?? (pressed ? \"active\" : hovered ? \"hover\" : \"default\");\n  const isActive = resolved === \"active\";\n  const isHover  = resolved === \"hover\";\n  const paint    = isActive ? \"white\" : `url(#${uid}g)`;\n\n  const handlers = controlled ? {} : {\n    onMouseEnter: () => setHovered(true),\n    onMouseLeave: () => { setHovered(false); setPressed(false); },\n    onMouseDown:  () => setPressed(true),\n    onMouseUp:    () => setPressed(false),\n  };\n\n  return (\n    <svg\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={className}\n      role={title ? \"img\" : undefined}\n      aria-hidden={title ? undefined : true}\n      style={{ flexShrink: 0 }}\n      {...handlers}\n    >\n      {title && <title>{title}</title>}\n\n      {!isActive && (\n        <defs>\n          {isHover ? (\n            <linearGradient id={`${uid}g`} x1=\"12\" y1=\"1\" x2=\"12\" y2=\"21\" gradientUnits=\"userSpaceOnUse\">\n              <stop stopColor=\"#FF9639\"/>\n              <stop offset=\"0.4\" stopColor=\"#EF852E\"/>\n              <stop offset=\"1\" stopColor=\"#BE3D00\"/>\n            </linearGradient>\n          ) : (\n            <linearGradient id={`${uid}g`} x1=\"6.22694\" y1=\"-11.3077\" x2=\"28.0368\" y2=\"-6.01905\" gradientUnits=\"userSpaceOnUse\">\n              <stop stopColor=\"#CFBAFF\"/>\n              <stop offset=\"0.35\" stopColor=\"white\"/>\n              <stop offset=\"0.65\" stopColor=\"#AE8EFF\"/>\n              <stop offset=\"1\" stopColor=\"#CFBAFF\"/>\n            </linearGradient>\n          )}\n        </defs>\n      )}\n\n      <path\n        d=\"M11.9 17C12.25 17 12.5458 16.8792 12.7875 16.6375C13.0292 16.3958 13.15 16.1 13.15 15.75C13.15 15.4 13.0292 15.1042 12.7875 14.8625C12.5458 14.6208 12.25 14.5 11.9 14.5C11.55 14.5 11.2542 14.6208 11.0125 14.8625C10.7708 15.1042 10.65 15.4 10.65 15.75C10.65 16.1 10.7708 16.3958 11.0125 16.6375C11.2542 16.8792 11.55 17 11.9 17ZM11 13.15H12.85C12.85 12.8667 12.8625 12.625 12.8875 12.425C12.9125 12.225 12.9667 12.0333 13.05 11.85C13.1333 11.6667 13.2375 11.4958 13.3625 11.3375C13.4875 11.1792 13.6667 10.9833 13.9 10.75C14.4833 10.1667 14.8958 9.67917 15.1375 9.2875C15.3792 8.89583 15.5 8.45 15.5 7.95C15.5 7.06667 15.2 6.35417 14.6 5.8125C14 5.27083 13.1917 5 12.175 5C11.2583 5 10.4792 5.225 9.8375 5.675C9.19583 6.125 8.75 6.75 8.5 7.55L10.15 8.2C10.2667 7.75 10.5 7.3875 10.85 7.1125C11.2 6.8375 11.6083 6.7 12.075 6.7C12.525 6.7 12.9 6.82083 13.2 7.0625C13.5 7.30417 13.65 7.625 13.65 8.025C13.65 8.30833 13.5583 8.60833 13.375 8.925C13.1917 9.24167 12.8833 9.59167 12.45 9.975C12.1667 10.2083 11.9375 10.4375 11.7625 10.6625C11.5875 10.8875 11.4417 11.125 11.325 11.375C11.2083 11.625 11.125 11.8875 11.075 12.1625C11.025 12.4375 11 12.7667 11 13.15ZM12 23L9 20H5C4.45 20 3.97917 19.8042 3.5875 19.4125C3.19583 19.0208 3 18.55 3 18V4C3 3.45 3.19583 2.97917 3.5875 2.5875C3.97917 2.19583 4.45 2 5 2H19C19.55 2 20.0208 2.19583 20.4125 2.5875C20.8042 2.97917 21 3.45 21 4V18C21 18.55 20.8042 19.0208 20.4125 19.4125C20.0208 19.8042 19.55 20 19 20H15L12 23ZM5 18H9.8L12 20.2L14.2 18H19V4H5V18Z\"\n        fill={paint}\n      />\n    </svg>\n  );\n}\n"
    },
    {
      "path": "bloques/sidebar/desktop/SidebarBanner.tsx",
      "type": "registry:file",
      "target": "bloques/sidebar/desktop/SidebarBanner.tsx",
      "content": "\"use client\";\n\n/**\n * SidebarBanner — 200×264 · banner CTA inferior del sidebar\n * Fuente: Figma VOYAGER · \"SideBarDefault\" — frame inferior (paint18 + paint19)\n *\n * Fondo: gradiente vertical #3B1A7A → #3B1782 → #6E3E2A\n * Botón CTA: gradiente vertical #F5921E → #E15F2B, pill de 31px\n */\n\nimport type { JSX } from \"react\";\n\nexport const BANNER_W = 200;\nexport const BANNER_H = 264;\n\nexport interface SidebarBannerProps {\n  onCta?: () => void;\n}\n\nexport default function SidebarBanner({ onCta: _ }: SidebarBannerProps): JSX.Element {\n  return (\n    <div\n      data-slot=\"sidebar-banner\"\n      style={{\n        width:           BANNER_W,\n        height:          BANNER_H,\n        borderRadius:    16,\n        background:      \"rgba(255,255,255,0.07)\",\n        flexShrink:      0,\n        display:         \"flex\",\n        alignItems:      \"center\",\n        justifyContent:  \"center\",\n      }}\n    >\n      <span\n        style={{\n          fontSize:      10,\n          fontWeight:    600,\n          letterSpacing: \"0.12em\",\n          textTransform: \"uppercase\",\n          color:         \"rgba(255,255,255,0.25)\",\n        }}\n      >\n        Banner\n      </span>\n    </div>\n  );\n}\n"
    },
    {
      "path": "bloques/sidebar/desktop/SidebarHeader.tsx",
      "type": "registry:file",
      "target": "bloques/sidebar/desktop/SidebarHeader.tsx",
      "content": "\"use client\";\n\n/**\n * SidebarHeader — 226×60 · logo + botón colapsar\n * Fuente: Figma VOYAGER · \"SideBarDefault\" (header superior)\n * Icono hamburguesa: 3 líneas con gradiente CFBAFF→white→AE8EFF→CFBAFF\n */\n\nimport { useId } from \"react\";\nimport type { JSX, ReactNode } from \"react\";\n\nconst STYLE_ID = \"concorde-sbheader-styles\";\nconst STYLES = `\n.psb-toggle {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 36px;\n  height: 36px;\n  padding: 0;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  border-radius: 8px;\n  flex-shrink: 0;\n  transition: background 0.15s;\n}\n.psb-toggle:hover { background: rgba(255,255,255,0.08); }\n.psb-toggle:active { background: rgba(255,255,255,0.14); }\n.psb-toggle:focus-visible { outline: 2px solid #8460E5; outline-offset: 2px; }\n.sbh-logo {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-width: 0;\n  /* El logo permanece SIEMPRE visible (también al colapsar): no se desvanece,\n     solo lo recorta el overflow del sidebar (76px) mostrando el isotipo. */\n  overflow: visible;\n  opacity: 1;\n}\n@media (prefers-reduced-motion: reduce) {\n  .psb-toggle, .sbh-logo { transition: none; }\n}\n`;\n\nlet _injected = false;\n\nexport interface SidebarHeaderProps {\n  /** Slot para el logo de la aplicación */\n  logo?: ReactNode;\n  /** Estado colapsado del sidebar */\n  collapsed?: boolean;\n  /** Handler del botón hamburguesa */\n  onToggle?: () => void;\n  /** Alto de la cabecera en px (para alinear con el header del contenido). Default 60. */\n  height?: number;\n}\n\nexport default function SidebarHeader({ logo, collapsed = false, onToggle, height = 60 }: SidebarHeaderProps): JSX.Element {\n  const uid = useId().replace(/:/g, \"-\");\n\n  if (typeof document !== \"undefined\" && !_injected) {\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    _injected = true;\n  }\n\n  return (\n    <>\n      <style id={`${STYLE_ID}-ssr`} suppressHydrationWarning dangerouslySetInnerHTML={{ __html: STYLES }} />\n      <div\n        data-slot=\"sidebar-header\"\n        style={{\n          width: \"100%\",\n          height,\n          display: \"flex\",\n          alignItems: \"center\",\n          // La hamburguesa queda alineada con la columna de iconos del sidebar\n          // colapsado (centro ≈ 38px): paddingLeft 20 + medio botón (18) = 38.\n          paddingLeft: 20,\n          paddingRight: 14,\n          gap: 8,\n          flexShrink: 0,\n          boxSizing: \"border-box\",\n        }}\n      >\n        {/* Botón colapsar */}\n        <button\n          type=\"button\"\n          className=\"psb-toggle\"\n          onClick={onToggle}\n          aria-label={collapsed ? \"Expandir menú\" : \"Colapsar menú\"}\n          aria-expanded={!collapsed}\n        >\n          <svg\n            width=\"22\"\n            height=\"22\"\n            viewBox=\"0 0 22 22\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            aria-hidden=\"true\"\n          >\n            <path d=\"M2.75 5.5H19.25\"  stroke={`url(#${uid}g0)`} strokeWidth=\"1.83333\" strokeLinecap=\"round\"/>\n            <path d=\"M2.75 11H19.25\"   stroke={`url(#${uid}g1)`} strokeWidth=\"1.83333\" strokeLinecap=\"round\"/>\n            <path d=\"M2.75 16.5H19.25\" stroke={`url(#${uid}g2)`} strokeWidth=\"1.83333\" strokeLinecap=\"round\"/>\n            <defs>\n              <linearGradient id={`${uid}g0`} x1=\"5.708\" y1=\"4.866\"  x2=\"6.637\" y2=\"9.202\"  gradientUnits=\"userSpaceOnUse\">\n                <stop stopColor=\"#CFBAFF\"/><stop offset=\"0.35\" stopColor=\"white\"/>\n                <stop offset=\"0.65\" stopColor=\"#AE8EFF\"/><stop offset=\"1\" stopColor=\"#CFBAFF\"/>\n              </linearGradient>\n              <linearGradient id={`${uid}g1`} x1=\"5.708\" y1=\"10.366\" x2=\"6.637\" y2=\"14.702\" gradientUnits=\"userSpaceOnUse\">\n                <stop stopColor=\"#CFBAFF\"/><stop offset=\"0.35\" stopColor=\"white\"/>\n                <stop offset=\"0.65\" stopColor=\"#AE8EFF\"/><stop offset=\"1\" stopColor=\"#CFBAFF\"/>\n              </linearGradient>\n              <linearGradient id={`${uid}g2`} x1=\"5.708\" y1=\"15.866\" x2=\"6.637\" y2=\"20.202\" gradientUnits=\"userSpaceOnUse\">\n                <stop stopColor=\"#CFBAFF\"/><stop offset=\"0.35\" stopColor=\"white\"/>\n                <stop offset=\"0.65\" stopColor=\"#AE8EFF\"/><stop offset=\"1\" stopColor=\"#CFBAFF\"/>\n              </linearGradient>\n            </defs>\n          </svg>\n        </button>\n\n        {/* Slot del logo — visible siempre (no desaparece al colapsar) */}\n        <div className=\"sbh-logo\">\n          {logo ?? (\n            // eslint-disable-next-line @next/next/no-img-element\n            <img\n              src=\"/assets/brand/logo-voyager.svg\"\n              alt=\"VMC Subastas\"\n              style={{ height: 40, width: \"auto\", display: \"block\", flexShrink: 0 }}\n            />\n          )}\n        </div>\n      </div>\n    </>\n  );\n}\n"
    },
    {
      "path": "bloques/sidebar/desktop/SidebarIcon.tsx",
      "type": "registry:file",
      "target": "bloques/sidebar/desktop/SidebarIcon.tsx",
      "content": "\"use client\";\n\nimport { useId, useState } from \"react\";\nimport type { JSX } from \"react\";\n\nexport type SidebarIconType = \"today\" | \"service-center\" | \"business\" | \"category\" | \"offer\";\n\nexport interface SidebarIconProps {\n  type: SidebarIconType;\n  size?: number;\n  /** Controlled state — omit to use built-in hover/active tracking */\n  state?: \"default\" | \"hover\" | \"active\";\n}\n\nconst STYLE_ID = \"concorde-sbicon-styles\";\nconst STYLES = `.sb-icon-wrap { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; user-select: none; }`;\n\nlet _injected = false;\n\nexport default function SidebarIcon({ type, size = 24, state: controlled }: SidebarIconProps): JSX.Element {\n  const uid = useId().replace(/:/g, \"-\");\n  const [hovered, setHovered] = useState(false);\n  const [pressed, setPressed] = useState(false);\n\n  if (typeof document !== \"undefined\" && !_injected) {\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    _injected = true;\n  }\n\n  const resolved = controlled ?? (pressed ? \"active\" : hovered ? \"hover\" : \"default\");\n  const isActive = resolved === \"active\";\n  const isHover  = resolved === \"hover\";\n\n  // fill / stroke value — active → white, otherwise → gradient url\n  const paint = isActive ? \"white\" : `url(#${uid}g)`;\n\n  const handlers = controlled ? {} : {\n    onMouseEnter: () => setHovered(true),\n    onMouseLeave: () => { setHovered(false); setPressed(false); },\n    onMouseDown:  () => setPressed(true),\n    onMouseUp:    () => setPressed(false),\n  };\n\n  return (\n    <>\n      <style id={`${STYLE_ID}-ssr`} suppressHydrationWarning dangerouslySetInnerHTML={{ __html: STYLES }} />\n      <span className=\"sb-icon-wrap\" style={{ width: size, height: size }} {...handlers}>\n        <svg width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n\n          {/* Gradient defs — not rendered when active (white) */}\n          {!isActive && (\n            <defs>\n              {isHover ? (\n                /* Hover: orange vertical */\n                <linearGradient id={`${uid}g`} x1=\"12\" y1=\"1\" x2=\"12\" y2=\"21\" gradientUnits=\"userSpaceOnUse\">\n                  <stop stopColor=\"#FF9639\"/>\n                  <stop offset=\"0.4\" stopColor=\"#EF852E\"/>\n                  <stop offset=\"1\" stopColor=\"#BE3D00\"/>\n                </linearGradient>\n              ) : (\n                /* Default: purple diagonal */\n                <linearGradient id={`${uid}g`} x1=\"5.58549\" y1=\"-11.674\" x2=\"29.3422\" y2=\"-4.95314\" gradientUnits=\"userSpaceOnUse\">\n                  <stop stopColor=\"#CFBAFF\"/>\n                  <stop offset=\"0.35\" stopColor=\"white\"/>\n                  <stop offset=\"0.65\" stopColor=\"#AE8EFF\"/>\n                  <stop offset=\"1\" stopColor=\"#CFBAFF\"/>\n                </linearGradient>\n              )}\n            </defs>\n          )}\n\n          {/* ── Today (calendar) ── */}\n          {type === \"today\" && (\n            <path\n              d=\"M9 1V3H15V1H17V3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H7V1H9ZM20 11H4V19H20V11ZM11 13V17H6V13H11ZM7 5H4V9H20V5H17V7H15V5H9V7H7V5Z\"\n              fill={paint}\n            />\n          )}\n\n          {/* ── Service Center (chat bubble + ?) ── */}\n          {type === \"service-center\" && (\n            <path\n              d=\"M11.9 17C12.25 17 12.5458 16.8792 12.7875 16.6375C13.0292 16.3958 13.15 16.1 13.15 15.75C13.15 15.4 13.0292 15.1042 12.7875 14.8625C12.5458 14.6208 12.25 14.5 11.9 14.5C11.55 14.5 11.2542 14.6208 11.0125 14.8625C10.7708 15.1042 10.65 15.4 10.65 15.75C10.65 16.1 10.7708 16.3958 11.0125 16.6375C11.2542 16.8792 11.55 17 11.9 17ZM11 13.15H12.85C12.85 12.8667 12.8625 12.625 12.8875 12.425C12.9125 12.225 12.9667 12.0333 13.05 11.85C13.1333 11.6667 13.2375 11.4958 13.3625 11.3375C13.4875 11.1792 13.6667 10.9833 13.9 10.75C14.4833 10.1667 14.8958 9.67917 15.1375 9.2875C15.3792 8.89583 15.5 8.45 15.5 7.95C15.5 7.06667 15.2 6.35417 14.6 5.8125C14 5.27083 13.1917 5 12.175 5C11.2583 5 10.4792 5.225 9.8375 5.675C9.19583 6.125 8.75 6.75 8.5 7.55L10.15 8.2C10.2667 7.75 10.5 7.3875 10.85 7.1125C11.2 6.8375 11.6083 6.7 12.075 6.7C12.525 6.7 12.9 6.82083 13.2 7.0625C13.5 7.30417 13.65 7.625 13.65 8.025C13.65 8.30833 13.5583 8.60833 13.375 8.925C13.1917 9.24167 12.8833 9.59167 12.45 9.975C12.1667 10.2083 11.9375 10.4375 11.7625 10.6625C11.5875 10.8875 11.4417 11.125 11.325 11.375C11.2083 11.625 11.125 11.8875 11.075 12.1625C11.025 12.4375 11 12.7667 11 13.15ZM12 23L9 20H5C4.45 20 3.97917 19.8042 3.5875 19.4125C3.19583 19.0208 3 18.55 3 18V4C3 3.45 3.19583 2.97917 3.5875 2.5875C3.97917 2.19583 4.45 2 5 2H19C19.55 2 20.0208 2.19583 20.4125 2.5875C20.8042 2.97917 21 3.45 21 4V18C21 18.55 20.8042 19.0208 20.4125 19.4125C20.0208 19.8042 19.55 20 19 20H15L12 23ZM5 18H9.8L12 20.2L14.2 18H19V4H5V18Z\"\n              fill={paint}\n            />\n          )}\n\n          {/* ── Business (building — stroke-only icon) ── */}\n          {type === \"business\" && (\n            <path\n              d=\"M3.91406 21H20.4141M4.66406 3H19.6641M5.41406 3V21M18.9141 3V21M9.16406 6.75H10.6641M9.16406 9.75H10.6641M9.16406 12.75H10.6641M13.6641 6.75H15.1641M13.6641 9.75H15.1641M13.6641 12.75H15.1641M9.16406 21V17.625C9.16406 17.004 9.66806 16.5 10.2891 16.5H14.0391C14.6601 16.5 15.1641 17.004 15.1641 17.625V21\"\n              stroke={paint}\n              strokeWidth=\"1.5\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            />\n          )}\n\n          {/* ── Category (2×2 grid) ── */}\n          {type === \"category\" && (\n            <path\n              d=\"M9.52344 3.75H5.02344C4.62561 3.75 4.24408 3.90804 3.96278 4.18934C3.68147 4.47064 3.52344 4.85218 3.52344 5.25V9.75C3.52344 10.1478 3.68147 10.5294 3.96278 10.8107C4.24408 11.092 4.62561 11.25 5.02344 11.25H9.52344C9.92126 11.25 10.3028 11.092 10.5841 10.8107C10.8654 10.5294 11.0234 10.1478 11.0234 9.75V5.25C11.0234 4.85218 10.8654 4.47064 10.5841 4.18934C10.3028 3.90804 9.92126 3.75 9.52344 3.75ZM9.52344 9.75H5.02344V5.25H9.52344V9.75ZM18.5234 3.75H14.0234C13.6256 3.75 13.2441 3.90804 12.9628 4.18934C12.6815 4.47064 12.5234 4.85218 12.5234 5.25V9.75C12.5234 10.1478 12.6815 10.5294 12.9628 10.8107C13.2441 11.092 13.6256 11.25 14.0234 11.25H18.5234C18.9213 11.25 19.3028 11.092 19.5841 10.8107C19.8654 10.5294 20.0234 10.1478 20.0234 9.75V5.25C20.0234 4.85218 19.8654 4.47064 19.5841 4.18934C19.3028 3.90804 18.9213 3.75 18.5234 3.75ZM18.5234 9.75H14.0234V5.25H18.5234V9.75ZM9.52344 12.75H5.02344C4.62561 12.75 4.24408 12.908 3.96278 13.1893C3.68147 13.4706 3.52344 13.8522 3.52344 14.25V18.75C3.52344 19.1478 3.68147 19.5294 3.96278 19.8107C4.24408 20.092 4.62561 20.25 5.02344 20.25H9.52344C9.92126 20.25 10.3028 20.092 10.5841 19.8107C10.8654 19.5294 11.0234 19.1478 11.0234 18.75V14.25C11.0234 13.8522 10.8654 13.4706 10.5841 13.1893C10.3028 12.908 9.92126 12.75 9.52344 12.75ZM9.52344 18.75H5.02344V14.25H9.52344V18.75ZM18.5234 12.75H14.0234C13.6256 12.75 13.2441 12.908 12.9628 13.1893C12.6815 13.4706 12.5234 13.8522 12.5234 14.25V18.75C12.5234 19.1478 12.6815 19.5294 12.9628 19.8107C13.2441 20.092 13.6256 20.25 14.0234 20.25H18.5234C18.9213 20.25 19.3028 20.092 19.5841 19.8107C19.8654 19.5294 20.0234 19.1478 20.0234 18.75V14.25C20.0234 13.8522 19.8654 13.4706 19.5841 13.1893C19.3028 12.908 18.9213 12.75 18.5234 12.75ZM18.5234 18.75H14.0234V14.25H18.5234V18.75Z\"\n              fill={paint}\n            />\n          )}\n\n          {/* ── Offer (hand + bid sheets) ── */}\n          {type === \"offer\" && (\n            <path\n              d=\"M15.3867 4H9.38672V11H15.3867V4ZM20.3867 4H17.3867V11H20.3867V4ZM14.7617 13H8.38672V19H13.9367C14.2867 19 14.6242 18.9417 14.9492 18.825C15.2742 18.7083 15.5701 18.5333 15.8367 18.3L19.9867 14.875C19.8534 14.7417 19.7034 14.6417 19.5367 14.575C19.3701 14.5083 19.1951 14.4583 19.0117 14.425C18.7284 14.375 18.4534 14.3833 18.1867 14.45C17.9201 14.5167 17.6701 14.6417 17.4367 14.825L14.7367 17H10.3867V15H14.0367L15.1367 14.1C15.2201 14.05 15.2826 13.9833 15.3242 13.9C15.3659 13.8167 15.3867 13.725 15.3867 13.625C15.3867 13.4583 15.3242 13.3125 15.1992 13.1875C15.0742 13.0625 14.9284 13 14.7617 13ZM6.38672 13H4.38672V20H6.38672V13ZM7.38672 13V4C7.38672 3.45 7.58255 2.97917 7.97422 2.5875C8.36589 2.19583 8.83672 2 9.38672 2H20.3867C20.9367 2 21.4076 2.19583 21.7992 2.5875C22.1909 2.97917 22.3867 3.45 22.3867 4V11C22.3867 11.55 22.1909 12.0208 21.7992 12.4125C21.4076 12.8042 20.9367 13 20.3867 13H7.38672ZM6.38672 22H4.38672C3.83672 22 3.36589 21.8042 2.97422 21.4125C2.58255 21.0208 2.38672 20.55 2.38672 20V13C2.38672 12.45 2.58255 11.9792 2.97422 11.5875C3.36589 11.1958 3.83672 11 4.38672 11H14.7617C16.1784 11 17.5451 11.2417 18.8617 11.725C20.1784 12.2083 21.2367 13.025 22.0367 14.175L22.7117 15.2L17.1367 19.85C16.6867 20.2333 16.1867 20.5208 15.6367 20.7125C15.0867 20.9042 14.5201 21 13.9367 21H8.11172C7.92839 21.3 7.68672 21.5417 7.38672 21.725C7.08672 21.9083 6.75339 22 6.38672 22Z\"\n              fill={paint}\n            />\n          )}\n\n        </svg>\n      </span>\n    </>\n  );\n}\n"
    },
    {
      "path": "bloques/sidebar/desktop/SidebarItem.tsx",
      "type": "registry:file",
      "target": "bloques/sidebar/desktop/SidebarItem.tsx",
      "content": "\"use client\";\n\n/**\n * SidebarItem — nav pill 216×48 del sidebar\n * Fuente: Figma VOYAGER · \"SideBarDefault\" — State=Default/Hover/Active SVGs\n *\n * Estados del pill:\n *   default — glass gradient + subtle white border + shadow morado\n *   hover   — fondo #8460E5 38% + borde blanco 44%\n *   active  — naranja gradient + VYStrokes1 border + orange glow\n *\n * Subitems: expanden abajo con animación max-height cuando isActive=true y hay subitems\n */\n\nimport { useId, useState } from \"react\";\nimport type { JSX, ReactNode } from \"react\";\nimport SidebarSubItem, { type SidebarSubItemDef } from \"./SidebarSubItem\";\n\nconst STYLE_ID = \"concorde-sbi-styles\";\nconst STYLES = `\n.sbi-item {\n  width: 100%;\n  height: 48px;\n  border-radius: 16px;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 0 14px;\n  box-sizing: border-box;\n  cursor: pointer;\n  user-select: none;\n  outline: none;\n  border: 1.5px solid transparent;\n  /* Glass fill (paint0: white 0.28 → 0.1 → 0.04) sobre base oscura #0A002E (simula\n     el \"behind transparent areas\" de Figma: la sombra se ve a través del glass) +\n     borde VYStrokes3 (white 0.1 → 0 @55%) */\n  background:\n    linear-gradient(105deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.10) 40%, rgba(255,255,255,0.04) 100%) padding-box,\n    linear-gradient(rgba(10,0,46,0.34), rgba(10,0,46,0.34)) padding-box,\n    linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 55%) border-box;\n  -webkit-backdrop-filter: blur(20px);\n  backdrop-filter: blur(20px);\n  /* Drop #0A002E (0,12,36,-4) reforzado + inner top white 22% + inner bottom black 30% */\n  box-shadow:\n    0px 12px 36px -4px rgba(10,0,46,0.7),\n    0px 4px 14px -2px rgba(10,0,46,0.5),\n    inset 0px 1px 0px rgba(255,255,255,0.22),\n    inset 0px -1px 6px rgba(0,0,0,0.3);\n  transition: box-shadow 0.15s, background 0.12s, border-color 0.12s, padding 0.28s cubic-bezier(0.4,0,0.2,1), gap 0.28s cubic-bezier(0.4,0,0.2,1);\n}\n.sbi-item--collapsed {\n  padding: 0;\n  gap: 0;\n  justify-content: center;\n}\n/* Hover — fill #8460E5 38% (sobre base oscura) + borde white 44% + drop #0A0026 55%\n   (0,6,18,-6) + inner top white 60% (0,1,4) */\n.sbi-item--hover {\n  border: 1px solid rgba(255,255,255,0.44);\n  background:\n    rgba(132,96,229,0.38) padding-box,\n    linear-gradient(rgba(10,0,38,0.32), rgba(10,0,38,0.32)) padding-box;\n  box-shadow:\n    0px 6px 18px -6px rgba(10,0,38,0.55),\n    inset 0px 1px 4px rgba(255,255,255,0.6);\n}\n/* Pressed/Active — VYGradientOrange1 + borde gradiente + drop #ED8936 (0,2,25,-2)\n   + background blur 10 */\n.sbi-item--active {\n  border: 1.5px solid transparent;\n  background:\n    linear-gradient(180deg, #FF9639 0%, #EF852E 40%, #BE3D00 100%) padding-box,\n    linear-gradient(143deg, #FFFFFF 0%, #F4AC59 22.1%, #8460E5 74.5%, #FFFFFF 100%) border-box;\n  -webkit-backdrop-filter: blur(10px);\n  backdrop-filter: blur(10px);\n  box-shadow: 0px 2px 25px -2px rgba(237,137,54,0.55);\n}\n.sbi-item:focus-visible {\n  outline: 2px solid rgba(255,255,255,0.5);\n  outline-offset: 2px;\n}\n.sbi-trailing {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-width: 0;\n  overflow: hidden;\n  opacity: 1;\n  max-width: 200px;\n  transition: opacity 0.18s ease, max-width 0.28s cubic-bezier(0.4,0,0.2,1);\n}\n.sbi-item--collapsed .sbi-trailing {\n  opacity: 0;\n  max-width: 0;\n  flex: 0;\n}\n.sbi-label {\n  flex: 1;\n  font-size: 14px;\n  font-weight: 600;\n  letter-spacing: -0.01em;\n  color: #D1D5DC;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  min-width: 0;\n}\n.sbi-item--active .sbi-label {\n  color: #FFFFFF;\n}\n.sbi-sep {\n  height: 1px;\n  background: rgba(255,255,255,0.4);\n  margin: 4px 14px;\n  flex-shrink: 0;\n}\n.sbi-subitems {\n  overflow: hidden;\n  max-height: 0;\n  opacity: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  padding: 0 0 0 8px;\n  margin-top: 0;\n  transition: max-height 0.25s ease, opacity 0.2s ease, margin-top 0.2s ease;\n}\n.sbi-subitems--open {\n  max-height: 400px;\n  opacity: 1;\n  margin-top: 4px;\n}\n@media (prefers-reduced-motion: reduce) {\n  .sbi-item, .sbi-subitems { transition: none; }\n}\n`;\n\nlet _injected = false;\n\n// ── Tipos públicos ────────────────────────────────────────────────────────────\n\nexport interface SidebarNavItem {\n  id: string;\n  /** Función que recibe el estado visual y retorna el icono correspondiente */\n  icon: (state: \"default\" | \"hover\" | \"active\") => ReactNode;\n  label: string;\n  /** Número mostrado en el badge circular (normalmente = subitems.length) */\n  count?: number;\n  /** Subitems expandibles — diseño passed via props */\n  subitems?: SidebarSubItemDef[];\n}\n\ninterface SidebarItemProps extends SidebarNavItem {\n  isActive?: boolean;\n  collapsed?: boolean;\n  onClick?: (id: string) => void;\n}\n\n// ── Badge de conteo ───────────────────────────────────────────────────────────\n\nfunction SidebarBadge({ count, active, uid }: { count: number; active: boolean; uid: string }): JSX.Element {\n  return (\n    <svg width={22} height={22} viewBox=\"0 0 22 22\" fill=\"none\" style={{ flexShrink: 0 }} aria-hidden=\"true\">\n      <defs>\n        <linearGradient id={`${uid}bd`} x1=\"3.73\" y1=\"-11.55\" x2=\"30.06\" y2=\"-3.04\" gradientUnits=\"userSpaceOnUse\">\n          <stop stopColor=\"white\"/>\n          <stop offset=\"0.221154\" stopColor=\"#F4AC59\"/>\n          <stop offset=\"0.745192\" stopColor=\"#8460E5\"/>\n          <stop offset=\"1\" stopColor=\"white\"/>\n        </linearGradient>\n        {active && (\n          <linearGradient id={`${uid}bn`} x1=\"11\" y1=\"6\" x2=\"11\" y2=\"16\" gradientUnits=\"userSpaceOnUse\">\n            <stop stopColor=\"#FF9639\"/>\n            <stop offset=\"0.5\" stopColor=\"#EF852E\"/>\n            <stop offset=\"1\" stopColor=\"#BE3D00\"/>\n          </linearGradient>\n        )}\n      </defs>\n      <circle\n        cx=\"11\" cy=\"11\" r=\"10.5\"\n        fill={active ? \"white\" : \"rgba(34,0,92,0.10)\"}\n        stroke={`url(#${uid}bd)`}\n      />\n      <text\n        x=\"11\" y=\"15.2\"\n        textAnchor=\"middle\"\n        fontSize=\"10\"\n        fontWeight=\"600\"\n        fill={active ? `url(#${uid}bn)` : \"white\"}\n        fontFamily=\"inherit\"\n      >\n        {count}\n      </text>\n    </svg>\n  );\n}\n\n// ── Separador primary / secondary ─────────────────────────────────────────────\n\nexport function SidebarSeparator(): JSX.Element {\n  return <div className=\"sbi-sep\" role=\"separator\" aria-hidden=\"true\" />;\n}\n\n// ── Componente principal ──────────────────────────────────────────────────────\n\nexport default function SidebarItem({\n  id,\n  icon,\n  label,\n  count,\n  subitems,\n  isActive = false,\n  collapsed = false,\n  onClick,\n}: SidebarItemProps): JSX.Element {\n  const uid = useId().replace(/:/g, \"-\");\n  const [hovered, setHovered] = useState(false);\n  const [activeSubId, setActiveSubId] = useState<string | undefined>();\n\n  if (typeof document !== \"undefined\" && !_injected) {\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    _injected = true;\n  }\n\n  const iconState: \"default\" | \"hover\" | \"active\" =\n    isActive ? \"active\" : hovered ? \"hover\" : \"default\";\n\n  const cls = `sbi-item${isActive ? \" sbi-item--active\" : hovered ? \" sbi-item--hover\" : \"\"}${collapsed ? \" sbi-item--collapsed\" : \"\"}`;\n  const hasSubitems = subitems && subitems.length > 0;\n  const subitemsOpen = hasSubitems && isActive && !collapsed;\n\n  return (\n    <>\n      <style id={`${STYLE_ID}-ssr`} suppressHydrationWarning dangerouslySetInnerHTML={{ __html: STYLES }} />\n      <div style={{ display: \"flex\", flexDirection: \"column\" }}>\n        {/* Pill principal */}\n        <div\n          role=\"button\"\n          tabIndex={0}\n          className={cls}\n          onClick={() => onClick?.(id)}\n          onKeyDown={(e) => { if (e.key === \"Enter\" || e.key === \" \") { e.preventDefault(); onClick?.(id); } }}\n          onMouseEnter={() => setHovered(true)}\n          onMouseLeave={() => setHovered(false)}\n          aria-current={isActive ? \"page\" : undefined}\n          aria-expanded={hasSubitems ? subitemsOpen : undefined}\n          aria-label={count != null ? `${label}, ${count} subitems` : label}\n          title={collapsed ? label : undefined}\n        >\n          {icon(iconState)}\n          <div className=\"sbi-trailing\">\n            <span className=\"sbi-label\">{label}</span>\n            {count != null && <SidebarBadge count={count} active={isActive} uid={uid} />}\n          </div>\n        </div>\n\n        {/* Subitems expandibles */}\n        {hasSubitems && (\n          <div className={`sbi-subitems${subitemsOpen ? \" sbi-subitems--open\" : \"\"}`}>\n            {subitems.map((sub) => (\n              <SidebarSubItem\n                key={sub.id}\n                {...sub}\n                isActive={activeSubId === sub.id}\n                onClick={(sid) => setActiveSubId(sid)}\n              />\n            ))}\n          </div>\n        )}\n      </div>\n    </>\n  );\n}\n"
    },
    {
      "path": "bloques/sidebar/desktop/SidebarSubItem.tsx",
      "type": "registry:file",
      "target": "bloques/sidebar/desktop/SidebarSubItem.tsx",
      "content": "\"use client\";\n\n/**\n * SidebarSubItem — subitem expandible 201×48 del SidebarItem\n * Fuente: Figma VOYAGER · \"SideBarDefault\" — State=Default/Hover/Active (subitems)\n *\n * El gradient border se hace con ::before + mask-composite:exclude porque\n * el fondo es rgba(255,255,255,0.06) — casi transparente. Con el truco\n * padding-box/border-box el gradiente se filtra a través del fondo.\n * La técnica de máscara dibuja el gradiente SOLO en el anillo del borde.\n */\n\nimport { useState } from \"react\";\nimport type { JSX } from \"react\";\n\nexport interface SidebarSubItemDef {\n  id: string;\n  label: string;\n  count?: number;\n}\n\ninterface SidebarSubItemProps extends SidebarSubItemDef {\n  isActive?: boolean;\n  onClick?: (id: string) => void;\n}\n\nconst STYLE_ID = \"concorde-sbsi-styles\";\nconst STYLES = `\n.sbsi-item {\n  width: 100%;\n  height: 48px;\n  border-radius: 16px;\n  display: flex;\n  align-items: center;\n  padding: 0 14px;\n  box-sizing: border-box;\n  cursor: pointer;\n  user-select: none;\n  outline: none;\n  position: relative;\n  background: rgba(255,255,255,0.10);\n  transition: box-shadow 0.15s;\n}\n/* Hover — borde VYGradientOrange0 (::before) + drop #0A002E 60% (0,6,20,-4) */\n.sbsi-item--hover {\n  box-shadow: 0px 6px 20px -4px rgba(10,0,46,0.6);\n}\n/* Press/Active — borde VYStrokes1 (::before) + drop #0A002E 60% (0,12,36,-4) */\n.sbsi-item--active {\n  box-shadow: 0px 12px 36px -4px rgba(10,0,46,0.6);\n}\n/* Anillo de borde gradiente — solo visible en la franja del borde */\n.sbsi-item--hover::before,\n.sbsi-item--active::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: 16px;\n  pointer-events: none;\n}\n.sbsi-item--hover::before {\n  padding: 1px;\n  /* VYGradientOrange0 — dirección exacta del SVG (vector 94.42,127.15 → 143deg) */\n  background: linear-gradient(143deg, #FF9639 0%, #EF852E 50%, #BE3D00 100%);\n  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n  -webkit-mask-composite: xor;\n  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n  mask-composite: exclude;\n}\n.sbsi-item--active::before {\n  padding: 1.5px;\n  /* VYStrokes1 — dirección exacta del SVG (vector 94.42,127.15 → 143deg) */\n  background: linear-gradient(143deg, #FFFFFF 0%, #F4AC59 22.1%, #8460E5 74.5%, #FFFFFF 100%);\n  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n  -webkit-mask-composite: xor;\n  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n  mask-composite: exclude;\n}\n.sbsi-item:focus-visible {\n  outline: 2px solid rgba(255,255,255,0.5);\n  outline-offset: 2px;\n}\n.sbsi-label {\n  flex: 1;\n  font-size: 14px;\n  font-weight: 600;\n  letter-spacing: -0.01em;\n  color: #D1D5DC;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  min-width: 0;\n  position: relative;\n  z-index: 1;\n}\n.sbsi-count {\n  font-size: 12px;\n  font-weight: 500;\n  color: rgba(255,255,255,0.7);\n  white-space: nowrap;\n  flex-shrink: 0;\n  position: relative;\n  z-index: 1;\n}\n@media (prefers-reduced-motion: reduce) {\n  .sbsi-item { transition: none; }\n}\n`;\n\nlet _injected = false;\n\nexport default function SidebarSubItem({\n  id,\n  label,\n  count,\n  isActive = false,\n  onClick,\n}: SidebarSubItemProps): JSX.Element {\n  const [hovered, setHovered] = useState(false);\n  const [pressed, setPressed] = useState(false);\n\n  if (typeof document !== \"undefined\" && !_injected) {\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    _injected = true;\n  }\n\n  const showActive = isActive || pressed;\n  const cls = `sbsi-item${showActive ? \" sbsi-item--active\" : hovered ? \" sbsi-item--hover\" : \"\"}`;\n\n  return (\n    <>\n      <style id={`${STYLE_ID}-ssr`} suppressHydrationWarning dangerouslySetInnerHTML={{ __html: STYLES }} />\n      <div\n        role=\"button\"\n        tabIndex={0}\n        className={cls}\n        onClick={() => onClick?.(id)}\n        onKeyDown={(e) => { if (e.key === \"Enter\" || e.key === \" \") { e.preventDefault(); onClick?.(id); } }}\n        onMouseEnter={() => setHovered(true)}\n        onMouseLeave={() => { setHovered(false); setPressed(false); }}\n        onMouseDown={() => setPressed(true)}\n        onMouseUp={() => setPressed(false)}\n        aria-current={isActive ? \"page\" : undefined}\n      >\n        <span className=\"sbsi-label\">{label}</span>\n        {count != null && <span className=\"sbsi-count\">({count})</span>}\n      </div>\n    </>\n  );\n}\n"
    },
    {
      "path": "bloques/sidebar/mobile/dimensions.ts",
      "type": "registry:file",
      "target": "bloques/sidebar/mobile/dimensions.ts",
      "content": "/**\n * Dimensiones del bloque SidebarMobile — módulo plano (sin \"use client\") para que\n * los Server Components puedan importarlas sin obtener `undefined`.\n */\n\n/** Ancho del viewport móvil de referencia. */\nexport const SIDEBAR_MOBILE_WIDTH = 420;\n/** Alto del viewport móvil de referencia. */\nexport const SIDEBAR_MOBILE_HEIGHT = 780;\n/** Ancho del panel deslizante (igual que el Sidebar de escritorio). */\nexport const SIDEBAR_DRAWER_WIDTH = 226;\n"
    },
    {
      "path": "bloques/sidebar/mobile/SidebarMobile.tsx",
      "type": "registry:file",
      "target": "bloques/sidebar/mobile/SidebarMobile.tsx",
      "content": "\"use client\";\n\n/**\n * SidebarMobile — variante móvil del bloque Sidebar (Voyager DS).\n *\n * Reutiliza el mismo `Sidebar` de escritorio (idénticos colores, glass, gradientes\n * y estados) y lo presenta como un drawer: se desliza desde la izquierda por encima\n * del contenido y oscurece el fondo con un backdrop, en lugar de empujar el layout.\n *\n * @example\n * ```tsx\n * const [open, setOpen] = useState(false);\n * <SidebarMobile open={open} onOpenChange={setOpen}>\n *   {appContent}\n * </SidebarMobile>\n * ```\n *\n * El botón que abre el drawer se coloca en el header de la app y se cablea a\n * `onOpenChange(true)` (o usa `showTrigger` para el trigger flotante integrado).\n * Cierra con: backdrop, tecla Escape, o el botón del propio Sidebar.\n */\n\nimport { useEffect, useId, useRef, useState } from \"react\";\nimport type { JSX, ReactNode } from \"react\";\nimport Sidebar, { type SidebarNavItem } from \"../desktop/Sidebar\";\nimport { SIDEBAR_DRAWER_WIDTH } from \"./dimensions\";\n\nexport { SIDEBAR_MOBILE_WIDTH, SIDEBAR_MOBILE_HEIGHT, SIDEBAR_DRAWER_WIDTH } from \"./dimensions\";\nexport type { SidebarNavItem };\n\nconst EASE = \"cubic-bezier(0.4,0,0.2,1)\";\n\nconst STYLE_ID = \"concorde-sidebar-mobile-styles\";\nconst STYLES = `\n.sbm-root { position: relative; }\n\n/* Marco opcional para previews: alto fijo con scroll interno; su transform crea el\n   containing block que ancla el drawer fixed dentro del marco (ver prop frameHeight). */\n.sbm-frame {\n  position: relative;\n  height: 100%;\n  overflow-y: auto;\n  overflow-x: hidden;\n  transform: translateZ(0);\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n.sbm-frame::-webkit-scrollbar { width: 0; height: 0; display: none; }\n.sbm-frame--locked { overflow: hidden; }\n\n.sbm-trigger {\n  position: absolute;\n  top: 16px;\n  left: 16px;\n  z-index: 7;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 44px;\n  height: 44px;\n  padding: 0;\n  border: 1px solid rgba(255,255,255,0.12);\n  border-radius: 12px;\n  background: #2E0F70;\n  box-shadow: 0 6px 18px -6px rgba(10,0,46,0.6);\n  cursor: pointer;\n  transition: transform 0.15s, background 0.15s, opacity 0.2s;\n}\n.sbm-trigger:hover { background: #3a1a86; }\n.sbm-trigger:active { transform: scale(0.94); }\n.sbm-trigger:focus-visible { outline: 2px solid #8460E5; outline-offset: 2px; }\n\n.sbm-backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: 40;\n  background: rgba(10,0,38,0.55);\n  -webkit-backdrop-filter: blur(2px);\n  backdrop-filter: blur(2px);\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.28s ${EASE};\n}\n.sbm-backdrop--open { opacity: 1; pointer-events: auto; }\n\n.sbm-panel {\n  position: fixed;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  z-index: 41;\n  width: ${SIDEBAR_DRAWER_WIDTH}px;\n  max-width: 86%;\n  transform: translateX(-100%);\n  transition: transform 0.3s ${EASE};\n  box-shadow: 0 0 40px -4px rgba(10,0,46,0.6);\n  will-change: transform;\n}\n.sbm-panel--open { transform: translateX(0); }\n.sbm-panel-inner { height: 100%; }\n.sbm-panel-inner > [data-slot=\"sidebar\"] { height: 100% !important; }\n\n@media (prefers-reduced-motion: reduce) {\n  .sbm-trigger, .sbm-backdrop, .sbm-panel { transition: none; }\n}\n`;\n\nlet _injected = false;\n\nexport interface SidebarMobileProps {\n  /** Contenido de la aplicación. Se renderiza detrás del drawer y se oscurece al abrir. */\n  children?: ReactNode;\n  /** Logo mostrado en la cabecera del Sidebar. */\n  logo?: ReactNode;\n  /** Ítems de navegación principales. Por defecto usa los del Sidebar. */\n  primaryItems?: SidebarNavItem[];\n  /** Ítems de navegación secundarios (bajo el separador). */\n  secondaryItems?: SidebarNavItem[];\n  /** Id del ítem activo inicial. */\n  defaultActiveId?: string;\n  /** Estado abierto (modo controlado). Si se omite, el drawer gestiona su estado. */\n  open?: boolean;\n  /** Se invoca al abrir o cerrar el drawer. */\n  onOpenChange?: (open: boolean) => void;\n  /** Se invoca con el id del ítem seleccionado. */\n  onItemClick?: (id: string) => void;\n  /** Se invoca al pulsar el CTA del banner inferior. */\n  onBannerCta?: () => void;\n  /**\n   * Cierra el drawer al seleccionar un ítem. Por defecto `false`: seleccionar un\n   * ítem solo expande sus subítems. Actívalo cuando los ítems naveguen a una ruta.\n   */\n  closeOnItemClick?: boolean;\n  /**\n   * Muestra un botón hamburguesa flotante que abre el drawer. Por defecto `false`:\n   * lo habitual es colocar el botón en la cabecera de la app y llamar a\n   * `onOpenChange(true)`.\n   */\n  showTrigger?: boolean;\n  /**\n   * Alto del bloque interno del Sidebar (cabecera + navegación + banner), en px.\n   * Debe cubrir el alto visible para que el banner no se recorte. Por defecto `780`.\n   */\n  drawerContentHeight?: number;\n  /**\n   * Envuelve el contenido en un marco de alto fijo (px) con scroll interno,\n   * confinando el drawer a ese marco. Pensado para previsualizaciones embebidas;\n   * en producción se omite y el drawer flota sobre el viewport completo.\n   */\n  frameHeight?: number;\n}\n\nexport default function SidebarMobile({\n  children,\n  logo,\n  primaryItems,\n  secondaryItems,\n  defaultActiveId,\n  open: openProp,\n  onOpenChange,\n  onItemClick,\n  onBannerCta,\n  closeOnItemClick = false,\n  showTrigger = false,\n  drawerContentHeight = 780,\n  frameHeight,\n}: SidebarMobileProps): JSX.Element {\n  const rootRef = useRef<HTMLDivElement>(null);\n  const [internalOpen, setInternalOpen] = useState(false);\n  const open = openProp ?? internalOpen;\n\n  function setOpen(next: boolean): void {\n    if (openProp === undefined) setInternalOpen(next);\n    onOpenChange?.(next);\n  }\n\n  if (typeof document !== \"undefined\" && !_injected) {\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    _injected = true;\n  }\n\n  useEffect(\n    function closeOnEscape() {\n      if (!open) return;\n      function onKey(e: KeyboardEvent): void {\n        if (e.key === \"Escape\") setOpen(false);\n      }\n      document.addEventListener(\"keydown\", onKey);\n      return () => document.removeEventListener(\"keydown\", onKey);\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [open],\n  );\n\n  useEffect(\n    function lockScroll() {\n      if (!open || typeof document === \"undefined\") return;\n      // Con frame, el scroll vive en el marco; sin frame, en el documento. En el\n      // marco reseteamos scrollTop a 0 para que el drawer fixed cubra todo lo visible.\n      const frame = frameHeight ? rootRef.current : null;\n      const prevBodyOverflow = document.body.style.overflow;\n      let prevScrollTop = 0;\n      if (frame) {\n        prevScrollTop = frame.scrollTop;\n        frame.scrollTop = 0;\n      } else {\n        document.body.style.overflow = \"hidden\";\n      }\n      return () => {\n        if (frame) frame.scrollTop = prevScrollTop;\n        else document.body.style.overflow = prevBodyOverflow;\n      };\n    },\n    [open, frameHeight],\n  );\n\n  function handleItemClick(id: string): void {\n    onItemClick?.(id);\n    if (closeOnItemClick) setOpen(false);\n  }\n\n  return (\n    <>\n      <style id={`${STYLE_ID}-ssr`} suppressHydrationWarning dangerouslySetInnerHTML={{ __html: STYLES }} />\n      <div\n        ref={rootRef}\n        className={`sbm-root${frameHeight ? \" sbm-frame\" : \"\"}${frameHeight && open ? \" sbm-frame--locked\" : \"\"}`}\n        style={frameHeight ? { height: frameHeight } : undefined}\n      >\n        {children}\n\n        {showTrigger ? (\n          <button\n            type=\"button\"\n            className=\"sbm-trigger\"\n            onClick={() => setOpen(true)}\n            aria-label=\"Abrir menú\"\n            aria-expanded={open}\n            style={{ opacity: open ? 0 : 1, pointerEvents: open ? \"none\" : \"auto\" }}\n          >\n            <HamburgerIcon />\n          </button>\n        ) : null}\n\n        <div\n          className={`sbm-backdrop${open ? \" sbm-backdrop--open\" : \"\"}`}\n          onClick={() => setOpen(false)}\n          aria-hidden=\"true\"\n        />\n\n        <div\n          className={`sbm-panel${open ? \" sbm-panel--open\" : \"\"}`}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-label=\"Navegación\"\n          aria-hidden={!open}\n        >\n          <div className=\"sbm-panel-inner\">\n            <Sidebar\n              logo={logo}\n              primaryItems={primaryItems}\n              secondaryItems={secondaryItems}\n              defaultActiveId={defaultActiveId}\n              height=\"100%\"\n              contentHeight={drawerContentHeight}\n              collapsed={false}\n              onCollapsedChange={() => setOpen(false)}\n              onItemClick={handleItemClick}\n              onBannerCta={onBannerCta}\n            />\n          </div>\n        </div>\n      </div>\n    </>\n  );\n}\n\nconst MENU_BTN_STYLE_ID = \"concorde-sidebar-menu-button-styles\";\nconst MENU_BTN_STYLES = `\n.sbm-menu-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  padding: 0;\n  border: none;\n  border-radius: 10px;\n  background: transparent;\n  cursor: pointer;\n  transition: background 0.15s, transform 0.15s;\n}\n.sbm-menu-btn:hover { background: rgba(255,255,255,0.10); }\n.sbm-menu-btn:active { transform: scale(0.92); }\n.sbm-menu-btn:focus-visible { outline: 2px solid #8460E5; outline-offset: 2px; }\n`;\n\nlet _menuBtnInjected = false;\n\nexport interface SidebarMenuButtonProps {\n  /** Se invoca al pulsar el botón (normalmente abre el drawer). */\n  onClick: () => void;\n  /** Estado abierto del drawer, para `aria-expanded`. */\n  expanded?: boolean;\n}\n\n/**\n * Botón hamburguesa autocontenido para abrir el drawer desde la cabecera de la app.\n * Incluye el ícono, los estados (hover/active/focus) y la etiqueta accesible.\n */\nexport function SidebarMenuButton({ onClick, expanded = false }: SidebarMenuButtonProps): JSX.Element {\n  if (typeof document !== \"undefined\" && !_menuBtnInjected) {\n    if (!document.getElementById(MENU_BTN_STYLE_ID)) {\n      const el = document.createElement(\"style\");\n      el.id = MENU_BTN_STYLE_ID;\n      el.textContent = MENU_BTN_STYLES;\n      document.head.appendChild(el);\n    }\n    _menuBtnInjected = true;\n  }\n\n  return (\n    <>\n      <style id={`${MENU_BTN_STYLE_ID}-ssr`} suppressHydrationWarning dangerouslySetInnerHTML={{ __html: MENU_BTN_STYLES }} />\n      <button type=\"button\" className=\"sbm-menu-btn\" onClick={onClick} aria-label=\"Abrir menú\" aria-expanded={expanded}>\n        <HamburgerIcon size={24} />\n      </button>\n    </>\n  );\n}\n\n/** Ícono hamburguesa con el gradiente lila del sistema. Úsalo en el botón que abre el drawer. */\nexport function HamburgerIcon({ size = 24 }: { size?: number }): JSX.Element {\n  const gid = `sbm-hamburger-${useId().replace(/:/g, \"\")}`;\n  return (\n    <svg width={size} height={size} viewBox=\"0 0 22 22\" fill=\"none\" aria-hidden=\"true\">\n      <path d=\"M2.75 5.5H19.25\" stroke={`url(#${gid})`} strokeWidth=\"1.83333\" strokeLinecap=\"round\" />\n      <path d=\"M2.75 11H19.25\" stroke={`url(#${gid})`} strokeWidth=\"1.83333\" strokeLinecap=\"round\" />\n      <path d=\"M2.75 16.5H19.25\" stroke={`url(#${gid})`} strokeWidth=\"1.83333\" strokeLinecap=\"round\" />\n      <defs>\n        <linearGradient id={gid} x1=\"2.75\" y1=\"5.5\" x2=\"6\" y2=\"18\" gradientUnits=\"userSpaceOnUse\">\n          <stop stopColor=\"#CFBAFF\" />\n          <stop offset=\"0.35\" stopColor=\"white\" />\n          <stop offset=\"0.65\" stopColor=\"#AE8EFF\" />\n          <stop offset=\"1\" stopColor=\"#CFBAFF\" />\n        </linearGradient>\n      </defs>\n    </svg>\n  );\n}\n"
    }
  ]
}