{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "accordion",
  "type": "registry:component",
  "title": "Accordion",
  "description": "Componente Concorde Accordion — un solo archivo, Accordion.tsx.",
  "dependencies": [
    "react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/Accordion.tsx",
      "type": "registry:file",
      "target": "components/Accordion.tsx",
      "content": "\"use client\";\n\n/**\n * Accordion — Generado por Concorde\n * Fuente: Figma VOYAGER · \"DetailAccordions\" (2007:16995)\n *\n * Card blanca (radio 4, sombra) con título (corchetes naranjas vía CardTitle,\n * editable) y un chevron en círculo naranja a la derecha. El chevron gira:\n *   · cerrado → apunta hacia abajo\n *   · abierto → apunta hacia arriba (rotate 180)\n * El contenido se expande/colapsa. Controlado o no controlado.\n * Paths/gradiente del chevron copiados tal cual del SVG.\n */\n\nimport { useId, useState } from \"react\";\nimport type { JSX, ReactNode } from \"react\";\nimport CardTitle from \"@/concorde/components/CardTitle\";\n\nexport interface AccordionProps {\n  /** Título (editable) — default \"INFORMACIÓN GENERAL\". Acepta texto o nodos (p.ej. un dot + texto). */\n  title?: ReactNode;\n  /** Contenido que se expande/colapsa */\n  children?: ReactNode;\n  /** Abierto (controlado) */\n  open?: boolean;\n  /** Abierto inicial (no controlado) — default false */\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /** Tamaño del título en px (default 14) */\n  titleSize?: number;\n  className?: string;\n}\n\nconst STYLE_ID = \"concorde-accordion-styles\";\n\nconst ACCORDION_STYLES = `\n/* La card BLANCA + sombra + redondeo envuelven TODO (header + contenido), así el\n   contenido abierto queda sobre fondo blanco dentro de la misma card. */\n.pacc {\n  width: 100%;\n  background: #ffffff;\n  border-radius: 4px;\n  box-shadow: rgba(0,0,0,0.1) 0px 0px 16px 4px;\n  overflow: hidden;\n  font-family: var(--vmc-font-display, \"Plus Jakarta Sans\", -apple-system, sans-serif);\n}\n.pacc__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  width: 100%;\n  min-height: 66px;\n  box-sizing: border-box;\n  padding: 0 16px;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  text-align: left;\n}\n/* Divisor entre header y contenido — solo visible cuando está abierto */\n.pacc--open .pacc__header { box-shadow: inset 0 -1px 0 #ECECEE; }\n.pacc__chevron {\n  flex-shrink: 0;\n  transition: transform 0.25s cubic-bezier(0.3, 0, 0, 1);\n}\n.pacc--open .pacc__chevron { transform: rotate(180deg); }\n.pacc__content {\n  display: grid;\n  grid-template-rows: 0fr;\n  transition: grid-template-rows 0.25s ease;\n}\n.pacc--open .pacc__content { grid-template-rows: 1fr; }\n.pacc__content-inner { overflow: hidden; }\n.pacc__content-pad {\n  padding: 16px 18px 18px;\n  font-size: 14px;\n  line-height: 1.6;\n  color: #475569;\n}\n@media (prefers-reduced-motion: reduce) {\n  .pacc__chevron, .pacc__content { transition: none; }\n}\n`;\n\nlet _stylesInjected = false;\n\n// ─── Chevron en círculo (gradiente naranja · copiado del SVG) ───────────────\n\nfunction Chevron({ gradId }: { gradId: string }): JSX.Element {\n  return (\n    <svg className=\"pacc__chevron\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n      <circle cx=\"8\" cy=\"8\" r=\"7.25\" stroke={`url(#${gradId})`} strokeWidth=\"1.5\" />\n      <path d=\"M5 6.5L8 10.5L11 6.5\" stroke={`url(#${gradId})`} strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n      <defs>\n        <linearGradient id={gradId} x1=\"0.667\" y1=\"-0.333\" x2=\"18.94\" y2=\"17.94\" gradientUnits=\"userSpaceOnUse\">\n          <stop stopColor=\"#FF9C3B\" />\n          <stop offset=\"0.4\" stopColor=\"#EF852E\" />\n          <stop offset=\"1\" stopColor=\"#BE3D00\" />\n        </linearGradient>\n      </defs>\n    </svg>\n  );\n}\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\nexport default function Accordion({\n  title = \"INFORMACIÓN GENERAL\",\n  children,\n  open,\n  defaultOpen = false,\n  onOpenChange,\n  titleSize = 14,\n  className = \"\",\n}: AccordionProps): JSX.Element {\n  const uid = useId().replace(/:/g, \"-\");\n  const controlled = open !== undefined;\n  const [internal, setInternal] = useState(defaultOpen);\n  const isOpen = controlled ? open : internal;\n\n  if (typeof document !== \"undefined\" && !_stylesInjected) {\n    if (!document.getElementById(STYLE_ID)) {\n      const el = document.createElement(\"style\");\n      el.id = STYLE_ID;\n      el.textContent = ACCORDION_STYLES;\n      document.head.appendChild(el);\n    }\n    _stylesInjected = true;\n  }\n\n  function handleToggle(): void {\n    const next = !isOpen;\n    if (!controlled) setInternal(next);\n    onOpenChange?.(next);\n  }\n\n  const cls = [\"pacc\", isOpen ? \"pacc--open\" : \"\", className].filter(Boolean).join(\" \");\n\n  return (\n    <>\n      <style id={`${STYLE_ID}-ssr`} suppressHydrationWarning dangerouslySetInnerHTML={{ __html: ACCORDION_STYLES }} />\n      <div className={cls}>\n        <button\n          type=\"button\"\n          className=\"pacc__header\"\n          aria-expanded={isOpen}\n          aria-controls={`${uid}-panel`}\n          onClick={handleToggle}\n        >\n          <CardTitle title={title} subtitle=\"\" titleSize={titleSize} />\n          <Chevron gradId={`pacc-grad-${uid}`} />\n        </button>\n        <div className=\"pacc__content\" id={`${uid}-panel`} role=\"region\">\n          <div className=\"pacc__content-inner\">\n            <div className=\"pacc__content-pad\">{children}</div>\n          </div>\n        </div>\n      </div>\n    </>\n  );\n}\n"
    },
    {
      "path": "components/CardTitle.tsx",
      "type": "registry:file",
      "target": "components/CardTitle.tsx",
      "content": "\"use client\";\n\n/**\n * CardTitle — Generado por Concorde\n * Fuente: Figma VOYAGER · \"Title\" (nodo 2877:280)\n * Sincronizado: 2026-06-12\n *\n * Título de sección con subtítulo y brackets naranjas en esquina\n * superior-izquierda (┌) e inferior-derecha (┘). Estático.\n */\n\nimport { useId } from \"react\";\nimport type { JSX, ReactNode } from \"react\";\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport interface CardTitleProps {\n  /** Título (default: \"SANTANDER CONSUMER\"). Acepta texto o nodos (p.ej. un dot + texto). */\n  title?: ReactNode;\n  /** Subtítulo (default: \"10 Ofertas\") */\n  subtitle?: string;\n  /** Tamaño del título en px (default 12 · line-height = size + 4) */\n  titleSize?: number;\n  /** Tamaño del subtítulo en px (default 14) */\n  subtitleSize?: number;\n  className?: string;\n}\n\n// ─── Self-contained CSS ───────────────────────────────────────────────────────\n\nconst STYLE_ID = \"concorde-cardtitle-styles\";\n\nconst CARDTITLE_STYLES = `\n.cardtitle {\n  position: relative;\n  box-sizing: border-box;\n  display: inline-flex;\n  flex-direction: column;\n  padding: 8px 12px;\n  font-family: var(--vmc-font-display, \"Plus Jakarta Sans\", -apple-system, sans-serif);\n}\n.cardtitle__title {\n  margin: 0;\n  font-size: 12px;\n  font-weight: 600;\n  line-height: 16px;\n  letter-spacing: 0;\n  color: #3b1782;\n  white-space: nowrap;\n}\n.cardtitle__subtitle {\n  margin: 2px 0 0;\n  font-size: 13px;\n  font-weight: 400;\n  line-height: 1.2;\n  color: #191c1c;\n}\n.cardtitle__bracket {\n  position: absolute;\n  pointer-events: none;\n}\n.cardtitle__bracket--tl { top: 0; left: 0; }\n.cardtitle__bracket--br { bottom: 0; right: 0; transform: rotate(180deg); }\n`;\n\nlet _stylesInjected = false;\n\n// ─── Bracket (┌) — gradiente naranja #FF9639 → #EF852E 40% → #BE3D00 ────────────\n\nfunction Bracket({ uid, corner }: { uid: string; corner: \"tl\" | \"br\" }): JSX.Element {\n  return (\n    <svg\n      className={`cardtitle__bracket cardtitle__bracket--${corner}`}\n      width=\"10\"\n      height=\"10\"\n      viewBox=\"0 0 10 10\"\n      fill=\"none\"\n      aria-hidden=\"true\"\n    >\n      <path\n        d=\"M7 1.022H3.769C1.923 1.022 1 1.943 1 3.784V7.007\"\n        stroke={`url(#${uid}-${corner})`}\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n      <defs>\n        <linearGradient id={`${uid}-${corner}`} x1=\"4\" y1=\"1.022\" x2=\"4\" y2=\"7.007\" gradientUnits=\"userSpaceOnUse\">\n          <stop stopColor=\"#FF9639\" /><stop offset=\"0.4\" stopColor=\"#EF852E\" /><stop offset=\"1\" stopColor=\"#BE3D00\" />\n        </linearGradient>\n      </defs>\n    </svg>\n  );\n}\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\nexport default function CardTitle({\n  title = \"SANTANDER CONSUMER\",\n  subtitle = \"10 Ofertas\",\n  titleSize = 12,\n  subtitleSize = 14,\n  className = \"\",\n}: CardTitleProps): JSX.Element {\n  const uid = useId().replace(/:/g, \"-\");\n\n  if (typeof document !== \"undefined\" && !_stylesInjected) {\n    if (!document.getElementById(STYLE_ID)) {\n      const el = document.createElement(\"style\");\n      el.id = STYLE_ID;\n      el.textContent = CARDTITLE_STYLES;\n      document.head.appendChild(el);\n    }\n    _stylesInjected = true;\n  }\n\n  return (\n    <>\n      <style id={`${STYLE_ID}-ssr`} suppressHydrationWarning dangerouslySetInnerHTML={{ __html: CARDTITLE_STYLES }} />\n      <div className={[\"cardtitle\", className].filter(Boolean).join(\" \")}>\n        <Bracket uid={uid} corner=\"tl\" />\n        <h3 className=\"cardtitle__title\" style={{ fontSize: titleSize, lineHeight: `${titleSize + 4}px` }}>{title}</h3>\n        {subtitle ? <p className=\"cardtitle__subtitle\" style={{ fontSize: subtitleSize }}>{subtitle}</p> : null}\n        <Bracket uid={uid} corner=\"br\" />\n      </div>\n    </>\n  );\n}\n"
    }
  ]
}