{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tu-perfil",
  "type": "registry:block",
  "title": "tu-perfil",
  "description": "Bloque Concorde tu-perfil — incluye sus 4 componentes.",
  "dependencies": [
    "react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "bloques/tu-perfil/desktop/dimensions.ts",
      "type": "registry:file",
      "target": "bloques/tu-perfil/desktop/dimensions.ts",
      "content": "/**\n * Dimensiones del bloque Tu Perfil — módulo PLANO (sin \"use client\") para que los\n * Server Components (catálogo /blocks, página del bloque) puedan importar estas\n * constantes sin que se evalúen a undefined → NaN en los cálculos de escala.\n *\n * Tu Perfil = Header (vault, 64) + área gris (placeholder) hasta 785 alto.\n */\n\nexport const TUPERFIL_WIDTH = 798;\n// 64 (header) + 24 + [120 banner + 16 + (239 + 24 + 157 cards) + 16 + 48 logout + 16 + 100 help] + 24\nexport const TUPERFIL_HEIGHT = 848;\n"
    },
    {
      "path": "bloques/tu-perfil/desktop/ProfileCard.tsx",
      "type": "registry:file",
      "target": "bloques/tu-perfil/desktop/ProfileCard.tsx",
      "content": "\"use client\";\n\n/**\n * ProfileCard — cards del bloque «Tu Perfil».\n *\n * Card 1 «Tu Perfil» (766×239): título gradiente + fila de stats (riesgo, puntos\n *   VMC, expiración) + botón primary «Canjear Puntos VMC» (200×40) + Información\n *   Personal con 3 inputs (Nombres · Apellidos · N° documento, 228×48 c/u).\n * Card 2 «Información de Contacto» (766×157 hug): 2 columnas (Teléfono · Correo),\n *   cada una con label + «Editar» + input (355×48).\n *\n * Reutiliza los componentes Input, Button, StarIcon, InfoIcon.\n */\n\nimport type { CSSProperties, JSX, ReactNode } from \"react\";\nimport Input from \"@/concorde/components/Input\";\nimport Button from \"@/concorde/components/Button\";\nimport StarIcon from \"@/concorde/components/StarIcon\";\nimport InfoIcon from \"@/concorde/components/InfoIcon\";\n\nconst CARD_BASE: CSSProperties = {\n  boxSizing: \"border-box\",\n  width: 766,\n  background: \"#ffffff\",\n  borderRadius: 16,\n  // Sombra centrada y sutil (como el resto de cards del proyecto), no lateral/flotante.\n  boxShadow: \"0 0 16px 4px rgba(0,0,0,0.08)\",\n  fontFamily: 'var(--vmc-font-display, \"Plus Jakarta Sans\", -apple-system, sans-serif)',\n};\n\n// Título con gradiente morado (VYGradientPurple: #5F3ED8 → #340091 → #140046).\nconst GRADIENT_TITLE: CSSProperties = {\n  margin: 0,\n  fontSize: 18,\n  lineHeight: \"24px\",\n  fontWeight: 800,\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// Línea separadora bajo el título (gris #E1E3E2). En Figma va de x=32 a x=766\n// dentro de un card de 766 con padding 32 → sobresale 16px a cada lado del padding.\nconst DIVIDER: CSSProperties = { height: 1, background: \"#E1E3E2\", margin: \"14px -16px 0\" };\n\nconst LABEL: CSSProperties = { fontSize: 11, fontWeight: 700, letterSpacing: \"0.04em\", textTransform: \"uppercase\", color: \"#99A1AF\" };\nconst FIELD_LABEL: CSSProperties = { fontSize: 13, fontWeight: 500, color: \"#3B1782\" };\nconst EDITAR: CSSProperties = { fontSize: 13, fontWeight: 600, color: \"#3B1782\", cursor: \"pointer\", textDecoration: \"underline\", textUnderlineOffset: 2 };\n\ninterface FieldProps {\n  label: string;\n  width: number;\n  defaultValue?: string;\n  editable?: boolean;\n}\n\nfunction Field({ label, width, defaultValue, editable = false }: FieldProps): JSX.Element {\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: 8, width }}>\n      <div style={{ display: \"flex\", alignItems: \"center\", justifyContent: \"space-between\" }}>\n        <span style={FIELD_LABEL}>{label}</span>\n        {editable ? <span style={EDITAR}>Editar</span> : null}\n      </div>\n      {/* Input a ancho completo de la columna (se alarga hasta el «Editar») */}\n      <Input defaultValue={defaultValue} className=\"pinput-fill\" style={{ width: \"100%\" }} />\n    </div>\n  );\n}\n\nexport interface ProfileCardProps {\n  className?: string;\n}\n\nexport default function ProfileCard({ className = \"\" }: ProfileCardProps): JSX.Element {\n  return (\n    <div className={className} style={{ display: \"flex\", flexDirection: \"column\", gap: 24 }}>\n      {/* Los Input reutilizados traen width fija (234); .pinput-fill los alarga al ancho de su columna */}\n      <style dangerouslySetInnerHTML={{ __html: \".pinput-fill.pinput-root{width:100%;}\" }} />\n      {/* ── Card 1: Tu Perfil (766×239) ── */}\n      <section data-slot=\"tu-perfil-card\" style={{ ...CARD_BASE, minHeight: 239, padding: \"16px 32px\" }}>\n        <h2 style={GRADIENT_TITLE}>Tu Perfil</h2>\n        <div style={DIVIDER} />\n\n        {/* Fila de stats */}\n        <div style={{ display: \"flex\", alignItems: \"center\", gap: 32, marginTop: 14 }}>\n          <div style={{ display: \"flex\", flexDirection: \"column\", gap: 6 }}>\n            <span style={LABEL}>Riesgo del perfil</span>\n            <span style={{ fontSize: 14, fontWeight: 700, color: \"#ED8936\" }}>Muy bajo</span>\n          </div>\n\n          <div style={{ display: \"flex\", flexDirection: \"column\", gap: 6 }}>\n            <span style={LABEL}>Puntos VMC</span>\n            <span style={{ display: \"flex\", alignItems: \"center\", gap: 6, fontSize: 14, fontWeight: 800, color: \"#3B1782\", whiteSpace: \"nowrap\" }}>\n              <StarIcon size={18} /> 500 pts <InfoIcon size={14} />\n            </span>\n          </div>\n\n          <span style={{ fontSize: 13, fontWeight: 600, color: \"#ED8936\" }}>\n            <strong>15 Puntos</strong> expirarán en 1 día\n          </span>\n\n          <div style={{ marginLeft: \"auto\" }}>\n            <Button variant=\"primary\" style={{ height: 40, width: 200, paddingLeft: 16, paddingRight: 16, whiteSpace: \"nowrap\", fontSize: 13 }}>\n              Canjear Puntos VMC\n            </Button>\n          </div>\n        </div>\n\n        {/* Información Personal */}\n        <h3 style={{ margin: \"16px 0 0\", fontSize: 14, fontWeight: 700, color: \"#3B1782\" }}>Información Personal</h3>\n        <div style={{ display: \"flex\", justifyContent: \"space-between\", marginTop: 10 }}>\n          <Field label=\"Nombres\" width={228} defaultValue=\"Subastin\" />\n          <Field label=\"Apellidos\" width={228} defaultValue=\"Subastin\" />\n          <Field label=\"N° documento\" width={228} defaultValue=\"11111111\" />\n        </div>\n      </section>\n\n      {/* ── Card 2: Información de Contacto (766×157) ── */}\n      <section data-slot=\"contacto-card\" style={{ ...CARD_BASE, minHeight: 157, padding: \"16px 32px\" }}>\n        <h2 style={GRADIENT_TITLE}>Información de Contacto</h2>\n        <div style={DIVIDER} />\n        <div style={{ display: \"flex\", gap: 24, marginTop: 16 }}>\n          <Field label=\"Teléfono\" width={339} defaultValue=\"11111111\" editable />\n          <Field label=\"Correo Electrónico\" width={339} defaultValue=\"subastin@subastop.com\" editable />\n        </div>\n      </section>\n    </div>\n  );\n}\n"
    },
    {
      "path": "bloques/tu-perfil/desktop/TuPerfil.tsx",
      "type": "registry:file",
      "target": "bloques/tu-perfil/desktop/TuPerfil.tsx",
      "content": "/**\n * TuPerfil — Bloque de Concorde (Voyager DS)\n *\n * Pantalla «Tu Perfil»: 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 Button from \"@/concorde/components/Button\";\nimport ProfileCard from \"./ProfileCard\";\nimport { TUPERFIL_WIDTH, TUPERFIL_HEIGHT } from \"./dimensions\";\n\nexport { TUPERFIL_WIDTH, TUPERFIL_HEIGHT } from \"./dimensions\";\n\nexport interface TuPerfilProps {\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 (mismo estilo que Homepage / Zona / Agregar Subascoins).\nconst BANNER_PLACEHOLDER: CSSProperties = {\n  width: 766,\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 TuPerfil({ username = \"ZAEX5G\", renderHeader = true, className = \"\" }: TuPerfilProps): JSX.Element {\n  return (\n    <div\n      className={className}\n      data-block=\"tu-perfil\"\n      style={{\n        width: TUPERFIL_WIDTH,\n        minHeight: TUPERFIL_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={TUPERFIL_WIDTH} username={username} /> : null}\n\n      {/* Área blanca: columna de 766 (16px a cada lado = 798). No usa flex:1 para\n          que abrace su contenido y el Centro de Ayuda quede pegado al botón. */}\n      <div style={{ 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, height: 120 }}>\n            BANNER\n          </div>\n\n          {/* Cards: Tu Perfil + Información de Contacto */}\n          <ProfileCard />\n\n          {/* Botón «Cerrar Sesión» (secondary, 200×48) centrado */}\n          <div style={{ display: \"flex\", justifyContent: \"center\" }}>\n            <Button variant=\"secondary\" style={{ width: 200, paddingLeft: 24, paddingRight: 24, whiteSpace: \"nowrap\" }}>Cerrar Sesión</Button>\n          </div>\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/tu-perfil/mobile/dimensions.ts",
      "type": "registry:file",
      "target": "bloques/tu-perfil/mobile/dimensions.ts",
      "content": "/**\n * Dimensiones del bloque TuPerfil · 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 + 524 (card Tu Perfil) + 16 + 247 (card Contacto)\n *   + 16 + 48 (Cerrar Sesión) + 16 + 116 (help) + 16\n */\n\nexport const TUPERFIL_MOBILE_WIDTH = 420;\nexport const TUPERFIL_MOBILE_HEIGHT = 1231;\n"
    },
    {
      "path": "bloques/tu-perfil/mobile/ProfileCardMobile.tsx",
      "type": "registry:file",
      "target": "bloques/tu-perfil/mobile/ProfileCardMobile.tsx",
      "content": "\"use client\";\n\n/**\n * ProfileCardMobile — cards del bloque «Tu Perfil» · mobile (388 ancho).\n *\n * Card 1 «Tu Perfil» (388×524): título + stats apilados (riesgo · puntos · exp.)\n *   + botón «Canjear Puntos VMC» + Información Personal con 3 inputs apilados.\n * Card 2 «Información de Contacto» (388×247): Teléfono · Correo apilados con «Editar».\n *\n * Reutiliza Input, Button, StarIcon, InfoIcon (los mismos del desktop).\n */\n\nimport type { CSSProperties, JSX } from \"react\";\nimport Input from \"@/concorde/components/Input\";\nimport Button from \"@/concorde/components/Button\";\nimport StarIcon from \"@/concorde/components/StarIcon\";\nimport InfoIcon from \"@/concorde/components/InfoIcon\";\n\nconst CARD_BASE: CSSProperties = {\n  boxSizing: \"border-box\",\n  width: 388,\n  background: \"#ffffff\",\n  borderRadius: 16,\n  boxShadow: \"0 0 16px 4px rgba(0,0,0,0.08)\",\n  padding: \"16px 20px\",\n  fontFamily: 'var(--vmc-font-display, \"Plus Jakarta Sans\", -apple-system, sans-serif)',\n};\n\n// Título con gradiente morado (VYGradientPurple: #5F3ED8 → #340091 → #140046).\nconst GRADIENT_TITLE: CSSProperties = {\n  margin: 0,\n  fontSize: 18,\n  lineHeight: \"24px\",\n  fontWeight: 800,\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// Línea separadora bajo el título (gris #E1E3E2) — sobresale 4px del padding.\nconst DIVIDER: CSSProperties = { height: 1, background: \"#E1E3E2\", margin: \"14px -16px 0\" };\n\nconst LABEL: CSSProperties = { fontSize: 11, fontWeight: 700, letterSpacing: \"0.04em\", textTransform: \"uppercase\", color: \"#99A1AF\" };\nconst FIELD_LABEL: CSSProperties = { fontSize: 13, fontWeight: 500, color: \"#3B1782\" };\nconst EDITAR: CSSProperties = { fontSize: 13, fontWeight: 600, color: \"#3B1782\", cursor: \"pointer\", textDecoration: \"underline\", textUnderlineOffset: 2 };\n\ninterface FieldProps {\n  label: string;\n  defaultValue?: string;\n  editable?: boolean;\n}\n\nfunction Field({ label, defaultValue, editable = false }: FieldProps): JSX.Element {\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: 8, width: \"100%\" }}>\n      <div style={{ display: \"flex\", alignItems: \"center\", justifyContent: \"space-between\" }}>\n        <span style={FIELD_LABEL}>{label}</span>\n        {editable ? <span style={EDITAR}>Editar</span> : null}\n      </div>\n      {/* Input a ancho completo de la card */}\n      <Input defaultValue={defaultValue} className=\"pinput-fill\" style={{ width: \"100%\" }} />\n    </div>\n  );\n}\n\nexport interface ProfileCardMobileProps {\n  className?: string;\n}\n\nexport default function ProfileCardMobile({ className = \"\" }: ProfileCardMobileProps): JSX.Element {\n  return (\n    <div className={className} style={{ display: \"flex\", flexDirection: \"column\", gap: 16 }}>\n      {/* Los Input reutilizados traen width fija (234); .pinput-fill los alarga al ancho de la card */}\n      <style dangerouslySetInnerHTML={{ __html: \".pinput-fill.pinput-root{width:100%;}\" }} />\n\n      {/* ── Card 1: Tu Perfil (388×524) ── */}\n      <section data-slot=\"tu-perfil-card-m\" style={CARD_BASE}>\n        <h2 style={GRADIENT_TITLE}>Tu Perfil</h2>\n        <div style={DIVIDER} />\n\n        {/* Stats — riesgo + puntos en una fila, expiración debajo (centrados) */}\n        <div style={{ display: \"flex\", justifyContent: \"center\", gap: 48, marginTop: 16, textAlign: \"center\" }}>\n          <div style={{ display: \"flex\", flexDirection: \"column\", alignItems: \"center\", gap: 6 }}>\n            <span style={LABEL}>Riesgo del perfil</span>\n            <span style={{ fontSize: 14, fontWeight: 700, color: \"#ED8936\" }}>Muy bajo</span>\n          </div>\n          <div style={{ display: \"flex\", flexDirection: \"column\", alignItems: \"center\", gap: 6 }}>\n            <span style={LABEL}>Puntos VMC</span>\n            <span style={{ display: \"flex\", alignItems: \"center\", gap: 6, fontSize: 14, fontWeight: 800, color: \"#3B1782\", whiteSpace: \"nowrap\" }}>\n              <StarIcon size={18} /> 500 pts <InfoIcon size={14} />\n            </span>\n          </div>\n        </div>\n\n        <p style={{ margin: \"12px 0 0\", textAlign: \"center\", fontSize: 13, fontWeight: 600, color: \"#ED8936\" }}>\n          <strong>15 Puntos</strong> expirarán en 1 día\n        </p>\n\n        {/* Canjear Puntos VMC — centrado */}\n        <div style={{ display: \"flex\", justifyContent: \"center\", marginTop: 12 }}>\n          <Button variant=\"primary\" style={{ height: 40, width: 220, paddingLeft: 16, paddingRight: 16, whiteSpace: \"nowrap\", fontSize: 14 }}>\n            Canjear Puntos VMC\n          </Button>\n        </div>\n\n        {/* Información Personal — 3 inputs apilados */}\n        <h3 style={{ margin: \"16px 0 0\", fontSize: 14, fontWeight: 700, color: \"#3B1782\" }}>Información Personal</h3>\n        <div style={{ display: \"flex\", flexDirection: \"column\", gap: 12, marginTop: 12 }}>\n          <Field label=\"Nombres\" defaultValue=\"Subastin\" />\n          <Field label=\"Apellidos\" defaultValue=\"Subastin\" />\n          <Field label=\"N° documento\" defaultValue=\"11111111\" />\n        </div>\n      </section>\n\n      {/* ── Card 2: Información de Contacto (388×247) ── */}\n      <section data-slot=\"contacto-card-m\" style={CARD_BASE}>\n        <h2 style={GRADIENT_TITLE}>Información de Contacto</h2>\n        <div style={DIVIDER} />\n        <div style={{ display: \"flex\", flexDirection: \"column\", gap: 12, marginTop: 16 }}>\n          <Field label=\"Teléfono\" defaultValue=\"11111111\" editable />\n          <Field label=\"Correo Electrónico\" defaultValue=\"subastin@subastop.com\" editable />\n        </div>\n      </section>\n    </div>\n  );\n}\n"
    },
    {
      "path": "bloques/tu-perfil/mobile/TuPerfilMobile.tsx",
      "type": "registry:file",
      "target": "bloques/tu-perfil/mobile/TuPerfilMobile.tsx",
      "content": "\"use client\";\n\n/**\n * TuPerfilMobile — Bloque de Concorde (Voyager DS) · mobile (420 ancho).\n *\n *   · Header 420×64 con botón hamburguesa (abre SidebarMobile) + ícono de usuario\n *   · Banner 388×120\n *   · ProfileCardMobile (Tu Perfil 388×524 + Información de Contacto 388×247)\n *   · Botón «Cerrar Sesión» (secondary, 200×48)\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 Button from \"@/concorde/components/Button\";\nimport ProfileCardMobile from \"./ProfileCardMobile\";\nimport { TUPERFIL_MOBILE_WIDTH, TUPERFIL_MOBILE_HEIGHT } from \"./dimensions\";\n\nexport { TUPERFIL_MOBILE_WIDTH, TUPERFIL_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 TuPerfilMobileProps {\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 TuPerfilMobile({ username = \"ZAEX5G\", className = \"\", frameHeight }: TuPerfilMobileProps): JSX.Element {\n  const [menuOpen, setMenuOpen] = useState(false);\n\n  const page = (\n    <div\n      className={className}\n      data-block=\"tu-perfil-mobile\"\n      style={{\n        width: TUPERFIL_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 + ícono de usuario (compact) */}\n      <AppHeader\n        width={TUPERFIL_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        {/* Cards: Tu Perfil + Información de Contacto */}\n        <ProfileCardMobile />\n\n        {/* Cerrar Sesión (secondary, 200×48) centrado */}\n        <div style={{ display: \"flex\", justifyContent: \"center\" }}>\n          <Button variant=\"secondary\" style={{ width: 200, paddingLeft: 24, paddingRight: 24, whiteSpace: \"nowrap\" }}>Cerrar Sesión</Button>\n        </div>\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": "components/Input.tsx",
      "type": "registry:file",
      "target": "components/Input.tsx",
      "content": "\"use client\";\n\n/**\n * Input — Generado por Concorde\n * Fuente: Figma VOYAGER · \"Input\" (nodos 3008:15036 default · 3008:15028 focus · 3008:15044 error)\n *\n * Campo de texto 234×48, radio 16, relleno blanco. 3 variantes (por el borde):\n *   · default → borde gradiente 1px  #8460E5 → #FFF8F1\n *   · focus   → borde gradiente 2px  #ED8936 → #8460E5  + glow naranja\n *   · error   → borde rojo 1px #EF4444 + mensaje de ayuda rojo debajo\n *\n * Al enfocar (real) un input \"default\" toma automáticamente el borde de focus.\n */\n\nimport { forwardRef, useId } from \"react\";\nimport type { InputHTMLAttributes, JSX } from \"react\";\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport type InputVariant = \"default\" | \"focus\" | \"error\";\n\n/**\n * Hereda los atributos nativos de <input> (type, name, id, placeholder, disabled,\n * aria-*, data-*, etc.) salvo onChange, que aquí entrega el string directo.\n * className se aplica al contenedor raíz (.pinput-root); el resto va al <input>.\n */\nexport interface InputProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, \"onChange\"> {\n  /** Apariencia del borde (default \"default\"). El foco real activa \"focus\" solo. */\n  variant?: InputVariant;\n  /** Mensaje rojo bajo el campo — se muestra con variant=\"error\" */\n  errorMessage?: string;\n  /** Recibe el string del input (no el evento). */\n  onChange?: (value: string) => void;\n}\n\n// ─── Self-contained CSS ───────────────────────────────────────────────────────\n\nconst STYLE_ID = \"concorde-input-styles\";\n\nconst INPUT_STYLES = `\n.pinput-root {\n  width: 234px;\n  max-width: 100%;\n  font-family: var(--vmc-font-display, \"Plus Jakarta Sans\", -apple-system, sans-serif);\n}\n.pinput {\n  display: flex;\n  align-items: center;\n  height: 48px;\n  padding: 0 16px;\n  border-radius: 16px;\n  border: 1px solid transparent;\n  /* Borde gradiente (default): #8460E5 → #FFF8F1 sobre relleno blanco */\n  background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(338deg, #8460E5 0%, #FFF8F1 100%);\n  background-origin: border-box;\n  background-clip: padding-box, border-box;\n  transition: box-shadow 0.2s, border-color 0.2s;\n}\n.pinput__field {\n  flex: 1;\n  min-width: 0;\n  width: 100%;\n  border: none;\n  outline: none;\n  background: transparent;\n  font-family: inherit;\n  font-size: 16px;\n  line-height: 20px;\n  color: #191C1C;\n}\n.pinput__field::placeholder { color: #6B7280; }\n.pinput__field:disabled { cursor: not-allowed; }\n\n/* Focus — real (:focus-within) o forzado (variant=\"focus\") */\n.pinput:focus-within,\n.pinput--focus {\n  border-width: 2px;\n  padding: 0 15px;\n  background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(148deg, #ED8936 0%, #8460E5 100%);\n  box-shadow: rgba(237,137,54,0.15) 0px 2px 6px;\n}\n\n/* Error — borde rojo sólido + sin glow (gana sobre focus por orden/especificidad) */\n.pinput--error,\n.pinput--error:focus-within {\n  border: 1px solid #EF4444;\n  padding: 0 16px;\n  background-image: none;\n  background-color: #ffffff;\n  box-shadow: none;\n}\n.pinput__msg {\n  margin: 6px 0 0 4px;\n  font-size: 13px;\n  line-height: 18px;\n  color: #EF4444;\n}\n\n.pinput--disabled { opacity: 0.6; }\n\n@media (prefers-reduced-motion: reduce) {\n  .pinput { transition: none; }\n}\n`;\n\nlet _stylesInjected = false;\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\nconst Input = forwardRef<HTMLInputElement, InputProps>(function Input({\n  variant = \"default\",\n  type = \"text\",\n  disabled = false,\n  errorMessage = \"Ingresa un correo válido\",\n  onChange,\n  className = \"\",\n  ...rest\n}, ref): JSX.Element {\n  const uid = useId().replace(/:/g, \"-\");\n  const msgId = `${uid}-msg`;\n  const showMsg = variant === \"error\" && Boolean(errorMessage);\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 = INPUT_STYLES;\n      document.head.appendChild(el);\n    }\n    _stylesInjected = true;\n  }\n\n  const boxClass = [\n    \"pinput\",\n    variant === \"focus\" ? \"pinput--focus\" : \"\",\n    variant === \"error\" ? \"pinput--error\" : \"\",\n    disabled ? \"pinput--disabled\" : \"\",\n  ].filter(Boolean).join(\" \");\n\n  return (\n    <>\n      <style id={`${STYLE_ID}-ssr`} suppressHydrationWarning dangerouslySetInnerHTML={{ __html: INPUT_STYLES }} />\n      <div className={[\"pinput-root\", className].filter(Boolean).join(\" \")}>\n        <div className={boxClass}>\n          <input\n            ref={ref}\n            {...rest}\n            className=\"pinput__field\"\n            type={type}\n            disabled={disabled}\n            onChange={function handle(e) { onChange?.(e.target.value); }}\n            aria-invalid={variant === \"error\" ? true : rest[\"aria-invalid\"]}\n            aria-describedby={showMsg ? msgId : rest[\"aria-describedby\"]}\n          />\n        </div>\n        {showMsg ? <p className=\"pinput__msg\" id={msgId}>{errorMessage}</p> : null}\n      </div>\n    </>\n  );\n});\n\nexport default Input;\n"
    },
    {
      "path": "components/Button.tsx",
      "type": "registry:file",
      "target": "components/Button.tsx",
      "content": "// Button.tsx — Generado por Concorde\r\n// Fuente: https://voyager-ds.vercel.app/preview/components/pase1\r\n// Generado: 2026-05-25\r\n// EDITAR LIBREMENTE después de generar\r\n\r\n\"use client\";\r\n\r\nimport { forwardRef } from \"react\";\r\nimport type { ButtonHTMLAttributes, JSX, ReactNode } from \"react\";\r\n\r\nexport type ButtonVariant =\r\n  | \"primary\"\r\n  | \"negotiable\"\r\n  | \"secondary\"\r\n  | \"secondary-sm\"\r\n  | \"ghost\"\r\n  | \"outline\"\r\n  | \"sm-guest\"\r\n  | \"sm-logged-in\";\r\n\r\n/**\r\n * Hereda todos los atributos nativos de <button> (type, name, className, style,\r\n * onMouseEnter, data-*, etc.) — basta con props, no hace falta editar el archivo.\r\n */\r\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\r\n  /** Estilo visual del botón. */\r\n  variant?: ButtonVariant;\r\n  /** Ícono opcional en el slot circular (variantes sm-guest, secondary-sm, sm-logged-in). */\r\n  icon?: ReactNode;\r\n  /** Nombre de usuario — usado cuando variant=\"sm-logged-in\". */\r\n  username?: string;\r\n}\r\n\r\n// ── CSS self-contained ────────────────────────────────────────────────────\r\n\r\nconst BUTTON_STYLES = `\r\n@property --vbtn-angle { syntax: \"<angle>\"; inherits: false; initial-value: 135deg; }\r\n@property --vbtn-stop-a { syntax: \"<color>\"; inherits: false; initial-value: oklch(0.72 0.16 55); }\r\n@property --vbtn-stop-b { syntax: \"<color>\"; inherits: false; initial-value: oklch(0.55 0.22 285); }\r\n@property --vsec-angle { syntax: \"<angle>\"; inherits: false; initial-value: 160deg; }\r\n@property --vsec-stop-a { syntax: \"<color>\"; inherits: false; initial-value: oklch(0.38 0.20 285); }\r\n@property --vsec-stop-b { syntax: \"<color>\"; inherits: false; initial-value: oklch(0.28 0.18 285); }\r\n@property --vneg-angle { syntax: \"<angle>\"; inherits: false; initial-value: 135deg; }\r\n@property --vneg-stop-a { syntax: \"<color>\"; inherits: false; initial-value: #00aeb1; }\r\n@property --vneg-stop-b { syntax: \"<color>\"; inherits: false; initial-value: #8460e5; }\r\n@property --vss-angle { syntax: \"<angle>\"; inherits: false; initial-value: 160deg; }\r\n@property --vss-stop-a { syntax: \"<color>\"; inherits: false; initial-value: #8460e5; }\r\n@property --vss-stop-b { syntax: \"<color>\"; inherits: false; initial-value: #3b1782; }\r\n\r\n/* ── primary ─────────────────────────────────────────────────────────── */\r\n.pvbtn {\r\n  --vbtn-stop-a: var(--vmc-color-orange-600, #ed8936);\r\n  --vbtn-stop-b: var(--vmc-color-vault-500, #8460e5);\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  height: 48px;\r\n  padding: 0 56px;\r\n  border-radius: var(--vmc-radius-full, 9999px);\r\n  /* Borde GRADIENTE de Figma (1130:1778): white → #FBC47D 25% → #AE8EFF 75% → white */\r\n  border: 2px solid transparent;\r\n  cursor: pointer;\r\n  position: relative;\r\n  overflow: hidden;\r\n  font-family: var(--vmc-font-display, \"Plus Jakarta Sans\", sans-serif);\r\n  font-size: 16px;\r\n  line-height: 20px;\r\n  font-weight: 600;\r\n  color: var(--vmc-color-base-white, #ffffff);\r\n  text-shadow: rgba(0,0,0,0.25) 0 1px 3px;\r\n  background-image:\r\n    linear-gradient(var(--vbtn-angle), var(--vbtn-stop-a) 0%, var(--vbtn-stop-a) 40%, var(--vbtn-stop-b) 100%),\r\n    linear-gradient(135deg, #ffffff 0%, #fbc47d 25%, #ae8eff 75%, #ffffff 100%);\r\n  background-origin: padding-box, border-box;\r\n  background-clip: padding-box, border-box;\r\n  box-shadow: rgba(255,255,255,0.28) 0 1px 0 2px inset, rgba(237,137,54,0.3) 0 2px 6px;\r\n  transition:\r\n    --vbtn-angle 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),\r\n    --vbtn-stop-a 0.35s,\r\n    --vbtn-stop-b 0.35s,\r\n    transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1),\r\n    box-shadow 0.25s;\r\n  transform: translateZ(0);\r\n}\r\n.pvbtn::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: 0;\r\n  border-radius: var(--vmc-radius-full, 9999px);\r\n  background: linear-gradient(rgba(255,255,255,0.17) 0%, transparent 55%);\r\n  pointer-events: none;\r\n  z-index: 1;\r\n}\r\n.pvbtn::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: -4px;\r\n  border-radius: var(--vmc-radius-full, 9999px);\r\n  background: linear-gradient(135deg,\r\n    var(--vmc-color-orange-600, oklch(0.72 0.16 55)),\r\n    var(--vmc-color-vault-500, oklch(0.55 0.22 285))\r\n  );\r\n  filter: blur(14px);\r\n  opacity: 0;\r\n  z-index: -1;\r\n  transition: opacity 0.3s, filter 0.3s;\r\n}\r\n.pvbtn:hover {\r\n  --vbtn-angle: 220deg;\r\n  --vbtn-stop-a: var(--vmc-color-orange-400, #fbc47d);\r\n  --vbtn-stop-b: var(--vmc-color-vault-400, #ae8eff);\r\n  transform: translateY(-2px) scale(1.02);\r\n  box-shadow: rgba(255,255,255,0.22) 0 1px 0 2px inset, rgba(132,96,229,0.35) 0 8px 24px, rgba(237,137,54,0.4) 0 4px 10px;\r\n}\r\n.pvbtn:hover::after { opacity: 0.45; filter: blur(18px); }\r\n.pvbtn:active {\r\n  --vbtn-angle: 135deg;\r\n  --vbtn-stop-a: var(--vmc-color-orange-700, #d46e20);\r\n  --vbtn-stop-b: var(--vmc-color-vault-600, #5a35c2);\r\n  color: #d1d5dc;\r\n  transform: scale(0.97) translateY(1px);\r\n  box-shadow: rgba(0,0,0,0.22) 0 2px 5px 2px inset, rgba(0,0,0,0.12) 0 1px 3px;\r\n}\r\n.pvbtn:active::after { opacity: 0; }\r\n.pvbtn:disabled {\r\n  background-image: none;\r\n  background-color: var(--vmc-color-background-disabled, #e1e3e2);\r\n  color: var(--vmc-color-neutral-700, #99a1af);\r\n  text-shadow: none;\r\n  box-shadow: none;\r\n  cursor: not-allowed;\r\n  transform: none;\r\n  border-color: transparent;\r\n}\r\n.pvbtn:disabled::after { display: none; }\r\n.pvbtn:focus-visible {\r\n  outline: transparent solid 3px;\r\n  outline-offset: 4px;\r\n  transform: scale(0.98);\r\n  box-shadow:\r\n    0 0 0 2px var(--vmc-color-base-white, #fff),\r\n    0 0 0 5px var(--vmc-color-vault-500, oklch(0.55 0.22 285)),\r\n    0 8px 16px -4px rgb(51.76% 37.65% 89.8% / 0.30);\r\n}\r\n\r\n/* ── secondary ───────────────────────────────────────────────────────── */\r\n.psec {\r\n  --vsec-stop-a: var(--vmc-color-vault-500, #8460e5);\r\n  --vsec-stop-b: var(--vmc-color-vault-700, #3b1782);\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  height: 48px;\r\n  padding: 0 56px;\r\n  border-radius: var(--vmc-radius-full, 9999px);\r\n  /* Borde GRADIENTE lila de Figma (1133:2294): #CFBAFF → white 35% → #AE8EFF 65% → #CFBAFF */\r\n  border: 2px solid transparent;\r\n  cursor: pointer;\r\n  position: relative;\r\n  overflow: hidden;\r\n  font-family: var(--vmc-font-display, \"Plus Jakarta Sans\", sans-serif);\r\n  font-size: 16px;\r\n  line-height: 20px;\r\n  font-weight: 600;\r\n  color: var(--vmc-color-base-white, #ffffff);\r\n  text-shadow: rgba(0,0,0,0.3) 0 1px 3px;\r\n  background-image:\r\n    linear-gradient(var(--vsec-angle), var(--vsec-stop-a) 0%, var(--vsec-stop-b) 100%),\r\n    linear-gradient(135deg, #cfbaff 0%, #ffffff 35%, #ae8eff 65%, #cfbaff 100%);\r\n  background-origin: padding-box, border-box;\r\n  background-clip: padding-box, border-box;\r\n  box-shadow: rgba(255,255,255,0.22) 0 1px 0 2px inset, rgba(132,96,229,0.3) 0 2px 8px;\r\n  transition:\r\n    --vsec-angle 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),\r\n    --vsec-stop-a 0.35s,\r\n    --vsec-stop-b 0.35s,\r\n    transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1),\r\n    box-shadow 0.25s;\r\n  transform: translateZ(0);\r\n}\r\n.psec::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: 0;\r\n  border-radius: var(--vmc-radius-full, 9999px);\r\n  background: linear-gradient(rgba(255,255,255,0.15) 0%, transparent 55%);\r\n  pointer-events: none;\r\n  z-index: 1;\r\n}\r\n.psec::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: -4px;\r\n  border-radius: var(--vmc-radius-full, 9999px);\r\n  background: linear-gradient(135deg,\r\n    var(--vmc-color-vault-500, oklch(0.55 0.22 285)),\r\n    var(--vmc-color-vault-700, oklch(0.38 0.20 285))\r\n  );\r\n  filter: blur(14px);\r\n  opacity: 0;\r\n  z-index: -1;\r\n  transition: opacity 0.3s, filter 0.3s;\r\n}\r\n.psec:hover {\r\n  --vsec-angle: 219deg;\r\n  --vsec-stop-a: var(--vmc-color-vault-400, #ae8eff);\r\n  --vsec-stop-b: var(--vmc-color-vault-600, #5a35c2);\r\n  transform: translateY(-2px) scale(1.02);\r\n  box-shadow: rgba(255,255,255,0.2) 0 1px 0 2px inset, rgba(132,96,229,0.4) 0 8px 24px, rgba(132,96,229,0.25) 0 4px 10px;\r\n}\r\n.psec:hover::after { opacity: 0.45; filter: blur(18px); }\r\n.psec:active {\r\n  --vsec-angle: 160deg;\r\n  --vsec-stop-a: var(--vmc-color-vault-700, #3b1782);\r\n  --vsec-stop-b: var(--vmc-color-vault-900, #22005c);\r\n  color: #d1d5dc;\r\n  transform: scale(0.97) translateY(1px);\r\n  box-shadow: rgba(0,0,0,0.28) 0 2px 5px 2px inset, rgba(0,0,0,0.14) 0 1px 3px;\r\n}\r\n.psec:active::after { opacity: 0; }\r\n.psec:disabled {\r\n  background-image: none;\r\n  background-color: var(--vmc-color-background-disabled, #e1e3e2);\r\n  color: var(--vmc-color-neutral-700, #99a1af);\r\n  text-shadow: none;\r\n  box-shadow: none;\r\n  cursor: not-allowed;\r\n  transform: none;\r\n  border-color: transparent;\r\n}\r\n.psec:disabled::after { display: none; }\r\n.psec:focus-visible {\r\n  outline: transparent solid 3px;\r\n  outline-offset: 4px;\r\n  transform: scale(0.98);\r\n  box-shadow:\r\n    0 0 0 2px var(--vmc-color-base-white, #fff),\r\n    0 0 0 5px var(--vmc-color-vault-500, oklch(0.55 0.22 285)),\r\n    0 8px 16px -4px rgb(51.76% 37.65% 89.8% / 0.30);\r\n}\r\n\r\n/* ── ghost · \"Ver Ofertas relacionadas\" ─────────────────────────────────\r\n   Sync SVG Figma (1143:1709/1885/1909): frame 215×48 con texto casi al\r\n   borde → padding 12px (antes 28px). Estados ya coincidían exacto. */\r\n.pghost {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  height: 48px;\r\n  padding: 0 12px;\r\n  border-radius: var(--vmc-radius-full, 9999px);\r\n  border: 2px solid rgba(255,255,255,0.75);\r\n  cursor: pointer;\r\n  position: relative;\r\n  overflow: hidden;\r\n  font-family: var(--vmc-font-display, \"Plus Jakarta Sans\", sans-serif);\r\n  font-size: 16px;\r\n  line-height: 20px;\r\n  font-weight: 600;\r\n  color: var(--vmc-color-base-white, #ffffff);\r\n  background: transparent;\r\n  text-shadow: rgba(0,0,0,0.18) 0 1px 3px;\r\n  box-shadow: rgba(255,255,255,0.2) 0 1px 0 2px inset, rgba(255,255,255,0.15) 0 0 0 1px;\r\n  transition:\r\n    background 0.25s,\r\n    border-color 0.25s,\r\n    color 0.25s,\r\n    transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1),\r\n    box-shadow 0.25s;\r\n  transform: translateZ(0);\r\n}\r\n.pghost::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: 0;\r\n  border-radius: var(--vmc-radius-full, 9999px);\r\n  background: linear-gradient(rgba(255,255,255,0.1) 0%, transparent 55%);\r\n  pointer-events: none;\r\n  z-index: 1;\r\n}\r\n.pghost::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: -4px;\r\n  border-radius: var(--vmc-radius-full, 9999px);\r\n  background: linear-gradient(135deg,\r\n    var(--vmc-color-orange-600, oklch(0.72 0.16 55)),\r\n    var(--vmc-color-vault-500, oklch(0.55 0.22 285))\r\n  );\r\n  filter: blur(16px);\r\n  opacity: 0;\r\n  z-index: -1;\r\n  transition: opacity 0.3s, filter 0.3s;\r\n}\r\n.pghost:hover {\r\n  background: linear-gradient(146.64deg, #fff 0%, rgb(255,240,226) 100%);\r\n  border-color: #fff;\r\n  color: #ed8936;\r\n  text-shadow: rgba(0,0,0,0.25) 0 1px 3px;\r\n  transform: translateY(-2px) scale(1.02);\r\n  box-shadow: rgba(255,255,255,0.5) 0 1px 0 2px inset, rgba(0,0,0,0.2) 0 6px 20px;\r\n}\r\n.pghost:hover::after { opacity: 0.4; filter: blur(18px); }\r\n.pghost:active {\r\n  background: linear-gradient(146.56deg, rgb(212,110,32) 0%, rgb(183,55,0) 100%);\r\n  border-color: #d46e20;\r\n  color: var(--vmc-color-icon-disabled, #e1e3e2);\r\n  text-shadow: rgba(0,0,0,0.25) 0 1px 3px;\r\n  transform: scale(0.97) translateY(1px);\r\n  box-shadow: rgba(0,0,0,0.22) 0 2px 5px 2px inset;\r\n}\r\n.pghost:active::after { opacity: 0; }\r\n.pghost:disabled {\r\n  /* SVG Ghost/Disabled (1153:2443): borde white 0.3, glass white 0.1→transparent, texto white 0.35 */\r\n  background: linear-gradient(rgba(255,255,255,0.1) 0%, transparent 55%);\r\n  border: 2px solid rgba(255,255,255,0.3);\r\n  color: rgba(255,255,255,0.35);\r\n  text-shadow: none;\r\n  box-shadow: none;\r\n  cursor: not-allowed;\r\n  transform: none;\r\n}\r\n.pghost:focus-visible {\r\n  outline: transparent solid 3px;\r\n  outline-offset: 4px;\r\n  transform: scale(0.98);\r\n  box-shadow:\r\n    0 0 0 2px var(--vmc-color-base-white, #fff),\r\n    0 0 0 5px var(--vmc-color-vault-500, oklch(0.55 0.22 285)),\r\n    0 8px 16px -4px rgb(51.76% 37.65% 89.8% / 0.30);\r\n}\r\n\r\n/* ── sm-guest ─────────────────────────────────────────────────────────── */\r\n.pvbtn-sm {\r\n  --vbtn-stop-a: var(--vmc-color-orange-600, #ed8936);\r\n  --vbtn-stop-b: var(--vmc-color-vault-500, #8460e5);\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  height: 40px;\r\n  min-width: 116px;\r\n  padding: 0 16px 0 4px;\r\n  border-radius: var(--vmc-radius-full, 9999px);\r\n  /* Borde GRADIENTE de Figma (1159:4466): white → #FBC47D 25% → #AE8EFF 75% → white */\r\n  border: 2px solid transparent;\r\n  cursor: pointer;\r\n  position: relative;\r\n  overflow: hidden;\r\n  font-family: var(--vmc-font-display, \"Plus Jakarta Sans\", sans-serif);\r\n  font-size: 14px;\r\n  line-height: 16px;\r\n  font-weight: 600;\r\n  color: var(--vmc-color-base-white, #ffffff);\r\n  text-shadow: rgba(0,0,0,0.2) 0 1px 2px;\r\n  background-image:\r\n    linear-gradient(var(--vbtn-angle), var(--vbtn-stop-a) 0%, var(--vbtn-stop-a) 40%, var(--vbtn-stop-b) 100%),\r\n    linear-gradient(135deg, #ffffff 0%, #fbc47d 25%, #ae8eff 75%, #ffffff 100%);\r\n  background-origin: padding-box, border-box;\r\n  background-clip: padding-box, border-box;\r\n  box-shadow: rgba(255,255,255,0.25) 0 1px 0 2px inset, rgba(237,137,54,0.25) 0 2px 6px;\r\n  transition:\r\n    --vbtn-angle 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),\r\n    --vbtn-stop-a 0.35s,\r\n    --vbtn-stop-b 0.35s,\r\n    transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1),\r\n    box-shadow 0.25s;\r\n  transform: translateZ(0);\r\n}\r\n.pvbtn-sm::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: 0;\r\n  border-radius: var(--vmc-radius-full, 9999px);\r\n  background: linear-gradient(rgba(255,255,255,0.15) 0%, transparent 55%);\r\n  pointer-events: none;\r\n  z-index: 1;\r\n}\r\n.pvbtn-sm:hover {\r\n  --vbtn-angle: 220deg;\r\n  --vbtn-stop-a: var(--vmc-color-orange-400, #fbc47d);\r\n  --vbtn-stop-b: var(--vmc-color-vault-400, #ae8eff);\r\n  transform: translateY(-1px) scale(1.02);\r\n  box-shadow: rgba(255,255,255,0.2) 0 1px 0 2px inset, rgba(132,96,229,0.3) 0 6px 18px, rgba(237,137,54,0.35) 0 3px 8px;\r\n}\r\n.pvbtn-sm:active {\r\n  --vbtn-angle: 135deg;\r\n  --vbtn-stop-a: var(--vmc-color-orange-700, #d46e20);\r\n  --vbtn-stop-b: var(--vmc-color-vault-600, #5a35c2);\r\n  color: #d1d5dc;\r\n  transform: scale(0.97) translateY(1px);\r\n  box-shadow: rgba(0,0,0,0.22) 0 2px 4px 2px inset, rgba(255,255,255,0.28) 0 1px 0 inset, rgba(0,0,0,0.1) 0 1px 2px;\r\n}\r\n.pvbtn-sm:disabled {\r\n  background-image: none;\r\n  background-color: var(--vmc-color-background-disabled, #e1e3e2);\r\n  color: var(--vmc-color-neutral-700, #99a1af);\r\n  text-shadow: none;\r\n  box-shadow: none;\r\n  cursor: not-allowed;\r\n  transform: none;\r\n}\r\n.pvbtn-sm:focus-visible {\r\n  outline: transparent solid 2px;\r\n  outline-offset: 3px;\r\n  box-shadow:\r\n    0 0 0 2px var(--vmc-color-base-white, #fff),\r\n    0 0 0 4px var(--vmc-color-vault-500, oklch(0.55 0.22 285));\r\n}\r\n.pvbtn-icon {\r\n  width: 32px;\r\n  height: 32px;\r\n  border-radius: 50%;\r\n  /* Figma SVG 1159:4466: círculo blanco translúcido (no oscuro) */\r\n  background: rgba(255,255,255,0.2);\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex-shrink: 0;\r\n  position: relative;\r\n  z-index: 2;\r\n}\r\n\r\n/* ── sm-logged-in ─────────────────────────────────────────────────────── */\r\n.pvbtn-auth-d {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  height: 40px;\r\n  padding: 0 16px 0 4px;\r\n  border-radius: var(--vmc-radius-full, 9999px);\r\n  border: 2px solid rgba(255,255,255,0.7);\r\n  cursor: pointer;\r\n  position: relative;\r\n  overflow: hidden;\r\n  font-family: var(--vmc-font-display, \"Plus Jakarta Sans\", sans-serif);\r\n  font-size: 14px;\r\n  line-height: 16px;\r\n  font-weight: 600;\r\n  color: var(--vmc-color-base-white, #ffffff);\r\n  text-shadow: rgba(0,0,0,0.22) 0 1px 2px;\r\n  background-image: linear-gradient(var(--vbtn-angle), var(--vbtn-stop-a) 0%, var(--vbtn-stop-a) 40%, var(--vbtn-stop-b) 100%);\r\n  box-shadow: rgba(255,255,255,0.28) 0 1px 0 2px inset, rgba(237,137,54,0.3) 0 2px 6px;\r\n  transition:\r\n    --vbtn-angle 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),\r\n    --vbtn-stop-a 0.35s,\r\n    --vbtn-stop-b 0.35s,\r\n    transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1),\r\n    box-shadow 0.25s;\r\n  transform: translateZ(0);\r\n}\r\n.pvbtn-auth-d:hover {\r\n  --vbtn-angle: 220deg;\r\n  --vbtn-stop-a: var(--vmc-color-orange-400, #fbc47d);\r\n  --vbtn-stop-b: var(--vmc-color-vault-400, #ae8eff);\r\n  transform: translateY(-2px) scale(1.02);\r\n  box-shadow: rgba(255,255,255,0.22) 0 1px 0 2px inset, rgba(132,96,229,0.35) 0 8px 24px, rgba(237,137,54,0.4) 0 4px 10px;\r\n}\r\n.pvbtn-auth-d:active {\r\n  --vbtn-angle: 135deg;\r\n  --vbtn-stop-a: var(--vmc-color-orange-700, #d46e20);\r\n  --vbtn-stop-b: var(--vmc-color-vault-600, #5a35c2);\r\n  color: #d1d5dc;\r\n  transform: scale(0.97) translateY(1px);\r\n  box-shadow: rgba(0,0,0,0.22) 0 2px 5px 2px inset, rgba(0,0,0,0.12) 0 1px 3px;\r\n}\r\n.pvbtn-auth-d:disabled {\r\n  background-image: none;\r\n  background-color: var(--vmc-color-background-disabled, #e1e3e2);\r\n  color: var(--vmc-color-neutral-700, #99a1af);\r\n  text-shadow: none;\r\n  box-shadow: none;\r\n  cursor: not-allowed;\r\n  transform: none;\r\n}\r\n.pvbtn-auth-d:focus-visible {\r\n  outline: transparent solid 3px;\r\n  outline-offset: 4px;\r\n  transform: scale(0.98);\r\n  box-shadow:\r\n    0 0 0 2px var(--vmc-color-base-white, #fff),\r\n    0 0 0 5px var(--vmc-color-vault-500, oklch(0.55 0.22 285)),\r\n    0 8px 16px -4px rgb(51.76% 37.65% 89.8% / 0.30);\r\n}\r\n.pvbtn-auth-d-icon {\r\n  width: 32px;\r\n  height: 32px;\r\n  border-radius: 50%;\r\n  background: rgba(0,0,0,0.18);\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex-shrink: 0;\r\n  position: relative;\r\n  z-index: 2;\r\n}\r\n.pvbtn-auth-d-username {\r\n  font-weight: 700;\r\n  opacity: 0.92;\r\n}\r\n\r\n/* ── prefers-reduced-motion ──────────────────────────────────────────── */\r\n/* ── negotiable (teal → vault) · sync EXACTO del SVG export de Figma ────\r\n   Nodos 1807:14907/14943/14957 · 200×48 FIJO · borde gradiente teal→vault\r\n   Spec: .claude/concorde/inbox/figma-ButtonNegotiable-svg-export.json */\r\n.pneg {\r\n  --vneg-stop-a: var(--vmc-color-teal-500, #00aeb1);\r\n  --vneg-stop-b: var(--vmc-color-vault-500, #8460e5);\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  height: 48px;\r\n  min-width: 200px;\r\n  padding: 0 24px;\r\n  border-radius: var(--vmc-radius-full, 9999px);\r\n  /* Borde GRADIENTE de Figma (no blanco sólido): capa border-box bajo el fill */\r\n  border: 2px solid transparent;\r\n  cursor: pointer;\r\n  position: relative;\r\n  overflow: hidden;\r\n  font-family: var(--vmc-font-display, \"Plus Jakarta Sans\", sans-serif);\r\n  font-size: 16px;\r\n  line-height: 20px;\r\n  font-weight: 600;\r\n  color: var(--vmc-color-base-white, #ffffff);\r\n  text-shadow: rgba(0,0,0,0.25) 0 1px 3px;\r\n  background-image:\r\n    linear-gradient(var(--vneg-angle), var(--vneg-stop-a) 0%, var(--vneg-stop-a) 40%, var(--vneg-stop-b) 100%),\r\n    linear-gradient(135deg, #ffffff 0%, #4ddcdc 25%, #6445df 75%, #ffffff 100%);\r\n  background-origin: padding-box, border-box;\r\n  background-clip: padding-box, border-box;\r\n  box-shadow: rgba(255,255,255,0.28) 0 1px 0 2px inset, rgba(0,174,177,0.35) 0 2px 6px;\r\n  transition:\r\n    --vneg-angle 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),\r\n    --vneg-stop-a 0.35s,\r\n    --vneg-stop-b 0.35s,\r\n    transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1),\r\n    box-shadow 0.25s;\r\n  transform: translateZ(0);\r\n}\r\n.pneg::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: 0;\r\n  border-radius: var(--vmc-radius-full, 9999px);\r\n  background: linear-gradient(rgba(255,255,255,0.17) 0%, transparent 55%);\r\n  pointer-events: none;\r\n  z-index: 1;\r\n}\r\n.pneg::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: -4px;\r\n  border-radius: var(--vmc-radius-full, 9999px);\r\n  background: linear-gradient(135deg,\r\n    var(--vmc-color-teal-500, #00aeb1),\r\n    var(--vmc-color-vault-500, #8460e5)\r\n  );\r\n  filter: blur(14px);\r\n  opacity: 0;\r\n  z-index: -1;\r\n  transition: opacity 0.3s, filter 0.3s;\r\n}\r\n.pneg:hover {\r\n  --vneg-angle: 220deg;\r\n  --vneg-stop-a: var(--vmc-color-teal-400, #00cccc);\r\n  --vneg-stop-b: var(--vmc-color-vault-400, #ae8eff);\r\n  transform: translateY(-2px) scale(1.02);\r\n  /* Sombras exactas del SVG hover: teal cercana + glow púrpura #6445DF */\r\n  box-shadow: rgba(255,255,255,0.22) 0 1px 0 2px inset, rgba(0,174,177,0.4) 0 4px 10px, rgba(100,69,223,0.35) 0 8px 24px;\r\n}\r\n.pneg:hover::after { opacity: 0.45; filter: blur(18px); }\r\n.pneg:active {\r\n  --vneg-angle: 135deg;\r\n  --vneg-stop-a: var(--vmc-color-teal-600, #009095);\r\n  --vneg-stop-b: var(--vmc-color-vault-600, #5a35c2);\r\n  color: #d1d5dc; /* exacto del SVG pressed */\r\n  transform: scale(0.97) translateY(1px);\r\n  box-shadow: rgba(0,0,0,0.22) 0 2px 5px 2px inset, rgba(0,0,0,0.12) 0 1px 3px;\r\n}\r\n.pneg:active::after { opacity: 0; }\r\n.pneg:disabled {\r\n  background-image: none;\r\n  background-color: var(--vmc-color-background-disabled, #e1e3e2);\r\n  color: var(--vmc-color-neutral-700, #99a1af);\r\n  text-shadow: none;\r\n  box-shadow: none;\r\n  cursor: not-allowed;\r\n  transform: none;\r\n  border-color: transparent;\r\n}\r\n.pneg:disabled::after { display: none; }\r\n.pneg:focus-visible {\r\n  outline: transparent solid 3px;\r\n  outline-offset: 4px;\r\n  transform: scale(0.98);\r\n  box-shadow:\r\n    0 0 0 2px var(--vmc-color-base-white, #fff),\r\n    0 0 0 5px var(--vmc-color-teal-500, #00aeb1),\r\n    0 8px 16px -4px rgba(0,174,177,0.3);\r\n}\r\n\r\n/* ── outline · \"Regístrate\" — RECONSTRUIDO desde cero con SVGs de Figma ──\r\n   Default 1932:10613 · Hover 1934:10627 · Pressed 1935:10631 (215×48, radius full)\r\n   3 capas Figma por estado: relleno (paint0) + borde 1px gradiente (stroke) + glass white 0.1 (paint2)\r\n   Borde = STROKE de 1px (sin stroke-width = 1px), NO 2px. Glass presente en TODOS los estados. */\r\n.poutline {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  height: 48px;\r\n  padding: 0 56px;\r\n  border-radius: var(--vmc-radius-full, 9999px);\r\n  border: none;\r\n  cursor: pointer;\r\n  position: relative;\r\n  font-family: var(--vmc-font-display, \"Plus Jakarta Sans\", sans-serif);\r\n  font-size: 16px;\r\n  line-height: 20px;\r\n  font-weight: 600;\r\n  color: var(--vmc-color-orange-600, #ed8936);\r\n  /* Default: relleno transparente + glass white 0.1 → transparent 55% (paint1) */\r\n  background-image: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 55%);\r\n  box-shadow: none;\r\n  transition:\r\n    background 0.25s,\r\n    color 0.25s,\r\n    transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1),\r\n    box-shadow 0.25s;\r\n  transform: translateZ(0);\r\n}\r\n/* Borde = anillo gradiente de 1px (centro 100% transparente, sin doble borde) — mask trick.\r\n   Default/Hover: naranja diagonal #FF9639 → #EF852E 50% → #BE3D00 (vector ~144deg) */\r\n.poutline::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: 0;\r\n  border-radius: inherit;\r\n  padding: 1px;\r\n  background: linear-gradient(144deg, #ff9639 0%, #ef852e 50%, #be3d00 100%);\r\n  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\r\n  -webkit-mask-composite: xor;\r\n  mask-composite: exclude;\r\n  pointer-events: none;\r\n  z-index: 1;\r\n  transition: background 0.25s;\r\n}\r\n/* Glow exterior — interacción Concorde (no existe en Figma estático) */\r\n.poutline::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: -4px;\r\n  border-radius: inherit;\r\n  background: linear-gradient(144deg,\r\n    var(--vmc-color-orange-600, #ed8936),\r\n    var(--vmc-color-orange-tint, #fff0e2)\r\n  );\r\n  filter: blur(16px);\r\n  opacity: 0;\r\n  z-index: -1;\r\n  transition: opacity 0.3s, filter 0.3s;\r\n}\r\n.poutline:hover {\r\n  /* Hover 1934:10627: relleno white→#FFF0E2 horizontal (paint0) + glass (paint2). Un solo borde 1px */\r\n  background-image:\r\n    linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 55%),\r\n    linear-gradient(90deg, #ffffff 0%, var(--vmc-color-orange-tint, #fff0e2) 100%);\r\n  color: var(--vmc-color-orange-600, #ed8936);\r\n  text-shadow: rgba(0,0,0,0.08) 0 1px 2px;\r\n  transform: translateY(-2px) scale(1.02);\r\n  box-shadow: rgba(190,61,0,0.18) 0 6px 18px -4px;\r\n}\r\n.poutline:hover::after { opacity: 0.35; filter: blur(18px); }\r\n.poutline:active {\r\n  /* Pressed 1935:10631: relleno #D46E20→#B73700 (paint0 ~156deg) + glass. Borde oscuro vertical */\r\n  background-image:\r\n    linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 55%),\r\n    linear-gradient(156deg, #d46e20 0%, #b73700 100%);\r\n  color: var(--vmc-color-base-white, #fff);\r\n  text-shadow: rgba(0,0,0,0.22) 0 1px 2px;\r\n  transform: scale(0.97) translateY(1px);\r\n  box-shadow: rgba(0,0,0,0.16) 0 1px 3px;\r\n}\r\n/* Pressed: anillo oscuro #B25614 → #93420A VERTICAL (paint1 vector 180deg) */\r\n.poutline:active::before { background: linear-gradient(180deg, #b25614 0%, #93420a 100%); }\r\n.poutline:active::after { opacity: 0; }\r\n.poutline:disabled {\r\n  background-image: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 55%);\r\n  color: rgba(237,137,54,0.4);\r\n  box-shadow: none;\r\n  cursor: not-allowed;\r\n  transform: none;\r\n}\r\n.poutline:disabled::before { background: rgba(237,137,54,0.3); }\r\n.poutline:disabled::after { opacity: 0; }\r\n.poutline:focus-visible {\r\n  outline: transparent solid 3px;\r\n  outline-offset: 4px;\r\n  transform: scale(0.98);\r\n  box-shadow:\r\n    0 0 0 2px var(--vmc-color-base-white, #fff),\r\n    0 0 0 5px var(--vmc-color-orange-600, #ed8936);\r\n}\r\n\r\n/* ── secondary-sm · \"Agenda tu visita\" ──────────────────────────────────\r\n   Sync EXACTO del SVG export de Figma (Variant=Secondary, Size=Small)\r\n   Nodos 1442:10976 / 1464:19933 / 1464:20511 · 160×40 fijo · ícono calendario\r\n   Spec: .claude/concorde/inbox/figma-ButtonGhost-SecondarySm-svg-export.json */\r\n.psec-sm {\r\n  --vss-stop-a: var(--vmc-color-vault-500, #8460e5);\r\n  --vss-stop-b: var(--vmc-color-vault-700, #3b1782);\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 4px;\r\n  height: 40px;\r\n  min-width: 160px;\r\n  padding: 0 12px 0 4px;\r\n  border-radius: var(--vmc-radius-full, 9999px);\r\n  /* Borde GRADIENTE lila de Figma (constante en los 3 estados) */\r\n  border: 2px solid transparent;\r\n  cursor: pointer;\r\n  position: relative;\r\n  overflow: hidden;\r\n  font-family: var(--vmc-font-display, \"Plus Jakarta Sans\", sans-serif);\r\n  font-size: 14px;\r\n  line-height: 16px;\r\n  font-weight: 600;\r\n  color: var(--vmc-color-base-white, #ffffff);\r\n  text-shadow: rgba(0,0,0,0.25) 0 1px 3px;\r\n  background-image:\r\n    linear-gradient(var(--vss-angle), var(--vss-stop-a) 0%, var(--vss-stop-b) 100%),\r\n    linear-gradient(135deg, #cfbaff 0%, #ffffff 35%, #ae8eff 65%, #cfbaff 100%);\r\n  background-origin: padding-box, border-box;\r\n  background-clip: padding-box, border-box;\r\n  box-shadow: rgba(255,255,255,0.22) 0 1px 0 2px inset, rgba(132,96,229,0.3) 0 2px 8px;\r\n  transition:\r\n    --vss-angle 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),\r\n    --vss-stop-a 0.35s,\r\n    --vss-stop-b 0.35s,\r\n    transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1),\r\n    box-shadow 0.25s;\r\n  transform: translateZ(0);\r\n}\r\n.psec-sm::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: 0;\r\n  border-radius: var(--vmc-radius-full, 9999px);\r\n  background: linear-gradient(rgba(255,255,255,0.16) 0%, transparent 55%);\r\n  pointer-events: none;\r\n  z-index: 1;\r\n}\r\n.psec-sm:hover {\r\n  --vss-angle: 219deg;\r\n  --vss-stop-a: var(--vmc-color-vault-400, #ae8eff);\r\n  --vss-stop-b: var(--vmc-color-vault-600, #5a35c2);\r\n  transform: translateY(-1px) scale(1.02);\r\n  box-shadow: rgba(255,255,255,0.2) 0 1px 0 2px inset, rgba(132,96,229,0.25) 0 4px 10px, rgba(132,96,229,0.4) 0 8px 24px;\r\n}\r\n.psec-sm:active {\r\n  --vss-angle: 160deg;\r\n  --vss-stop-a: var(--vmc-color-vault-700, #3b1782);\r\n  --vss-stop-b: var(--vmc-color-vault-900, #22005c);\r\n  color: #d1d5dc;\r\n  transform: scale(0.97) translateY(1px);\r\n  box-shadow: rgba(0,0,0,0.28) 0 2px 5px 2px inset, rgba(0,0,0,0.14) 0 1px 3px;\r\n}\r\n.psec-sm:disabled {\r\n  background-image: none;\r\n  background-color: var(--vmc-color-background-disabled, #e1e3e2);\r\n  color: var(--vmc-color-neutral-700, #99a1af);\r\n  text-shadow: none;\r\n  box-shadow: none;\r\n  cursor: not-allowed;\r\n  transform: none;\r\n  border-color: transparent;\r\n}\r\n.psec-sm:focus-visible {\r\n  outline: transparent solid 2px;\r\n  outline-offset: 3px;\r\n  box-shadow:\r\n    0 0 0 2px var(--vmc-color-base-white, #fff),\r\n    0 0 0 4px var(--vmc-color-vault-500, #8460e5);\r\n}\r\n.psec-sm-icon {\r\n  width: 32px;\r\n  height: 32px;\r\n  border-radius: 50%;\r\n  background: rgba(255,255,255,0.2);\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex-shrink: 0;\r\n  position: relative;\r\n  z-index: 2;\r\n}\r\n\r\n/* ── prefers-reduced-motion ──────────────────────────────────────────── */\r\n@media (prefers-reduced-motion: reduce) {\r\n  .pvbtn, .psec, .psec-sm, .pneg, .pghost, .poutline, .pvbtn-sm, .pvbtn-auth-d {\r\n    transition: none;\r\n  }\r\n  .pvbtn::after, .psec::after, .pneg::after, .pghost::after, .poutline::after {\r\n    transition: none;\r\n  }\r\n}\r\n`;\r\n\r\n// ── Style injection ───────────────────────────────────────────────────────\r\n\r\nconst STYLE_ID = \"concorde-button-styles\";\r\nlet stylesInjected = false;\r\n\r\nfunction injectStyles(): void {\r\n  if (typeof document === \"undefined\" || stylesInjected) return;\r\n  if (!document.getElementById(STYLE_ID)) {\r\n    const el = document.createElement(\"style\");\r\n    el.id = STYLE_ID;\r\n    el.textContent = BUTTON_STYLES;\r\n    document.head.appendChild(el);\r\n  }\r\n  stylesInjected = true;\r\n}\r\n\r\n// ── Icon ─────────────────────────────────────────────────────────────────\r\n\r\n// Ícono \"user\" — path EXACTO del SVG export de Figma (Primary/Small \"Ingresa\",\r\n// nodo 1159:4466). Cabeza circular + cuerpo (hombros) rellenos. 24px dentro del\r\n// círculo de 32px (igual que Figma). fill=currentColor → en pressed hereda #E1E3E2.\r\nexport function UserIcon(): JSX.Element {\r\n  return (\r\n    <svg\r\n      width=\"24\"\r\n      height=\"24\"\r\n      viewBox=\"0 0 24 24\"\r\n      fill=\"currentColor\"\r\n      aria-hidden=\"true\"\r\n    >\r\n      <path d=\"M15.5412 7.36C15.5412 5.52 13.9765 4 12 4C10.0235 4 8.5412 5.52 8.5412 7.36C8.5412 9.28 10.0235 10.8 12 10.8C13.9765 10.8 15.5412 9.28 15.5412 7.36ZM5 16.4C6.4824 18.56 9.1176 20 12 20C14.8824 20 17.5176 18.56 19 16.4C19 14.16 14.3059 12.88 12 12.88C9.6941 12.88 5 14.16 5 16.4Z\" />\r\n    </svg>\r\n  );\r\n}\r\n\r\n// Ícono calendario — paths EXACTOS del SVG de Figma (Secondary/Small \"Agenda tu visita\").\r\n// stroke currentColor → en pressed hereda #e1e3e2 igual que en Figma.\r\nexport function CalendarIcon(): JSX.Element {\r\n  return (\r\n    <svg\r\n      width=\"24\"\r\n      height=\"24\"\r\n      viewBox=\"0 0 24 24\"\r\n      fill=\"none\"\r\n      stroke=\"currentColor\"\r\n      strokeWidth=\"1.5\"\r\n      strokeLinecap=\"round\"\r\n      strokeLinejoin=\"round\"\r\n      aria-hidden=\"true\"\r\n    >\r\n      <rect x=\"6\" y=\"7\" width=\"12\" height=\"11\" rx=\"2\" />\r\n      <path d=\"M6 11h12\" />\r\n      <path d=\"M9 5.5v3\" />\r\n      <path d=\"M15 5.5v3\" />\r\n    </svg>\r\n  );\r\n}\r\n\r\n// ── Variant → class map ───────────────────────────────────────────────────\r\n\r\nconst VARIANT_CLASS: Record<ButtonVariant, string> = {\r\n  primary: \"pvbtn\",\r\n  negotiable: \"pneg\",\r\n  secondary: \"psec\",\r\n  \"secondary-sm\": \"psec-sm\",\r\n  ghost: \"pghost\",\r\n  outline: \"poutline\",\r\n  \"sm-guest\": \"pvbtn-sm\",\r\n  \"sm-logged-in\": \"pvbtn-auth-d\",\r\n};\r\n\r\n// ── Component ─────────────────────────────────────────────────────────────\r\n\r\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\r\n  { variant = \"primary\", icon, username, className, type = \"button\", children, ...rest },\r\n  ref,\r\n) {\r\n  injectStyles();\r\n\r\n  const cls = VARIANT_CLASS[variant];\r\n\r\n  let content: ReactNode;\r\n  if (variant === \"sm-guest\") {\r\n    content = (\r\n      <>\r\n        {icon ? <span className=\"pvbtn-icon\">{icon}</span> : null}\r\n        {children}\r\n      </>\r\n    );\r\n  } else if (variant === \"secondary-sm\") {\r\n    content = (\r\n      <>\r\n        {icon ? <span className=\"psec-sm-icon\">{icon}</span> : null}\r\n        {children}\r\n      </>\r\n    );\r\n  } else if (variant === \"sm-logged-in\") {\r\n    content = (\r\n      <>\r\n        {icon ? <span className=\"pvbtn-auth-d-icon\">{icon}</span> : null}\r\n        Bienvenido,{\" \"}\r\n        <span className=\"pvbtn-auth-d-username\">{username ?? children}</span>\r\n      </>\r\n    );\r\n  } else {\r\n    content = children;\r\n  }\r\n\r\n  return (\r\n    <>\r\n      <style\r\n        id={`${STYLE_ID}-ssr`}\r\n        suppressHydrationWarning\r\n        dangerouslySetInnerHTML={{ __html: BUTTON_STYLES }}\r\n      />\r\n      <button\r\n        ref={ref}\r\n        className={[cls, className].filter(Boolean).join(\" \")}\r\n        type={type}\r\n        {...rest}\r\n      >\r\n        {content}\r\n      </button>\r\n    </>\r\n  );\r\n});\r\n\r\nexport default Button;\r\n"
    },
    {
      "path": "components/StarIcon.tsx",
      "type": "registry:file",
      "target": "components/StarIcon.tsx",
      "content": "\"use client\";\n\n/**\n * StarIcon — Generado por Concorde\n * Fuente: Figma VOYAGER · \"StarIcons\" (nodo 2035:16598)\n *\n * Insignia de estrella 28×28: círculo con relleno gradiente naranja→lila\n * (#ED8936 → #8460E5), borde gradiente (white → #FBC47D → #AE8EFF → white) y\n * estrella blanca. Drop shadow naranja + inner shadow blanco (del filtro Figma).\n * Tamaño personalizable: \"sm\" (20px) · \"md\" (28px) · o número de px.\n */\n\nimport { useId } from \"react\";\nimport type { JSX } from \"react\";\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport type StarIconSize = \"sm\" | \"md\";\n\nexport interface StarIconProps {\n  /** Tamaño: \"sm\"=20px · \"md\"=28px · o número de px (default \"md\") */\n  size?: StarIconSize | number;\n  /** Texto accesible — si se omite, el ícono es decorativo (aria-hidden) */\n  title?: string;\n  className?: string;\n}\n\nconst SIZE_PX: Record<StarIconSize, number> = { sm: 20, md: 28 };\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\nexport default function StarIcon({ size = \"md\", title, className = \"\" }: StarIconProps): JSX.Element {\n  const uid = useId().replace(/:/g, \"-\");\n  const px = typeof size === \"number\" ? size : SIZE_PX[size];\n\n  return (\n    <svg\n      width={px}\n      height={px}\n      viewBox=\"0 0 28 28\"\n      fill=\"none\"\n      className={className}\n      role={title ? \"img\" : undefined}\n      aria-hidden={title ? undefined : true}\n      aria-label={title}\n    >\n      {title ? <title>{title}</title> : null}\n      <g filter={`url(#${uid}-f)`}>\n        <path\n          d=\"M6 12C6 7.58172 9.58172 4 14 4V4C18.4183 4 22 7.58172 22 12V12C22 16.4183 18.4183 20 14 20V20C9.58172 20 6 16.4183 6 12V12Z\"\n          fill={`url(#${uid}-bg)`}\n          shapeRendering=\"crispEdges\"\n        />\n        <path\n          d=\"M14 4.59961C18.0869 4.59961 21.4004 7.91309 21.4004 12C21.4004 16.0869 18.0869 19.4004 14 19.4004C9.91309 19.4004 6.59961 16.0869 6.59961 12C6.59961 7.91309 9.91309 4.59961 14 4.59961Z\"\n          stroke={`url(#${uid}-bd)`}\n          strokeWidth=\"1.2\"\n          shapeRendering=\"crispEdges\"\n        />\n        <path\n          d=\"M14 7L15.236 9.63302L18 10.0578L16 12.1062L16.472 15L14 13.633L11.528 15L12 12.1062L10 10.0578L12.764 9.63302L14 7Z\"\n          stroke=\"white\"\n          strokeWidth=\"1.2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        />\n      </g>\n      <defs>\n        <filter id={`${uid}-f`} x=\"0\" y=\"0\" width=\"28\" height=\"28\" filterUnits=\"userSpaceOnUse\" colorInterpolationFilters=\"sRGB\">\n          <feFlood floodOpacity=\"0\" result=\"BackgroundImageFix\" />\n          <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\n          <feOffset dy=\"2\" />\n          <feGaussianBlur stdDeviation=\"3\" />\n          <feComposite in2=\"hardAlpha\" operator=\"out\" />\n          <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.929412 0 0 0 0 0.537255 0 0 0 0 0.211765 0 0 0 0.3 0\" />\n          <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow\" />\n          <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow\" result=\"shape\" />\n          <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\n          <feMorphology radius=\"2\" operator=\"erode\" in=\"SourceAlpha\" result=\"effect2_innerShadow\" />\n          <feOffset dy=\"1\" />\n          <feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\" />\n          <feColorMatrix type=\"matrix\" values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.28 0\" />\n          <feBlend mode=\"normal\" in2=\"shape\" result=\"effect2_innerShadow\" />\n        </filter>\n        <linearGradient id={`${uid}-bg`} x1=\"6\" y1=\"4\" x2=\"22\" y2=\"20\" gradientUnits=\"userSpaceOnUse\">\n          <stop stopColor=\"#ED8936\" />\n          <stop offset=\"0.4\" stopColor=\"#ED8936\" />\n          <stop offset=\"1\" stopColor=\"#8460E5\" />\n        </linearGradient>\n        <linearGradient id={`${uid}-bd`} x1=\"6\" y1=\"4\" x2=\"22\" y2=\"20\" gradientUnits=\"userSpaceOnUse\">\n          <stop stopColor=\"white\" />\n          <stop offset=\"0.25\" stopColor=\"#FBC47D\" />\n          <stop offset=\"0.75\" stopColor=\"#AE8EFF\" />\n          <stop offset=\"1\" stopColor=\"white\" />\n        </linearGradient>\n      </defs>\n    </svg>\n  );\n}\n"
    },
    {
      "path": "components/InfoIcon.tsx",
      "type": "registry:file",
      "target": "components/InfoIcon.tsx",
      "content": "\"use client\";\n\n/**\n * InfoIcon — Generado por Concorde\n * Fuente: Figma VOYAGER · \"InfoIcon Outline\" (nodo 2035:16600)\n *\n * Ícono de información ⓘ 16×16: círculo + «i» con trazo gradiente naranja→lila\n * (#ED8936 → #8460E5, vector 2,3.36 → 14,12.64). Tamaño personalizable.\n * El id del gradiente se aísla con useId para no colisionar entre instancias.\n */\n\nimport { useId } from \"react\";\nimport type { JSX } from \"react\";\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport interface InfoIconProps {\n  /** Ancho y alto en px (default 16). */\n  size?: number;\n  /** Texto accesible — si se omite, el ícono es decorativo (aria-hidden). */\n  title?: string;\n  className?: string;\n}\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\nexport default function InfoIcon({ size = 16, title, className = \"\" }: InfoIconProps): JSX.Element {\n  const uid = useId().replace(/:/g, \"-\");\n\n  return (\n    <svg\n      width={size}\n      height={size}\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      className={className}\n      role={title ? \"img\" : undefined}\n      aria-hidden={title ? undefined : true}\n      aria-label={title}\n    >\n      {title ? <title>{title}</title> : null}\n      <path\n        d=\"M7.5 7.5L7.52733 7.48667C7.61282 7.44396 7.70875 7.42664 7.80378 7.43677C7.8988 7.4469 7.98893 7.48404 8.0635 7.54381C8.13806 7.60357 8.19394 7.68345 8.22451 7.77399C8.25508 7.86453 8.25907 7.96193 8.236 8.05467L7.764 9.94533C7.74076 10.0381 7.74463 10.1356 7.77513 10.2263C7.80563 10.3169 7.86149 10.3969 7.93609 10.4568C8.01069 10.5166 8.10089 10.5538 8.196 10.564C8.2911 10.5741 8.38712 10.5568 8.47267 10.514L8.5 10.5M14 8C14 8.78793 13.8448 9.56815 13.5433 10.2961C13.2417 11.0241 12.7998 11.6855 12.2426 12.2426C11.6855 12.7998 11.0241 13.2417 10.2961 13.5433C9.56815 13.8448 8.78793 14 8 14C7.21207 14 6.43185 13.8448 5.7039 13.5433C4.97595 13.2417 4.31451 12.7998 3.75736 12.2426C3.20021 11.6855 2.75825 11.0241 2.45672 10.2961C2.15519 9.56815 2 8.78793 2 8C2 6.4087 2.63214 4.88258 3.75736 3.75736C4.88258 2.63214 6.4087 2 8 2C9.5913 2 11.1174 2.63214 12.2426 3.75736C13.3679 4.88258 14 6.4087 14 8ZM8 5.5H8.00533V5.50533H8V5.5Z\"\n        stroke={`url(#${uid}-g)`}\n        strokeWidth=\"1.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n      <defs>\n        <linearGradient id={`${uid}-g`} x1=\"2\" y1=\"3.35944\" x2=\"14\" y2=\"12.6406\" gradientUnits=\"userSpaceOnUse\">\n          <stop stopColor=\"#ED8936\" />\n          <stop offset=\"0.4\" stopColor=\"#ED8936\" />\n          <stop offset=\"1\" stopColor=\"#8460E5\" />\n        </linearGradient>\n      </defs>\n    </svg>\n  );\n}\n"
    },
    {
      "path": "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"
    }
  ]
}