{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "detalle",
  "type": "registry:block",
  "title": "detalle",
  "description": "Bloque Concorde detalle — incluye sus 8 componentes.",
  "dependencies": [
    "react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "bloques/detalle/desktop/Detalle.tsx",
      "type": "registry:file",
      "target": "bloques/detalle/desktop/Detalle.tsx",
      "content": "/**\n * Detalle — Bloque de Concorde (Voyager DS)\n *\n * Página de detalle. Por ahora es solo el lienzo base: un fondo blanco de\n * 799 × 1483. Iremos montando las secciones encima.\n */\n\nimport type { JSX } from \"react\";\nimport AuctionStatus from \"../../../components/AuctionStatus\";\nimport CardViewer from \"../../../components/CardViewer\";\nimport Accordion from \"../../../components/Accordion\";\nimport DetailCard from \"../../../components/DetailCard\";\nimport ConditionPill from \"../../../components/ConditionPill\";\nimport Button, { CalendarIcon } from \"../../../components/Button\";\nimport CardTitle from \"../../../components/CardTitle\";\nimport OfferCard from \"../../../components/OfferCard\";\nimport { DETALLE_PILLS, type DetalleVariant } from \"../pills\";\n\n// Título del accordion VISITAS · dot verde + texto (CardTitle acepta nodos)\nconst VISITAS_TITLE = (\n  <span style={{ display: \"inline-flex\", alignItems: \"center\", gap: 7 }}>\n    <span style={{ width: 8, height: 8, borderRadius: \"50%\", background: \"#2DBE64\", flexShrink: 0 }} />\n    VISITAS\n  </span>\n);\n\n// Cada ConditionPill mide 136×46 fijo (hug del Figma), no se estira. Padding\n// lateral 10px y texto 12px/14px para que las etiquetas largas (p.ej. «Cuota\n// mínima de 2 participantes») entren en ese ancho. `.pcondpill.dt-pill` gana en\n// especificidad al `.pcondpill` base.\nconst DETALLE_PILL_STYLES = `\n.pcondpill.dt-pill { width: 136px; box-sizing: border-box; padding-left: 10px; padding-right: 10px; font-size: 12px; line-height: 14px; }\n/* Pill solitaria en fila impar (3 pills) → centrada */\n.pcondpill.dt-pill.dt-pill-c { grid-column: 1 / -1; justify-self: center; }\n`;\n\nconst DETALLE_IMAGES = Array.from({ length: 8 }, function img() { return \"/demo/bronco.jpg\"; });\n\nexport interface DetalleProps {\n  /** Variante de la oferta — controla AuctionStatus/CardViewer/DetailCard y los pills. */\n  variant?: DetalleVariant;\n  className?: string;\n}\n\nimport { DETALLE_WIDTH, DETALLE_HEIGHT } from \"./dimensions\";\nexport { DETALLE_WIDTH, DETALLE_HEIGHT } from \"./dimensions\";\n\nexport default function Detalle({ variant = \"live\", className = \"\" }: DetalleProps): JSX.Element {\n  return (\n    <div\n      className={className}\n      data-block=\"detalle\"\n      style={{\n        position: \"relative\",\n        width: DETALLE_WIDTH,\n        height: DETALLE_HEIGHT,\n        background: \"#ffffff\",\n        overflow: \"hidden\",\n      }}\n    >\n      {/* Fila de 2 columnas alineadas por arriba (top 16). El AuctionStatus (header\n          del carro) va DENTRO de la columna izquierda, pegado al CardViewer, así su\n          top coincide con el del DetailCard de la derecha (ambas columnas empiezan\n          a la misma altura). */}\n      <style suppressHydrationWarning dangerouslySetInnerHTML={{ __html: DETALLE_PILL_STYLES }} />\n      <div\n        style={{\n          position: \"absolute\",\n          top: 16,\n          left: 16,\n          right: 16,\n          display: \"flex\",\n          alignItems: \"flex-start\",\n          justifyContent: \"space-between\",\n        }}\n      >\n        {/* Columna izquierda */}\n        <div style={{ display: \"flex\", flexDirection: \"column\", gap: 16, width: 443 }}>\n          {/* AuctionStatus pegado encima del CardViewer (sin gap) */}\n          <div style={{ display: \"flex\", flexDirection: \"column\" }}>\n            <AuctionStatus variant={variant} />\n            <CardViewer images={DETALLE_IMAGES} variant={variant} />\n          </div>\n          <Accordion title=\"INFORMACIÓN GENERAL\" />\n          <Accordion title=\"CONDICIONES DE OFRECIMIENTO\" />\n        </div>\n\n        {/* Columna derecha */}\n        <div style={{ display: \"flex\", flexDirection: \"column\", gap: 16, width: 311 }}>\n          <DetailCard variant={variant} />\n\n          {/* Card de fondo (311×132) con las ConditionPills (cambian según variante) */}\n          <div\n            style={{\n              width: 311,\n              boxSizing: \"border-box\",\n              padding: 12,\n              background: \"#ffffff\",\n              borderRadius: 8,\n              boxShadow: \"rgba(0,0,0,0.1) 0px 0px 16px 4px\",\n              display: \"grid\",\n              gridTemplateColumns: \"136px 136px\",\n              justifyContent: \"space-between\",\n              rowGap: 16,\n            }}\n          >\n            {DETALLE_PILLS[variant].map(function renderPill(p, i, arr) {\n              const lone = arr.length % 2 === 1 && i === arr.length - 1;\n              return <ConditionPill key={i} className={`dt-pill${lone ? \" dt-pill-c\" : \"\"}`} variant={p.tone}>{p.label}</ConditionPill>;\n            })}\n          </div>\n\n          {/* Subascoins Banner · placeholder 311 × 112 */}\n          <div\n            data-slot=\"subascoins-banner\"\n            style={{\n              width: 311,\n              height: 112,\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            SUBASCOINS BANNER\n          </div>\n\n          {/* Accordion VISITAS (abierto) · texto + Button «Agenda tu visita» (secondary-sm) */}\n          <Accordion title={VISITAS_TITLE} defaultOpen>\n            <p style={{ margin: 0, fontSize: 12, lineHeight: \"16px\", color: \"#191C1C\", textAlign: \"left\" }}>\n              Las visitas son previa cita y se te proporcionará la ubicación exacta después de que agendes tu visita.\n            </p>\n            <div style={{ display: \"flex\", justifyContent: \"center\", marginTop: 16 }}>\n              <Button variant=\"secondary-sm\" icon={<CalendarIcon />}>Agenda tu visita</Button>\n            </div>\n          </Accordion>\n\n          {/* OFERTAS RELACIONADAS · card 311×436 con CardTitle (200×32) + grid 2×2\n              de OfferCards short (el grid ocupa 279×348). */}\n          <div\n            style={{\n              width: 311,\n              boxSizing: \"border-box\",\n              background: \"#ffffff\",\n              borderRadius: 8,\n              boxShadow: \"rgba(0,0,0,0.1) 0px 0px 16px 4px\",\n              padding: 16,\n            }}\n          >\n            <CardTitle title=\"OFERTAS RELACIONADAS\" subtitle=\"\" titleSize={14} />\n            <div\n              style={{\n                display: \"grid\",\n                gridTemplateColumns: \"134px 134px\",\n                justifyContent: \"space-between\",\n                rowGap: 8,\n                marginTop: 24,\n              }}\n            >\n              <OfferCard size=\"short\" variant=\"live\" name=\"Audi Q3\" year={2026} price=\"US$ 14,999\" imageSrc=\"/demo/bronco.jpg\" elevated />\n              <OfferCard size=\"short\" variant=\"live\" name=\"Audi Q3\" year={2026} price=\"US$ 14,999\" imageSrc=\"/demo/bronco.jpg\" elevated />\n              <OfferCard size=\"short\" variant=\"negotiable\" name=\"Audi Q3\" year={2026} imageSrc=\"/demo/bronco.jpg\" elevated />\n              <OfferCard size=\"short\" variant=\"negotiable\" name=\"Audi Q3\" year={2026} imageSrc=\"/demo/bronco.jpg\" elevated />\n            </div>\n          </div>\n        </div>\n      </div>\n\n      {/* Secondary Banner 766 × 100 · a 16px del bottom, centrado horizontalmente */}\n      <div\n        data-slot=\"secondary-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: \"#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  );\n}\n"
    },
    {
      "path": "bloques/detalle/desktop/dimensions.ts",
      "type": "registry:file",
      "target": "bloques/detalle/desktop/dimensions.ts",
      "content": "/**\n * Dimensiones del bloque Detalle (desktop) — módulo plano sin \"use client\".\n */\n\nexport const DETALLE_WIDTH = 799;\nexport const DETALLE_HEIGHT = 1483;\n"
    },
    {
      "path": "bloques/detalle/mobile/DetalleMobile.tsx",
      "type": "registry:file",
      "target": "bloques/detalle/mobile/DetalleMobile.tsx",
      "content": "/**\n * DetalleMobile — Bloque de Concorde (Voyager DS)\n *\n * Página de detalle · mobile (420 de ancho). Estructura:\n *   · Header 420×64 (Button «Ingresa»)\n *   · AuctionStatus + CardViewer a TODO el ancho (carro + filmstrip)\n *   · Contenido a 16px de margen (388 de ancho):\n *       - DetailCard (388×390 — más ancho que en desktop, mismo alto)\n *       - ConditionPills (card 388×132)\n *       - Accordions (388×66 cada uno)\n */\n\n\"use client\";\n\nimport { useState } from \"react\";\nimport type { JSX } from \"react\";\nimport AppHeader from \"../../header/desktop/Header\";\nimport AuctionStatus from \"../../../components/AuctionStatus\";\nimport CardViewer from \"../../../components/CardViewer\";\nimport DetailCard from \"../../../components/DetailCard\";\nimport ConditionPill from \"../../../components/ConditionPill\";\nimport Accordion from \"../../../components/Accordion\";\nimport CardTitle from \"../../../components/CardTitle\";\nimport OfferCard from \"../../../components/OfferCard\";\nimport Button, { CalendarIcon } from \"../../../components/Button\";\nimport SidebarMobile, { SidebarMenuButton } from \"../../sidebar/mobile/SidebarMobile\";\nimport { DETALLE_PILLS, type DetalleVariant } from \"../pills\";\n\nimport { DETALLE_MOBILE_WIDTH, DETALLE_MOBILE_HEIGHT } from \"./dimensions\";\nexport { DETALLE_MOBILE_WIDTH, DETALLE_MOBILE_HEIGHT } from \"./dimensions\";\n\nconst DETALLE_IMAGES = Array.from({ length: 8 }, function img() { return \"/demo/bronco.jpg\"; });\n\n// Overrides puntuales: DetailCard a 388, pills que llenan su columna y las\n// OfferCards short más grandes (170×210, imagen 152) para el grid de ofertas.\nconst MOBILE_STYLES = `\n.dt-detail-m.pdetail { width: 388px; max-width: 388px; min-height: 390px; }\n.pcondpill.dt-pill-m { width: 100%; box-sizing: border-box; padding-left: 12px; padding-right: 12px; font-size: 13px; line-height: 15px; }\n.pcondpill.dt-pill-m.dt-pill-c { grid-column: 1 / -1; justify-self: center; width: 170px; }\n.pcard--short.dt-card-lg { width: 170px; height: 210px; }\n.pcard--short.dt-card-lg .pcard__img { height: 152px; }\n`;\n\n// Título del accordion VISITAS · dot verde + texto\nconst VISITAS_TITLE = (\n  <span style={{ display: \"inline-flex\", alignItems: \"center\", gap: 7 }}>\n    <span style={{ width: 8, height: 8, borderRadius: \"50%\", background: \"#2DBE64\", flexShrink: 0 }} />\n    VISITAS\n  </span>\n);\n\nexport interface DetalleMobileProps {\n  /** Variante de la oferta — controla AuctionStatus/CardViewer/DetailCard y los pills. */\n  variant?: DetalleVariant;\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 DetalleMobile({ variant = \"live\", className = \"\", frameHeight }: DetalleMobileProps): JSX.Element {\n  const [menuOpen, setMenuOpen] = useState(false);\n\n  const page = (\n    <div\n      className={className}\n      data-block=\"detalle-mobile\"\n      style={{\n        position: \"relative\",\n        width: DETALLE_MOBILE_WIDTH,\n        background: \"#ffffff\",\n        display: \"flex\",\n        flexDirection: \"column\",\n        fontFamily: \"var(--vmc-font-display, 'Plus Jakarta Sans', -apple-system, sans-serif)\",\n      }}\n    >\n      <style suppressHydrationWarning dangerouslySetInnerHTML={{ __html: MOBILE_STYLES }} />\n\n      {/* Header 420×64 · hamburguesa + logo de la marca a la izquierda */}\n      <AppHeader\n        width={DETALLE_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      {/* AuctionStatus + CardViewer · a todo el ancho (carro + filmstrip) */}\n      <div style={{ display: \"flex\", flexDirection: \"column\", width: \"100%\" }}>\n        <AuctionStatus variant={variant} />\n        <CardViewer images={DETALLE_IMAGES} variant={variant} />\n      </div>\n\n      {/* Contenido a 16px de margen (388 de ancho) */}\n      <div style={{ display: \"flex\", flexDirection: \"column\", gap: 16, padding: 16 }}>\n        {/* DetailCard 388×390 */}\n        <DetailCard variant={variant} className=\"dt-detail-m\" />\n\n        {/* ConditionPills · card 388×132 (cambian según variante) */}\n        <div\n          style={{\n            width: 388,\n            boxSizing: \"border-box\",\n            padding: \"12px 16px\",\n            background: \"#ffffff\",\n            borderRadius: 8,\n            boxShadow: \"rgba(0,0,0,0.1) 0px 0px 16px 4px\",\n            display: \"grid\",\n            gridTemplateColumns: \"1fr 1fr\",\n            columnGap: 16,\n            rowGap: 16,\n          }}\n        >\n          {DETALLE_PILLS[variant].map(function renderPill(p, i, arr) {\n            const lone = arr.length % 2 === 1 && i === arr.length - 1;\n            return <ConditionPill key={i} className={`dt-pill-m${lone ? \" dt-pill-c\" : \"\"}`} variant={p.tone}>{p.label}</ConditionPill>;\n          })}\n        </div>\n\n        {/* Accordions 388×66 */}\n        <Accordion title=\"INFORMACIÓN GENERAL\" />\n        <Accordion title=\"CONDICIONES DE OFRECIMIENTO\" />\n        <Accordion title={VISITAS_TITLE}>\n          <p style={{ margin: 0, fontSize: 12, lineHeight: \"16px\", color: \"#191C1C\", textAlign: \"left\" }}>\n            Las visitas son previa cita y se te proporcionará la ubicación exacta después de que agendes tu visita.\n          </p>\n          <div style={{ display: \"flex\", justifyContent: \"center\", marginTop: 16 }}>\n            <Button variant=\"secondary-sm\" icon={<CalendarIcon />}>Agenda tu visita</Button>\n          </div>\n        </Accordion>\n\n        {/* OFERTAS RELACIONADAS · card 388×524 con CardTitle + grid 2×2 de\n            OfferCards short grandes (170×210, grid 356×436). */}\n        <div\n          style={{\n            width: 388,\n            height: 524,\n            boxSizing: \"border-box\",\n            background: \"#ffffff\",\n            borderRadius: 8,\n            boxShadow: \"rgba(0,0,0,0.1) 0px 0px 16px 4px\",\n            padding: 16,\n          }}\n        >\n          <CardTitle title=\"OFERTAS RELACIONADAS\" subtitle=\"\" titleSize={14} />\n          <div\n            style={{\n              display: \"grid\",\n              gridTemplateColumns: \"170px 170px\",\n              gap: 16,\n              justifyContent: \"space-between\",\n              marginTop: 24,\n            }}\n          >\n            <OfferCard size=\"short\" className=\"dt-card-lg\" variant=\"live\" name=\"Audi Q3\" year={2026} price=\"US$ 14,999\" imageSrc=\"/demo/bronco.jpg\" elevated />\n            <OfferCard size=\"short\" className=\"dt-card-lg\" variant=\"live\" name=\"Audi Q3\" year={2026} price=\"US$ 14,999\" imageSrc=\"/demo/bronco.jpg\" elevated />\n            <OfferCard size=\"short\" className=\"dt-card-lg\" variant=\"negotiable\" name=\"Audi Q3\" year={2026} imageSrc=\"/demo/bronco.jpg\" elevated />\n            <OfferCard size=\"short\" className=\"dt-card-lg\" variant=\"negotiable\" name=\"Audi Q3\" year={2026} imageSrc=\"/demo/bronco.jpg\" elevated />\n          </div>\n        </div>\n\n        {/* Secondary Banner · placeholder 387×230 */}\n        <div\n          data-slot=\"secondary-banner\"\n          style={{\n            width: 387,\n            height: 230,\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": "bloques/detalle/mobile/dimensions.ts",
      "type": "registry:file",
      "target": "bloques/detalle/mobile/dimensions.ts",
      "content": "/**\n * Dimensiones del bloque DetalleMobile — módulo plano sin \"use client\".\n */\n\nexport const DETALLE_MOBILE_WIDTH = 420;\nexport const DETALLE_MOBILE_HEIGHT = 2230;\n"
    },
    {
      "path": "bloques/detalle/pills.ts",
      "type": "registry:file",
      "target": "bloques/detalle/pills.ts",
      "content": "/**\n * Condition pills del bloque Detalle según la variante de la oferta.\n * Módulo PLANO (sin \"use client\") para que desktop y mobile lo compartan.\n *   · live       → 4 condiciones, todas incluidas (filled)\n *   · negotiable → 3 condiciones: «Con Fee de Habilitación» (filled) +\n *                  «Sin…» no incluidas (outline)\n */\n\nexport type DetalleVariant = \"live\" | \"negotiable\";\nexport type DetallePill = { label: string; tone?: \"filled\" | \"outline\" };\n\nexport const DETALLE_PILLS: Record<DetalleVariant, DetallePill[]> = {\n  live: [\n    { label: \"Con Precio Reserva\" },\n    { label: \"Con Opción a Visitas\" },\n    { label: \"Con Comisión\" },\n    { label: \"Cuota mínima de 2 participantes\" },\n  ],\n  negotiable: [\n    { label: \"Con Fee de Habilitación\" },\n    { label: \"Sin Opción a Visitas\", tone: \"outline\" },\n    { label: \"Sin Comisión\", tone: \"outline\" },\n  ],\n};\n"
    },
    {
      "path": "components/AuctionStatus.tsx",
      "type": "registry:file",
      "target": "components/AuctionStatus.tsx",
      "content": "\"use client\";\n\n/**\n * AuctionStatus — Generado por Concorde\n * Fuente: Figma VOYAGER · \"AuctionStatus\" (nodo 2007:16992 / 2007:18454)\n *\n * Barra de cabecera de subasta: botón volver (‹) + título + subtítulo,\n * sobre gradiente. 2 variantes:\n *   · live       → gradiente naranja (#FF9639 → #EF852E → #BE3D00)\n *   · negotiable → gradiente teal   (#00DAE0 → #008688)\n * Sheen blanco superior (rgba 0.1 → 0). 443×60.\n */\n\nimport type { JSX, MouseEventHandler } from \"react\";\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport type AuctionStatusVariant = \"live\" | \"negotiable\";\n\nexport interface AuctionStatusProps {\n  /** Variante de color (default \"live\") */\n  variant?: AuctionStatusVariant;\n  /** Título (default \"Volkswagen Gol 2015\") */\n  title?: string;\n  /** Subtítulo (default \"Vendedor: SubasCars\") */\n  subtitle?: string;\n  /** Callback del botón volver */\n  onBack?: MouseEventHandler<HTMLButtonElement>;\n  className?: string;\n}\n\n// ─── Self-contained CSS ───────────────────────────────────────────────────────\n\nconst STYLE_ID = \"concorde-auctionstatus-styles\";\n\nconst AUCTIONSTATUS_STYLES = `\n.pauction {\n  position: relative;\n  width: 443px;\n  max-width: 100%;\n  height: 60px;\n  border-radius: 0;\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 0 16px 0 14px;\n  box-sizing: border-box;\n  box-shadow: rgba(0,0,0,0.1) 0px 0px 16px 4px;\n  font-family: var(--vmc-font-display, \"Plus Jakarta Sans\", -apple-system, sans-serif);\n}\n.pauction--live { background: linear-gradient(156deg, #FF9639 0%, #EF852E 50%, #BE3D00 100%); }\n.pauction--negotiable { background: linear-gradient(90deg, #00DAE0 0%, #008688 100%); }\n.pauction::before {\n  content: \"\";\n  position: absolute;\n  top: 0; left: 0; right: 0;\n  height: 18px;\n  background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);\n  pointer-events: none;\n}\n.pauction__back {\n  appearance: none;\n  border: none;\n  background: transparent;\n  width: 32px;\n  height: 32px;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border-radius: 50%;\n  position: relative;\n  z-index: 1;\n  color: #ffffff;\n  -webkit-backdrop-filter: blur(2px);\n  backdrop-filter: blur(2px);\n  transition: background 0.18s, color 0.18s, transform 0.12s;\n}\n/* hover: círculo relleno (tono claro), chevron blanco */\n.pauction--live .pauction__back:hover { background: #F99845; }\n.pauction--negotiable .pauction__back:hover { background: #2BC4C7; }\n/* pressed: círculo tono base, chevron gris #99A1AF */\n.pauction--live .pauction__back:active { background: #ED8936; }\n.pauction--negotiable .pauction__back:active { background: #00A8AB; }\n.pauction__back:active { color: #99A1AF; transform: scale(0.96); }\n.pauction__back:focus-visible { outline: 2px solid rgba(255,255,255,0.9); outline-offset: 2px; }\n.pauction__back svg path { stroke: currentColor; }\n.pauction__back svg { filter: drop-shadow(0 1px 1.5px rgba(0,0,0,0.25)); }\n.pauction__text { position: relative; z-index: 1; min-width: 0; }\n.pauction__title {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  line-height: 1.2;\n  color: #ffffff;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  text-shadow: 0 1px 1.5px rgba(0,0,0,0.25);\n}\n.pauction__subtitle {\n  margin: 2px 0 0;\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 1.2;\n  color: rgba(255,255,255,0.92);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  text-shadow: 0 1px 2px rgba(120,40,0,0.25);\n}\n@media (prefers-reduced-motion: reduce) {\n  .pauction__back { transition: none; }\n}\n`;\n\nlet _stylesInjected = false;\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\nexport default function AuctionStatus({\n  variant = \"live\",\n  title = \"Volkswagen Gol 2015\",\n  subtitle = \"Vendedor: SubasCars\",\n  onBack,\n  className = \"\",\n}: AuctionStatusProps): 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 = AUCTIONSTATUS_STYLES;\n      document.head.appendChild(el);\n    }\n    _stylesInjected = true;\n  }\n\n  return (\n    <>\n      <style id={`${STYLE_ID}-ssr`} suppressHydrationWarning dangerouslySetInnerHTML={{ __html: AUCTIONSTATUS_STYLES }} />\n      <div className={[\"pauction\", `pauction--${variant}`, className].filter(Boolean).join(\" \")}>\n        <button type=\"button\" className=\"pauction__back\" onClick={onBack} aria-label=\"Volver\">\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n            <path d=\"M15 6L9 12L15 18\" stroke=\"currentColor\" strokeWidth=\"3\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n          </svg>\n        </button>\n        <div className=\"pauction__text\">\n          <h3 className=\"pauction__title\">{title}</h3>\n          <p className=\"pauction__subtitle\">{subtitle}</p>\n        </div>\n      </div>\n    </>\n  );\n}\n"
    },
    {
      "path": "components/CardViewer.tsx",
      "type": "registry:file",
      "target": "components/CardViewer.tsx",
      "content": "\"use client\";\n\n/**\n * CardViewer — Generado por Concorde\n * Fuente: Figma VOYAGER · \"ImageViewer\" (2007:16993) + \"Filmstrip\" (2007:16994 / 2007:18456)\n *\n * Visor de imagen 443×362 (controles glass: expandir · ‹ · › · contador) CON\n * su tira de miniaturas (Filmstrip 443×87, drag-to-scroll) debajo, como UNA sola\n * unidad. Click en una miniatura → cambia la imagen grande al instante.\n *\n * 2 variantes (por el borde de la miniatura seleccionada):\n *   · live       → white → #F4AC59 → #8460E5 → white\n *   · negotiable → white → #4DDCDC → #6445DF → white\n *\n * Estado interno (no controlado) por defecto; o controlado vía selectedIndex.\n */\n\nimport { useId, useRef, useState } from \"react\";\nimport type { JSX, ReactNode, MouseEventHandler, PointerEvent as ReactPointerEvent } from \"react\";\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport type CardViewerVariant = \"live\" | \"negotiable\";\n\nexport interface CardViewerProps {\n  /** Variante del borde de selección (default \"live\") */\n  variant?: CardViewerVariant;\n  /** URLs de las imágenes (visor + miniaturas) */\n  images?: string[];\n  /** Alt de la imagen grande */\n  imageAlt?: string;\n  /** Índice seleccionado (controlado, 0-based) */\n  selectedIndex?: number;\n  /** Índice inicial (no controlado, default 0) */\n  defaultIndex?: number;\n  /** Callback al cambiar de imagen (click en miniatura o ‹/›) */\n  onSelect?: (index: number) => void;\n  /** Click en el botón expandir */\n  onExpand?: MouseEventHandler<HTMLButtonElement>;\n  /** Embebido dentro de una card padre: el visor va a ras (sin sombra ni\n   *  redondeo propios), porque el borde/redondeo los pone el contenedor. */\n  embedded?: boolean;\n  /** Slot opcional ARRIBA del visor, DENTRO de la card. Cuando se pasa, un solo\n   *  borde gradiente + redondeo inferior envuelve header+visor (el filmstrip\n   *  queda fuera, debajo). Úsalo para el conjunto SalaStatus + visor. */\n  header?: ReactNode;\n  className?: string;\n}\n\n// ─── Self-contained CSS ───────────────────────────────────────────────────────\n\nconst STYLE_ID = \"concorde-cardviewer-styles\";\n\nconst CARDVIEWER_STYLES = `\n.pcardv {\n  display: flex;\n  flex-direction: column;\n  gap: 9px;\n  width: 443px;\n  max-width: 100%;\n  font-family: var(--vmc-font-display, \"Plus Jakarta Sans\", -apple-system, sans-serif);\n}\n\n/* ── Visor de imagen ── */\n.pcardv__viewer {\n  position: relative;\n  width: 100%;\n  height: 362px;\n  border-radius: 0 0 16px 16px;\n  overflow: hidden;\n  background: #F2F4F3;\n  box-shadow: rgba(0,0,0,0.1) 0px 0px 16px 4px;\n}\n.pcardv__img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.pcardv__btn {\n  position: absolute;\n  appearance: none;\n  border: none;\n  background: rgba(0,0,0,0.5);\n  -webkit-backdrop-filter: blur(2px);\n  backdrop-filter: blur(2px);\n  color: #ffffff;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: background 0.18s, transform 0.18s;\n}\n.pcardv__btn:hover { background: rgba(0,0,0,0.65); }\n.pcardv__btn:active { transform: scale(0.92); }\n.pcardv__btn:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }\n.pcardv__btn--round { width: 36px; height: 36px; border-radius: 50%; }\n.pcardv__expand { top: 12px; right: 12px; }\n.pcardv__prev { top: 50%; left: 12px; transform: translateY(-50%); }\n.pcardv__next { top: 50%; right: 12px; transform: translateY(-50%); }\n.pcardv__prev:active, .pcardv__next:active { transform: translateY(-50%) scale(0.92); }\n.pcardv__count {\n  position: absolute;\n  bottom: 12px;\n  right: 12px;\n  height: 24px;\n  min-width: 46px;\n  padding: 0 10px;\n  border-radius: 12px;\n  background: rgba(0,0,0,0.5);\n  -webkit-backdrop-filter: blur(2px);\n  backdrop-filter: blur(2px);\n  color: #ffffff;\n  font-size: 12px;\n  font-weight: 600;\n  letter-spacing: 0.02em;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* ── Tira de miniaturas (filmstrip) ── */\n.pcardv__strip {\n  display: flex;\n  gap: 9px;\n  width: 100%;\n  overflow-x: auto;\n  padding: 3px;\n  box-sizing: border-box;\n  scrollbar-width: none;\n  cursor: grab;\n  scroll-behavior: smooth;\n}\n.pcardv__strip--dragging { cursor: grabbing; scroll-behavior: auto; }\n.pcardv__strip--dragging .pcardv__thumb { pointer-events: none; }\n.pcardv__strip::-webkit-scrollbar { display: none; }\n.pcardv__thumb {\n  position: relative;\n  flex-shrink: 0;\n  width: 113px;\n  height: 84px;\n  border-radius: 4px;\n  padding: 0;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  overflow: hidden;\n  transition: transform 0.18s, box-shadow 0.18s;\n}\n.pcardv__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 4px; }\n.pcardv__thumb:focus-visible { outline: 2px solid #8460E5; outline-offset: 2px; }\n/* Hover preview ring · indica click sin transform (igual al filmstrip de detail-header) */\n.pcardv__thumb::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: 4px;\n  pointer-events: none;\n  z-index: 2;\n  box-shadow: none;\n  transition: box-shadow 200ms cubic-bezier(0.3, 0, 0, 1);\n}\n.pcardv__thumb:not(.pcardv__thumb--selected):hover::before {\n  box-shadow:\n    inset 0 0 0 2px oklch(0.66 0.17 50 / 0.45),\n    inset 0 0 0 3px oklch(1 0 0 / 0.30);\n}\n.pcardv--negotiable .pcardv__thumb:not(.pcardv__thumb--selected):hover::before {\n  box-shadow:\n    inset 0 0 0 2px oklch(0.78 0.14 195 / 0.45),\n    inset 0 0 0 3px oklch(1 0 0 / 0.30);\n}\n/* Selección = aro gradiente de 3px ENCIMA (no cambia el tamaño de la miniatura) */\n.pcardv__thumb--selected { box-shadow: rgba(0,0,0,0.1) 0px 0px 16px 4px; }\n.pcardv__thumb--selected::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: 4px;\n  padding: 3px;\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}\n.pcardv--live .pcardv__thumb--selected::after {\n  background: linear-gradient(120deg, #ffffff 0%, #F4AC59 25%, #8460E5 75%, #ffffff 100%);\n}\n.pcardv--negotiable .pcardv__thumb--selected::after {\n  background: linear-gradient(120deg, #ffffff 0%, #4DDCDC 25%, #6445DF 75%, #ffffff 100%);\n}\n\n/* ── Embebido en una card padre: visor a ras (el borde/redondeo lo pone el padre) ── */\n.pcardv--embedded .pcardv__viewer { border-radius: 0; box-shadow: none; }\n\n/* ── Card del conjunto (header + visor) · UN solo borde gradiente, top recto, bottom 16 ── */\n.pcardv__card {\n  box-sizing: border-box;\n  width: 100%;\n  padding: 1.5px;\n  border-radius: 0 0 16px 16px;\n  background: linear-gradient(120deg, #ffffff 0%, #F4AC59 22%, #8460E5 74.5%, #ffffff 100%);\n  box-shadow: rgba(0,0,0,0.15) 0px 8px 20px;\n}\n.pcardv__card-inner {\n  box-sizing: border-box;\n  width: 100%;\n  border-radius: 0 0 15px 15px;\n  overflow: hidden;\n  background: #2E0F70;\n}\n/* Visor a ras dentro de la card (el borde/redondeo los pone la card) */\n.pcardv__card .pcardv__viewer { border-radius: 0; box-shadow: none; }\n\n@media (prefers-reduced-motion: reduce) {\n  .pcardv__btn, .pcardv__thumb, .pcardv__thumb::before { transition: none; }\n}\n`;\n\nlet _stylesInjected = false;\n\nconst DEFAULT_IMAGES = [\"\", \"\", \"\", \"\"];\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\nexport default function CardViewer({\n  variant = \"live\",\n  images = DEFAULT_IMAGES,\n  imageAlt = \"\",\n  selectedIndex,\n  defaultIndex = 0,\n  onSelect,\n  onExpand,\n  embedded = false,\n  header,\n  className = \"\",\n}: CardViewerProps): JSX.Element {\n  const uid = useId().replace(/:/g, \"-\");\n  const trackRef = useRef<HTMLDivElement | null>(null);\n  const drag = useRef({ active: false, startX: 0, startScroll: 0, moved: false });\n\n  const isControlled = selectedIndex !== undefined;\n  const [internalIndex, setInternalIndex] = useState(defaultIndex);\n  const total = images.length;\n  const index = isControlled ? selectedIndex : internalIndex;\n\n  function select(target: number): void {\n    const next = total > 0 ? ((target % total) + total) % total : 0;\n    if (!isControlled) setInternalIndex(next);\n    onSelect?.(next);\n  }\n\n  // Solo registramos el inicio; NO capturamos el puntero todavía para que un\n  // click simple llegue normal al botón de la miniatura.\n  const onPointerDown = (e: ReactPointerEvent<HTMLDivElement>): void => {\n    const el = trackRef.current;\n    if (!el) return;\n    drag.current = { active: true, startX: e.clientX, startScroll: el.scrollLeft, moved: false };\n  };\n\n  const onPointerMove = (e: ReactPointerEvent<HTMLDivElement>): void => {\n    const el = trackRef.current;\n    if (!el || !drag.current.active) return;\n    const dx = e.clientX - drag.current.startX;\n    // Recién al superar 4px se considera arrastre: capturamos el puntero y\n    // desactivamos los clicks de las miniaturas mientras se arrastra.\n    if (!drag.current.moved && Math.abs(dx) > 4) {\n      drag.current.moved = true;\n      el.classList.add(\"pcardv__strip--dragging\");\n      try { el.setPointerCapture(e.pointerId); } catch { /* noop */ }\n    }\n    if (drag.current.moved) {\n      el.scrollLeft = drag.current.startScroll - dx;\n    }\n  };\n\n  const endDrag = (e: ReactPointerEvent<HTMLDivElement>): void => {\n    const el = trackRef.current;\n    if (!el) return;\n    drag.current.active = false;\n    el.classList.remove(\"pcardv__strip--dragging\");\n    try { el.releasePointerCapture(e.pointerId); } catch { /* noop */ }\n  };\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 = CARDVIEWER_STYLES;\n      document.head.appendChild(el);\n    }\n    _stylesInjected = true;\n  }\n\n  const currentSrc = images[index];\n\n  const viewer = (\n    <div className=\"pcardv__viewer\">\n          {currentSrc ? <img className=\"pcardv__img\" src={currentSrc} alt={imageAlt} /> : null}\n\n          <button type=\"button\" className=\"pcardv__btn pcardv__btn--round pcardv__expand\" onClick={onExpand} aria-label=\"Ampliar imagen\">\n            <svg width=\"22\" height=\"22\" viewBox=\"421 42 16 16\" fill=\"none\" aria-hidden=\"true\">\n              <path d=\"M426.833 44H424.833C424.097 44 423.5 44.5974 423.5 45.3333V47.3333M435.5 47.3333V45.3333C435.5 44.5974 434.903 44 434.167 44H432.167M432.167 56H434.167C434.903 56 435.5 55.4026 435.5 54.6667V52.6667M423.5 52.6667V54.6667C423.5 55.4026 424.097 56 424.833 56H426.833\"\n                stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n            </svg>\n          </button>\n\n          <button type=\"button\" className=\"pcardv__btn pcardv__btn--round pcardv__prev\" onClick={function prev() { select(index - 1); }} aria-label=\"Imagen anterior\">\n            <svg width=\"22\" height=\"22\" viewBox=\"40 199 16 16\" fill=\"none\" aria-hidden=\"true\">\n              <path d=\"M50.5 201L42.5 207L50.5 213\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n            </svg>\n          </button>\n\n          <button type=\"button\" className=\"pcardv__btn pcardv__btn--round pcardv__next\" onClick={function next() { select(index + 1); }} aria-label=\"Imagen siguiente\">\n            <svg width=\"22\" height=\"22\" viewBox=\"423 199 16 16\" fill=\"none\" aria-hidden=\"true\">\n              <path d=\"M425.5 201L433.5 207L425.5 213\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n            </svg>\n          </button>\n\n      <span className=\"pcardv__count\">{index + 1}/{total}</span>\n    </div>\n  );\n\n  return (\n    <>\n      <style id={`${STYLE_ID}-ssr`} suppressHydrationWarning dangerouslySetInnerHTML={{ __html: CARDVIEWER_STYLES }} />\n      <div className={[\"pcardv\", `pcardv--${variant}`, embedded ? \"pcardv--embedded\" : \"\", className].filter(Boolean).join(\" \")}>\n\n        {/* Conjunto header + visor (con header → card de borde gradiente; sin header → visor suelto) */}\n        {header ? (\n          <div className=\"pcardv__card\">\n            <div className=\"pcardv__card-inner\">\n              {header}\n              {viewer}\n            </div>\n          </div>\n        ) : (\n          viewer\n        )}\n\n        {/* Filmstrip (aparte, debajo del conjunto) */}\n        <div\n          ref={trackRef}\n          className=\"pcardv__strip\"\n          onPointerDown={onPointerDown}\n          onPointerMove={onPointerMove}\n          onPointerUp={endDrag}\n          onPointerCancel={endDrag}\n        >\n          {images.map((src, i) => {\n            const selected = i === index;\n            return (\n              <button\n                key={`${uid}-${i}`}\n                type=\"button\"\n                className={[\"pcardv__thumb\", selected ? \"pcardv__thumb--selected\" : \"\"].filter(Boolean).join(\" \")}\n                onClick={function pick() { if (!drag.current.moved) select(i); }}\n                aria-label={`Imagen ${i + 1}`}\n                aria-current={selected ? \"true\" : undefined}\n              >\n                {src ? <img src={src} alt=\"\" /> : null}\n              </button>\n            );\n          })}\n        </div>\n      </div>\n    </>\n  );\n}\n"
    },
    {
      "path": "components/Accordion.tsx",
      "type": "registry:file",
      "target": "components/Accordion.tsx",
      "content": "\"use client\";\n\n/**\n * Accordion — Generado por Concorde\n * Fuente: Figma VOYAGER · \"DetailAccordions\" (2007:16995)\n *\n * Card blanca (radio 4, sombra) con título (corchetes naranjas vía CardTitle,\n * editable) y un chevron en círculo naranja a la derecha. El chevron gira:\n *   · cerrado → apunta hacia abajo\n *   · abierto → apunta hacia arriba (rotate 180)\n * El contenido se expande/colapsa. Controlado o no controlado.\n * Paths/gradiente del chevron copiados tal cual del SVG.\n */\n\nimport { useId, useState } from \"react\";\nimport type { JSX, ReactNode } from \"react\";\nimport CardTitle from \"@/concorde/components/CardTitle\";\n\nexport interface AccordionProps {\n  /** Título (editable) — default \"INFORMACIÓN GENERAL\". Acepta texto o nodos (p.ej. un dot + texto). */\n  title?: ReactNode;\n  /** Contenido que se expande/colapsa */\n  children?: ReactNode;\n  /** Abierto (controlado) */\n  open?: boolean;\n  /** Abierto inicial (no controlado) — default false */\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /** Tamaño del título en px (default 14) */\n  titleSize?: number;\n  className?: string;\n}\n\nconst STYLE_ID = \"concorde-accordion-styles\";\n\nconst ACCORDION_STYLES = `\n/* La card BLANCA + sombra + redondeo envuelven TODO (header + contenido), así el\n   contenido abierto queda sobre fondo blanco dentro de la misma card. */\n.pacc {\n  width: 100%;\n  background: #ffffff;\n  border-radius: 4px;\n  box-shadow: rgba(0,0,0,0.1) 0px 0px 16px 4px;\n  overflow: hidden;\n  font-family: var(--vmc-font-display, \"Plus Jakarta Sans\", -apple-system, sans-serif);\n}\n.pacc__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  width: 100%;\n  min-height: 66px;\n  box-sizing: border-box;\n  padding: 0 16px;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  text-align: left;\n}\n/* Divisor entre header y contenido — solo visible cuando está abierto */\n.pacc--open .pacc__header { box-shadow: inset 0 -1px 0 #ECECEE; }\n.pacc__chevron {\n  flex-shrink: 0;\n  transition: transform 0.25s cubic-bezier(0.3, 0, 0, 1);\n}\n.pacc--open .pacc__chevron { transform: rotate(180deg); }\n.pacc__content {\n  display: grid;\n  grid-template-rows: 0fr;\n  transition: grid-template-rows 0.25s ease;\n}\n.pacc--open .pacc__content { grid-template-rows: 1fr; }\n.pacc__content-inner { overflow: hidden; }\n.pacc__content-pad {\n  padding: 16px 18px 18px;\n  font-size: 14px;\n  line-height: 1.6;\n  color: #475569;\n}\n@media (prefers-reduced-motion: reduce) {\n  .pacc__chevron, .pacc__content { transition: none; }\n}\n`;\n\nlet _stylesInjected = false;\n\n// ─── Chevron en círculo (gradiente naranja · copiado del SVG) ───────────────\n\nfunction Chevron({ gradId }: { gradId: string }): JSX.Element {\n  return (\n    <svg className=\"pacc__chevron\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n      <circle cx=\"8\" cy=\"8\" r=\"7.25\" stroke={`url(#${gradId})`} strokeWidth=\"1.5\" />\n      <path d=\"M5 6.5L8 10.5L11 6.5\" stroke={`url(#${gradId})`} strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n      <defs>\n        <linearGradient id={gradId} x1=\"0.667\" y1=\"-0.333\" x2=\"18.94\" y2=\"17.94\" gradientUnits=\"userSpaceOnUse\">\n          <stop stopColor=\"#FF9C3B\" />\n          <stop offset=\"0.4\" stopColor=\"#EF852E\" />\n          <stop offset=\"1\" stopColor=\"#BE3D00\" />\n        </linearGradient>\n      </defs>\n    </svg>\n  );\n}\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\nexport default function Accordion({\n  title = \"INFORMACIÓN GENERAL\",\n  children,\n  open,\n  defaultOpen = false,\n  onOpenChange,\n  titleSize = 14,\n  className = \"\",\n}: AccordionProps): JSX.Element {\n  const uid = useId().replace(/:/g, \"-\");\n  const controlled = open !== undefined;\n  const [internal, setInternal] = useState(defaultOpen);\n  const isOpen = controlled ? open : internal;\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 = ACCORDION_STYLES;\n      document.head.appendChild(el);\n    }\n    _stylesInjected = true;\n  }\n\n  function handleToggle(): void {\n    const next = !isOpen;\n    if (!controlled) setInternal(next);\n    onOpenChange?.(next);\n  }\n\n  const cls = [\"pacc\", isOpen ? \"pacc--open\" : \"\", className].filter(Boolean).join(\" \");\n\n  return (\n    <>\n      <style id={`${STYLE_ID}-ssr`} suppressHydrationWarning dangerouslySetInnerHTML={{ __html: ACCORDION_STYLES }} />\n      <div className={cls}>\n        <button\n          type=\"button\"\n          className=\"pacc__header\"\n          aria-expanded={isOpen}\n          aria-controls={`${uid}-panel`}\n          onClick={handleToggle}\n        >\n          <CardTitle title={title} subtitle=\"\" titleSize={titleSize} />\n          <Chevron gradId={`pacc-grad-${uid}`} />\n        </button>\n        <div className=\"pacc__content\" id={`${uid}-panel`} role=\"region\">\n          <div className=\"pacc__content-inner\">\n            <div className=\"pacc__content-pad\">{children}</div>\n          </div>\n        </div>\n      </div>\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/DetailCard.tsx",
      "type": "registry:file",
      "target": "components/DetailCard.tsx",
      "content": "\"use client\";\n\n/**\n * DetailCard — Generado por Concorde\n * Fuente: Figma VOYAGER · \"DetailCard\" (nodo 2007:18447 / Container 2007:16954)\n *\n * Tarjeta de detalle de oferta: header oscuro (Inicia / fecha / hora + LikeButton +\n * 3 stats) sobre cuerpo blanco (título + botón Participa + Precio Base con gema +\n * comisión). 2 variantes según el botón/acento:\n *   · live       → botón naranja→lila (#ED8936 → #8460E5), glow naranja\n *   · negotiable → botón teal→lila  (#00AEB1 → #8460E5), glow teal\n * 311 de ancho. Botón con hover/press, LikeButton clickeable.\n */\n\nimport { useId } from \"react\";\nimport type { JSX, MouseEventHandler } from \"react\";\nimport LikeButton from \"@/concorde/components/LikeButton\";\nimport PriceIcon from \"@/concorde/components/PriceIcon\";\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport type DetailCardVariant = \"live\" | \"negotiable\";\n\nexport interface DetailCardProps {\n  /** Variante de acento del botón (default \"live\") */\n  variant?: DetailCardVariant;\n  /** Etiqueta superior izquierda (default \"Inicia\" en live · \"Cierra\" en negotiable) */\n  startLabel?: string;\n  /** Fecha (default \"LUNES 04\") */\n  day?: string;\n  /** Hora (default \"11:11 pm\") */\n  time?: string;\n  /** Vistas / likes / participantes (default 11) */\n  views?: number | string;\n  likes?: number | string;\n  participants?: number | string;\n  /** Texto del banner teal (default solo en negotiable: \"¡Aprende a negociar con Subastin!\"). Pasa \"\" para ocultarlo. */\n  bannerText?: string;\n  /** Título del cuerpo */\n  title?: string;\n  /** Etiqueta del precio (default \"Precio Base:\") */\n  priceLabel?: string;\n  /** Precio formateado (default \"US$ 12,999\") */\n  price?: string;\n  /** Texto de comisión */\n  commission?: string;\n  /** Estado del like (controlado) */\n  liked?: boolean;\n  onLikeChange?: (active: boolean) => void;\n  /** Texto del botón (default \"Participa\") */\n  ctaLabel?: string;\n  onParticipate?: MouseEventHandler<HTMLButtonElement>;\n  className?: string;\n}\n\n// ─── Self-contained CSS ───────────────────────────────────────────────────────\n\nconst STYLE_ID = \"concorde-detailcard-styles\";\n\nconst DETAILCARD_STYLES = `\n.pdetail {\n  width: 311px;\n  max-width: 100%;\n  border-radius: 0 0 8px 8px;\n  overflow: hidden;\n  background: #ffffff;\n  box-shadow: rgba(0,0,0,0.1) 0px 0px 16px 4px;\n  font-family: var(--vmc-font-display, \"Plus Jakarta Sans\", -apple-system, sans-serif);\n}\n\n/* ── Header oscuro ── */\n.pdetail__head {\n  position: relative;\n  height: 130px;\n  background: linear-gradient(157deg, #5F3ED8 0%, #340091 50%, #140046 100%);\n  color: #ffffff;\n  box-sizing: border-box;\n}\n.pdetail__head::before {\n  content: \"\";\n  position: absolute;\n  top: 0; left: 0; right: 0;\n  height: 38px;\n  background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);\n  pointer-events: none;\n}\n.pdetail__start { position: absolute; top: 14px; left: 20px; z-index: 1; }\n.pdetail__start small { display: block; font-size: 14px; font-weight: 400; opacity: 1; line-height: 1.45; }\n.pdetail__start b { display: block; font-size: 17px; font-weight: 700; line-height: 1.2; letter-spacing: 0.01em; }\n.pdetail__time { position: absolute; top: 25px; right: 20px; font-size: 17px; font-weight: 600; z-index: 1; }\n.pdetail__vline { position: absolute; top: 8px; left: 50%; width: 1px; height: 19px; background: rgba(255,255,255,0.6); transform: translateX(-50%); }\n.pdetail__hline { position: absolute; top: 58px; height: 1px; background: rgba(255,255,255,0.6); }\n.pdetail__hline--l { left: 20px; width: 99.5px; }\n.pdetail__hline--r { right: 20px; width: 99.5px; }\n.pdetail__like { position: absolute; top: 38px; left: 50%; transform: translateX(-50%); z-index: 2; }\n.pdetail__stats {\n  position: absolute;\n  bottom: 16px; left: 53px; right: 58px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  z-index: 1;\n}\n.pdetail__stat { display: flex; align-items: center; gap: 12px; }\n.pdetail__stat b { font-size: 16px; font-weight: 700; }\n.pdetail__statico {\n  width: 32px; height: 32px;\n  border-radius: 50%;\n  border: 1px solid rgba(255,255,255,0.3);\n  display: flex; align-items: center; justify-content: center;\n  color: #ffffff;\n}\n\n/* ── Banner teal (solo negotiable · 311×60) ── */\n.pdetail__banner {\n  height: 60px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  padding: 0 24px;\n  background: linear-gradient(90deg, #00DAE0 0%, #008688 100%);\n  color: #ffffff;\n  font-size: 16px;\n  font-weight: 700;\n  line-height: 1.25;\n}\n\n/* ── Cuerpo blanco (311×260) ── */\n.pdetail__body { padding: 0 16px 40px; text-align: center; }\n/* text/VYbody-xsm · Plus Jakarta Sans · 400 · 12px · line-height space/200 (16px) */\n.pdetail__title { margin: 44px auto 0; max-width: 216px; font-size: 12px; font-weight: 400; letter-spacing: 0; color: #191C1C; line-height: 16px; }\n\n/* ── Botón Participa — misma interacción que Button (primary/negotiable) ── */\n@property --pdangle { syntax: \"<angle>\"; inherits: false; initial-value: 135deg; }\n@property --pda { syntax: \"<color>\"; inherits: false; initial-value: #ed8936; }\n@property --pdb { syntax: \"<color>\"; inherits: false; initial-value: #8460e5; }\n\n.pdetail__cta {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin-top: 12px;\n  width: 186px;\n  height: 48px;\n  padding: 0 20px;\n  border-radius: 9999px;\n  border: 2px solid transparent;\n  cursor: pointer;\n  position: relative;\n  overflow: hidden;\n  font-family: inherit;\n  font-size: 16px;\n  line-height: 20px;\n  font-weight: 600;\n  color: #ffffff;\n  text-shadow: rgba(0,0,0,0.25) 0 1px 3px;\n  background-image:\n    linear-gradient(var(--pdangle), var(--pda) 0%, var(--pda) 40%, var(--pdb) 100%),\n    var(--pd-border);\n  background-origin: padding-box, border-box;\n  background-clip: padding-box, border-box;\n  box-shadow: rgba(255,255,255,0.28) 0 1px 0 2px inset, var(--pd-glow) 0 2px 6px;\n  transition:\n    --pdangle 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),\n    --pda 0.35s,\n    --pdb 0.35s,\n    transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1),\n    box-shadow 0.25s;\n  transform: translateZ(0);\n}\n.pdetail__cta::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: 9999px;\n  background: linear-gradient(rgba(255,255,255,0.17) 0%, transparent 55%);\n  pointer-events: none;\n  z-index: 1;\n}\n.pdetail__cta::after {\n  content: \"\";\n  position: absolute;\n  inset: -4px;\n  border-radius: 9999px;\n  background: var(--pd-glowgrad);\n  filter: blur(14px);\n  opacity: 0;\n  z-index: -1;\n  transition: opacity 0.3s, filter 0.3s;\n}\n.pdetail__cta:hover {\n  transform: translateY(-2px) scale(1.02);\n  box-shadow: rgba(255,255,255,0.22) 0 1px 0 2px inset, rgba(132,96,229,0.35) 0 8px 24px, var(--pd-glow2) 0 4px 10px;\n}\n.pdetail__cta:hover::after { opacity: 0.45; filter: blur(18px); }\n.pdetail__cta:active {\n  color: #d1d5dc;\n  transform: scale(0.97) translateY(1px);\n  box-shadow: rgba(0,0,0,0.22) 0 2px 5px 2px inset, rgba(0,0,0,0.12) 0 1px 3px;\n}\n.pdetail__cta:active::after { opacity: 0; }\n.pdetail__cta:focus-visible {\n  outline: none;\n  transform: scale(0.98);\n  box-shadow: rgba(255,255,255,0.28) 0 1px 0 2px inset, 0 0 0 3px rgba(132,96,229,0.45);\n}\n\n.pdetail--live .pdetail__cta {\n  --pda: #ed8936; --pdb: #8460e5;\n  --pd-border: linear-gradient(135deg, #ffffff 0%, #fbc47d 25%, #ae8eff 75%, #ffffff 100%);\n  --pd-glow: rgba(237,137,54,0.3);\n  --pd-glow2: rgba(237,137,54,0.4);\n  --pd-glowgrad: linear-gradient(135deg, #ed8936, #8460e5);\n}\n.pdetail--live .pdetail__cta:hover { --pdangle: 220deg; --pda: #fbc47d; --pdb: #ae8eff; }\n.pdetail--live .pdetail__cta:active { --pdangle: 135deg; --pda: #d46e20; --pdb: #5a35c2; }\n\n.pdetail--negotiable .pdetail__cta {\n  --pda: #00aeb1; --pdb: #8460e5;\n  --pd-border: linear-gradient(135deg, #ffffff 0%, #4ddcdc 25%, #6445df 75%, #ffffff 100%);\n  --pd-glow: rgba(0,174,177,0.3);\n  --pd-glow2: rgba(0,174,177,0.4);\n  --pd-glowgrad: linear-gradient(135deg, #00aeb1, #8460e5);\n}\n.pdetail--negotiable .pdetail__cta:hover { --pdangle: 220deg; --pda: #4ddcdc; --pdb: #ae8eff; }\n.pdetail--negotiable .pdetail__cta:active { --pdangle: 135deg; --pda: #008688; --pdb: #5a35c2; }\n\n/* ── Precio + comisión ── */\n.pdetail__price {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  margin: 14px 0 0;\n  font-size: 12px;\n  font-weight: 400;\n  letter-spacing: 0;\n  color: #4C1EBC;\n}\n.pdetail__price b { font-size: 12px; font-weight: 400; }\n.pdetail__commission {\n  margin: 14px auto 0;\n  max-width: 215px;\n  font-size: 12px;\n  font-weight: 400;\n  letter-spacing: 0;\n  line-height: 16px;\n  color: #191C1C;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .pdetail__cta { transition: none; }\n}\n`;\n\nlet _stylesInjected = false;\n\n// ─── Iconos de stats ──────────────────────────────────────────────────────────\n\nfunction EyeIcon(): JSX.Element {\n  return (\n    <svg width=\"17\" height=\"17\" viewBox=\"86 87.5 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n      <path d=\"M96 100C96.663 100 97.2989 99.7366 97.7678 99.2678C98.2366 98.7989 98.5 98.163 98.5 97.5C98.5 96.837 98.2366 96.2011 97.7678 95.7322C97.2989 95.2634 96.663 95 96 95C95.337 95 94.7011 95.2634 94.2322 95.7322C93.7634 96.2011 93.5 96.837 93.5 97.5C93.5 98.163 93.7634 98.7989 94.2322 99.2678C94.7011 99.7366 95.337 100 96 100Z\" />\n      <path fillRule=\"evenodd\" clipRule=\"evenodd\" d=\"M87.5704 97.0643C88.7452 93.5417 92.0746 91 96.0009 91C99.9248 91 103.253 93.5393 104.429 97.0588C104.524 97.344 104.524 97.6513 104.429 97.9357C103.255 101.458 99.9248 104 95.9993 104C92.0754 104 88.7468 101.461 87.5712 97.9412C87.4763 97.6566 87.4763 97.3489 87.5712 97.0643H87.5704ZM100.145 97.5C100.145 98.597 99.7083 99.6491 98.931 100.425C98.1537 101.201 97.0994 101.636 96.0001 101.636C94.9008 101.636 93.8465 101.201 93.0691 100.425C92.2918 99.6491 91.8551 98.597 91.8551 97.5C91.8551 96.403 92.2918 95.3509 93.0691 94.5751C93.8465 93.7994 94.9008 93.3636 96.0001 93.3636C97.0994 93.3636 98.1537 93.7994 98.931 94.5751C99.7083 95.3509 100.145 96.403 100.145 97.5Z\" />\n    </svg>\n  );\n}\n\nfunction GroupIcon(): JSX.Element {\n  return (\n    <svg width=\"16\" height=\"16\" viewBox=\"208 89.5 15 15\" fill=\"currentColor\" aria-hidden=\"true\">\n      <path d=\"M219.534 97.5H218.5C218.603 97.8176 218.707 98.1353 218.707 98.4529V102.476C218.707 102.688 218.707 102.794 218.603 102.9H220.362C220.983 102.9 221.5 102.371 221.5 101.735V99.5118C221.5 98.4529 220.672 97.5 219.534 97.5Z\" />\n      <path d=\"M211.7 98.4529C211.7 98.1353 211.8 97.8176 211.9 97.5H210.9C209.8 97.5 209 98.4529 209 99.5118V101.735C209 102.371 209.5 102.9 210.1 102.9H211.8C211.7 102.794 211.7 102.688 211.7 102.476V98.4529Z\" />\n      <path d=\"M216.369 96.8636H214.169C213.069 96.8636 212.269 97.6636 212.269 98.6636V102.464C212.269 102.664 212.369 102.864 212.569 102.864H217.969C218.169 102.864 218.269 102.664 218.269 102.464V98.6636C218.269 97.6636 217.469 96.8636 216.369 96.8636Z\" />\n      <path d=\"M215.323 90.5C214.123 90.5 213.023 91.5 213.023 92.8C213.023 93.6 213.523 94.3 214.223 94.7C214.523 94.9 214.923 95 215.323 95C215.723 95 216.123 94.9 216.423 94.7C217.123 94.3 217.623 93.6 217.623 92.8C217.623 91.5 216.523 90.5 215.323 90.5Z\" />\n      <path d=\"M211.062 93.1727C210.162 93.1727 209.362 93.9727 209.362 94.8727C209.362 95.7727 210.162 96.5727 211.062 96.5727C211.362 96.5727 211.562 96.4727 211.762 96.3727C212.162 96.2727 212.362 95.9727 212.562 95.6727C212.762 95.3727 212.762 95.1727 212.762 94.8727C212.762 93.9727 212.062 93.1727 211.062 93.1727Z\" />\n      <path d=\"M219.677 93.1727C218.677 93.1727 217.977 93.9727 217.977 94.8727C217.977 95.1727 217.977 95.3727 218.177 95.6727C218.377 95.9727 218.577 96.2727 218.977 96.3727C219.177 96.4727 219.377 96.5727 219.677 96.5727C220.577 96.5727 221.377 95.7727 221.377 94.8727C221.377 93.9727 220.577 93.1727 219.677 93.1727Z\" />\n    </svg>\n  );\n}\n\nfunction MessageIcon(): JSX.Element {\n  return (\n    <svg width=\"18\" height=\"18\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n      <path d=\"M18 7.12C18 6.78052 17.8703 6.45495 17.6395 6.2149C17.4087 5.97486 17.0957 5.84 16.7692 5.84H14.3077V3.28C14.3077 2.94052 14.178 2.61495 13.9472 2.3749C13.7164 2.13486 13.4033 2 13.0769 2H3.23077C2.90435 2 2.5913 2.13486 2.36048 2.3749C2.12967 2.61495 2 2.94052 2 3.28V13.52C2.00036 13.6404 2.03337 13.7583 2.09525 13.86C2.15712 13.9618 2.24534 14.0434 2.34978 14.0953C2.45422 14.1473 2.57063 14.1676 2.68565 14.1538C2.80067 14.1401 2.90962 14.0929 3 14.0176L5.69231 11.76V14.16C5.69231 14.4995 5.82198 14.825 6.05279 15.0651C6.28361 15.3051 6.59666 15.44 6.92308 15.44H14.1223L17 17.8576C17.1089 17.9492 17.2446 17.9994 17.3846 18C17.5478 18 17.7044 17.9326 17.8198 17.8125C17.9352 17.6925 18 17.5297 18 17.36V7.12ZM14.7269 14.3024C14.618 14.2108 14.4824 14.1606 14.3423 14.16H6.92308V11.6H13.0769C13.4033 11.6 13.7164 11.4651 13.9472 11.2251C14.178 10.9851 14.3077 10.6595 14.3077 10.32V7.12H16.7692V16.02L14.7269 14.3024Z\" />\n    </svg>\n  );\n}\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\nexport default function DetailCard({\n  variant = \"live\",\n  startLabel,\n  bannerText,\n  day = \"LUNES 04\",\n  time = \"11:11 pm\",\n  views = 11,\n  likes = 11,\n  participants = 11,\n  title,\n  priceLabel = \"Precio Base:\",\n  price = \"US$ 12,999\",\n  commission,\n  liked,\n  onLikeChange,\n  ctaLabel,\n  onParticipate,\n  className = \"\",\n}: DetailCardProps): JSX.Element {\n  useId();\n\n  // Defaults por variante. En negotiable el cuerpo es más corto (sin fila de\n  // precio) pero lleva banner teal → el alto total queda igual que en live.\n  const isNeg = variant === \"negotiable\";\n  const resolvedStartLabel = startLabel ?? (isNeg ? \"Cierra\" : \"Inicia\");\n  const resolvedBanner = bannerText ?? (isNeg ? \"¡Aprende a negociar con Subastin!\" : \"\");\n  const resolvedTitle = title ?? (isNeg ? \"Aprovecha esta oportunidad y haz una propuesta al vendedor.\" : \"¡Oportunidad para el que sabe!\");\n  const resolvedCta = ctaLabel ?? (isNeg ? \"Negocia ahora\" : \"Participa\");\n  const resolvedCommission = commission ?? (isNeg ? \"Comisión >S< 0\" : \"Comisión: 7.5% del valor de compra o mínimo >S< 50\");\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 = DETAILCARD_STYLES;\n      document.head.appendChild(el);\n    }\n    _stylesInjected = true;\n  }\n\n  return (\n    <>\n      <style id={`${STYLE_ID}-ssr`} suppressHydrationWarning dangerouslySetInnerHTML={{ __html: DETAILCARD_STYLES }} />\n      <div className={[\"pdetail\", `pdetail--${variant}`, className].filter(Boolean).join(\" \")}>\n\n        {/* Header */}\n        <div className=\"pdetail__head\">\n          <div className=\"pdetail__start\">\n            <small>{resolvedStartLabel}</small>\n            <b>{day}</b>\n          </div>\n          <span className=\"pdetail__time\">{time}</span>\n          <span className=\"pdetail__vline\" />\n          <span className=\"pdetail__hline pdetail__hline--l\" />\n          <span className=\"pdetail__hline pdetail__hline--r\" />\n          <div className=\"pdetail__like\">\n            <LikeButton size=\"lg\" active={liked} onChange={onLikeChange} aria-label=\"Guardar oferta\" />\n          </div>\n          <div className=\"pdetail__stats\">\n            <span className=\"pdetail__stat\"><b>{views}</b><span className=\"pdetail__statico\"><EyeIcon /></span></span>\n            <span className=\"pdetail__stat\"><b>{likes}</b></span>\n            <span className=\"pdetail__stat\"><span className=\"pdetail__statico\">{isNeg ? <MessageIcon /> : <GroupIcon />}</span><b>{participants}</b></span>\n          </div>\n        </div>\n\n        {/* Banner teal (negotiable) */}\n        {resolvedBanner ? <div className=\"pdetail__banner\">{resolvedBanner}</div> : null}\n\n        {/* Body */}\n        <div className=\"pdetail__body\">\n          <p className=\"pdetail__title\">{resolvedTitle}</p>\n          <button type=\"button\" className=\"pdetail__cta\" onClick={onParticipate}>{resolvedCta}</button>\n          {!isNeg && (\n            <div className=\"pdetail__price\">\n              <PriceIcon size=\"md\" title=\"Precio base\" />\n              <span>{priceLabel} <b>{price}</b></span>\n            </div>\n          )}\n          <p className=\"pdetail__commission\">{resolvedCommission}</p>\n        </div>\n      </div>\n    </>\n  );\n}\n"
    },
    {
      "path": "components/LikeButton.tsx",
      "type": "registry:file",
      "target": "components/LikeButton.tsx",
      "content": "\"use client\";\r\n\r\n/**\r\n * LikeButton — Generado por Concorde\r\n * Fuente: Figma VOYAGER Design System · node 1119:11379\r\n * Preview: https://voyager-ds.vercel.app/preview/components/pase1\r\n * Generado: 2026-05-28 (revisado con Figma)\r\n * EDITAR LIBREMENTE después de generar\r\n */\r\n\r\nimport { forwardRef, useState, useCallback } from \"react\";\r\nimport type { ButtonHTMLAttributes, JSX, MouseEvent } from \"react\";\r\n\r\n// ─── Types ────────────────────────────────────────────────────────────────────\r\n\r\nexport type LikeButtonSize = \"sm\" | \"md\" | \"lg\";\r\n\r\n/**\r\n * Hereda los atributos nativos de <button> (type, name, aria-*, data-*, style…)\r\n * salvo onChange, que aquí entrega el booleano de estado activo.\r\n */\r\nexport interface LikeButtonProps\r\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"onChange\"> {\r\n  /** Tamaño: sm=24px · md=32px · lg=40px */\r\n  size?: LikeButtonSize;\r\n  /** Estado activo controlado externamente */\r\n  active?: boolean;\r\n  /** Estado activo inicial (modo no controlado) */\r\n  defaultActive?: boolean;\r\n  /** Muestra skeleton de carga */\r\n  skeleton?: boolean;\r\n  /** Callback al alternar el like */\r\n  onChange?: (active: boolean) => void;\r\n}\r\n\r\n// ─── Tokens de tamaño — fuente: Figma node 1119:11379 ─────────────────────────\r\n\r\n// icon/strokeW exactos de los SVG exports (Size=Small/Medium/Large, State=Default)\r\nconst SIZE_MAP: Record<LikeButtonSize, { btn: number; icon: number; strokeW: number; border: string; padding: string }> = {\r\n  sm: { btn: 24, icon: 13, strokeW: 1,   border: \"2px\",    padding: \"2px\" },\r\n  md: { btn: 32, icon: 14, strokeW: 1.2, border: \"1.44px\", padding: \"1.44px\" },\r\n  lg: { btn: 40, icon: 21, strokeW: 1.4, border: \"2px\",    padding: \"2px\" },\r\n};\r\n\r\n// ─── SVG heart path ───────────────────────────────────────────────────────────\r\n\r\nconst HEART_PATH =\r\n  \"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\n// ─── Self-contained CSS ───────────────────────────────────────────────────────\r\n\r\nconst STYLE_ID = \"concorde-plike-styles\";\r\n\r\nconst PLIKE_STYLES = `\r\n@keyframes plike-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 plike-pulse {\r\n  0%, 100% { opacity: 1; }\r\n  50%       { opacity: 0.4; }\r\n}\r\n\r\n/* Default sync EXACTO de los SVG exports de Figma (nodos 1136:11505 / 1126:11466 / 1126:11432):\r\n   círculo blanco + BORDE GRADIENTE lila + sin drop shadow en default. */\r\n.plike {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border-radius: 9999px;\r\n  border-style: solid;\r\n  border-color: transparent;\r\n  cursor: pointer;\r\n  position: relative;\r\n  overflow: hidden;\r\n  background:\r\n    linear-gradient(#ffffff, #ffffff) padding-box,\r\n    linear-gradient(135deg, #e8ddff 0%, #ffffff 40%, #cfbaff 75%, #ae8eff 100%) border-box;\r\n  box-shadow: none;\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    filter 0.25s,\r\n    background 0.2s;\r\n  transform: translateZ(0);\r\n}\r\n\r\n/* Glass highlight overlay — 0.18 (sm/lg) según SVG; md usa 0.55 */\r\n.plike::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: 0;\r\n  border-radius: 9999px;\r\n  background: linear-gradient(\r\n    rgba(255, 255, 255, 0.18) 0%,\r\n    transparent 50%\r\n  );\r\n  pointer-events: none;\r\n  z-index: 1;\r\n}\r\n.plike--md::before {\r\n  background: linear-gradient(\r\n    rgba(255, 255, 255, 0.55) 0%,\r\n    transparent 50%\r\n  );\r\n}\r\n\r\n/* El corazón siempre por encima del glass/glow */\r\n.plike svg {\r\n  position: relative;\r\n  z-index: 2;\r\n}\r\n\r\n/* Hover — lift (interacción Concorde) + sombra morada #200068 exacta del SVG */\r\n.plike:hover:not(.plike--disabled):not(.plike--skeleton) {\r\n  transform: scale(1.08) translateY(-2px);\r\n  box-shadow:\r\n    rgba(32, 0, 104, 0.22) 0px 10px 18px,\r\n    rgba(32, 0, 104, 0.12) 0px 3px 6px;\r\n}\r\n/* En hover el glass sube a 0.55 en TODOS los tamaños (SVG hover) */\r\n.plike:hover:not(.plike--disabled):not(.plike--skeleton):not(.plike--active)::before {\r\n  background: linear-gradient(rgba(255, 255, 255, 0.55) 0%, transparent 50%);\r\n}\r\n\r\n/* Press */\r\n.plike:active:not(.plike--disabled):not(.plike--skeleton) {\r\n  transform: scale(0.92);\r\n}\r\n\r\n/* Focus ring */\r\n.plike:focus-visible {\r\n  outline: 2px solid #8460e5;\r\n  outline-offset: 3px;\r\n}\r\n\r\n/* ── Sizes (Figma) ── */\r\n.plike--sm { width: 24px; height: 24px; border-width: 2px;    padding: 2px; }\r\n.plike--md { width: 32px; height: 32px; border-width: 1.44px; padding: 1.44px; }\r\n.plike--lg { width: 40px; height: 40px; border-width: 2px;    padding: 2px; }\r\n\r\n/* En sm el gradiente del borde invierte los 2 últimos stops (SVG 1136:11505) */\r\n.plike--sm:not(.plike--active):not(.plike--disabled):not(.plike--skeleton) {\r\n  background:\r\n    linear-gradient(#ffffff, #ffffff) padding-box,\r\n    linear-gradient(135deg, #e8ddff 0%, #ffffff 40%, #ae8eff 75%, #cfbaff 100%) border-box;\r\n}\r\n\r\n/* ── Active / liked — sync EXACTO SVG (1126:11427 sm / 1119:11380 md / 1119:11378 lg):\r\n   bg morado + BORDE GRADIENTE naranja→lila + glow radial #AE8EFF + corazón blanco 0.92 */\r\n.plike--active {\r\n  background:\r\n    linear-gradient(135deg, #8460e5 0%, #3b1782 100%) padding-box,\r\n    linear-gradient(135deg, #fbc47d 0%, #ffffff 40%, #ae8eff 75%, #cfbaff 100%) border-box;\r\n  border-color: transparent;\r\n  filter: drop-shadow(0px 3px 12px rgba(132, 96, 229, 0.35));\r\n  box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.22);\r\n}\r\n\r\n.plike--active::before {\r\n  background: linear-gradient(\r\n    rgba(255, 255, 255, 0.18) 0%,\r\n    transparent 50%\r\n  );\r\n}\r\n\r\n/* Glow radial morado del SVG (radial #AE8EFF, opacidad 0.35, difuminado) */\r\n.plike--active::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: 0;\r\n  border-radius: 9999px;\r\n  background: radial-gradient(circle at 50% 52%, rgba(174, 142, 255, 0.5) 0%, rgba(174, 142, 255, 0) 70%);\r\n  pointer-events: none;\r\n  z-index: 1;\r\n}\r\n\r\n/* Heart pop animation on toggle-to-active */\r\n.plike--pop svg {\r\n  animation: plike-heart-pop 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) 1;\r\n}\r\n\r\n/* ── Disabled ── */\r\n.plike--disabled {\r\n  cursor: not-allowed;\r\n  background: var(--component-button-like-bg, #ffffff);\r\n  border-color: transparent;\r\n  box-shadow: none;\r\n  filter: drop-shadow(0px 8px 16px rgba(0, 0, 0, 0.10));\r\n  pointer-events: none;\r\n}\r\n.plike--disabled::before { display: none; }\r\n\r\n/* ── Skeleton ── */\r\n.plike--skeleton {\r\n  background: var(--color-background-disabled, #e1e3e2);\r\n  border-color: transparent;\r\n  box-shadow: none;\r\n  filter: none;\r\n  cursor: default;\r\n  pointer-events: none;\r\n  padding: 0;\r\n  animation: plike-pulse 1.6s ease-in-out infinite;\r\n}\r\n.plike--skeleton::before { display: none; }\r\n\r\n/* ── Reduced motion — siempre ── */\r\n@media (prefers-reduced-motion: reduce) {\r\n  .plike,\r\n  .plike::before { transition: none; }\r\n  .plike--pop svg { animation: none; }\r\n  .plike--skeleton { animation: none; opacity: 0.55; }\r\n}\r\n`;\r\n\r\nlet _stylesInjected = false;\r\n\r\n// ─── Component ────────────────────────────────────────────────────────────────\r\n\r\nconst LikeButton = forwardRef<HTMLButtonElement, LikeButtonProps>(function LikeButton({\r\n  size = \"md\",\r\n  active: controlledActive,\r\n  defaultActive = false,\r\n  disabled = false,\r\n  skeleton = false,\r\n  onChange,\r\n  onClick,\r\n  style,\r\n  \"aria-label\": ariaLabel = \"Me gusta\",\r\n  className = \"\",\r\n  ...rest\r\n}, ref): JSX.Element {\r\n  // Soporte controlado / no controlado\r\n  const isControlled = controlledActive !== undefined;\r\n  const [internalActive, setInternalActive] = useState(defaultActive);\r\n  const isActive = isControlled ? controlledActive : internalActive;\r\n\r\n  // Trigger animación heart-pop al activar\r\n  const [popping, setPopping] = useState(false);\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 = PLIKE_STYLES;\r\n      document.head.appendChild(el);\r\n    }\r\n    _stylesInjected = true;\r\n  }\r\n\r\n  const handleClick = useCallback((e: MouseEvent<HTMLButtonElement>) => {\r\n    onClick?.(e);\r\n    if (disabled || skeleton) return;\r\n    const next = !isActive;\r\n    if (!isControlled) setInternalActive(next);\r\n    onChange?.(next);\r\n    if (next) {\r\n      setPopping(true);\r\n      setTimeout(() => { setPopping(false); }, 420);\r\n    }\r\n  }, [isActive, isControlled, disabled, skeleton, onChange, onClick]);\r\n\r\n  const { btn: btnPx, icon: iconPx, strokeW } = SIZE_MAP[size];\r\n\r\n  const classes = [\r\n    \"plike\",\r\n    `plike--${size}`,\r\n    isActive  ? \"plike--active\"   : \"\",\r\n    disabled  ? \"plike--disabled\" : \"\",\r\n    skeleton  ? \"plike--skeleton\" : \"\",\r\n    popping   ? \"plike--pop\"      : \"\",\r\n    className,\r\n  ]\r\n    .filter(Boolean)\r\n    .join(\" \");\r\n\r\n  // SVG fill/stroke según estado — default EXACTO de los SVG exports de Figma:\r\n  // corazón BLANCO RELLENO con stroke #5A35C2 (no solo contorno).\r\n  const svgFill   = isActive ? \"rgba(255, 255, 255, 0.92)\" : \"#ffffff\";\r\n  // disabled: corazón outline gris #E1E3E2 exacto del SVG; active: blanco relleno sin stroke\r\n  const svgStroke = disabled   ? \"#e1e3e2\"\r\n                  : isActive   ? \"none\"\r\n                  : \"var(--vmc-color-vault-600, #5a35c2)\";\r\n\r\n  return (\r\n    <>\r\n      <style\r\n        id={`${STYLE_ID}-ssr`}\r\n        suppressHydrationWarning\r\n        dangerouslySetInnerHTML={{ __html: PLIKE_STYLES }}\r\n      />\r\n      <button\r\n        ref={ref}\r\n        type=\"button\"\r\n        {...rest}\r\n        className={classes}\r\n        onClick={handleClick}\r\n        disabled={disabled}\r\n        aria-label={ariaLabel}\r\n        aria-pressed={isActive}\r\n        style={{ width: btnPx, height: btnPx, ...style }}\r\n      >\r\n        {!skeleton && (\r\n          <svg\r\n            width={iconPx}\r\n            height={iconPx}\r\n            viewBox=\"0 0 24 24\"\r\n            fill={svgFill}\r\n            stroke={svgStroke}\r\n            strokeWidth={strokeW}\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        )}\r\n      </button>\r\n    </>\r\n  );\r\n});\r\n\r\nexport default LikeButton;\r\n"
    },
    {
      "path": "components/PriceIcon.tsx",
      "type": "registry:file",
      "target": "components/PriceIcon.tsx",
      "content": "\"use client\";\n\n/**\n * PriceIcon — Generado por Concorde\n * Fuente: Figma VOYAGER · \"PriceIcon\" (Size=Small|Medium, State=Default|Expirada|Skeleton)\n * Nodos: 231:912 (md default) · 235:581 (md expirada) · 232:1204 (sm default) · 235:574 (sm expirada)\n * Sincronizado: 2026-06-12\n *\n * Gema de subasta (diamante + medallón con $). Ícono estático — sin interacción.\n * Figma manda en lo visual; aquí no hay capa de interacción.\n */\n\nimport { useId } from \"react\";\nimport type { JSX } from \"react\";\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport type PriceIconSize = \"sm\" | \"md\";\nexport type PriceIconState = \"default\" | \"expirada\" | \"skeleton\";\n\nexport interface PriceIconProps {\n  size?: PriceIconSize;\n  state?: PriceIconState;\n  className?: string;\n  /** Texto accesible (default: \"Precio\") */\n  title?: string;\n}\n\n// ─── Gema DEFAULT (con gradientes teal→vault + medallón $) ──────────────────────\n\nfunction GemDefaultMd({ uid }: { uid: string }): JSX.Element {\n  return (\n    <svg width=\"36\" height=\"38\" viewBox=\"0 0 36 38\" fill=\"none\" aria-hidden=\"true\">\n      <g filter={`url(#${uid}-fd)`}>\n        <path d=\"M18 21.5L30 27L18 32.5L6 27L18 21.5Z\" fill={`url(#${uid}-d)`} />\n        <path d=\"M18 21.5L30 27L18 32.5L6 27L18 21.5\" stroke={`url(#${uid}-ds)`} strokeWidth=\"2\" strokeLinejoin=\"round\" />\n        <g filter={`url(#${uid}-fm)`}>\n          <g clipPath={`url(#${uid}-c0)`}>\n            <rect x=\"8\" y=\"7\" width=\"20\" height=\"20\" rx=\"10\" fill={`url(#${uid}-c)`} />\n            <g clipPath={`url(#${uid}-c1)`}>\n              <path d=\"M18 12.4165V21.5832\" stroke=\"white\" strokeOpacity=\"0.92\" strokeWidth=\"1.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n              <path d=\"M20.0833 14.0835H16.9583C16.1535 14.0835 15.5 14.737 15.5 15.5418C15.5 16.3467 16.1535 17.0002 16.9583 17.0002H19.0417C19.8465 17.0002 20.5 17.6536 20.5 18.4585C20.5 19.2634 19.8465 19.9168 19.0417 19.9168H15.5\" stroke=\"white\" strokeOpacity=\"0.92\" strokeWidth=\"1.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n            </g>\n            <rect x=\"10\" y=\"9\" width=\"16\" height=\"16\" rx=\"8\" fill={`url(#${uid}-cg)`} />\n          </g>\n          <rect x=\"9\" y=\"8\" width=\"18\" height=\"18\" rx=\"9\" stroke={`url(#${uid}-cb)`} strokeWidth=\"2\" />\n        </g>\n      </g>\n      <defs>\n        <filter id={`${uid}-fd`} x=\"4\" y=\"7\" width=\"28\" height=\"31\" filterUnits=\"userSpaceOnUse\" colorInterpolationFilters=\"sRGB\">\n          <feFlood floodOpacity=\"0\" result=\"bg\" />\n          <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"ha\" />\n          <feOffset dy=\"1\" />\n          <feGaussianBlur stdDeviation=\"0.5\" />\n          <feComposite in2=\"ha\" operator=\"out\" />\n          <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.02 0\" />\n          <feBlend mode=\"normal\" in2=\"bg\" result=\"e1\" />\n          <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"e1\" result=\"shape\" />\n        </filter>\n        <filter id={`${uid}-fm`} x=\"0\" y=\"0\" width=\"36\" height=\"36\" filterUnits=\"userSpaceOnUse\" colorInterpolationFilters=\"sRGB\">\n          <feFlood floodOpacity=\"0\" result=\"bg\" />\n          <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"ha\" />\n          <feOffset dy=\"1\" />\n          <feGaussianBlur stdDeviation=\"4\" />\n          <feComposite in2=\"ha\" operator=\"out\" />\n          <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.130618 0 0 0 0 0.155494 0 0 0 0 0.666156 0 0 0 0.22 0\" />\n          <feBlend mode=\"normal\" in2=\"bg\" result=\"e1\" />\n          <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"ha2\" />\n          <feOffset dy=\"2\" />\n          <feGaussianBlur stdDeviation=\"2\" />\n          <feComposite in2=\"ha2\" operator=\"out\" />\n          <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0\" />\n          <feBlend mode=\"normal\" in2=\"e1\" result=\"e2\" />\n          <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"e2\" result=\"shape\" />\n          <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"ha3\" />\n          <feMorphology radius=\"2\" operator=\"erode\" in=\"SourceAlpha\" result=\"e3\" />\n          <feOffset dy=\"-1\" />\n          <feComposite in2=\"ha3\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\" />\n          <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0\" />\n          <feBlend mode=\"normal\" in2=\"shape\" result=\"e3o\" />\n          <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"ha4\" />\n          <feMorphology radius=\"2\" operator=\"erode\" in=\"SourceAlpha\" result=\"e4\" />\n          <feOffset dy=\"1\" />\n          <feComposite in2=\"ha4\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\" />\n          <feColorMatrix type=\"matrix\" values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.52 0\" />\n          <feBlend mode=\"normal\" in2=\"e3o\" result=\"e4o\" />\n        </filter>\n        <linearGradient id={`${uid}-d`} x1=\"6\" y1=\"21.5\" x2=\"29.121\" y2=\"34.1115\" gradientUnits=\"userSpaceOnUse\">\n          <stop stopColor=\"#00A7A8\" /><stop offset=\"0.4\" stopColor=\"#86A4E4\" /><stop offset=\"0.75\" stopColor=\"#4C1EBC\" /><stop offset=\"1\" stopColor=\"#300089\" />\n        </linearGradient>\n        <linearGradient id={`${uid}-ds`} x1=\"6\" y1=\"21.5\" x2=\"29.121\" y2=\"34.1115\" gradientUnits=\"userSpaceOnUse\">\n          <stop stopColor=\"#73DFDF\" /><stop offset=\"0.0001\" stopColor=\"#5C82DA\" /><stop offset=\"0.283654\" stopColor=\"white\" stopOpacity=\"0.9\" /><stop offset=\"0.875\" stopColor=\"#452AA2\" stopOpacity=\"0.6\" />\n        </linearGradient>\n        <linearGradient id={`${uid}-c`} x1=\"10.0116\" y1=\"5.59144\" x2=\"25.9884\" y2=\"28.4086\" gradientUnits=\"userSpaceOnUse\">\n          <stop stopColor=\"#00ABAD\" /><stop offset=\"0.4\" stopColor=\"#86A4E4\" /><stop offset=\"0.75\" stopColor=\"#4C1EBC\" /><stop offset=\"1\" stopColor=\"#31008A\" />\n        </linearGradient>\n        <linearGradient id={`${uid}-cg`} x1=\"18\" y1=\"9\" x2=\"18\" y2=\"25\" gradientUnits=\"userSpaceOnUse\">\n          <stop stopColor=\"white\" stopOpacity=\"0.45\" /><stop offset=\"0.5\" stopColor=\"white\" stopOpacity=\"0\" />\n        </linearGradient>\n        <linearGradient id={`${uid}-cb`} x1=\"10.0116\" y1=\"5.59144\" x2=\"25.9884\" y2=\"28.4086\" gradientUnits=\"userSpaceOnUse\">\n          <stop stopColor=\"#44D6D6\" /><stop offset=\"0.206731\" stopColor=\"#E4EEFF\" stopOpacity=\"0.5\" /><stop offset=\"0.495192\" stopColor=\"#567CD3\" /><stop offset=\"1\" stopColor=\"#3D0D9E\" />\n        </linearGradient>\n        <clipPath id={`${uid}-c0`}><rect x=\"8\" y=\"7\" width=\"20\" height=\"20\" rx=\"10\" fill=\"white\" /></clipPath>\n        <clipPath id={`${uid}-c1`}><rect width=\"10\" height=\"10\" fill=\"white\" transform=\"translate(13 12)\" /></clipPath>\n      </defs>\n    </svg>\n  );\n}\n\nfunction GemDefaultSm({ uid }: { uid: string }): JSX.Element {\n  return (\n    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n      <g clipPath={`url(#${uid}-c0)`}>\n        <g filter={`url(#${uid}-fd)`}>\n          <path d=\"M12 9.03174L19.3296 14.0497L12 19.0676L4.67041 14.0497L12 9.03174Z\" fill={`url(#${uid}-d)`} />\n          <path d=\"M12 9.03174L19.3296 14.0497L12 19.0676L4.67041 14.0497L12 9.03174\" stroke={`url(#${uid}-ds)`} strokeWidth=\"2\" strokeLinejoin=\"round\" />\n          <g filter={`url(#${uid}-fm)`}>\n            <g clipPath={`url(#${uid}-c1)`}>\n              <rect x=\"5.5\" y=\"3\" width=\"13\" height=\"13\" rx=\"6.5\" fill={`url(#${uid}-c)`} />\n              <path d=\"M12 6.18115L12 12.3735\" stroke=\"white\" strokeOpacity=\"0.92\" strokeWidth=\"0.623537\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n              <path d=\"M13.4866 7.34766H11.2567C10.6824 7.34766 10.2161 7.7873 10.2161 8.32882C10.2161 8.87034 10.6824 9.30999 11.2567 9.30999H12.7433C13.3176 9.30999 13.7839 9.74963 13.7839 10.2911C13.7839 10.8327 13.3176 11.2723 12.7433 11.2723H10.2161\" stroke=\"white\" strokeOpacity=\"0.92\" strokeWidth=\"0.570859\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n              <rect x=\"7.5\" y=\"5\" width=\"9\" height=\"9\" rx=\"4.5\" fill={`url(#${uid}-cg)`} />\n            </g>\n            <rect x=\"6.5\" y=\"4\" width=\"11\" height=\"11\" rx=\"5.5\" stroke={`url(#${uid}-cb)`} strokeWidth=\"2\" />\n          </g>\n        </g>\n      </g>\n      <defs>\n        <filter id={`${uid}-fd`} x=\"-2\" y=\"3\" width=\"28\" height=\"28\" filterUnits=\"userSpaceOnUse\" colorInterpolationFilters=\"sRGB\">\n          <feFlood floodOpacity=\"0\" result=\"bg\" />\n          <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"ha\" />\n          <feOffset dy=\"1\" /><feGaussianBlur stdDeviation=\"0.5\" /><feComposite in2=\"ha\" operator=\"out\" />\n          <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.02 0\" />\n          <feBlend mode=\"normal\" in2=\"bg\" result=\"e1\" /><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"e1\" result=\"shape\" />\n        </filter>\n        <filter id={`${uid}-fm`} x=\"-2.5\" y=\"-4\" width=\"29\" height=\"29\" filterUnits=\"userSpaceOnUse\" colorInterpolationFilters=\"sRGB\">\n          <feFlood floodOpacity=\"0\" result=\"bg\" />\n          <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"ha\" />\n          <feOffset dy=\"1\" /><feGaussianBlur stdDeviation=\"4\" /><feComposite in2=\"ha\" operator=\"out\" />\n          <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.130618 0 0 0 0 0.155494 0 0 0 0 0.666156 0 0 0 0.22 0\" />\n          <feBlend mode=\"normal\" in2=\"bg\" result=\"e1\" />\n          <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"ha2\" />\n          <feOffset dy=\"2\" /><feGaussianBlur stdDeviation=\"2\" /><feComposite in2=\"ha2\" operator=\"out\" />\n          <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0\" />\n          <feBlend mode=\"normal\" in2=\"e1\" result=\"e2\" /><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"e2\" result=\"shape\" />\n          <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"ha3\" />\n          <feMorphology radius=\"2\" operator=\"erode\" in=\"SourceAlpha\" result=\"e3\" />\n          <feOffset dy=\"-1\" /><feComposite in2=\"ha3\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\" />\n          <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0\" />\n          <feBlend mode=\"normal\" in2=\"shape\" result=\"e3o\" />\n          <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"ha4\" />\n          <feMorphology radius=\"2\" operator=\"erode\" in=\"SourceAlpha\" result=\"e4\" />\n          <feOffset dy=\"1\" /><feComposite in2=\"ha4\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\" />\n          <feColorMatrix type=\"matrix\" values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.52 0\" />\n          <feBlend mode=\"normal\" in2=\"e3o\" result=\"e4o\" />\n        </filter>\n        <linearGradient id={`${uid}-d`} x1=\"4.67041\" y1=\"9.03174\" x2=\"20.8384\" y2=\"14.9358\" gradientUnits=\"userSpaceOnUse\">\n          <stop stopColor=\"#00A7A8\" /><stop offset=\"0.4\" stopColor=\"#86A4E4\" /><stop offset=\"0.75\" stopColor=\"#4C1EBC\" /><stop offset=\"1\" stopColor=\"#300089\" />\n        </linearGradient>\n        <linearGradient id={`${uid}-ds`} x1=\"4.67041\" y1=\"9.03174\" x2=\"20.8384\" y2=\"14.9358\" gradientUnits=\"userSpaceOnUse\">\n          <stop stopColor=\"#73DFDF\" /><stop offset=\"0.25\" stopColor=\"white\" stopOpacity=\"0.9\" /><stop offset=\"0.55\" stopColor=\"#5C82DA\" /><stop offset=\"1\" stopColor=\"#452AA2\" stopOpacity=\"0.6\" />\n        </linearGradient>\n        <linearGradient id={`${uid}-c`} x1=\"6.80756\" y1=\"2.08443\" x2=\"17.1924\" y2=\"16.9156\" gradientUnits=\"userSpaceOnUse\">\n          <stop stopColor=\"#00ABAD\" /><stop offset=\"0.4\" stopColor=\"#86A4E4\" /><stop offset=\"0.75\" stopColor=\"#4C1EBC\" /><stop offset=\"1\" stopColor=\"#31008A\" />\n        </linearGradient>\n        <linearGradient id={`${uid}-cg`} x1=\"12\" y1=\"5\" x2=\"12\" y2=\"14\" gradientUnits=\"userSpaceOnUse\">\n          <stop stopColor=\"white\" stopOpacity=\"0.45\" /><stop offset=\"0.5\" stopColor=\"white\" stopOpacity=\"0\" />\n        </linearGradient>\n        <linearGradient id={`${uid}-cb`} x1=\"6.80756\" y1=\"2.08443\" x2=\"17.1924\" y2=\"16.9156\" gradientUnits=\"userSpaceOnUse\">\n          <stop stopColor=\"#44D6D6\" /><stop offset=\"0.206731\" stopColor=\"#E4EEFF\" stopOpacity=\"0.5\" /><stop offset=\"0.495192\" stopColor=\"#567CD3\" /><stop offset=\"1\" stopColor=\"#3D0D9E\" />\n        </linearGradient>\n        <clipPath id={`${uid}-c0`}><rect width=\"24\" height=\"24\" fill=\"white\" /></clipPath>\n        <clipPath id={`${uid}-c1`}><rect x=\"5.5\" y=\"3\" width=\"13\" height=\"13\" rx=\"6.5\" fill=\"white\" /></clipPath>\n      </defs>\n    </svg>\n  );\n}\n\n// ─── Gema EXPIRADA (gris #E1E3E2 + $ blanco) ────────────────────────────────────\n\nfunction GemExpiradaMd({ uid }: { uid: string }): JSX.Element {\n  return (\n    <svg width=\"28\" height=\"32\" viewBox=\"0 0 28 32\" fill=\"none\" aria-hidden=\"true\">\n      <path d=\"M14 15.5L26 21L14 26.5L2 21L14 15.5Z\" fill=\"#E1E3E2\" />\n      <path d=\"M14 15.5L26 21L14 26.5L2 21L14 15.5\" stroke=\"#E1E3E2\" strokeWidth=\"2\" strokeLinejoin=\"round\" />\n      <rect x=\"5\" y=\"2\" width=\"18\" height=\"18\" rx=\"9\" fill=\"#E1E3E2\" />\n      <rect x=\"5\" y=\"2\" width=\"18\" height=\"18\" rx=\"9\" stroke=\"#E1E3E2\" strokeWidth=\"2\" />\n      <g clipPath={`url(#${uid}-c0)`}>\n        <path d=\"M14 6.4165V15.5832\" stroke=\"white\" strokeOpacity=\"0.92\" strokeWidth=\"1.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        <path d=\"M16.0833 8.0835H12.9583C12.1535 8.0835 11.5 8.73695 11.5 9.54183C11.5 10.3467 12.1535 11.0002 12.9583 11.0002H15.0417C15.8465 11.0002 16.5 11.6536 16.5 12.4585C16.5 13.2634 15.8465 13.9168 15.0417 13.9168H11.5\" stroke=\"white\" strokeOpacity=\"0.92\" strokeWidth=\"1.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n      </g>\n      <defs>\n        <clipPath id={`${uid}-c0`}><rect width=\"10\" height=\"10\" fill=\"white\" transform=\"translate(9 6)\" /></clipPath>\n      </defs>\n    </svg>\n  );\n}\n\nfunction GemExpiradaSm({ uid }: { uid: string }): JSX.Element {\n  return (\n    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n      <g clipPath={`url(#${uid}-c0)`}>\n        <path d=\"M12 9.03223L19.3296 14.0502L12 19.0681L4.67041 14.0502L12 9.03223Z\" fill=\"#E1E3E2\" />\n        <path d=\"M12 9.03223L19.3296 14.0502L12 19.0681L4.67041 14.0502L12 9.03223\" stroke=\"#E1E3E2\" strokeWidth=\"2\" strokeLinejoin=\"round\" />\n        <g clipPath={`url(#${uid}-c1)`}>\n          <rect x=\"5.5\" y=\"3\" width=\"13\" height=\"13\" rx=\"6.5\" fill=\"#E1E3E2\" />\n          <path d=\"M12 6.18115L12 12.3735\" stroke=\"white\" strokeOpacity=\"0.92\" strokeWidth=\"0.623537\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n          <path d=\"M13.4866 7.34766H11.2567C10.6824 7.34766 10.2161 7.7873 10.2161 8.32882C10.2161 8.87034 10.6824 9.30999 11.2567 9.30999H12.7433C13.3176 9.30999 13.7839 9.74963 13.7839 10.2911C13.7839 10.8327 13.3176 11.2723 12.7433 11.2723H10.2161\" stroke=\"white\" strokeOpacity=\"0.92\" strokeWidth=\"0.570859\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        </g>\n        <rect x=\"6.5\" y=\"4\" width=\"11\" height=\"11\" rx=\"5.5\" stroke=\"#E1E3E2\" strokeWidth=\"2\" />\n      </g>\n      <defs>\n        <clipPath id={`${uid}-c0`}><rect width=\"24\" height=\"24\" fill=\"white\" /></clipPath>\n        <clipPath id={`${uid}-c1`}><rect x=\"5.5\" y=\"3\" width=\"13\" height=\"13\" rx=\"6.5\" fill=\"white\" /></clipPath>\n      </defs>\n    </svg>\n  );\n}\n\n// ─── Skeleton (círculo gris) ────────────────────────────────────────────────────\n\nfunction GemSkeleton({ size }: { size: PriceIconSize }): JSX.Element {\n  if (size === \"sm\") {\n    return (\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n        <path d=\"M2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10Z\" fill=\"#E1E3E2\" />\n      </svg>\n    );\n  }\n  return (\n    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n      <path d=\"M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z\" fill=\"#E1E3E2\" />\n    </svg>\n  );\n}\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\nexport default function PriceIcon({\n  size = \"md\",\n  state = \"default\",\n  className = \"\",\n  title = \"Precio\",\n}: PriceIconProps): JSX.Element {\n  const uid = useId().replace(/:/g, \"-\");\n\n  function renderGem(): JSX.Element {\n    if (state === \"skeleton\") return <GemSkeleton size={size} />;\n    if (state === \"expirada\") return size === \"sm\" ? <GemExpiradaSm uid={uid} /> : <GemExpiradaMd uid={uid} />;\n    return size === \"sm\" ? <GemDefaultSm uid={uid} /> : <GemDefaultMd uid={uid} />;\n  }\n\n  return (\n    <span\n      className={[\"priceicon\", className].filter(Boolean).join(\" \")}\n      role=\"img\"\n      aria-label={title}\n      style={{ display: \"inline-flex\", alignItems: \"center\", justifyContent: \"center\", lineHeight: 0 }}\n    >\n      {renderGem()}\n    </span>\n  );\n}\n"
    },
    {
      "path": "components/ConditionPill.tsx",
      "type": "registry:file",
      "target": "components/ConditionPill.tsx",
      "content": "\"use client\";\n\n/**\n * ConditionPill — Generado por Concorde\n * Fuente: Figma VOYAGER · \"ConditionPill\" (nodo 3023:1638)\n *\n * Píldora 136×46 (radio 23) con relleno gradiente lila (#AE8EFF → #5A35C2),\n * borde gradiente (#CFBAFF → white → #AE8EFF → #CFBAFF), sheen blanco superior,\n * sombra externa gris (0 4px 6px) e inner highlight blanco. Texto blanco\n * centrado y editable (children). El ancho se ajusta al contenido.\n */\n\nimport type { JSX, ReactNode } from \"react\";\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport interface ConditionPillProps {\n  /** Texto dentro de la píldora (editable) */\n  children?: ReactNode;\n  /** \"filled\" = lila (condición activa, p.ej. «Con…»). \"outline\" = blanca con\n   *  texto gris (condición no incluida, p.ej. «Sin…»). Default \"filled\". */\n  variant?: \"filled\" | \"outline\";\n  className?: string;\n}\n\n// ─── Self-contained CSS ───────────────────────────────────────────────────────\n\nconst STYLE_ID = \"concorde-conditionpill-styles\";\n\nconst CONDITIONPILL_STYLES = `\n.pcondpill {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 46px;\n  padding: 6px 28px;\n  border-radius: 23px;\n  border: 2px solid transparent;\n  overflow: hidden;\n  font-family: var(--vmc-font-display, \"Plus Jakarta Sans\", -apple-system, sans-serif);\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 18px;\n  text-align: center;\n  color: #ffffff;\n  text-shadow: rgba(0,0,0,0.25) 0px 1px 3px;\n  /* Relleno gradiente (#AE8EFF → #5A35C2) + borde gradiente (#CFBAFF → white → #AE8EFF → #CFBAFF) */\n  background-image:\n    linear-gradient(225deg, #AE8EFF 0%, #5A35C2 100%),\n    linear-gradient(130deg, #CFBAFF 0%, #ffffff 35%, #AE8EFF 65%, #CFBAFF 100%);\n  background-origin: border-box;\n  background-clip: padding-box, border-box;\n  box-shadow: rgba(153,161,175,0.3) 0px 4px 6px, inset 0px 1px 0px rgba(255,255,255,0.15);\n}\n/* Sheen blanco superior (paint2 del SVG: white 0.17 → 0) */\n.pcondpill::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: 23px;\n  background: linear-gradient(180deg, rgba(255,255,255,0.17) 0%, rgba(255,255,255,0) 55%);\n  pointer-events: none;\n  z-index: 0;\n}\n.pcondpill__text {\n  position: relative;\n  z-index: 1;\n}\n/* Variante outline: blanca, texto gris, sombra suave (condición NO incluida) */\n.pcondpill--outline {\n  background-image: none;\n  background-color: #ffffff;\n  color: #9AA1AC;\n  text-shadow: none;\n  box-shadow: rgba(153,161,175,0.3) 0px 4px 8px;\n}\n.pcondpill--outline::before { display: none; }\n`;\n\nlet _stylesInjected = false;\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\nexport default function ConditionPill({ children = \"Etiqueta\", variant = \"filled\", className = \"\" }: ConditionPillProps): 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 = CONDITIONPILL_STYLES;\n      document.head.appendChild(el);\n    }\n    _stylesInjected = true;\n  }\n\n  return (\n    <>\n      <style id={`${STYLE_ID}-ssr`} suppressHydrationWarning dangerouslySetInnerHTML={{ __html: CONDITIONPILL_STYLES }} />\n      <span className={[\"pcondpill\", variant === \"outline\" ? \"pcondpill--outline\" : \"\", className].filter(Boolean).join(\" \")}>\n        <span className=\"pcondpill__text\">{children}</span>\n      </span>\n    </>\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": "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": "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": "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"
    }
  ]
}