{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "auctionstatus",
  "type": "registry:component",
  "title": "AuctionStatus",
  "description": "Componente Concorde AuctionStatus — un solo archivo, AuctionStatus.tsx.",
  "dependencies": [
    "react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/AuctionStatus.tsx",
      "type": "registry:file",
      "target": "components/AuctionStatus.tsx",
      "content": "\"use client\";\n\n/**\n * AuctionStatus — Generado por Concorde\n * Fuente: Figma VOYAGER · \"AuctionStatus\" (nodo 2007:16992 / 2007:18454)\n *\n * Barra de cabecera de subasta: botón volver (‹) + título + subtítulo,\n * sobre gradiente. 2 variantes:\n *   · live       → gradiente naranja (#FF9639 → #EF852E → #BE3D00)\n *   · negotiable → gradiente teal   (#00DAE0 → #008688)\n * Sheen blanco superior (rgba 0.1 → 0). 443×60.\n */\n\nimport type { JSX, MouseEventHandler } from \"react\";\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport type AuctionStatusVariant = \"live\" | \"negotiable\";\n\nexport interface AuctionStatusProps {\n  /** Variante de color (default \"live\") */\n  variant?: AuctionStatusVariant;\n  /** Título (default \"Volkswagen Gol 2015\") */\n  title?: string;\n  /** Subtítulo (default \"Vendedor: SubasCars\") */\n  subtitle?: string;\n  /** Callback del botón volver */\n  onBack?: MouseEventHandler<HTMLButtonElement>;\n  className?: string;\n}\n\n// ─── Self-contained CSS ───────────────────────────────────────────────────────\n\nconst STYLE_ID = \"concorde-auctionstatus-styles\";\n\nconst AUCTIONSTATUS_STYLES = `\n.pauction {\n  position: relative;\n  width: 443px;\n  max-width: 100%;\n  height: 60px;\n  border-radius: 0;\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 0 16px 0 14px;\n  box-sizing: border-box;\n  box-shadow: rgba(0,0,0,0.1) 0px 0px 16px 4px;\n  font-family: var(--vmc-font-display, \"Plus Jakarta Sans\", -apple-system, sans-serif);\n}\n.pauction--live { background: linear-gradient(156deg, #FF9639 0%, #EF852E 50%, #BE3D00 100%); }\n.pauction--negotiable { background: linear-gradient(90deg, #00DAE0 0%, #008688 100%); }\n.pauction::before {\n  content: \"\";\n  position: absolute;\n  top: 0; left: 0; right: 0;\n  height: 18px;\n  background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);\n  pointer-events: none;\n}\n.pauction__back {\n  appearance: none;\n  border: none;\n  background: transparent;\n  width: 32px;\n  height: 32px;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border-radius: 50%;\n  position: relative;\n  z-index: 1;\n  color: #ffffff;\n  -webkit-backdrop-filter: blur(2px);\n  backdrop-filter: blur(2px);\n  transition: background 0.18s, color 0.18s, transform 0.12s;\n}\n/* hover: círculo relleno (tono claro), chevron blanco */\n.pauction--live .pauction__back:hover { background: #F99845; }\n.pauction--negotiable .pauction__back:hover { background: #2BC4C7; }\n/* pressed: círculo tono base, chevron gris #99A1AF */\n.pauction--live .pauction__back:active { background: #ED8936; }\n.pauction--negotiable .pauction__back:active { background: #00A8AB; }\n.pauction__back:active { color: #99A1AF; transform: scale(0.96); }\n.pauction__back:focus-visible { outline: 2px solid rgba(255,255,255,0.9); outline-offset: 2px; }\n.pauction__back svg path { stroke: currentColor; }\n.pauction__back svg { filter: drop-shadow(0 1px 1.5px rgba(0,0,0,0.25)); }\n.pauction__text { position: relative; z-index: 1; min-width: 0; }\n.pauction__title {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  line-height: 1.2;\n  color: #ffffff;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  text-shadow: 0 1px 1.5px rgba(0,0,0,0.25);\n}\n.pauction__subtitle {\n  margin: 2px 0 0;\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 1.2;\n  color: rgba(255,255,255,0.92);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  text-shadow: 0 1px 2px rgba(120,40,0,0.25);\n}\n@media (prefers-reduced-motion: reduce) {\n  .pauction__back { transition: none; }\n}\n`;\n\nlet _stylesInjected = false;\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\nexport default function AuctionStatus({\n  variant = \"live\",\n  title = \"Volkswagen Gol 2015\",\n  subtitle = \"Vendedor: SubasCars\",\n  onBack,\n  className = \"\",\n}: AuctionStatusProps): JSX.Element {\n  if (typeof document !== \"undefined\" && !_stylesInjected) {\n    if (!document.getElementById(STYLE_ID)) {\n      const el = document.createElement(\"style\");\n      el.id = STYLE_ID;\n      el.textContent = AUCTIONSTATUS_STYLES;\n      document.head.appendChild(el);\n    }\n    _stylesInjected = true;\n  }\n\n  return (\n    <>\n      <style id={`${STYLE_ID}-ssr`} suppressHydrationWarning dangerouslySetInnerHTML={{ __html: AUCTIONSTATUS_STYLES }} />\n      <div className={[\"pauction\", `pauction--${variant}`, className].filter(Boolean).join(\" \")}>\n        <button type=\"button\" className=\"pauction__back\" onClick={onBack} aria-label=\"Volver\">\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n            <path d=\"M15 6L9 12L15 18\" stroke=\"currentColor\" strokeWidth=\"3\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n          </svg>\n        </button>\n        <div className=\"pauction__text\">\n          <h3 className=\"pauction__title\">{title}</h3>\n          <p className=\"pauction__subtitle\">{subtitle}</p>\n        </div>\n      </div>\n    </>\n  );\n}\n"
    }
  ]
}