{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "agregar-subascoins",
  "type": "registry:block",
  "title": "agregar-subascoins",
  "description": "Bloque Concorde agregar-subascoins — incluye sus 2 componentes.",
  "dependencies": [
    "react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "bloques/agregar-subascoins/desktop/AgregarSubascoins.tsx",
      "type": "registry:file",
      "target": "bloques/agregar-subascoins/desktop/AgregarSubascoins.tsx",
      "content": "/**\n * AgregarSubascoins — Bloque de Concorde (Voyager DS)\n *\n * Pantalla «Agregar SubasCoins»: Header logueado + un área gris placeholder\n * (mismo gris que los banners de los demás bloques) que ocupa el resto del alto.\n *\n * Bloque = composición de componentes existentes (reusa el bloque Header).\n */\n\nimport type { CSSProperties, JSX } from \"react\";\nimport AppHeader from \"@/concorde/bloques/header/desktop/Header\";\nimport { HEADER_HEIGHT } from \"@/concorde/bloques/header/desktop/dimensions\";\nimport SubasCoinsCard from \"./SubasCoinsCard\";\nimport { AGREGARSUBASCOINS_WIDTH, AGREGARSUBASCOINS_HEIGHT } from \"./dimensions\";\n\nexport { AGREGARSUBASCOINS_WIDTH, AGREGARSUBASCOINS_HEIGHT } from \"./dimensions\";\n\nexport interface AgregarSubascoinsProps {\n  /** Usuario logueado — alimenta el CTA del header. */\n  username?: string;\n  /** Renderiza el AppHeader interno. `false` cuando el visor lo dibuja aparte. Default `true`. */\n  renderHeader?: boolean;\n  className?: string;\n}\n\n// Banner placeholder gris 766×120 (igual estilo que los banners de Homepage / Zona).\nconst BANNER_PLACEHOLDER: CSSProperties = {\n  width: 766,\n  height: 120,\n  borderRadius: 8,\n  background: \"#E9EAEC\",\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  fontSize: 13,\n  fontWeight: 600,\n  letterSpacing: \"0.06em\",\n  color: \"#9AA1AC\",\n};\n\nexport default function AgregarSubascoins({ username = \"ZAEX5G\", renderHeader = true, className = \"\" }: AgregarSubascoinsProps): JSX.Element {\n  return (\n    <div\n      className={className}\n      data-block=\"agregar-subascoins\"\n      style={{\n        width: AGREGARSUBASCOINS_WIDTH,\n        minHeight: AGREGARSUBASCOINS_HEIGHT,\n        background: \"#ffffff\",\n        display: \"flex\",\n        flexDirection: \"column\",\n        overflow: \"hidden\",\n        fontFamily: 'var(--vmc-font-display, \"Plus Jakarta Sans\", -apple-system, sans-serif)',\n      }}\n    >\n      {renderHeader ? <AppHeader width={AGREGARSUBASCOINS_WIDTH} username={username} /> : null}\n\n      {/* Área blanca: columna de 766 (16px a cada lado = 798), gap 16 entre secciones */}\n      <div style={{ flex: 1, minHeight: AGREGARSUBASCOINS_HEIGHT - HEADER_HEIGHT, padding: \"24px 16px\", display: \"flex\", justifyContent: \"center\" }}>\n        <div style={{ width: 766, display: \"flex\", flexDirection: \"column\", gap: 16 }}>\n          {/* Banner superior 766×120 */}\n          <div data-slot=\"banner\" style={BANNER_PLACEHOLDER}>\n            BANNER\n          </div>\n\n          {/* Card «Adquiere SubasCoins» 766×437 */}\n          <SubasCoinsCard />\n\n          {/* Banner Centro de ayuda 766×100 */}\n          <div data-slot=\"help-banner\" style={{ ...BANNER_PLACEHOLDER, height: 100 }}>\n            CENTRO DE AYUDA\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"
    },
    {
      "path": "bloques/agregar-subascoins/desktop/dimensions.ts",
      "type": "registry:file",
      "target": "bloques/agregar-subascoins/desktop/dimensions.ts",
      "content": "/**\n * Dimensiones del bloque Agregar Subascoins — módulo PLANO (sin \"use client\")\n * para que los Server Components (catálogo /blocks, página del bloque) puedan\n * importar estas constantes sin que se evalúen a undefined → NaN en los cálculos\n * de escala.\n *\n * Agregar Subascoins = Header (vault, 64) + área gris (placeholder) hasta 785 alto.\n */\n\nexport const AGREGARSUBASCOINS_WIDTH = 798;\n// 64 (header) + 24 + [120 banner + 16 + 437 card + 16 + 100 help] + 24\nexport const AGREGARSUBASCOINS_HEIGHT = 801;\n"
    },
    {
      "path": "bloques/agregar-subascoins/desktop/SubasCoinsCard.tsx",
      "type": "registry:file",
      "target": "bloques/agregar-subascoins/desktop/SubasCoinsCard.tsx",
      "content": "\"use client\";\n\n/**\n * SubasCoinsCard — card 766×437 del bloque «Agregar Subascoins».\n *\n * 2 columnas:\n *   · Izquierda → título + SubasCoinsInfoCard (beneficios) + nota del valor >S<\n *   · Derecha   → AmountOptionGroup (montos 30/50/80/130 + monto personalizado) + botón «Sigamos»\n */\n\nimport { useState } from \"react\";\nimport type { JSX } from \"react\";\nimport AmountOptionGroup, { type AmountSelection } from \"@/concorde/components/AmountOptionGroup\";\nimport Button from \"@/concorde/components/Button\";\nimport SubasCoinsInfoCard from \"./SubasCoinsInfoCard\";\n\nexport const SUBASCOINSCARD_WIDTH = 766;\nexport const SUBASCOINSCARD_HEIGHT = 437;\n\nexport interface SubasCoinsCardProps {\n  className?: string;\n}\n\nexport default function SubasCoinsCard({ className = \"\" }: SubasCoinsCardProps): JSX.Element {\n  const [sel, setSel] = useState<AmountSelection>(2); // \">S< 80\" preseleccionado\n\n  return (\n    <div\n      className={className}\n      data-slot=\"subascoins-card\"\n      style={{\n        boxSizing: \"border-box\",\n        width: SUBASCOINSCARD_WIDTH,\n        minHeight: SUBASCOINSCARD_HEIGHT,\n        background: \"#ffffff\",\n        borderRadius: 16,\n        boxShadow: \"0 0 16px 4px rgba(0,0,0,0.08)\",\n        padding: 32,\n        display: \"flex\",\n        gap: 32,\n        fontFamily: 'var(--vmc-font-display, \"Plus Jakarta Sans\", -apple-system, sans-serif)',\n      }}\n    >\n      {/* ── Columna izquierda ── */}\n      <div style={{ flex: \"1 1 0\", minWidth: 0, display: \"flex\", flexDirection: \"column\", gap: 20 }}>\n        <h2\n          style={{\n            margin: 0,\n            fontSize: 20,\n            lineHeight: \"28px\",\n            fontWeight: 800,\n            letterSpacing: 0,\n            // VYGradientPurple: #5F3ED8 → #340091 → #140046\n            backgroundImage: \"linear-gradient(135deg, #5F3ED8 0%, #340091 55%, #140046 100%)\",\n            WebkitBackgroundClip: \"text\",\n            backgroundClip: \"text\",\n            color: \"transparent\",\n            WebkitTextFillColor: \"transparent\",\n          }}\n        >\n          ¡Adquiere{\" \"}\n          <span\n            style={{\n              // VYGradientOrange1: #FF9639 → #EF852E → #BE3D00\n              backgroundImage: \"linear-gradient(135deg, #FF9639 0%, #EF852E 50%, #BE3D00 100%)\",\n              WebkitBackgroundClip: \"text\",\n              backgroundClip: \"text\",\n              color: \"transparent\",\n              WebkitTextFillColor: \"transparent\",\n            }}\n          >\n            SubasCoins\n          </span>{\" \"}\n          y disfruta de sus beneficios!\n        </h2>\n\n        <SubasCoinsInfoCard />\n\n        <p style={{ margin: 0, fontSize: 13, fontWeight: 600, color: \"#ED8936\" }}>\n          El valor de <strong>{\">S<\"} 1</strong> es equivalente a US$ 1 (un Dólar Americano).\n        </p>\n      </div>\n\n      {/* ── Columna derecha ── */}\n      <div style={{ flex: \"0 0 254px\", display: \"flex\", flexDirection: \"column\", gap: 20 }}>\n        <AmountOptionGroup\n          amounts={[\"30\", \"50\", \"80\", \"130\"]}\n          allowCustom\n          customPlaceholder=\"210\"\n          value={sel}\n          onChange={setSel}\n        />\n        <div style={{ display: \"flex\", justifyContent: \"center\" }}>\n          <Button variant=\"primary\" style={{ width: 200 }}>Sigamos</Button>\n        </div>\n      </div>\n    </div>\n  );\n}\n"
    },
    {
      "path": "bloques/agregar-subascoins/desktop/SubasCoinsInfoCard.tsx",
      "type": "registry:file",
      "target": "bloques/agregar-subascoins/desktop/SubasCoinsInfoCard.tsx",
      "content": "\"use client\";\n\n/**\n * SubasCoinsInfoCard — sub-componente del bloque «Agregar Subascoins».\n *\n * Card morado «Selecciona los SubasCoins que deseas adquirir» con:\n *   · header gradiente (#8460E5 → #3B1782) + ícono $ circular gradiente\n *   · lista de beneficios (pills con bullet gradiente naranja→morado)\n * Recreado en HTML/CSS (no SVG) para que sea editable y escalable.\n */\n\nimport type { JSX } from \"react\";\n\nconst STYLE_ID = \"concorde-subascoinsinfocard-styles\";\n\nconst STYLES = `\n.scinfo {\n  box-sizing: border-box;\n  width: 392px;\n  max-width: 100%;\n  border-radius: 16px;\n  background: #ffffff;\n  box-shadow: 0 0 16px 4px rgba(0,0,0,0.10);\n  overflow: hidden;\n  font-family: var(--vmc-font-display, \"Plus Jakarta Sans\", -apple-system, sans-serif);\n}\n.scinfo__head {\n  box-sizing: border-box;\n  position: relative;\n  height: 88px;\n  padding: 0 24px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  background: linear-gradient(115deg, #8460E5 0%, #3B1782 100%);\n  overflow: hidden;\n}\n.scinfo__eyebrow { font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.85); margin: 0; }\n.scinfo__title { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; color: #ffffff; margin: 2px 0 0; }\n.scinfo__sub { font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.85); margin: 2px 0 0; }\n.scinfo__coin {\n  position: absolute;\n  top: 20px;\n  right: 24px;\n  width: 48px;\n  height: 48px;\n  border-radius: 50%;\n  background: linear-gradient(135deg, #ED8936 0%, #ED8936 40%, #8460E5 100%);\n  border: 1px solid rgba(255,255,255,0.6);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #ffffff;\n  font-size: 22px;\n  font-weight: 800;\n  box-shadow: 0 2px 6px rgba(237,137,54,0.3);\n}\n.scinfo__body {\n  box-sizing: border-box;\n  height: 157px;\n  padding: 20px 24px 24px;\n}\n.scinfo__benefitslabel {\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  color: #99A1AF;\n  margin: 0 0 14px;\n}\n.scinfo__pill {\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  width: 100%;\n  height: 40px;\n  padding: 0 16px;\n  border-radius: 20px;\n  border: 1px solid transparent;\n  background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(135deg, #CFBAFF 0%, #ffffff 35%, #AE8EFF 65%, #CFBAFF 100%);\n  background-origin: border-box;\n  background-clip: padding-box, border-box;\n  box-shadow: 0 0 16px 4px rgba(0,0,0,0.06);\n}\n.scinfo__pill + .scinfo__pill { margin-top: 16px; }\n.scinfo__bullet {\n  flex-shrink: 0;\n  width: 24px;\n  height: 24px;\n  border-radius: 50%;\n  background: linear-gradient(135deg, #ED8936 0%, #ED8936 40%, #8460E5 100%);\n  border: 1.5px solid;\n  border-image: linear-gradient(135deg, #ffffff, #FBC47D 25%, #AE8EFF 75%, #ffffff) 1;\n  box-shadow: 0 2px 6px rgba(237,137,54,0.3), inset 0 1px 0 rgba(255,255,255,0.28);\n}\n.scinfo__pilltext { font-size: 14px; font-weight: 700; color: #3B1782; }\n`;\n\nlet _injected = false;\n\nexport interface SubasCoinsInfoCardProps {\n  benefits?: string[];\n  className?: string;\n}\n\nexport default function SubasCoinsInfoCard({\n  benefits = [\"Consignaciones más bajas\", \"Disponibilidad instantánea\"],\n  className = \"\",\n}: SubasCoinsInfoCardProps): JSX.Element {\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 className={`scinfo ${className}`.trim()}>\n        <div className=\"scinfo__head\">\n          <p className=\"scinfo__eyebrow\">Selecciona los</p>\n          <p className=\"scinfo__title\">SubasCoins</p>\n          <p className=\"scinfo__sub\">que deseas adquirir:</p>\n          <span className=\"scinfo__coin\" aria-hidden=\"true\">$</span>\n        </div>\n\n        <div className=\"scinfo__body\">\n          <p className=\"scinfo__benefitslabel\">Beneficios incluidos</p>\n          {benefits.map(function renderPill(b, i) {\n            return (\n              <div className=\"scinfo__pill\" key={i}>\n                <span className=\"scinfo__bullet\" aria-hidden=\"true\" />\n                <span className=\"scinfo__pilltext\">{b}</span>\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    </>\n  );\n}\n"
    },
    {
      "path": "bloques/agregar-subascoins/mobile/AgregarSubascoinsMobile.tsx",
      "type": "registry:file",
      "target": "bloques/agregar-subascoins/mobile/AgregarSubascoinsMobile.tsx",
      "content": "\"use client\";\n\n/**\n * AgregarSubascoinsMobile — Bloque de Concorde (Voyager DS) · mobile (420 ancho).\n *\n *   · Header 420×64 con botón hamburguesa (abre SidebarMobile)\n *   · Banner 388×120\n *   · SubasCoinsCardMobile 388×808\n *   · Centro de Ayuda 388×116\n */\n\nimport { useState } from \"react\";\nimport type { CSSProperties, JSX } from \"react\";\nimport AppHeader from \"@/concorde/bloques/header/desktop/Header\";\nimport SidebarMobile, { SidebarMenuButton } from \"@/concorde/bloques/sidebar/mobile/SidebarMobile\";\nimport SubasCoinsCardMobile from \"./SubasCoinsCardMobile\";\nimport { AGREGARSUBASCOINS_MOBILE_WIDTH, AGREGARSUBASCOINS_MOBILE_HEIGHT } from \"./dimensions\";\n\nexport { AGREGARSUBASCOINS_MOBILE_WIDTH, AGREGARSUBASCOINS_MOBILE_HEIGHT } from \"./dimensions\";\n\n// Banner placeholder gris (mismo estilo que el desktop / demás bloques mobile).\nconst BANNER: CSSProperties = {\n  width: 388,\n  boxSizing: \"border-box\",\n  borderRadius: 8,\n  background: \"#E9EAEC\",\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  fontSize: 12,\n  fontWeight: 600,\n  letterSpacing: \"0.08em\",\n  color: \"#9AA1AC\",\n};\n\nexport interface AgregarSubascoinsMobileProps {\n  username?: string;\n  className?: string;\n  /** Alto del marco para previsualizaciones (px). En producción se omite. */\n  frameHeight?: number;\n}\n\nexport default function AgregarSubascoinsMobile({ username = \"ZAEX5G\", className = \"\", frameHeight }: AgregarSubascoinsMobileProps): JSX.Element {\n  const [menuOpen, setMenuOpen] = useState(false);\n\n  const page = (\n    <div\n      className={className}\n      data-block=\"agregar-subascoins-mobile\"\n      style={{\n        width: AGREGARSUBASCOINS_MOBILE_WIDTH,\n        background: \"#ffffff\",\n        display: \"flex\",\n        flexDirection: \"column\",\n        fontFamily: \"var(--vmc-font-display, 'Plus Jakarta Sans', -apple-system, sans-serif)\",\n      }}\n    >\n      {/* Header 420×64 con hamburguesa */}\n      <AppHeader\n        width={AGREGARSUBASCOINS_MOBILE_WIDTH}\n        username={username}\n        compact\n        logo={\n          <div style={{ display: \"flex\", alignItems: \"center\", gap: 8 }}>\n            <SidebarMenuButton onClick={() => setMenuOpen(true)} expanded={menuOpen} />\n            <img src=\"/logo-preview.png\" alt=\"VMC Subastas\" style={{ height: 26, width: \"auto\", display: \"block\" }} />\n          </div>\n        }\n      />\n\n      {/* Contenido a 16px de margen */}\n      <div style={{ display: \"flex\", flexDirection: \"column\", gap: 16, padding: 16 }}>\n        {/* Banner superior 388×120 */}\n        <div data-slot=\"banner\" style={{ ...BANNER, height: 120 }}>BANNER</div>\n\n        {/* Card «Adquiere SubasCoins» 388×808 */}\n        <SubasCoinsCardMobile />\n\n        {/* Centro de ayuda 388×116 */}\n        <div data-slot=\"help-banner\" style={{ ...BANNER, height: 116 }}>CENTRO DE AYUDA</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/agregar-subascoins/mobile/dimensions.ts",
      "type": "registry:file",
      "target": "bloques/agregar-subascoins/mobile/dimensions.ts",
      "content": "/**\n * Dimensiones del bloque AgregarSubascoins · mobile — módulo plano sin \"use client\".\n *\n * Ancho 420 (contenido 388 con 16px de margen a cada lado). Alto aproximado:\n *   64 (header) + 16 + 120 (banner) + 16 + 808 (card SubasCoins) + 16 + 116 (help) + 16\n */\n\nexport const AGREGARSUBASCOINS_MOBILE_WIDTH = 420;\nexport const AGREGARSUBASCOINS_MOBILE_HEIGHT = 1188;\n"
    },
    {
      "path": "bloques/agregar-subascoins/mobile/SubasCoinsCardMobile.tsx",
      "type": "registry:file",
      "target": "bloques/agregar-subascoins/mobile/SubasCoinsCardMobile.tsx",
      "content": "\"use client\";\n\n/**\n * SubasCoinsCardMobile — card 388×808 del bloque «Agregar Subascoins» · mobile.\n *\n * Layout vertical (1 columna):\n *   · título «¡Adquiere SubasCoins y disfruta…» (gradiente)\n *   · SubasCoinsInfoCard (card morado + beneficios)\n *   · nota «El valor de >S< 1…»\n *   · AmountOptionGroup (30/50/80/130 + monto personalizado)\n *   · botón «Sigamos» (primary, 200×48) centrado\n *\n * Reutiliza SubasCoinsInfoCard, AmountOptionGroup y Button (los mismos del desktop).\n */\n\nimport { useState } from \"react\";\nimport type { JSX } from \"react\";\nimport AmountOptionGroup, { type AmountSelection } from \"@/concorde/components/AmountOptionGroup\";\nimport Button from \"@/concorde/components/Button\";\nimport SubasCoinsInfoCard from \"@/concorde/bloques/agregar-subascoins/desktop/SubasCoinsInfoCard\";\n\nexport const SUBASCOINSCARD_MOBILE_WIDTH = 388;\nexport const SUBASCOINSCARD_MOBILE_HEIGHT = 808;\n\nexport interface SubasCoinsCardMobileProps {\n  className?: string;\n}\n\nexport default function SubasCoinsCardMobile({ className = \"\" }: SubasCoinsCardMobileProps): JSX.Element {\n  const [sel, setSel] = useState<AmountSelection>(2); // \">S< 80\" preseleccionado\n\n  return (\n    <div\n      className={className}\n      data-slot=\"subascoins-card-mobile\"\n      style={{\n        boxSizing: \"border-box\",\n        width: SUBASCOINSCARD_MOBILE_WIDTH,\n        minHeight: SUBASCOINSCARD_MOBILE_HEIGHT,\n        background: \"#ffffff\",\n        borderRadius: 16,\n        boxShadow: \"0 0 16px 4px rgba(0,0,0,0.08)\",\n        padding: 20,\n        display: \"flex\",\n        flexDirection: \"column\",\n        alignItems: \"center\",\n        gap: 16,\n        fontFamily: 'var(--vmc-font-display, \"Plus Jakarta Sans\", -apple-system, sans-serif)',\n      }}\n    >\n      {/* Título con gradiente (morado + \"SubasCoins\" naranja) */}\n      <h2\n        style={{\n          margin: 0,\n          width: \"100%\",\n          fontSize: 20,\n          lineHeight: \"26px\",\n          fontWeight: 800,\n          textAlign: \"center\",\n          backgroundImage: \"linear-gradient(135deg, #5F3ED8 0%, #340091 55%, #140046 100%)\",\n          WebkitBackgroundClip: \"text\",\n          backgroundClip: \"text\",\n          color: \"transparent\",\n          WebkitTextFillColor: \"transparent\",\n        }}\n      >\n        ¡Adquiere{\" \"}\n        <span\n          style={{\n            backgroundImage: \"linear-gradient(135deg, #FF9639 0%, #EF852E 50%, #BE3D00 100%)\",\n            WebkitBackgroundClip: \"text\",\n            backgroundClip: \"text\",\n            color: \"transparent\",\n            WebkitTextFillColor: \"transparent\",\n          }}\n        >\n          SubasCoins\n        </span>{\" \"}\n        y disfruta de sus beneficios!\n      </h2>\n\n      {/* Card morado SubasCoins + beneficios (392 con max-width:100% → se ajusta a 348) */}\n      <SubasCoinsInfoCard />\n\n      {/* Nota del valor */}\n      <p style={{ margin: 0, width: \"100%\", textAlign: \"center\", fontSize: 13, fontWeight: 600, color: \"#ED8936\" }}>\n        El valor de <strong>{\">S<\"} 1</strong> es equivalente a US$ 1 (un Dólar Americano).\n      </p>\n\n      {/* Opciones de monto (apiladas) */}\n      <AmountOptionGroup\n        amounts={[\"30\", \"50\", \"80\", \"130\"]}\n        allowCustom\n        customPlaceholder=\"210\"\n        value={sel}\n        onChange={setSel}\n        className=\"scm-amounts\"\n      />\n\n      {/* Sigamos */}\n      <Button variant=\"primary\" style={{ width: 200 }}>Sigamos</Button>\n\n      {/* Los AmountOption traen width 254; en mobile los alargamos al ancho de la card */}\n      <style dangerouslySetInnerHTML={{ __html: \".scm-amounts{width:100%;align-items:stretch;}.scm-amounts .pamount{width:100%;}\" }} />\n    </div>\n  );\n}\n"
    },
    {
      "path": "components/AmountOptionGroup.tsx",
      "type": "registry:file",
      "target": "components/AmountOptionGroup.tsx",
      "content": "\"use client\";\n\n/**\n * AmountOptionGroup — Generado por Concorde\n *\n * Selector de monto configurable, compuesto con AmountOption:\n *   · `amounts`     → cuántos montos fijos (uno por elemento)\n *   · `allowCustom` → si se muestra la opción personalizada (input editable)\n * Maneja la selección tipo radio (uno activo a la vez). Controlado o no.\n */\n\nimport { useId, useState } from \"react\";\nimport type { JSX } from \"react\";\nimport AmountOption from \"@/concorde/components/AmountOption\";\n\nexport type AmountSelection = number | \"custom\";\n\nexport interface AmountOptionGroupProps {\n  /** Montos fijos (solo el número) — la cantidad = length. P.ej. [\"80\",\"130\",\"210\"] */\n  amounts: string[];\n  /** Muestra la opción personalizada (input editable) — default false */\n  allowCustom?: boolean;\n  /** Etiqueta sobre la opción personalizada — default \"Ingresa un monto:\" */\n  customLabel?: string;\n  /** Placeholder del número del input — default \"0\" */\n  customPlaceholder?: string;\n  /** Prefijo del monto — default \">S<\" */\n  prefix?: string;\n  /** Selección controlada: índice del monto fijo o \"custom\" */\n  value?: AmountSelection;\n  /** Selección inicial (no controlado) — default 0 */\n  defaultValue?: AmountSelection;\n  onChange?: (selected: AmountSelection) => void;\n  /** Valor del input personalizado (controlado) */\n  customValue?: string;\n  onCustomValueChange?: (value: string) => void;\n  /** name del grupo radio */\n  name?: string;\n  className?: string;\n}\n\nexport default function AmountOptionGroup({\n  amounts,\n  allowCustom = false,\n  customLabel = \"Ingresa un monto:\",\n  customPlaceholder = \"0\",\n  prefix = \">S<\",\n  value,\n  defaultValue = 0,\n  onChange,\n  customValue,\n  onCustomValueChange,\n  name,\n  className = \"\",\n}: AmountOptionGroupProps): JSX.Element {\n  const uid = useId().replace(/:/g, \"-\");\n  const controlled = value !== undefined;\n  const [internalSel, setInternalSel] = useState<AmountSelection>(defaultValue);\n  const sel = controlled ? value : internalSel;\n\n  const customControlled = customValue !== undefined;\n  const [internalCustom, setInternalCustom] = useState(\"\");\n  const cval = customControlled ? customValue : internalCustom;\n\n  const groupName = name ?? `amountgroup-${uid}`;\n\n  function select(next: AmountSelection): void {\n    if (!controlled) setInternalSel(next);\n    onChange?.(next);\n  }\n\n  function handleCustomChange(v: string): void {\n    if (!customControlled) setInternalCustom(v);\n    onCustomValueChange?.(v);\n    select(\"custom\");\n  }\n\n  return (\n    <div role=\"radiogroup\" className={className} style={{ display: \"flex\", flexDirection: \"column\", gap: 12 }}>\n      {amounts.map(function renderFixed(a, i) {\n        return (\n          <AmountOption\n            key={i}\n            name={groupName}\n            variant={sel === i ? \"selected\" : \"default\"}\n            amount={`${prefix} ${a}`}\n            onSelect={function pick() { select(i); }}\n          />\n        );\n      })}\n\n      {allowCustom ? (\n        <div\n          style={{ display: \"flex\", flexDirection: \"column\", gap: 8 }}\n          onFocusCapture={function focusCustom() { select(\"custom\"); }}\n        >\n          <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: \"0.06em\", textTransform: \"uppercase\", color: \"#94A3B8\", fontFamily: \"var(--vmc-font-display, 'Plus Jakarta Sans', sans-serif)\" }}>\n            {customLabel}\n          </span>\n          <AmountOption\n            variant=\"input\"\n            name={groupName}\n            prefix={prefix}\n            placeholder={customPlaceholder}\n            value={cval}\n            selected={sel === \"custom\"}\n            onValueChange={handleCustomChange}\n          />\n        </div>\n      ) : null}\n    </div>\n  );\n}\n"
    },
    {
      "path": "components/AmountOption.tsx",
      "type": "registry:file",
      "target": "components/AmountOption.tsx",
      "content": "\"use client\";\n\n/**\n * AmountOption — Generado por Concorde\n * Fuente: Figma VOYAGER · \"AmountOption\" (3032:13035 default · 13029 selected · 13044 input)\n *\n * Opción de monto tipo radio (pill 254×48, radio 24) con un círculo a la\n * izquierda y el monto a la derecha. 3 variantes:\n *   · default  → blanco, borde gradiente sutil, radio gris, monto morado #3B1782\n *   · selected → relleno gradiente morado (#8460E5→#3B1782), borde gradiente,\n *                radio relleno blanco, monto blanco\n *   · input    → blanco, radio gris, campo editable con placeholder gris #D1D5DC\n * Sombra 0 0 16px 4px rgba(0,0,0,0.1). Controlado o no controlado.\n */\n\nimport { useId } from \"react\";\nimport type { JSX, ReactNode } from \"react\";\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport type AmountOptionVariant = \"default\" | \"selected\" | \"input\";\n\nexport interface AmountOptionProps {\n  /** Apariencia/estado (default \"default\") */\n  variant?: AmountOptionVariant;\n  /** Monto fijo (modo default/selected) — p.ej. \">S< 80\" */\n  amount?: ReactNode;\n  /** Valor del campo (modo input, controlado) */\n  value?: string;\n  /** Valor inicial (modo input, no controlado) */\n  defaultValue?: string;\n  /** Prefijo fijo del campo (modo input) — siempre visible (default \">S<\") */\n  prefix?: string;\n  /** Placeholder del número (modo input) — p.ej. \"210\" */\n  placeholder?: string;\n  onValueChange?: (value: string) => void;\n  /** Click en la opción (modo default/selected) */\n  onSelect?: () => void;\n  /** Marca la opción input como seleccionada (morada) aunque no tenga foco */\n  selected?: boolean;\n  disabled?: boolean;\n  /** name del radio (para agrupar) */\n  name?: string;\n  \"aria-label\"?: string;\n  className?: string;\n}\n\n// ─── Self-contained CSS ───────────────────────────────────────────────────────\n\nconst STYLE_ID = \"concorde-amountoption-styles\";\n\nconst AMOUNTOPTION_STYLES = `\n.pamount {\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  width: 254px;\n  max-width: 100%;\n  height: 48px;\n  padding: 0 16px;\n  border-radius: 24px;\n  border: 1px solid transparent;\n  background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(335deg, #8460E5 0%, #FFF8F1 100%);\n  background-origin: border-box;\n  background-clip: padding-box, border-box;\n  box-shadow: rgba(0,0,0,0.1) 0px 0px 16px 4px;\n  cursor: pointer;\n  font-family: var(--vmc-font-display, \"Plus Jakarta Sans\", -apple-system, sans-serif);\n  text-align: left;\n  transition: transform 0.15s, box-shadow 0.2s;\n}\n.pamount:focus-visible { outline: 2px solid #8460E5; outline-offset: 2px; }\n.pamount:active { transform: scale(0.99); }\n.pamount__radio {\n  flex-shrink: 0;\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n  border: 1px solid #E1E3E2;\n  background: transparent;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.pamount__dot {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background: #ffffff;\n  opacity: 0;\n}\n.pamount__amount {\n  flex: 1;\n  min-width: 0;\n  text-align: right;\n  white-space: nowrap;\n  font-size: 16px;\n  font-weight: 700;\n  letter-spacing: 0.02em;\n  color: #3B1782;\n}\n.pamount__amountwrap {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 6px;\n}\n.pamount__prefix {\n  flex-shrink: 0;\n  font-size: 16px;\n  font-weight: 700;\n  letter-spacing: 0.02em;\n  color: #D1D5DC;\n}\n.pamount__num {\n  width: auto;\n  min-width: 1ch;\n  border: none;\n  outline: none;\n  background: transparent;\n  text-align: right;\n  font-family: inherit;\n  font-size: 16px;\n  font-weight: 700;\n  letter-spacing: 0.02em;\n  color: #3B1782;\n}\n.pamount__num::placeholder { color: #D1D5DC; }\n\n/* input · al hacer click (focus) o cuando está seleccionado (--active) se vuelve morado, mantiene >S< y deja escribir */\n.pamount--input:focus-within,\n.pamount--input.pamount--active {\n  border-width: 1.5px;\n  background-image:\n    linear-gradient(165deg, #8460E5 0%, #3B1782 100%),\n    linear-gradient(120deg, #ffffff 0%, #F4AC59 22%, #8460E5 75%, #ffffff 100%);\n}\n.pamount--input:focus-within .pamount__radio,\n.pamount--input.pamount--active .pamount__radio { border-color: rgba(255,255,255,0.5); }\n.pamount--input:focus-within .pamount__dot,\n.pamount--input.pamount--active .pamount__dot { opacity: 1; }\n.pamount--input:focus-within .pamount__prefix,\n.pamount--input:focus-within .pamount__num,\n.pamount--input.pamount--active .pamount__prefix,\n.pamount--input.pamount--active .pamount__num { color: #ffffff; }\n.pamount--input:focus-within .pamount__num::placeholder,\n.pamount--input.pamount--active .pamount__num::placeholder { color: rgba(255,255,255,0.65); }\n\n/* selected (morado) */\n.pamount--selected {\n  border-width: 1.5px;\n  background-image:\n    linear-gradient(165deg, #8460E5 0%, #3B1782 100%),\n    linear-gradient(120deg, #ffffff 0%, #F4AC59 22%, #8460E5 75%, #ffffff 100%);\n}\n.pamount--selected .pamount__radio { border-color: rgba(255,255,255,0.5); }\n.pamount--selected .pamount__dot { opacity: 1; }\n.pamount--selected .pamount__amount { color: #ffffff; }\n\n.pamount--disabled { cursor: not-allowed; opacity: 0.7; }\n\n@media (prefers-reduced-motion: reduce) { .pamount { transition: none; } }\n`;\n\nlet _stylesInjected = false;\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\nexport default function AmountOption({\n  variant = \"default\",\n  amount,\n  value,\n  defaultValue,\n  prefix = \">S<\",\n  placeholder,\n  onValueChange,\n  onSelect,\n  selected = false,\n  disabled = false,\n  name,\n  \"aria-label\": ariaLabel,\n  className = \"\",\n}: AmountOptionProps): JSX.Element {\n  const uid = useId().replace(/:/g, \"-\");\n  const isSelected = variant === \"selected\";\n  const isInput = variant === \"input\";\n  const controlled = value !== undefined;\n  const sizeText = (controlled ? (value ?? \"\") : (defaultValue ?? \"\")) || placeholder || \"\";\n  const inputSize = Math.max(sizeText.length, 1);\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 = AMOUNTOPTION_STYLES;\n      document.head.appendChild(el);\n    }\n    _stylesInjected = true;\n  }\n\n  const cls = [\n    \"pamount\",\n    isSelected ? \"pamount--selected\" : \"\",\n    isInput ? \"pamount--input\" : \"\",\n    isInput && selected ? \"pamount--active\" : \"\",\n    disabled ? \"pamount--disabled\" : \"\",\n    className,\n  ].filter(Boolean).join(\" \");\n\n  const radio = (\n    <span className=\"pamount__radio\" aria-hidden=\"true\">\n      <span className=\"pamount__dot\" />\n    </span>\n  );\n\n  // Modo input: campo editable con placeholder gris.\n  if (isInput) {\n    return (\n      <>\n        <style id={`${STYLE_ID}-ssr`} suppressHydrationWarning dangerouslySetInnerHTML={{ __html: AMOUNTOPTION_STYLES }} />\n        <label className={cls} htmlFor={`${uid}-field`}>\n          {radio}\n          <span className=\"pamount__amountwrap\">\n            <span className=\"pamount__prefix\">{prefix}</span>\n            <input\n              id={`${uid}-field`}\n              name={name}\n              className=\"pamount__num\"\n              placeholder={placeholder}\n              size={inputSize}\n              inputMode=\"numeric\"\n              disabled={disabled}\n              value={controlled ? value : undefined}\n              defaultValue={controlled ? undefined : defaultValue}\n              onChange={function handle(e) { onValueChange?.(e.target.value); }}\n              aria-label={ariaLabel ?? \"Ingresa un monto\"}\n            />\n          </span>\n        </label>\n      </>\n    );\n  }\n\n  // Modo default/selected: opción tipo radio con monto fijo.\n  return (\n    <>\n      <style id={`${STYLE_ID}-ssr`} suppressHydrationWarning dangerouslySetInnerHTML={{ __html: AMOUNTOPTION_STYLES }} />\n      <button\n        type=\"button\"\n        role=\"radio\"\n        aria-checked={isSelected}\n        aria-label={ariaLabel}\n        className={cls}\n        disabled={disabled}\n        onClick={onSelect}\n      >\n        {radio}\n        <span className=\"pamount__amount\">{amount}</span>\n      </button>\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": "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"
    }
  ]
}