{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "homepage",
  "type": "registry:block",
  "title": "homepage",
  "description": "Bloque Concorde homepage — incluye sus 6 componentes.",
  "dependencies": [
    "react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "bloques/homepage/desktop/AuctioneerSection.tsx",
      "type": "registry:file",
      "target": "bloques/homepage/desktop/AuctioneerSection.tsx",
      "content": "\"use client\";\n\n/**\n * AuctioneerSection — Bloque/sección de Concorde (Voyager DS)\n *\n * Card de subastador (766 × 352): cabecera con nombre + nº de ofertas, logo\n * central (slot) y \"Ir al Perfil\", sobre una fila de 4 OfferCards.\n * Compuesta 100% con componentes Concorde: OfferCard · BadgeStatus · ProfileButton.\n */\n\nimport type { JSX, ReactNode } from \"react\";\nimport OfferCard from \"../../../components/OfferCard\";\nimport BadgeStatus from \"../../../components/BadgeStatus\";\nimport ProfileButton from \"../../../components/ProfileButton\";\nimport CardTitle from \"../../../components/CardTitle\";\n\nexport type AuctioneerBadge = \"none\" | \"live\" | \"proxima\";\n\nexport interface AuctioneerOffer {\n  name: string;\n  year: string | number;\n  price: string;\n  imageSrc?: string;\n  badge?: AuctioneerBadge;\n}\n\nexport interface AuctioneerSectionProps {\n  /** Nombre del subastador */\n  name?: string;\n  /** Etiqueta de ofertas (p.ej. \"10 Ofertas\") */\n  offersLabel?: string;\n  /** Logo central (slot) — por defecto un placeholder */\n  logo?: ReactNode;\n  /** Las 4 ofertas (cards) */\n  offers?: AuctioneerOffer[];\n  onProfile?: () => void;\n  className?: string;\n}\n\nexport const AUCTIONEER_WIDTH = 766;\nexport const AUCTIONEER_HEIGHT = 352;\n\nconst DEFAULT_OFFERS: AuctioneerOffer[] = [\n  { name: \"Audi Q3\", year: 2026, price: \"US$ 9,999\", imageSrc: \"/demo/bronco.jpg\" },\n  { name: \"Audi Q3\", year: 2026, price: \"US$ 9,999\", imageSrc: \"/demo/bronco.jpg\", badge: \"live\" },\n  { name: \"Audi Q3\", year: 2026, price: \"US$ 9,999\", imageSrc: \"/demo/bronco.jpg\" },\n  { name: \"Audi Q3\", year: 2026, price: \"US$ 9,999\", imageSrc: \"/demo/bronco.jpg\", badge: \"proxima\" },\n];\n\nfunction badgeFor(badge: AuctioneerBadge | 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\nexport default function AuctioneerSection({\n  name = \"SANTANDER CONSUMER\",\n  offersLabel = \"10 Ofertas\",\n  logo,\n  offers = DEFAULT_OFFERS,\n  onProfile,\n  className = \"\",\n}: AuctioneerSectionProps): JSX.Element {\n  return (\n    <section\n      className={className}\n      style={{\n        position: \"relative\",\n        boxSizing: \"border-box\",\n        width: AUCTIONEER_WIDTH,\n        height: AUCTIONEER_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 */}\n      <header style={{ position: \"relative\", display: \"flex\", alignItems: \"center\", justifyContent: \"space-between\", padding: \"0 8px\" }}>\n        {/* Izquierda: CardTitle (nombre + ofertas + corchetes naranjas) */}\n        <CardTitle title={name} subtitle={offersLabel} titleSize={16} subtitleSize={14} />\n\n        {/* Centro: logo (slot opcional) */}\n        {logo ? <div style={{ position: \"absolute\", top: 0, left: \"50%\", transform: \"translateX(-50%)\" }}>{logo}</div> : null}\n\n        {/* Derecha: Ir al Perfil */}\n        <ProfileButton onClick={onProfile}>Ir al Perfil</ProfileButton>\n      </header>\n\n      {/* Fila de ofertas */}\n      <div style={{ display: \"flex\", justifyContent: \"space-between\", alignItems: \"flex-end\" }}>\n        {offers.map(function renderOffer(o, i) {\n          return (\n            <OfferCard\n              key={i}\n              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": "bloques/homepage/desktop/CategoriesSection.tsx",
      "type": "registry:file",
      "target": "bloques/homepage/desktop/CategoriesSection.tsx",
      "content": "\"use client\";\n\n/**\n * CategoriesSection — Bloque/sección de Concorde (Voyager DS)\n *\n * Card de 2 columnas (766 × 184):\n *   · Izquierda  \"TIPO DE OFERTA\"  → 2 OfferType (NEGOCIABLE · EN VIVO)\n *   · Derecha    \"CATEGORÍAS\"      → 4 CategoryCard\n * Separadas por un divisor vertical. Compuesta 100% con componentes Concorde:\n * CardTitle · OfferType · CategoryCard.\n */\n\nimport type { JSX } from \"react\";\nimport CardTitle from \"../../../components/CardTitle\";\nimport OfferType from \"../../../components/OfferType\";\nimport CategoryCard from \"../../../components/CategoryCard\";\n\nexport const CATEGORIES_WIDTH = 766;\nexport const CATEGORIES_HEIGHT = 184;\n\nexport interface CategoriesSectionProps {\n  onNegotiable?: () => void;\n  onLive?: () => void;\n  onCategory?: (category: string) => void;\n  className?: string;\n}\n\nconst colStyle = { display: \"flex\", flexDirection: \"column\" as const, alignItems: \"flex-start\" as const, justifyContent: \"space-between\" as const, height: 143, gap: 8 };\n\nexport default function CategoriesSection({\n  onNegotiable,\n  onLive,\n  onCategory,\n  className = \"\",\n}: CategoriesSectionProps): JSX.Element {\n  return (\n    <section\n      className={className}\n      style={{\n        boxSizing: \"border-box\",\n        width: CATEGORIES_WIDTH,\n        height: CATEGORIES_HEIGHT,\n        background: \"#ffffff\",\n        borderRadius: 16,\n        boxShadow: \"rgba(0,0,0,0.07) 0px 0px 16px 4px\",\n        padding: \"12px 20px\",\n        display: \"flex\",\n        alignItems: \"center\",\n        fontFamily: \"var(--vmc-font-display, 'Plus Jakarta Sans', -apple-system, sans-serif)\",\n      }}\n    >\n      {/* Columna izquierda: TIPO DE OFERTA */}\n      <div style={{ ...colStyle, paddingRight: 24 }}>\n        <CardTitle title=\"TIPO DE OFERTA\" subtitle=\"\" />\n        <div style={{ display: \"flex\", gap: 12 }}>\n          <OfferType variant=\"negotiable\" onClick={onNegotiable} />\n          <OfferType variant=\"live\" onClick={onLive} />\n        </div>\n      </div>\n\n      {/* Divisor vertical */}\n      <div style={{ width: 1, height: 143, background: \"#E5E7EB\" }} />\n\n      {/* Columna derecha: CATEGORÍAS */}\n      <div style={{ ...colStyle, flex: 1, paddingLeft: 24 }}>\n        <CardTitle title=\"CATEGORÍAS\" subtitle=\"\" />\n        <div style={{ display: \"flex\", gap: 12, justifyContent: \"space-between\", width: \"100%\" }}>\n          <CategoryCard category=\"vehicular\" onClick={onCategory ? function h() { onCategory(\"vehicular\"); } : undefined} />\n          <CategoryCard category=\"maquinaria\" onClick={onCategory ? function h() { onCategory(\"maquinaria\"); } : undefined} />\n          <CategoryCard category=\"equipos-diversos\" onClick={onCategory ? function h() { onCategory(\"equipos-diversos\"); } : undefined} />\n          <CategoryCard category=\"articulos-diversos\" onClick={onCategory ? function h() { onCategory(\"articulos-diversos\"); } : undefined} />\n        </div>\n      </div>\n    </section>\n  );\n}\n"
    },
    {
      "path": "bloques/homepage/desktop/dimensions.ts",
      "type": "registry:file",
      "target": "bloques/homepage/desktop/dimensions.ts",
      "content": "/**\n * Dimensiones del bloque Homepage (desktop) — módulo plano sin \"use client\".\n * Los Server Components y los Viewers pueden importar estas constantes\n * sin cruzar la barrera \"use client\" → undefined → NaN.\n */\n\nexport const HOMEPAGE_WIDTH = 798;\nexport const HOMEPAGE_HEIGHT = 1104;\n"
    },
    {
      "path": "bloques/homepage/desktop/Homepage.tsx",
      "type": "registry:file",
      "target": "bloques/homepage/desktop/Homepage.tsx",
      "content": "/**\n * Homepage — Bloque de Concorde (Voyager DS)\n *\n * Bloque = composición de varios componentes. Por ahora es solo el lienzo\n * base: un fondo blanco de 798 × 1104. Iremos montando las secciones encima.\n */\n\nimport type { JSX } from \"react\";\nimport AuctioneerSection from \"./AuctioneerSection\";\nimport CategoriesSection from \"./CategoriesSection\";\n\nexport interface HomepageProps {\n  className?: string;\n}\n\nimport { HOMEPAGE_WIDTH, HOMEPAGE_HEIGHT } from \"./dimensions\";\nexport { HOMEPAGE_WIDTH, HOMEPAGE_HEIGHT } from \"./dimensions\";\n\nexport default function Homepage({ className = \"\" }: HomepageProps): JSX.Element {\n  return (\n    <div\n      className={className}\n      data-block=\"homepage\"\n      style={{\n        position: \"relative\",\n        width: HOMEPAGE_WIDTH,\n        height: HOMEPAGE_HEIGHT,\n        background: \"#ffffff\",\n        overflow: \"hidden\",\n      }}\n    >\n      {/* Principal Banner 766 × 272 · 16px arriba del Secondary, centrado */}\n      <div\n        data-slot=\"principal-banner\"\n        style={{\n          position: \"absolute\", left: \"50%\", bottom: 816, transform: \"translateX(-50%)\",\n          width: 766, height: 272, borderRadius: 8, background: \"#E9EAEC\",\n          display: \"flex\", alignItems: \"center\", justifyContent: \"center\",\n          fontFamily: \"var(--vmc-font-display, 'Plus Jakarta Sans', -apple-system, sans-serif)\",\n          fontSize: 13, fontWeight: 600, letterSpacing: \"0.06em\", color: \"#9AA1AC\",\n        }}\n      >\n        PRINCIPAL BANNER\n      </div>\n\n      {/* Secondary Banner 766 × 100 · 16px arriba de Categorías, centrado */}\n      <div\n        data-slot=\"secondary-banner\"\n        style={{\n          position: \"absolute\", left: \"50%\", bottom: 700, transform: \"translateX(-50%)\",\n          width: 766, height: 100, borderRadius: 8, background: \"#E9EAEC\",\n          display: \"flex\", alignItems: \"center\", justifyContent: \"center\",\n          fontFamily: \"var(--vmc-font-display, 'Plus Jakarta Sans', -apple-system, sans-serif)\",\n          fontSize: 13, fontWeight: 600, letterSpacing: \"0.06em\", color: \"#9AA1AC\",\n        }}\n      >\n        SECONDARY BANNER\n      </div>\n\n      {/* Sección Categorías 766 × 184 · 16px arriba del Subastador, centrada */}\n      <div style={{ position: \"absolute\", left: \"50%\", bottom: 500, transform: \"translateX(-50%)\" }}>\n        <CategoriesSection />\n      </div>\n\n      {/* Sección Subastador 766 × 352 · 16px arriba del banner, centrada */}\n      <div style={{ position: \"absolute\", left: \"50%\", bottom: 132, transform: \"translateX(-50%)\" }}>\n        <AuctioneerSection />\n      </div>\n\n      {/* Banner 768 × 100 · a 32px del bottom, centrado horizontalmente */}\n      <div\n        data-slot=\"banner\"\n        style={{\n          position: \"absolute\",\n          left: \"50%\",\n          bottom: 16,\n          transform: \"translateX(-50%)\",\n          width: 766,\n          height: 100,\n          borderRadius: 8,\n          background: \"#F2F4F3\",\n          border: \"1px dashed #CBD5E1\",\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          fontFamily: \"monospace\",\n          fontSize: 12,\n          letterSpacing: \"0.08em\",\n          color: \"#94A3B8\",\n        }}\n      >\n        BANNER · 766 × 100\n      </div>\n    </div>\n  );\n}\n"
    },
    {
      "path": "bloques/homepage/mobile/dimensions.ts",
      "type": "registry:file",
      "target": "bloques/homepage/mobile/dimensions.ts",
      "content": "/**\n * Dimensiones del bloque HomepageMobile — módulo plano sin \"use client\".\n */\n\nexport const HOMEPAGE_MOBILE_WIDTH = 420;\nexport const HOMEPAGE_MOBILE_HEIGHT = 1800;\n"
    },
    {
      "path": "bloques/homepage/mobile/HomepageMobile.tsx",
      "type": "registry:file",
      "target": "bloques/homepage/mobile/HomepageMobile.tsx",
      "content": "/**\n * HomepageMobile — Bloque de Concorde (Voyager DS)\n *\n * Página de inicio · mobile (420 de ancho). Por ahora:\n *   · Header 420×64 (logo de la marca a la izquierda + «Ingresa»)\n *   · Banner 388×598 (placeholder, a 16px de margen)\n * Iremos montando las demás secciones encima.\n */\n\n\"use client\";\n\nimport { useState } from \"react\";\nimport type { JSX } from \"react\";\nimport AppHeader from \"../../header/desktop/Header\";\nimport CardTitle from \"../../../components/CardTitle\";\nimport OfferType from \"../../../components/OfferType\";\nimport CategoryCard from \"../../../components/CategoryCard\";\nimport OfferCard from \"../../../components/OfferCard\";\nimport BadgeStatus from \"../../../components/BadgeStatus\";\nimport ProfileButton from \"../../../components/ProfileButton\";\nimport SidebarMobile, { SidebarMenuButton } from \"../../sidebar/mobile/SidebarMobile\";\n\nimport { HOMEPAGE_MOBILE_WIDTH, HOMEPAGE_MOBILE_HEIGHT } from \"./dimensions\";\nexport { HOMEPAGE_MOBILE_WIDTH, HOMEPAGE_MOBILE_HEIGHT } from \"./dimensions\";\n\n// Card blanca de sección (388 de ancho, sombra estándar del homepage)\nconst SECTION_CARD = {\n  width: 388,\n  boxSizing: \"border-box\" as const,\n  background: \"#ffffff\",\n  borderRadius: 8,\n  boxShadow: \"rgba(0,0,0,0.1) 0px 0px 16px 4px\",\n  padding: 16,\n};\n\n// Overrides: OfferType llena su columna (2-up) y CategoryCard a 86 para que\n// las 4 entren en la fila.\nconst HM_STYLES = `\n.poftype.hm-oftype { width: 100%; box-sizing: border-box; }\n.pcatcard.hm-cat { width: 86px; }\n`;\n\nexport interface HomepageMobileProps {\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 HomepageMobile({ className = \"\", frameHeight }: HomepageMobileProps): JSX.Element {\n  const [menuOpen, setMenuOpen] = useState(false);\n\n  const page = (\n    <div\n      className={className}\n      data-block=\"homepage-mobile\"\n      style={{\n        position: \"relative\",\n        width: HOMEPAGE_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      {/* Header 420×64 · hamburguesa + logo de la marca a la izquierda */}\n      <AppHeader\n        width={HOMEPAGE_MOBILE_WIDTH}\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      <style suppressHydrationWarning dangerouslySetInnerHTML={{ __html: HM_STYLES }} />\n\n      {/* Contenido a 16px de margen */}\n      <div style={{ display: \"flex\", flexDirection: \"column\", gap: 16, padding: 16 }}>\n        {/* Banner · placeholder 388×598 */}\n        <div\n          data-slot=\"banner\"\n          style={{\n            width: 388,\n            height: 598,\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          BANNER\n        </div>\n\n        {/* TIPO DE OFERTA · card 388×176 (CardTitle + 2 OfferType: EN VIVO / NEGOCIABLE) */}\n        <div style={SECTION_CARD}>\n          <CardTitle title=\"TIPO DE OFERTA\" subtitle=\"\" titleSize={14} />\n          <div style={{ display: \"grid\", gridTemplateColumns: \"1fr 1fr\", gap: 12, marginTop: 20 }}>\n            <OfferType variant=\"live\" className=\"hm-oftype\" />\n            <OfferType variant=\"negotiable\" className=\"hm-oftype\" />\n          </div>\n        </div>\n\n        {/* CATEGORÍAS · card 388×160 (CardTitle + 4 CategoryCard) */}\n        <div style={SECTION_CARD}>\n          <CardTitle title=\"CATEGORÍAS\" subtitle=\"\" titleSize={14} />\n          <div style={{ display: \"flex\", justifyContent: \"space-between\", marginTop: 16 }}>\n            <CategoryCard category=\"vehicular\" className=\"hm-cat\" />\n            <CategoryCard category=\"maquinaria\" className=\"hm-cat\" />\n            <CategoryCard category=\"equipos-diversos\" className=\"hm-cat\" />\n            <CategoryCard category=\"articulos-diversos\" className=\"hm-cat\" />\n          </div>\n        </div>\n\n        {/* SUBASTADOR · card 388×596 (SANTANDER CONSUMER + grid 2×2 de OfferCards) */}\n        <div style={SECTION_CARD}>\n          <div style={{ display: \"flex\", alignItems: \"center\", justifyContent: \"space-between\" }}>\n            <CardTitle title=\"SANTANDER CONSUMER\" subtitle=\"10 Ofertas\" titleSize={16} subtitleSize={14} />\n            <ProfileButton>Ir al Perfil</ProfileButton>\n          </div>\n          <div style={{ display: \"grid\", gridTemplateColumns: \"170px 170px\", justifyContent: \"space-between\", rowGap: 12, marginTop: 16 }}>\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=\"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=\"proxima\" />} elevated />\n          </div>\n        </div>\n\n        {/* Secondary Banner · placeholder 388×116 */}\n        <div\n          data-slot=\"secondary-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          SECONDARY BANNER\n        </div>\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/OfferCard.tsx",
      "type": "registry:file",
      "target": "components/OfferCard.tsx",
      "content": "\"use client\";\r\n\r\n/**\r\n * OfferCard — Generado por Concorde\r\n * Fuente: https://voyager-ds.vercel.app/preview/components/button-primary\r\n * Generado: 2026-05-28\r\n * EDITAR LIBREMENTE después de generar\r\n *\r\n * Variantes: live (orange bar, pprice+price+like) ·\r\n *            negotiable (teal bar, solo like)\r\n */\r\n\r\nimport { useState, useCallback, useId } from \"react\";\r\nimport type { JSX } from \"react\";\r\n\r\n// ─── Types ────────────────────────────────────────────────────────────────────\r\n\r\nexport type OfferCardVariant = \"live\" | \"negotiable\";\r\n\r\nexport interface OfferCardProps {\r\n  /** Variante — determina barra inferior y fila de precio */\r\n  variant: OfferCardVariant;\r\n  /** Tamaño. \"short\" = card compacta 134×170 (solo imagen + título/año + barra,\r\n   *  con el precio y el like como overlays sobre la imagen). Default \"full\". */\r\n  size?: \"full\" | \"short\";\r\n  /** Nombre del vehículo */\r\n  name: string;\r\n  /** Año */\r\n  year: string | number;\r\n  /**\r\n   * Precio formateado (\"US$ 9,999\").\r\n   * Si no se pasa, la fila de precio no se renderiza.\r\n   * En negotiable solo aparece el like.\r\n   */\r\n  price?: string;\r\n  /** URL imagen */\r\n  imageSrc?: string;\r\n  /** Alt text de imagen */\r\n  imageAlt?: string;\r\n  /** Badge de estado (pill BadgeStatus) — renderizado en img-badge slot */\r\n  badge?: JSX.Element;\r\n  /** Estado like controlado */\r\n  liked?: boolean;\r\n  /** Callback al alternar like */\r\n  onLikeChange?: (liked: boolean) => void;\r\n  /** Click en la card */\r\n  onClick?: () => void;\r\n  /** Aria label */\r\n  \"aria-label\"?: string;\r\n  /** Si false: showcase estático, sin hover/press. Default true */\r\n  interactive?: boolean;\r\n  /** Sombra elevada de Figma (X0 Y0 · Blur16 · Spread4 · #000000 10%). Default false */\r\n  elevated?: boolean;\r\n  className?: string;\r\n}\r\n\r\n// ─── Self-contained CSS ───────────────────────────────────────────────────────\r\n\r\nconst STYLE_ID = \"concorde-offercard-styles\";\r\n\r\nconst OFFERCARD_STYLES = `\r\n@keyframes offercard-heart-pop {\r\n  0%   { transform: scale(1); }\r\n  35%  { transform: scale(1.4); }\r\n  65%  { transform: scale(0.85); }\r\n  85%  { transform: scale(1.1); }\r\n  100% { transform: scale(1); }\r\n}\r\n@keyframes offercard-pulse {\r\n  0%, 100% { opacity: 1; }\r\n  50%       { opacity: 0.5; }\r\n}\r\n\r\n/* ── Card base — ancho y alto fijo, igual en ambas variantes ── */\r\n.pcard {\r\n  width: 170px;\r\n  height: 232px;\r\n  box-sizing: border-box;\r\n  background: #ffffff;\r\n  border-radius: 8px;\r\n  box-shadow:\r\n    rgba(0, 0, 0, 0.07) 0px 0px 16px 4px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  flex-shrink: 0;\r\n  position: relative;\r\n  overflow: hidden;\r\n  transition:\r\n    transform 150ms cubic-bezier(0.3, 0, 0, 1),\r\n    box-shadow 150ms cubic-bezier(0.3, 0, 0, 1);\r\n  cursor: pointer;\r\n}\r\n\r\n.pcard:hover:not(.pcard--disabled):not(.pcard--skeleton) {\r\n  transform: translateY(-3px);\r\n  box-shadow: oklch(0.22 0.18 285 / 0.12) 0px 12px 20px;\r\n}\r\n\r\n/* ── Image ── */\r\n.pcard__img {\r\n  width: 100%;\r\n  height: 112px;\r\n  background: oklch(0.93 0.006 220);\r\n  flex-shrink: 0;\r\n  overflow: hidden;\r\n  border-radius: 8px 8px 0 0;\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n.pcard__img img {\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n  display: block;\r\n}\r\n\r\n.pcard__img-badge {\r\n  position: absolute;\r\n  top: 8px;\r\n  right: 8px;\r\n  z-index: 2;\r\n}\r\n\r\n/* ── Body ── */\r\n.pcard__body {\r\n  display: flex;\r\n  flex-direction: column;\r\n  padding: 12px;\r\n  height: 112px;\r\n  flex-shrink: 0;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.pcard__meta {\r\n  flex: 1;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 2px;\r\n}\r\n\r\n.pcard__name {\r\n  font-family: var(--vmc-font-display, 'Plus Jakarta Sans', sans-serif);\r\n  font-size: 16px;\r\n  font-weight: 700;\r\n  line-height: 20px;\r\n  color: #4c1ebc;\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  margin: 0;\r\n}\r\n\r\n.pcard__year {\r\n  font-family: var(--vmc-font-display, 'Plus Jakarta Sans', sans-serif);\r\n  font-size: 11px;\r\n  font-weight: 500;\r\n  line-height: 16px;\r\n  letter-spacing: 0.06em;\r\n  text-transform: uppercase;\r\n  color: #191c1c;\r\n  margin: 0;\r\n}\r\n\r\n/* Price row — pprice + price text + like */\r\n.pcard__price-row {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  margin-top: 10px;\r\n  flex-shrink: 0;\r\n}\r\n\r\n.pcard__price-left {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 6px;\r\n}\r\n\r\n.pcard__price-text {\r\n  font-family: var(--vmc-font-mono, 'Roboto Mono', monospace);\r\n  font-size: 13px;\r\n  font-weight: 700;\r\n  line-height: 20px;\r\n  font-variant-numeric: tabular-nums;\r\n  color: #4c1ebc;\r\n  white-space: nowrap;\r\n}\r\n\r\n/* Like row — solo like (negotiable) */\r\n.pcard__like-row {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: flex-end;\r\n  margin-top: 10px;\r\n  flex-shrink: 0;\r\n}\r\n\r\n/* ── Variants — bottom bars ── */\r\n.pcard--live {\r\n  position: relative;\r\n}\r\n.pcard--live::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  bottom: 0;\r\n  left: 0;\r\n  right: 0;\r\n  height: 8px;\r\n  background: linear-gradient(90deg, #ff9639 0%, #ef852e 50%, #be3d00 100%);\r\n  border-radius: 0 0 var(--vmc-radius-sm, 4px) var(--vmc-radius-sm, 4px);\r\n}\r\n\r\n.pcard--negotiable {\r\n  position: relative;\r\n}\r\n.pcard--negotiable::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  bottom: 0;\r\n  left: 0;\r\n  right: 0;\r\n  height: 8px;\r\n  background: linear-gradient(90deg, #00edee 0%, #00d2d3 50%, #009597 100%);\r\n  border-radius: 0 0 var(--vmc-radius-sm, 4px) var(--vmc-radius-sm, 4px);\r\n}\r\n\r\n\r\n/* ── Price gem (auction diamond, paths exactos de Figma) ── */\r\n.pcard-pprice {\r\n  width: 30px;\r\n  height: 32px;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex-shrink: 0;\r\n}\r\n\r\n/* ── Mini like button (self-contained) ── */\r\n.pcard-like {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 30px;\r\n  height: 30px;\r\n  border-radius: 9999px;\r\n  border: 1.44px solid transparent;\r\n  background-image:\r\n    linear-gradient(#ffffff, #ffffff),\r\n    linear-gradient(135deg, #e8ddff 0%, #ffffff 40%, #cfbaff 75%, #ae8eff 100%);\r\n  background-origin: padding-box, border-box;\r\n  background-clip: padding-box, border-box;\r\n  cursor: pointer;\r\n  padding: 2px;\r\n  position: relative;\r\n  overflow: hidden;\r\n  box-shadow: rgba(132, 96, 229, 0.14) 0px 2px 8px;\r\n  transition:\r\n    transform 0.15s cubic-bezier(0.25, 0.8, 0.25, 1),\r\n    box-shadow 0.2s;\r\n  flex-shrink: 0;\r\n  outline: none;\r\n}\r\n/* Glass highlight (white 0.55 → transparent) */\r\n.pcard-like::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: 0;\r\n  border-radius: 9999px;\r\n  background: linear-gradient(rgba(255, 255, 255, 0.55) 0%, transparent 50%);\r\n  pointer-events: none;\r\n  z-index: 1;\r\n}\r\n.pcard-like svg { position: relative; z-index: 2; }\r\n.pcard-like:hover {\r\n  transform: scale(1.1) translateY(-1px);\r\n  box-shadow: rgba(32, 0, 104, 0.2) 0px 6px 14px;\r\n}\r\n.pcard-like:active { transform: scale(0.92); }\r\n.pcard-like--active {\r\n  background-image:\r\n    linear-gradient(135deg, #8460e5 0%, #3b1782 100%),\r\n    linear-gradient(135deg, #fbc47d 0%, #fbc47d 100%);\r\n  box-shadow: rgba(132, 96, 229, 0.35) 0px 2px 8px, inset 0px 1px 0px rgba(255,255,255,0.22);\r\n}\r\n.pcard-like--pop svg {\r\n  animation: offercard-heart-pop 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) 1;\r\n}\r\n.pcard-like:focus-visible {\r\n  outline: 2px solid oklch(0.62 0.20 285);\r\n  outline-offset: 2px;\r\n}\r\n\r\n/* ── Sombra elevada — token \"card\" de Figma (X0 Y0 · Blur16 · Spread4 · #000000 10%) ── */\r\n.pcard--elevated { box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 16px 4px; }\r\n.pcard--static.pcard--elevated:hover { box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 16px 4px; }\r\n\r\n/* ── Static showcase (sin hover/press) ── */\r\n.pcard--static, .pcard--static .pcard-like { transition: none; cursor: default; }\r\n.pcard--static:hover { transform: none; box-shadow: rgba(0, 0, 0, 0.07) 0px 0px 16px 4px; }\r\n.pcard--static .pcard-like { pointer-events: none; }\r\n.pcard--static .pcard-like:hover { transform: none; box-shadow: rgba(132, 96, 229, 0.14) 0px 2px 8px; }\r\n.pcard--static .pcard-like:active { transform: none; }\r\n\r\n/* ── Short variant (134×170) — imagen 134×112 + título/año 134×50 + barra 134×8.\r\n   Precio (99×24) y like (24×24) van como overlays SOBRE la imagen. ── */\r\n.pcard--short { width: 134px; height: 170px; }\r\n.pcard--short .pcard__img { height: 112px; }\r\n.pcard__body--short {\r\n  height: 50px;\r\n  box-sizing: border-box;\r\n  padding: 8px 10px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  gap: 1px;\r\n}\r\n.pcard--short .pcard__name { font-size: 15px; line-height: 18px; }\r\n.pcard--short .pcard__year { font-size: 10px; line-height: 14px; }\r\n\r\n/* Precio como badge (99×24) — arriba a la izquierda de la imagen */\r\n.pcard__price-badge {\r\n  position: absolute;\r\n  top: 8px;\r\n  left: 7px;\r\n  height: 24px;\r\n  box-sizing: border-box;\r\n  padding: 0 10px 0 3px;\r\n  border-radius: 12px;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 3px;\r\n  border: 1px solid transparent;\r\n  background-image:\r\n    linear-gradient(135deg, #8460e5 0%, #3b1782 100%),\r\n    linear-gradient(135deg, #8776ff 0%, rgba(255,255,255,0.4) 38%, #532bc7 68%, #8776ff 100%);\r\n  background-origin: padding-box, border-box;\r\n  background-clip: padding-box, border-box;\r\n  box-shadow: rgba(32, 0, 104, 0.5) 0px 2px 6px;\r\n  z-index: 2;\r\n}\r\n.pcard__price-badge::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: 0;\r\n  border-radius: 12px;\r\n  background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, transparent 100%);\r\n  pointer-events: none;\r\n}\r\n.pcard__price-badge-gem { width: 20px; height: 22px; display: inline-flex; position: relative; z-index: 1; flex-shrink: 0; }\r\n.pcard__price-badge-text {\r\n  position: relative;\r\n  z-index: 1;\r\n  font-family: var(--vmc-font-mono, 'Roboto Mono', monospace);\r\n  font-size: 13px;\r\n  font-weight: 700;\r\n  color: #ffffff;\r\n  white-space: nowrap;\r\n  font-variant-numeric: tabular-nums;\r\n}\r\n\r\n/* Like (24×24) — abajo a la derecha de la imagen */\r\n.pcard__img-like { position: absolute; bottom: 8px; right: 9px; z-index: 2; }\r\n.pcard--short .pcard__img-like .pcard-like { width: 22px; height: 22px; }\r\n.pcard--short .pcard__img-like .pcard-like svg { width: 12px; height: 12px; }\r\n\r\n/* ── Reduced motion ── */\r\n@media (prefers-reduced-motion: reduce) {\r\n  .pcard, .pcard-like { transition: none; }\r\n  .pcard-like--pop svg { animation: none; }\r\n}\r\n`;\r\n\r\nconst HEART_PATH  = \"M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z\";\r\n\r\nlet _stylesInjected = false;\r\n\r\n// ─── Which variants show price row vs like row ────────────────────────────────\r\n\r\nconst SHOW_PRICE: Record<OfferCardVariant, boolean> = {\r\n  live:       true,   // pprice + price + like\r\n  negotiable: false,  // solo like\r\n};\r\n\r\n// ─── Component ────────────────────────────────────────────────────────────────\r\n\r\nexport default function OfferCard({\r\n  variant,\r\n  size = \"full\",\r\n  name,\r\n  year,\r\n  price,\r\n  imageSrc,\r\n  imageAlt,\r\n  badge,\r\n  liked: controlledLiked,\r\n  onLikeChange,\r\n  onClick,\r\n  \"aria-label\": ariaLabel,\r\n  interactive = true,\r\n  elevated = false,\r\n  className = \"\",\r\n}: OfferCardProps): JSX.Element {\r\n  if (typeof document !== \"undefined\" && !_stylesInjected) {\r\n    if (!document.getElementById(STYLE_ID)) {\r\n      const el = document.createElement(\"style\");\r\n      el.id = STYLE_ID;\r\n      el.textContent = OFFERCARD_STYLES;\r\n      document.head.appendChild(el);\r\n    }\r\n    _stylesInjected = true;\r\n  }\r\n\r\n  const uid = useId().replace(/:/g, \"-\");\r\n\r\n  const isControlled = controlledLiked !== undefined;\r\n  const [internalLiked, setInternalLiked] = useState(false);\r\n  const isLiked = isControlled ? controlledLiked : internalLiked;\r\n  const [popping, setPopping] = useState(false);\r\n\r\n  const handleLike = useCallback((e: React.MouseEvent) => {\r\n    e.stopPropagation();\r\n    const next = !isLiked;\r\n    if (!isControlled) setInternalLiked(next);\r\n    onLikeChange?.(next);\r\n    if (next) {\r\n      setPopping(true);\r\n      setTimeout(() => { setPopping(false); }, 420);\r\n    }\r\n  }, [isLiked, isControlled, onLikeChange]);\r\n\r\n  const showPriceRow = SHOW_PRICE[variant] && (price != null);\r\n  const showLikeRow  = !showPriceRow;\r\n\r\n  const cardClasses = [\r\n    \"pcard\",\r\n    `pcard--${variant}`,\r\n    size === \"short\" ? \"pcard--short\" : \"\",\r\n    interactive ? \"\" : \"pcard--static\",\r\n    elevated ? \"pcard--elevated\" : \"\",\r\n    className,\r\n  ].filter(Boolean).join(\" \");\r\n\r\n  const likeClasses = [\r\n    \"pcard-like\",\r\n    isLiked ? \"pcard-like--active\" : \"\",\r\n    popping ? \"pcard-like--pop\"    : \"\",\r\n  ].filter(Boolean).join(\" \");\r\n\r\n  const svgFill   = isLiked ? \"rgba(255,255,255,0.92)\" : \"#ffffff\";\r\n  const svgStroke = isLiked ? \"none\" : \"#5a35c2\";\r\n\r\n  const LikeBtn = (\r\n    <button\r\n      type=\"button\"\r\n      className={likeClasses}\r\n      onClick={handleLike}\r\n      aria-label={isLiked ? \"Quitar de favoritos\" : \"Agregar a favoritos\"}\r\n      aria-pressed={isLiked}\r\n    >\r\n      <svg\r\n        width=\"15\" height=\"15\"\r\n        viewBox=\"0 0 24 24\"\r\n        fill={svgFill}\r\n        stroke={svgStroke}\r\n        strokeWidth=\"2\"\r\n        strokeLinecap=\"round\"\r\n        strokeLinejoin=\"round\"\r\n        aria-hidden=\"true\"\r\n      >\r\n        <path d={HEART_PATH} />\r\n      </svg>\r\n    </button>\r\n  );\r\n\r\n  // Gema del precio (diamante de subasta) — reutilizada en la fila (full) y en el badge (short)\r\n  const PriceGem = ({ w, h }: { w: number; h: number }): JSX.Element => (\r\n    <svg width={w} height={h} viewBox=\"30 199 28 30\" fill=\"none\" aria-hidden=\"true\">\r\n      <defs>\r\n        <linearGradient id={`${uid}-d`} gradientUnits=\"userSpaceOnUse\" x1=\"32\" y1=\"215.5\" x2=\"55.12\" y2=\"228.11\">\r\n          <stop stopColor=\"#00A7A8\" /><stop offset=\"0.4\" stopColor=\"#86A4E4\" /><stop offset=\"0.75\" stopColor=\"#4C1EBC\" /><stop offset=\"1\" stopColor=\"#300089\" />\r\n        </linearGradient>\r\n        <linearGradient id={`${uid}-ds`} gradientUnits=\"userSpaceOnUse\" x1=\"32\" y1=\"215.5\" x2=\"55.12\" y2=\"228.11\">\r\n          <stop stopColor=\"#73DFDF\" /><stop offset=\"0.28\" stopColor=\"#ffffff\" stopOpacity=\"0.9\" /><stop offset=\"0.875\" stopColor=\"#452AA2\" stopOpacity=\"0.6\" />\r\n        </linearGradient>\r\n        <linearGradient id={`${uid}-c`} gradientUnits=\"userSpaceOnUse\" x1=\"36.01\" y1=\"199.59\" x2=\"51.99\" y2=\"222.41\">\r\n          <stop stopColor=\"#00ABAD\" /><stop offset=\"0.4\" stopColor=\"#86A4E4\" /><stop offset=\"0.75\" stopColor=\"#4C1EBC\" /><stop offset=\"1\" stopColor=\"#31008A\" />\r\n        </linearGradient>\r\n        <linearGradient id={`${uid}-cg`} gradientUnits=\"userSpaceOnUse\" x1=\"44\" y1=\"203\" x2=\"44\" y2=\"219\">\r\n          <stop stopColor=\"#ffffff\" stopOpacity=\"0.45\" /><stop offset=\"0.5\" stopColor=\"#ffffff\" stopOpacity=\"0\" />\r\n        </linearGradient>\r\n        <linearGradient id={`${uid}-cb`} gradientUnits=\"userSpaceOnUse\" x1=\"36.01\" y1=\"199.59\" x2=\"51.99\" y2=\"222.41\">\r\n          <stop stopColor=\"#44D6D6\" /><stop offset=\"0.207\" stopColor=\"#E4EEFF\" stopOpacity=\"0.5\" /><stop offset=\"0.495\" stopColor=\"#567CD3\" /><stop offset=\"1\" stopColor=\"#3D0D9E\" />\r\n        </linearGradient>\r\n      </defs>\r\n      <path d=\"M44 215.5L56 221L44 226.5L32 221L44 215.5Z\" fill={`url(#${uid}-d)`} />\r\n      <path d=\"M44 215.5L56 221L44 226.5L32 221L44 215.5\" stroke={`url(#${uid}-ds)`} strokeWidth=\"2\" strokeLinejoin=\"round\" />\r\n      <rect x=\"34\" y=\"201\" width=\"20\" height=\"20\" rx=\"10\" fill={`url(#${uid}-c)`} />\r\n      <rect x=\"36\" y=\"203\" width=\"16\" height=\"16\" rx=\"8\" fill={`url(#${uid}-cg)`} />\r\n      <rect x=\"35\" y=\"202\" width=\"18\" height=\"18\" rx=\"9\" stroke={`url(#${uid}-cb)`} strokeWidth=\"2\" />\r\n      <path d=\"M44 206.417V215.583\" stroke=\"#ffffff\" strokeOpacity=\"0.92\" strokeWidth=\"1.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\r\n      <path d=\"M46.0833 208.083H42.9583C42.1535 208.083 41.5 208.737 41.5 209.542C41.5 210.347 42.1535 211 42.9583 211H45.0417C45.8465 211 46.5 211.653 46.5 212.458C46.5 213.263 45.8465 213.917 45.0417 213.917H41.5\" stroke=\"#ffffff\" strokeOpacity=\"0.92\" strokeWidth=\"1.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\r\n    </svg>\r\n  );\r\n\r\n  // ── Short variant: imagen con precio + like overlay, luego título/año, barra por ::after ──\r\n  if (size === \"short\") {\r\n    return (\r\n      <>\r\n        <style id={`${STYLE_ID}-ssr`} suppressHydrationWarning dangerouslySetInnerHTML={{ __html: OFFERCARD_STYLES }} />\r\n        <article\r\n          className={cardClasses}\r\n          onClick={onClick}\r\n          aria-label={ariaLabel ?? name}\r\n          role={onClick ? \"button\" : undefined}\r\n          tabIndex={onClick ? 0 : undefined}\r\n        >\r\n          <div className=\"pcard__img\">\r\n            {imageSrc && <img src={imageSrc} alt={imageAlt ?? name} loading=\"lazy\" />}\r\n            {showPriceRow && (\r\n              <div className=\"pcard__price-badge\">\r\n                <span className=\"pcard__price-badge-gem\"><PriceGem w={20} h={22} /></span>\r\n                <span className=\"pcard__price-badge-text\">{price}</span>\r\n              </div>\r\n            )}\r\n            <div className=\"pcard__img-like\">{LikeBtn}</div>\r\n          </div>\r\n          <div className=\"pcard__body--short\">\r\n            <h3 className=\"pcard__name\">{name}</h3>\r\n            <p className=\"pcard__year\">{String(year)}</p>\r\n          </div>\r\n        </article>\r\n      </>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <>\r\n      <style\r\n        id={`${STYLE_ID}-ssr`}\r\n        suppressHydrationWarning\r\n        dangerouslySetInnerHTML={{ __html: OFFERCARD_STYLES }}\r\n      />\r\n      <article\r\n        className={cardClasses}\r\n        onClick={onClick}\r\n        aria-label={ariaLabel ?? name}\r\n        role={onClick ? \"button\" : undefined}\r\n        tabIndex={onClick ? 0 : undefined}\r\n        onKeyDown={function handleKey(e) {\r\n          if (onClick && (e.key === \"Enter\" || e.key === \" \")) onClick();\r\n        }}\r\n      >\r\n        {/* Image */}\r\n        <div className=\"pcard__img\">\r\n          {imageSrc && (\r\n            <img src={imageSrc} alt={imageAlt ?? name} loading=\"lazy\" />\r\n          )}\r\n          {badge && (\r\n            <div className=\"pcard__img-badge\">{badge}</div>\r\n          )}\r\n        </div>\r\n\r\n        {/* Body */}\r\n        <div className=\"pcard__body\">\r\n          <div className=\"pcard__meta\">\r\n            <h3 className=\"pcard__name\">{name}</h3>\r\n            <p className=\"pcard__year\">{String(year)}</p>\r\n          </div>\r\n\r\n          {/* Price row — live / proxima / when price provided */}\r\n          {showPriceRow && (\r\n            <div className=\"pcard__price-row\">\r\n              <div className=\"pcard__price-left\">\r\n                <div className=\"pcard-pprice\" aria-hidden=\"true\">\r\n                  <PriceGem w={30} h={32} />\r\n                </div>\r\n                <span className=\"pcard__price-text\">{price}</span>\r\n              </div>\r\n              {LikeBtn}\r\n            </div>\r\n          )}\r\n\r\n          {/* Like row — negotiable / expired (no price shown) */}\r\n          {showLikeRow && (\r\n            <div className=\"pcard__like-row\">\r\n              {LikeBtn}\r\n            </div>\r\n          )}\r\n        </div>\r\n      </article>\r\n    </>\r\n  );\r\n}\r\n"
    },
    {
      "path": "components/BadgeStatus.tsx",
      "type": "registry:file",
      "target": "components/BadgeStatus.tsx",
      "content": "\"use client\";\r\n\r\n/**\r\n * BadgeStatus — Generado por Concorde\r\n * Fuente: https://voyager-ds.vercel.app/preview/components/pase1\r\n * Generado: 2026-05-28\r\n *\r\n * Pill badge de estado de subasta: EN VIVO (animated dot) · PRÓXIMA (blinking clock)\r\n */\r\n\r\nimport type { JSX } from \"react\";\r\n\r\n// ─── Types ────────────────────────────────────────────────────────────────────\r\n\r\nexport type BadgeStatusVariant = \"live\" | \"proxima\";\r\n\r\nexport interface BadgeStatusProps {\r\n  variant: BadgeStatusVariant;\r\n  /** Override de label / contenido editable (default: \"EN VIVO\" / \"PRÓXIMA\") */\r\n  label?: string;\r\n  /** Muestra el dot (live) / reloj (proxima). false = solo el texto. Default true. */\r\n  icon?: boolean;\r\n  className?: string;\r\n}\r\n\r\n// ─── Self-contained CSS ───────────────────────────────────────────────────────\r\n\r\nconst STYLE_ID = \"concorde-badgestatus-styles\";\r\n\r\nconst BADGESTATUS_STYLES = `\r\n/* Pulso del punto EN VIVO — frames exactos del SVG: On (6px, opacidad 1) ↔ On-1 (4px, 0.28) */\r\n@keyframes badgestatus-live-pulse {\r\n  0%, 100% { opacity: 1; transform: scale(1); }\r\n  50%      { opacity: 0.28; transform: scale(0.67); }\r\n}\r\n\r\n/* Parpadeo del reloj PRÓXIMA — On (sólido) ↔ Off (0.28) */\r\n@keyframes badgestatus-clock-blink {\r\n  0%, 100% { opacity: 1; transform: scale(1); }\r\n  50%      { opacity: 0.28; transform: scale(0.85); }\r\n}\r\n\r\n/* ── Base pill ── */\r\n.badgestatus {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 5px;\r\n  padding: 3px 8px 3px 6px;\r\n  border-radius: 9999px;\r\n  font-family: var(--vmc-font-display, 'Plus Jakarta Sans', system-ui, sans-serif);\r\n  font-size: 9px;\r\n  font-weight: 700;\r\n  letter-spacing: 0.07em;\r\n  text-transform: uppercase;\r\n  white-space: nowrap;\r\n  backdrop-filter: blur(6px);\r\n  -webkit-backdrop-filter: blur(6px);\r\n  color: oklch(1 0 0);\r\n  border: 1px solid transparent;\r\n  user-select: none;\r\n}\r\n\r\n/* ── EN VIVO — sync EXACTO SVG (1310:11895 / 11904) ──\r\n   bg naranja diagonal + borde gradiente cálido + ring naranja */\r\n.badgestatus--live {\r\n  background-image:\r\n    linear-gradient(135deg, #ff9639 0%, #ef852e 40%, #be3d00 100%),\r\n    linear-gradient(135deg, #ffbc83 0%, rgba(255,255,255,0.45) 40%, #da6c1e 75%, #ffbc83 100%);\r\n  background-origin: padding-box, border-box;\r\n  background-clip: padding-box, border-box;\r\n  box-shadow:\r\n    rgba(239, 133, 46, 0.45) 0px 2px 10px,\r\n    rgba(255, 255, 255, 0.14) 0px 1px 0px inset;\r\n}\r\n\r\n/* ── PRÓXIMA — sync EXACTO SVG (1310:11797 / 11799) ──\r\n   bg morado diagonal + borde gradiente lila + glow morado #200068 */\r\n.badgestatus--proxima {\r\n  background-image:\r\n    linear-gradient(135deg, #8460e5 0%, #3b1782 100%),\r\n    linear-gradient(135deg, #8776ff 0%, rgba(255,255,255,0.4) 38%, #532bc7 68%, #8776ff 100%);\r\n  background-origin: padding-box, border-box;\r\n  background-clip: padding-box, border-box;\r\n  box-shadow:\r\n    rgba(32, 0, 104, 0.5) 0px 2px 10px,\r\n    rgba(255, 255, 255, 0.1) 0px 1px 0px inset;\r\n}\r\n\r\n/* ── Pulsing dot (live) ── */\r\n.badgestatus-dot {\r\n  width: 6px;\r\n  height: 6px;\r\n  border-radius: 9999px;\r\n  background: #ffffff;\r\n  flex-shrink: 0;\r\n  animation: badgestatus-live-pulse 1.4s ease-in-out infinite;\r\n  position: relative;\r\n}\r\n\r\n/* ── Blinking clock (proxima) ── */\r\n.badgestatus-clock {\r\n  flex-shrink: 0;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  animation: badgestatus-clock-blink 1.4s ease-in-out infinite;\r\n}\r\n\r\n/* ── Reduced motion ── */\r\n@media (prefers-reduced-motion: reduce) {\r\n  .badgestatus-dot   { animation: none; }\r\n  .badgestatus-clock { animation: none; }\r\n}\r\n`;\r\n\r\nlet _stylesInjected = false;\r\n\r\n// ─── Clock SVG (Próxima) ──────────────────────────────────────────────────────\r\n\r\nfunction ClockIcon(): JSX.Element {\r\n  return (\r\n    <svg\r\n      width=\"10\"\r\n      height=\"10\"\r\n      viewBox=\"0 0 24 24\"\r\n      fill=\"none\"\r\n      stroke=\"rgba(255,255,255,0.92)\"\r\n      strokeWidth=\"2.2\"\r\n      strokeLinecap=\"round\"\r\n      strokeLinejoin=\"round\"\r\n      aria-hidden=\"true\"\r\n    >\r\n      <circle cx=\"12\" cy=\"12\" r=\"10\" />\r\n      <polyline points=\"12 6 12 12 16 14\" />\r\n    </svg>\r\n  );\r\n}\r\n\r\n// ─── Component ────────────────────────────────────────────────────────────────\r\n\r\nconst LABEL_DEFAULTS: Record<BadgeStatusVariant, string> = {\r\n  live:    \"EN VIVO\",\r\n  proxima: \"PRÓXIMA\",\r\n};\r\n\r\nexport default function BadgeStatus({\r\n  variant,\r\n  label,\r\n  icon = true,\r\n  className = \"\",\r\n}: BadgeStatusProps): JSX.Element {\r\n  if (typeof document !== \"undefined\" && !_stylesInjected) {\r\n    if (!document.getElementById(STYLE_ID)) {\r\n      const el = document.createElement(\"style\");\r\n      el.id = STYLE_ID;\r\n      el.textContent = BADGESTATUS_STYLES;\r\n      document.head.appendChild(el);\r\n    }\r\n    _stylesInjected = true;\r\n  }\r\n\r\n  const displayLabel = label ?? LABEL_DEFAULTS[variant];\r\n\r\n  const classes = [\r\n    \"badgestatus\",\r\n    `badgestatus--${variant}`,\r\n    className,\r\n  ].filter(Boolean).join(\" \");\r\n\r\n  return (\r\n    <>\r\n      <style\r\n        id={`${STYLE_ID}-ssr`}\r\n        suppressHydrationWarning\r\n        dangerouslySetInnerHTML={{ __html: BADGESTATUS_STYLES }}\r\n      />\r\n      <span\r\n        className={classes}\r\n        role=\"status\"\r\n        aria-label={displayLabel}\r\n      >\r\n        {icon && variant === \"live\" ? (\r\n          <span className=\"badgestatus-dot\" aria-hidden=\"true\" />\r\n        ) : null}\r\n        {icon && variant === \"proxima\" ? (\r\n          <span className=\"badgestatus-clock\" aria-hidden=\"true\">\r\n            <ClockIcon />\r\n          </span>\r\n        ) : null}\r\n        <span>{displayLabel}</span>\r\n      </span>\r\n    </>\r\n  );\r\n}\r\n"
    },
    {
      "path": "components/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/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/OfferType.tsx",
      "type": "registry:file",
      "target": "components/OfferType.tsx",
      "content": "\"use client\";\r\n\r\n/**\r\n * OfferType — Generado por Concorde\r\n * Fuente: https://voyager-ds.vercel.app/preview/components/pase1\r\n * Generado: 2026-05-28\r\n * EDITAR LIBREMENTE después de generar\r\n */\r\n\r\nimport type { JSX } from \"react\";\r\n\r\n// ─── Types ────────────────────────────────────────────────────────────────────\r\n\r\nexport type OfferTypeVariant = \"negotiable\" | \"live\";\r\n\r\nexport interface OfferTypeProps {\r\n  /** Variante: \"negotiable\" = teal NEGOCIABLE · \"live\" = orange EN VIVO */\r\n  variant: OfferTypeVariant;\r\n  /** Texto del header (por defecto: NEGOCIABLE / EN VIVO) */\r\n  label?: string;\r\n  /** Texto del CTA inferior (por defecto: VER TODAS) */\r\n  ctaLabel?: string;\r\n  /** Callback al hacer click */\r\n  onClick?: () => void;\r\n  /** Aria label accesible */\r\n  \"aria-label\"?: string;\r\n  className?: string;\r\n}\r\n\r\n// ─── Defaults ─────────────────────────────────────────────────────────────────\r\n\r\nconst LABEL_DEFAULTS: Record<OfferTypeVariant, string> = {\r\n  negotiable: \"NEGOCIABLE\",\r\n  live:       \"EN VIVO\",\r\n};\r\n\r\n// ─── Self-contained CSS ───────────────────────────────────────────────────────\r\n\r\nconst STYLE_ID = \"concorde-poftype-styles\";\r\n\r\nconst POFTYPE_STYLES = `\r\n.poftype {\r\n  width: 110px;\r\n  border-radius: var(--vmc-radius-md, 8px);\r\n  overflow: hidden;\r\n  cursor: pointer;\r\n  position: relative;\r\n  box-shadow:\r\n    oklch(0 0 0 / 0.12) 0px 4px 16px,\r\n    oklch(0 0 0 / 0.06) 0px 1px 4px;\r\n  transition:\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  outline: none;\r\n  background: none;\r\n  border: none;\r\n  padding: 0;\r\n  display: block;\r\n  text-align: left;\r\n}\r\n\r\n/* ── Top (colored section) ── */\r\n.poftype-top {\r\n  height: 60px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  position: relative;\r\n  overflow: hidden;\r\n  transition: background 0.22s;\r\n}\r\n\r\n/* Top glass highlight */\r\n.poftype-top::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: 0;\r\n  background: linear-gradient(oklch(1 0 0 / 0.07) 0%, transparent 60%);\r\n  pointer-events: none;\r\n  z-index: 1;\r\n}\r\n\r\n/* Top bottom edge shadow */\r\n.poftype-top::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  bottom: 0;\r\n  left: 0;\r\n  right: 0;\r\n  height: 3px;\r\n  background: linear-gradient(transparent 0%, oklch(0 0 0 / 0.08) 100%);\r\n  pointer-events: none;\r\n  z-index: 1;\r\n}\r\n\r\n/* ── Label ── */\r\n.poftype-label {\r\n  font-family: var(--vmc-font-display, \"Plus Jakarta Sans\", system-ui, sans-serif);\r\n  font-size: 13px;\r\n  font-weight: 800;\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.04em;\r\n  color: oklch(1 0 0);\r\n  text-shadow: oklch(0 0 0 / 0.25) 0px 1px 3px;\r\n  position: relative;\r\n  z-index: 2;\r\n}\r\n\r\n/* ── Bottom (white CTA section) ── */\r\n.poftype-bottom {\r\n  height: 32px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  background: oklch(1 0 0);\r\n}\r\n\r\n/* ── CTA text ── */\r\n.poftype-cta {\r\n  font-family: var(--vmc-font-display, \"Plus Jakarta Sans\", system-ui, sans-serif);\r\n  font-size: 10px;\r\n  font-weight: 700;\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.1em;\r\n  transition: color 0.22s;\r\n}\r\n\r\n/* ── NEGOTIABLE — sync EXACTO SVG (1159:5710 / 5740 / 5928) ──\r\n   header teal horizontal · footer #FFFAFC · CTA #009699 · ring teal */\r\n.poftype--negotiable {\r\n  box-shadow:\r\n    rgba(0, 210, 211, 0.4) 0px 0px 0px 1.5px,\r\n    rgba(0, 0, 0, 0.1) 0px 4px 14px,\r\n    rgba(0, 0, 0, 0.06) 0px 1px 4px;\r\n}\r\n\r\n.poftype--negotiable .poftype-top {\r\n  background: linear-gradient(90deg, #00edee 0%, #00d2d3 50%, #009597 100%);\r\n}\r\n\r\n.poftype--negotiable .poftype-bottom {\r\n  background: #fffafc;\r\n}\r\n\r\n.poftype--negotiable .poftype-cta {\r\n  color: #009699;\r\n}\r\n\r\n.poftype--negotiable:hover {\r\n  box-shadow:\r\n    rgba(0, 210, 211, 0.55) 0px 0px 0px 1.5px,\r\n    rgba(32, 0, 104, 0.11) 0px 10px 18px,\r\n    rgba(32, 0, 104, 0.08) 0px 3px 7px,\r\n    rgba(32, 0, 104, 0.05) 0px 1px 2px;\r\n}\r\n\r\n/* Pressed: header teal oscuro (SVG 1159:5928) */\r\n.poftype--negotiable:active .poftype-top {\r\n  background: linear-gradient(180deg, #00adaf 0%, #008c8e 100%);\r\n}\r\n\r\n/* ── LIVE / EN VIVO — sync EXACTO SVG (1159:5690 / 5884 / 1177:5972) ──\r\n   header naranja diagonal · footer #FFF8FA · CTA #BE3E00 · ring naranja */\r\n.poftype--live {\r\n  box-shadow:\r\n    rgba(239, 133, 46, 0.4) 0px 0px 0px 1.5px,\r\n    rgba(0, 0, 0, 0.1) 0px 4px 14px,\r\n    rgba(0, 0, 0, 0.06) 0px 1px 4px;\r\n}\r\n\r\n.poftype--live .poftype-top {\r\n  background: linear-gradient(120deg, #ff9639 0%, #ef852e 50%, #be3d00 100%);\r\n}\r\n\r\n.poftype--live .poftype-bottom {\r\n  background: #fff8fa;\r\n}\r\n\r\n.poftype--live .poftype-cta {\r\n  color: #be3e00;\r\n}\r\n\r\n/* Live hover: el SVG mantiene el ring naranja 0.4 (sin drops extra); el lift lo da el transform */\r\n\r\n/* Pressed: header naranja oscuro (SVG 1177:5972) */\r\n.poftype--live:active .poftype-top {\r\n  background: linear-gradient(180deg, #ce4900 0%, #ac3500 100%);\r\n}\r\n\r\n/* ── Hover (shared) ── */\r\n.poftype:hover:not(.poftype--focus):not(:active) {\r\n  transform: translateY(-4px) scale(1.015);\r\n}\r\n\r\n.poftype:hover .poftype-top::before {\r\n  background: linear-gradient(oklch(1 0 0 / 0.26) 0%, transparent 50%);\r\n}\r\n\r\n/* ── Focus/pressed (shared) ── */\r\n.poftype:active,\r\n.poftype--focus {\r\n  opacity: 0.58 !important;\r\n  transform: scale(0.97) !important;\r\n  box-shadow:\r\n    oklch(0 0 0 / 0.1) 0px 2px 8px,\r\n    oklch(0 0 0 / 0.12) 0px 2px 6px inset !important;\r\n}\r\n\r\n/* ── Keyboard focus ring (WCAG) ── */\r\n.poftype:focus-visible {\r\n  outline: 2px solid var(--vmc-color-vault-400, oklch(0.62 0.20 285));\r\n  outline-offset: 3px;\r\n}\r\n\r\n/* ── Reduced motion ── */\r\n@media (prefers-reduced-motion: reduce) {\r\n  .poftype,\r\n  .poftype-top,\r\n  .poftype-cta { transition: none; }\r\n}\r\n`;\r\n\r\nlet _stylesInjected = false;\r\n\r\n// ─── Component ────────────────────────────────────────────────────────────────\r\n\r\nexport default function OfferType({\r\n  variant,\r\n  label,\r\n  ctaLabel = \"VER TODAS\",\r\n  onClick,\r\n  \"aria-label\": ariaLabel,\r\n  className = \"\",\r\n}: OfferTypeProps): JSX.Element {\r\n  const displayLabel = label ?? LABEL_DEFAULTS[variant];\r\n\r\n  // Inyectar estilos una vez (SSR + CSR)\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 = POFTYPE_STYLES;\r\n      document.head.appendChild(el);\r\n    }\r\n    _stylesInjected = true;\r\n  }\r\n\r\n  const classes = [\r\n    \"poftype\",\r\n    `poftype--${variant}`,\r\n    className,\r\n  ]\r\n    .filter(Boolean)\r\n    .join(\" \");\r\n\r\n  return (\r\n    <>\r\n      <style\r\n        id={`${STYLE_ID}-ssr`}\r\n        suppressHydrationWarning\r\n        dangerouslySetInnerHTML={{ __html: POFTYPE_STYLES }}\r\n      />\r\n      <button\r\n        type=\"button\"\r\n        className={classes}\r\n        onClick={onClick}\r\n        aria-label={ariaLabel ?? `${displayLabel} — ${ctaLabel}`}\r\n      >\r\n        <div className=\"poftype-top\">\r\n          <span className=\"poftype-label\">{displayLabel}</span>\r\n        </div>\r\n        <div className=\"poftype-bottom\">\r\n          <span className=\"poftype-cta\">{ctaLabel}</span>\r\n        </div>\r\n      </button>\r\n    </>\r\n  );\r\n}\r\n"
    },
    {
      "path": "components/CategoryCard.tsx",
      "type": "registry:file",
      "target": "components/CategoryCard.tsx",
      "content": "\"use client\";\r\n\r\n/**\r\n * CategoryCard — 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\r\nimport { useId } from \"react\";\r\nimport type { JSX } from \"react\";\r\n\r\n// ─── Types ────────────────────────────────────────────────────────────────────\r\n\r\nexport type CategoryCardCategory =\r\n  | \"vehicular\"\r\n  | \"maquinaria\"\r\n  | \"equipos-diversos\"\r\n  | \"articulos-diversos\";\r\n\r\nexport interface CategoryCardProps {\r\n  /** Categoría — determina ícono y label por defecto */\r\n  category: CategoryCardCategory;\r\n  /** Override del label (default: nombre de categoría) */\r\n  label?: string;\r\n  /** Handler de click */\r\n  onClick?: () => void;\r\n  /** Aria label accesible */\r\n  \"aria-label\"?: string;\r\n  className?: string;\r\n}\r\n\r\n// ─── Label defaults ───────────────────────────────────────────────────────────\r\n\r\nconst LABEL_DEFAULTS: Record<CategoryCardCategory, string> = {\r\n  \"vehicular\":         \"VEHICULAR\",\r\n  \"maquinaria\":        \"MAQUINARIA\",\r\n  \"equipos-diversos\":  \"EQUIPOS\\nDIVERSOS\",\r\n  \"articulos-diversos\":\"ARTÍCULOS\\nDIVERSOS\",\r\n};\r\n\r\n// ─── Self-contained CSS ───────────────────────────────────────────────────────\r\n\r\nconst STYLE_ID = \"concorde-pcatcard-styles\";\r\n\r\nconst PCATCARD_STYLES = `\r\n/* Card — sync EXACTO SVG (1807:15166 / 15183 / 1230:3327 / 3616):\r\n   bg blanco→#F4F5F9 · borde gradiente lila · sombra morada #200068 */\r\n.pcatcard {\r\n  width: 92px;\r\n  height: 95px;\r\n  border-radius: var(--vmc-radius-md, 8px);\r\n  border: 1px solid transparent;\r\n  background-image:\r\n    linear-gradient(160deg, #ffffff 0%, #f4f5f9 100%),\r\n    linear-gradient(135deg, #9c96f8 0%, rgba(255,255,255,0.65) 38%, #7364de 70%, #9c96f8 100%);\r\n  background-origin: padding-box, border-box;\r\n  background-clip: padding-box, border-box;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding: 0 8px;\r\n  gap: 8px;\r\n  cursor: pointer;\r\n  position: relative;\r\n  overflow: hidden;\r\n  box-shadow:\r\n    rgba(32, 0, 104, 0.08) 0px 2px 10px,\r\n    rgba(32, 0, 104, 0.05) 0px 1px 3px;\r\n  transition:\r\n    transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1),\r\n    box-shadow 0.22s,\r\n    background-image 0.22s;\r\n  transform: translateZ(0);\r\n  outline: none;\r\n  background-color: transparent;\r\n  border-style: solid;\r\n  text-align: center;\r\n}\r\n\r\n/* Glass highlight */\r\n.pcatcard::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: 0;\r\n  border-radius: inherit;\r\n  background: linear-gradient(160deg, rgba(255,255,255,0.55) 0%, transparent 50%);\r\n  pointer-events: none;\r\n  z-index: 1;\r\n}\r\n\r\n/* Radial glow below card */\r\n.pcatcard::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: -6px;\r\n  border-radius: inherit;\r\n  background: radial-gradient(at 50% 60%, oklch(0.4 0.2 285 / 0.22) 0%, transparent 70%);\r\n  filter: blur(8px);\r\n  opacity: 0;\r\n  z-index: -1;\r\n  transition: opacity 0.28s;\r\n}\r\n\r\n/* Icon wrapper */\r\n.pcatcard-icon-wrap {\r\n  width: 36px;\r\n  height: 36px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex-shrink: 0;\r\n  color: var(--vmc-color-vault, oklch(0.22 0.18 285));\r\n  position: relative;\r\n  z-index: 2;\r\n}\r\n\r\n/* Label */\r\n.pcatcard-label {\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  text-transform: uppercase;\r\n  letter-spacing: 0.06em;\r\n  color: #3b1782;\r\n  text-align: center;\r\n  line-height: 1.35;\r\n  position: relative;\r\n  z-index: 2;\r\n  white-space: pre-line;\r\n}\r\n\r\n/* Hover */\r\n.pcatcard:hover {\r\n  transform: translateY(-4px);\r\n  box-shadow:\r\n    oklch(0.22 0.18 285 / 0.14) 0px 12px 20px,\r\n    oklch(0.22 0.18 285 / 0.1) 0px 4px 8px,\r\n    oklch(0.22 0.18 285 / 0.06) 0px 1px 2px;\r\n  background-image:\r\n    linear-gradient(160deg, oklch(0.97 0.01 285) 0%, oklch(0.99 0.004 285) 100%),\r\n    linear-gradient(135deg,\r\n      oklch(0.52 0.22 285) 0%,\r\n      oklch(1 0 0 / 0.8) 38%,\r\n      oklch(0.4 0.24 285) 72%,\r\n      oklch(0.52 0.22 285) 100%\r\n    );\r\n}\r\n\r\n.pcatcard:hover::after {\r\n  opacity: 0.3;\r\n}\r\n\r\n/* Focus / pressed */\r\n.pcatcard:active {\r\n  opacity: 0.58;\r\n  transform: scale(0.96) !important;\r\n  background-image:\r\n    linear-gradient(160deg, oklch(0.94 0.012 285) 0%, oklch(0.9 0.018 285) 100%),\r\n    linear-gradient(135deg,\r\n      oklch(0.72 0.14 285) 0%,\r\n      oklch(1 0 0 / 0.65) 38%,\r\n      oklch(0.58 0.18 285) 70%,\r\n      oklch(0.72 0.14 285) 100%\r\n    ) !important;\r\n  box-shadow:\r\n    oklch(0.22 0.18 285 / 0.12) 0px 1px 5px,\r\n    oklch(0.22 0.18 285 / 0.08) 0px 1px 3px inset !important;\r\n}\r\n\r\n/* Keyboard focus ring */\r\n.pcatcard:focus-visible {\r\n  outline: 2px solid var(--vmc-color-vault-400, oklch(0.62 0.20 285));\r\n  outline-offset: 3px;\r\n}\r\n\r\n/* Reduced motion */\r\n@media (prefers-reduced-motion: reduce) {\r\n  .pcatcard,\r\n  .pcatcard::after { transition: none; }\r\n}\r\n`;\r\n\r\nlet _stylesInjected = false;\r\n\r\n// ─── Icon components (gradient stroke, unique IDs per instance) ───────────────\r\n\r\ninterface IconProps { gradId: string; }\r\n\r\n// Íconos RELLENOS — paths exactos del SVG export de Figma (gradiente morado #653DE9→#0F003B).\r\n// Mapeo (confirmar con diseño): car→vehicular · grúa→maquinaria · medidor→equipos · monitor→artículos.\r\n\r\nfunction IconVehicular({ gradId }: IconProps): JSX.Element {\r\n  // SVG 1230:3327 — carro (cabina + 2 ruedas)\r\n  return (\r\n    <svg width=\"34\" height=\"34\" viewBox=\"41 29 31 27\" fill=\"none\" aria-hidden=\"true\">\r\n      <defs>\r\n        <linearGradient id={gradId} gradientUnits=\"userSpaceOnUse\" x1=\"42.5\" y1=\"30\" x2=\"64.06\" y2=\"55.16\">\r\n          <stop stopColor=\"#5F3ED8\" />\r\n          <stop offset=\"0.5\" stopColor=\"#340091\" />\r\n          <stop offset=\"1\" stopColor=\"#140046\" />\r\n        </linearGradient>\r\n      </defs>\r\n      <path fill={`url(#${gradId})`} d=\"M49.8053 30.4693C48.7705 30.7374 47.8575 31.8771 47.0662 33.7542C45.9705 36.3017 45.7271 36.5698 44.2053 36.1676C42.7445 35.8324 42.501 36.0335 42.501 37.2402C42.501 37.9777 42.8662 38.7821 43.2314 38.9162C43.8401 39.1844 43.9618 41.1955 43.8401 46.6257L43.5966 54H45.4836C46.9445 54 47.4314 53.6648 47.7358 52.324L48.101 50.648H56.501H64.901L65.2662 52.324C65.5705 53.6648 66.0575 54 67.5184 54H69.4053L69.1618 46.6257C69.0401 41.1955 69.1618 39.1844 69.7705 38.9162C70.1358 38.7821 70.501 37.9777 70.501 37.2402C70.501 36.0335 70.2575 35.8324 68.7966 36.1676C67.2749 36.5698 67.0314 36.3017 65.9358 33.7542C64.4749 30.3352 63.6227 30 56.501 30C53.6401 30 50.6575 30.2011 49.8053 30.4693ZM61.4923 32.2793C63.4401 32.6816 63.8053 33.0838 64.7184 35.6983C65.2662 37.3073 65.5705 38.8492 65.3271 39.1173C64.7792 39.7207 48.2227 39.7207 47.6749 39.1173C47.4314 38.8492 47.7358 37.3073 48.2836 35.6313C49.1358 33.2849 49.6836 32.5475 50.9618 32.3464C53.6401 31.8771 59.1184 31.8771 61.4923 32.2793ZM49.7445 42.5363C50.901 43.3408 50.0488 44.6145 48.2836 44.6145C47.4314 44.6145 46.5184 44.0112 46.1532 43.2737C45.5445 42.067 45.6662 41.933 47.1879 41.933C48.101 41.933 49.2575 42.2011 49.7445 42.5363ZM66.8488 43.2737C66.1184 44.7486 63.5618 45.0838 62.8314 43.8771C62.2836 42.8715 63.6836 41.933 65.814 41.933C67.3358 41.933 67.4575 42.067 66.8488 43.2737ZM60.9445 47.2961C60.6401 48.5028 60.0923 48.6369 56.501 48.6369C52.9097 48.6369 52.3618 48.5028 52.0575 47.2961C51.7532 46.0223 52.0575 45.9553 56.501 45.9553C60.9445 45.9553 61.2488 46.0223 60.9445 47.2961Z\" />\r\n    </svg>\r\n  );\r\n}\r\n\r\nfunction IconMaquinaria({ gradId }: IconProps): JSX.Element {\r\n  // SVG 1230:3616 — grúa / estructura\r\n  return (\r\n    <svg width=\"34\" height=\"34\" viewBox=\"41 27 30 30\" fill=\"none\" aria-hidden=\"true\">\r\n      <defs>\r\n        <linearGradient id={gradId} gradientUnits=\"userSpaceOnUse\" x1=\"42\" y1=\"27.84\" x2=\"42\" y2=\"55.84\">\r\n          <stop stopColor=\"#653DE9\" />\r\n          <stop offset=\"0.55\" stopColor=\"#300089\" />\r\n          <stop offset=\"1\" stopColor=\"#0F003B\" />\r\n        </linearGradient>\r\n      </defs>\r\n      <path fillRule=\"evenodd\" clipRule=\"evenodd\" fill={`url(#${gradId})`} d=\"M70 32.5046V30.949C70 30.0905 69.303 29.3934 68.4444 29.3934H52.8889V27.8379H48.2222V29.3934H46.6667V32.5046H48.2222V46.5046H46.6667V43.3934H43.5556V46.5046H42V49.6157H43.5556V55.8379H46.6667V49.6157H54.4444V55.8379H57.5556V54.1579V49.6157H59.1111V46.5046H57.5556V43.3934H54.4444V46.5046H52.8889V32.5046H65.3333V39.6912C64.6022 39.9557 64.0733 40.6401 64.0733 41.4646C64.0733 42.149 64.4467 42.7712 65.0222 43.1134V44.949H65.9867C66.5156 44.949 66.9356 45.3846 66.9356 45.9134C66.9356 46.4423 66.5156 46.8779 65.9867 46.8779C65.6444 46.8779 65.3333 46.6912 65.1622 46.3957C64.8822 45.9446 64.3067 45.789 63.8556 46.0534C63.3889 46.3023 63.2333 46.8934 63.4978 47.3601C64.0111 48.2312 64.96 48.7912 65.9867 48.7912C67.5578 48.7912 68.8489 47.5001 68.8489 45.9134C68.8489 44.7001 68.0711 43.6112 66.9356 43.2068V43.1134C67.5267 42.7712 67.9 42.149 67.9 41.4646C67.9 40.749 67.48 40.1423 66.8889 39.8157V32.5046H70ZM51.3333 44.4201L49.7778 45.9757V43.7668L51.3333 42.2112V44.4201ZM51.3333 39.8312L49.7778 41.3868V39.1779L51.3333 37.6223V39.8312ZM49.7778 36.7201V34.5112L51.3333 32.9557V35.1646L49.7778 36.7201Z\" />\r\n    </svg>\r\n  );\r\n}\r\n\r\nfunction IconEquiposDiversos({ gradId }: IconProps): JSX.Element {\r\n  // SVG 1807:15166 — medidor / herramienta\r\n  return (\r\n    <svg width=\"34\" height=\"34\" viewBox=\"40 25 30 24\" fill=\"none\" aria-hidden=\"true\">\r\n      <defs>\r\n        <linearGradient id={gradId} gradientUnits=\"userSpaceOnUse\" x1=\"41\" y1=\"26\" x2=\"41\" y2=\"48\">\r\n          <stop stopColor=\"#653DE9\" />\r\n          <stop offset=\"0.55\" stopColor=\"#300089\" />\r\n          <stop offset=\"1\" stopColor=\"#0F003B\" />\r\n        </linearGradient>\r\n      </defs>\r\n      <path fillRule=\"evenodd\" clipRule=\"evenodd\" fill={`url(#${gradId})`} d=\"M56.4 35.4479C57.1727 35.4479 57.8 36.0526 57.8 36.7975C57.8 37.5425 57.1727 38.1472 56.4 38.1472C55.6273 38.1472 55 37.5425 55 36.7975C55 36.0526 55.6273 35.4479 56.4 35.4479ZM49.204 29.0368C50.996 27.1742 53.558 26 56.4 26C61.3 26 65.416 29.5227 66.102 34.0982H69V36.7975H60.6C60.6 34.5628 58.718 32.7485 56.4 32.7485C54.082 32.7485 52.2 34.5628 52.2 36.7975H41V34.0982H41.07C41.35 31.0344 42.596 28.2405 44.5 26L49.204 29.0368ZM47.622 31.2503L45.284 29.7387C44.542 31.0613 44.052 32.5325 43.884 34.0982H46.698C46.852 33.0859 47.16 32.1276 47.622 31.2503ZM48.56 41.3865L46.6 39.4969H54.706C55.042 40.0638 55.7 40.4417 56.4 40.4417C57.1 40.4417 57.758 40.0638 58.094 39.4969H66.2V41.3865C63.946 40.0638 64.044 41.8589 64.044 41.8589V44.5043L61.3 47.1497C60.6 44.7877 59.34 46.1104 59.34 46.1104L57.38 48H53.46C54.832 45.827 52.97 45.9215 52.97 45.9215H50.226L47.482 43.2761C49.932 42.6147 48.56 41.3865 48.56 41.3865Z\" />\r\n    </svg>\r\n  );\r\n}\r\n\r\nfunction IconArticulosDiversos({ gradId }: IconProps): JSX.Element {\r\n  // SVG 1807:15183 — monitor / pantalla\r\n  return (\r\n    <svg width=\"34\" height=\"34\" viewBox=\"40 22 32 31\" fill=\"none\" aria-hidden=\"true\">\r\n      <defs>\r\n        <linearGradient id={gradId} gradientUnits=\"userSpaceOnUse\" x1=\"41\" y1=\"23.4\" x2=\"41\" y2=\"51.4\">\r\n          <stop stopColor=\"#653DE9\" />\r\n          <stop offset=\"0.55\" stopColor=\"#300089\" />\r\n          <stop offset=\"1\" stopColor=\"#0F003B\" />\r\n        </linearGradient>\r\n      </defs>\r\n      <path fillRule=\"evenodd\" clipRule=\"evenodd\" fill={`url(#${gradId})`} d=\"M45.5652 23.3989H66.4348C67.5146 23.3989 68.3913 24.3542 68.3913 25.5309V39.4598C68.3913 40.2443 67.8068 40.8812 67.087 40.8812H44.913C44.1932 40.8812 43.6087 40.2443 43.6087 39.4598V25.5309C43.6087 24.3542 44.4854 23.3989 45.5652 23.3989ZM44.913 40.3126H67.087L71 50.404H41L44.913 40.3126ZM41 50.8304H71V51.3989H41V50.8304ZM44.913 24.8202H67.087V38.0385H44.913V24.8202ZM56 24.2517C55.712 24.2521 55.4787 24.5067 55.4789 24.8206C55.4791 25.1345 55.7126 25.3888 56.0007 25.3888C56.2887 25.3888 56.5222 25.1345 56.5224 24.8206C56.5226 24.5067 56.2893 24.2521 56.0013 24.2517H56ZM45.8261 41.0233H66.1739L68.3913 47.135H43.6087L45.8261 41.0233ZM52.7391 47.8456H59.2609L59.5217 49.2669H52.4783L52.7391 47.8456ZM45.5652 25.5309H66.4348V37.3279H45.5652V25.5309ZM46.2174 41.4497H65.7826L66.1739 42.4446H45.8261L46.2174 41.4497ZM45.5652 43.0131H66.4348L66.9565 44.0081H45.0435L45.5652 43.0131ZM44.7826 44.5766H67.2174L67.7391 45.5715H44.2609L44.7826 44.5766ZM51.4348 45.9979H60.5652L60.8261 46.9928H51.1739L51.4348 45.9979ZM46.8696 26.9522L53.3913 36.1908H54.1739L47.6522 26.9522H46.8696ZM48.8261 26.9522L52.087 31.5004H52.8696L49.6087 26.9522H48.8261ZM61.8696 31.2162L65.3913 36.1908H66.1739L62.6522 31.2162H61.8696Z\" />\r\n    </svg>\r\n  );\r\n}\r\n\r\nconst ICON_MAP: Record<CategoryCardCategory, (props: IconProps) => JSX.Element> = {\r\n  \"vehicular\":          IconVehicular,\r\n  \"maquinaria\":         IconMaquinaria,\r\n  \"equipos-diversos\":   IconEquiposDiversos,\r\n  \"articulos-diversos\": IconArticulosDiversos,\r\n};\r\n\r\n// ─── Component ────────────────────────────────────────────────────────────────\r\n\r\nexport default function CategoryCard({\r\n  category,\r\n  label,\r\n  onClick,\r\n  \"aria-label\": ariaLabel,\r\n  className = \"\",\r\n}: CategoryCardProps): JSX.Element {\r\n  // Unique gradient ID per instance — avoids SVG defs collision\r\n  const uid = useId().replace(/:/g, \"-\");\r\n  const gradId = `vg-${category}-${uid}`;\r\n\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 = PCATCARD_STYLES;\r\n      document.head.appendChild(el);\r\n    }\r\n    _stylesInjected = true;\r\n  }\r\n\r\n  const displayLabel = label ?? LABEL_DEFAULTS[category];\r\n  const IconComponent = ICON_MAP[category];\r\n\r\n  const classes = [\"pcatcard\", className].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: PCATCARD_STYLES }}\r\n      />\r\n      <button\r\n        type=\"button\"\r\n        className={classes}\r\n        onClick={onClick}\r\n        aria-label={ariaLabel ?? displayLabel.replace(/\\n/g, \" \")}\r\n      >\r\n        <div className=\"pcatcard-icon-wrap\">\r\n          <IconComponent gradId={gradId} />\r\n        </div>\r\n        <span className=\"pcatcard-label\">{displayLabel}</span>\r\n      </button>\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"
    }
  ]
}