\n
\n \n
\n \n \n
\n \n ) : null}\n\n {/* (b) Llegada (welcome / extended) — pantallas nativas desktop */}\n {isArrival ? (\n <>\n \n {phase === \"welcome\" ? (\n <>\n
\n ¡Bienvenido al proceso en vivo!
\n \n \n \n \n
\n \n Recibiendo\n
\n Participantes\n
\n \n ) : (\n <>\n \n Participantes\n
Recibiendo participantes
\n \n \n \n \n
\n Inicio extendido
\n \n )}\n \n INICIA EN:\n
\n \n {phase === \"extended\" ?
\n \n
\n \n \n
\n \n ) : null}\n\n {/* (c) Streaming — NATIVO desktop: mismo layout que idle (lista hasta 108,\n barra en 80, botón en 16). El bid actual (glass) arriba al centro. */}\n {isStreaming ? (\n <>\n \n
\n ))}\n \n\n {/* Bid actual (glass) — arriba al centro, ENCIMA de los mensajes */}\n \n
\n\n {/* Loading bar (rainbow) — ancho real del panel para que el % sea correcto */}\n \n
\n\n {/* Botón — se presiona con mi puja */}\n \n {label}\n
\n );\n}\n\nfunction Divider(): JSX.Element {\n return ;\n}\n\nexport default function ConsoleHeader({\n userLabel = \"Mi C.U.U.\",\n user = \"ZAEX5G\",\n conectados = \"18\",\n oferta = \"47292\",\n fondos = \"$100\",\n conectividad = 4,\n className = \"\",\n}: ConsoleHeaderProps): JSX.Element {\n return (\n {children}
\n \n
\n\n {/* Derecha: 4 columnas con divisores */}\n \n {userLabel}\n {user}\n
\n \n \n \n \n \n \n \n {fondos}\n \n \n \n
\n \n );\n}\n"
},
{
"path": "bloques/sala/desktop/dimensions.ts",
"type": "registry:file",
"target": "bloques/sala/desktop/dimensions.ts",
"content": "/**\n * Dimensiones del bloque Sala (desktop) — módulo plano sin \"use client\".\n */\n\nexport const SALA_WIDTH = 1023;\nexport const SALA_HEIGHT = 1042;\n"
},
{
"path": "bloques/sala/desktop/PriceBase.tsx",
"type": "registry:file",
"target": "bloques/sala/desktop/PriceBase.tsx",
"content": "/**\n * PriceBase — Sección del bloque Sala (Voyager DS)\n * Fuente: Figma VOYAGER · \"Background+Shadow\" (card 272×106)\n *\n * Card \"PRECIO BASE / US$ 5,000\": fondo morado degradado, borde superior sutil\n * y sombra. Reusa el componente PriceIcon (la gema). Editable por props.\n */\n\nimport type { JSX } from \"react\";\nimport PriceIcon from \"../../../components/PriceIcon\";\n\nexport interface PriceBaseProps {\n /** Etiqueta superior (default \"PRECIO BASE\") */\n label?: string;\n /** Monto (default \"US$ 5,000\") */\n amount?: string;\n className?: string;\n}\n\nexport const PRICEBASE_WIDTH = 272;\nexport const PRICEBASE_HEIGHT = 106;\n\n// Dark glass (paint0 + \"behind transparent areas\" #0A002E): base navy + sheen\n// blanco (white 28%→4%) + borde gradiente (white .9 → #F4AC59 .7 → #8460E5 .7 → white .9)\nconst GLASS_SHEEN = \"linear-gradient(127deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.07) 45%, rgba(255,255,255,0.03) 100%)\";\nconst GLASS_BASE = \"linear-gradient(160deg, rgba(28,13,82,0.93) 0%, rgba(14,3,56,0.95) 100%)\";\nconst GLASS_BORDER = \"linear-gradient(125deg, rgba(255,255,255,0.9) 0%, rgba(244,172,89,0.7) 22%, rgba(132,96,229,0.7) 74.5%, rgba(255,255,255,0.9) 100%)\";\n\nexport default function PriceBase({\n label = \"PRECIO BASE\",\n amount = \"US$ 5,000\",\n className = \"\",\n}: PriceBaseProps): JSX.Element {\n return (\n \n \n {amount}\n \n
\n \n );\n}\n"
},
{
"path": "bloques/sala/desktop/SalaDesktop.tsx",
"type": "registry:file",
"target": "bloques/sala/desktop/SalaDesktop.tsx",
"content": "/**\n * Sala — Bloque de Concorde (Voyager DS)\n *\n * Sala de subasta. En modo live anima la llegada: \"Conectados\" (participantes)\n * sube mientras \"Mis bids\" / \"Bids totales\" quedan en 0.\n */\n\n\"use client\";\n\nimport type { JSX } from \"react\";\nimport ConsoleHeader from \"./ConsoleHeader\";\nimport PriceBase from \"./PriceBase\";\nimport StatPill from \"../../../components/StatPill\";\nimport BidChat from \"./BidChat\";\nimport SalaStatus from \"../../../components/SalaStatus\";\nimport CardViewer from \"../../../components/CardViewer\";\nimport BidPosition, { type BidPositionItem } from \"../../../components/BidPosition\";\nimport { useLiveAuction, fmtElapsed } from \"../useSala\";\nimport { STREAM } from \"../liveData\";\n\n// Posiciones en vivo: SIEMPRE 5 filas. Cuenta las pujas reveladas por usuario y\n// ordena desc; los puestos sin postor salen con \"···\". Máximo 5 (un 6to no se ve).\nconst MAX_ROWS = 5;\n\nfunction placeholderRow(i: number): BidPositionItem {\n return { id: `dots-${i}`, name: \"···\", value: \"···\", rank: `${i + 1}°` };\n}\n\nfunction livePositions(shown: number): BidPositionItem[] {\n const revealed = STREAM.slice(0, shown).filter((m) => m.kind === \"proposal\");\n const counts = new Map\n
\n\n {/* Banner 204×930 · abajo-izquierda: 16px del left, 16px del bottom, 16px del header */}\n \n 204 × 930\n \n\n {/* Columna derecha (443 ancho) · SalaStatus+visor (borde gradiente) ·\n filmstrip · y debajo la fila PRECIO BASE + pills */}\n
\n \n
\n \n\n {/* Banner inferior 443×237 · debajo de la fila PRECIO BASE + pills */}\n \n 443 × 237\n \n \n\n {/* Columna derecha (316) · BidChat y, debajo, BidPosition */}\n
\n
\n \n );\n}\n"
},
{
"path": "bloques/sala/liveData.ts",
"type": "registry:file",
"target": "bloques/sala/liveData.ts",
"content": "/**\n * liveData — Modelo de la animación \"Ver live\" del bloque Sala · Mobile.\n *\n * Secuencia de pujas (montos coherentes que suben, quién puja), tiempos de cada\n * mensaje y lista estática (idle). Compartido por SalaMobile (motor) y\n * MobileChatPanel (render).\n */\n\nexport type Phase = \"idle\" | \"welcome\" | \"extended\" | \"streaming\" | \"processing\" | \"result\" | \"activity\" | \"reserve\" | \"improve\" | \"bestbid\";\n\nexport interface LiveMsg {\n kind: \"proposal\" | \"closes\" | \"vmc\";\n side: \"sent\" | \"received\";\n type: \"white\" | \"live\" | \"vault\";\n amount?: number; // proposal / closes\n bidder?: string; // proposal\n text?: string; // vmc\n slow?: boolean; // vmc → 2s\n mine?: boolean; // proposal sent (mi puja)\n}\n\nexport const ME = \"KAHTH4\"; // mis pujas (los \"live\" / sent)\nconst OTHERS = [\"ZAE389\", \"RAZER21\", \"MEND99\", \"LUC88\", \"VKR55\", \"TORO_7\"];\nexport const BASE = 5000;\nexport const STEP = 79;\n\nexport function fmtMoney(n: number): string {\n return \"US$ \" + String(n).replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\");\n}\n\n/** Formatea un número a 2 dígitos (para el contador \"INICIA EN\"). */\nexport function pad(n: number): string {\n return String(Math.max(0, n)).padStart(2, \"0\");\n}\n\ninterface RawSpec {\n kind: \"proposal\" | \"closes\" | \"vmc\";\n side: \"sent\" | \"received\";\n text?: string;\n slow?: boolean;\n}\n\nfunction build(raw: RawSpec[], startBid: number): LiveMsg[] {\n let bid = startBid;\n let oi = 0;\n return raw.map(function resolve(r): LiveMsg {\n if (r.kind === \"proposal\") {\n bid += STEP;\n const mine = r.side === \"sent\";\n const bidder = mine ? ME : OTHERS[oi++ % OTHERS.length];\n return { kind: \"proposal\", side: r.side, type: mine ? \"live\" : \"white\", amount: bid, bidder, mine };\n }\n if (r.kind === \"closes\") {\n return { kind: \"closes\", side: \"received\", type: \"vault\", amount: bid };\n }\n return { kind: \"vmc\", side: \"received\", type: \"vault\", text: r.text, slow: r.slow };\n });\n}\n\n// Secuencia live: pujas intercaladas con \"Cierra en\"; al final \"Cierra en\" sobre\n// la última puja y el remate \"A la una / dos / tres\".\nconst RAW: RawSpec[] = [\n { kind: \"proposal\", side: \"received\" },\n { kind: \"closes\", side: \"received\" },\n { kind: \"proposal\", side: \"sent\" },\n { kind: \"closes\", side: \"received\" },\n { kind: \"proposal\", side: \"received\" },\n { kind: \"proposal\", side: \"sent\" },\n { kind: \"closes\", side: \"received\" },\n { kind: \"proposal\", side: \"received\" },\n { kind: \"proposal\", side: \"sent\" },\n { kind: \"closes\", side: \"received\" },\n { kind: \"proposal\", side: \"received\" },\n { kind: \"proposal\", side: \"sent\" },\n { kind: \"closes\", side: \"received\" },\n { kind: \"proposal\", side: \"received\" },\n { kind: \"proposal\", side: \"sent\" },\n { kind: \"closes\", side: \"received\" },\n { kind: \"proposal\", side: \"received\" },\n { kind: \"proposal\", side: \"sent\" }, // ← mi puja gana: última puja antes del remate (naranja)\n { kind: \"closes\", side: \"received\" }, // cierra sobre mi puja antes del remate\n { kind: \"vmc\", side: \"received\", text: \"A la una\", slow: true },\n { kind: \"vmc\", side: \"received\", text: \"A las dos\", slow: true },\n { kind: \"vmc\", side: \"received\", text: \"A las tres\", slow: true },\n];\n\nexport const STREAM: LiveMsg[] = build(RAW, BASE);\n\n// Lista estática (idle) — coherente\nconst STATIC_RAW: RawSpec[] = [\n { kind: \"proposal\", side: \"received\" },\n { kind: \"closes\", side: \"received\" },\n { kind: \"vmc\", side: \"received\", text: \"A la una\" },\n { kind: \"proposal\", side: \"sent\" },\n { kind: \"closes\", side: \"received\" },\n { kind: \"vmc\", side: \"received\", text: \"A la una\" },\n { kind: \"proposal\", side: \"received\" },\n { kind: \"proposal\", side: \"sent\" },\n { kind: \"closes\", side: \"received\" },\n { kind: \"vmc\", side: \"received\", text: \"A la una\" },\n { kind: \"proposal\", side: \"received\" },\n { kind: \"closes\", side: \"received\" },\n { kind: \"vmc\", side: \"received\", text: \"A la una\" },\n];\nexport const STATIC: LiveMsg[] = build(STATIC_RAW, BASE);\n\n// ── Tiempos ──\nexport const REG_DELAY = 650; // ritmo moderado\nexport const VMC_DELAY = 2000; // \"a la una/dos/tres\" → 2s c/u\nexport function delayOf(m: LiveMsg): number {\n return m.slow ? VMC_DELAY : REG_DELAY;\n}\n\nlet cum = 0;\nexport const REVEAL_AT: number[] = STREAM.map(function reveal(m) {\n cum += delayOf(m);\n return cum;\n});\nexport const TOTAL_STREAM = cum;\nconst firstVmc = STREAM.findIndex((m) => m.slow);\nexport const VMC_START = REVEAL_AT[firstVmc]; // cuando aparece \"a la una\"\nexport const VMC_FILL = TOTAL_STREAM - VMC_START; // dura el remate (3·2s)\n\nexport const WELCOME_MS = 3000;\nexport const EXTENDED_MS = 3000;\nexport const RESTART_PAUSE = 1400;\nexport const START_COUNT = 3; // cada fase (recibiendo / extendido) dura 3s\nexport const PARTICIPANTS_TARGET = 18;\n\n// ── Final: \"Procesando\" → \"Tabla de posiciones\" → \"Actividad\" (gano yo) ──\nexport const PROCESSING_MS = 2200; // \"Un momento por favor\" antes de la tabla\nexport const RESULT_MS = 5000; // la tabla de posiciones se ve 5s, luego \"Actividad\"\n\n// ── Con precio reserva: sub-flujo \"Mejor postor\" → (Ingresa monto → Confirmar) → 48 horas ──\nexport const RESERVE_MS = 5000; // reservado (transiciones internas)\nexport const IMPROVE_PLACEHOLDER = 19159; // monto sugerido (placeholder del input)\nexport const BESTBID_SECONDS = 23; // countdown de \"¿Deseas mejorarlo?\" — al llegar a 0 → 48 horas\n\n// Monto ganador = último proposal del stream (es MÍO). Las siguientes posiciones\n// bajan un paso por fila.\nconst WINNING_BID = (function last(): number {\n const props = STREAM.filter((m) => m.kind === \"proposal\");\n return props.length ? (props[props.length - 1].amount ?? BASE) : BASE;\n})();\n\nexport interface Standing {\n rank: number;\n user: string;\n amount: number;\n mine: boolean;\n note: string; // texto de la 3ª columna (ej. \"En consulta\")\n}\n\n// Podio: 1° YO (ganador, borde live + estrella llena + \"En consulta\");\n// 2° otro postor (borde normal, rango vault, estrella media, tiempo).\nexport const STANDINGS: Standing[] = [\n { rank: 1, user: ME, amount: WINNING_BID, mine: true, note: \"En consulta\" },\n { rank: 2, user: \"ZAE389\", amount: WINNING_BID - STEP, mine: false, note: \"02:27:12\" },\n];\n"
},
{
"path": "bloques/sala/mobile/dimensions.ts",
"type": "registry:file",
"target": "bloques/sala/mobile/dimensions.ts",
"content": "/**\n * Dimensiones del bloque SalaMobile — módulo plano sin \"use client\".\n */\n\nexport const SALAMOBILE_WIDTH = 420;\nexport const SALAMOBILE_HEIGHT = 844;\nexport const SALAMOBILE_BG = \"linear-gradient(116deg, #5F3ED8 0%, #340091 50%, #140046 100%)\";\n"
},
{
"path": "bloques/sala/mobile/MobileChatPanel.tsx",
"type": "registry:file",
"target": "bloques/sala/mobile/MobileChatPanel.tsx",
"content": "/**\n * MobileChatPanel — Sección del bloque Sala · Mobile (Voyager DS)\n * Fuente: Figma VOYAGER · Frame 1000023075 (panel glass del chat mobile)\n *\n * Presentacional: el motor de la animación vive en SalaMobile y le pasa el\n * estado por props. Renderiza:\n * · idle → lista estática de BidMessage + BidProposal + ProgressBar.\n * · welcome → \"Recibiendo participantes\" + dots + caja \"Inicia en\" (reloj).\n * · extended → + \"Inicio extendido\" + caja \"Inicia en\" (símbolo +).\n * · streaming → BidMessage entrando con fade+slide horizontal (received←izq,\n * sent←der) y subiendo; BidProposal con el bid actual.\n */\n\n\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport type { ChangeEvent, JSX } from \"react\";\nimport ProgressBar, { type ProgressBarVariant } from \"../../../components/ProgressBar\";\nimport BidProposal from \"../../../components/BidProposal\";\nimport BidMessage from \"../../../components/BidMessage\";\nimport { STREAM, STATIC, STANDINGS, fmtMoney, IMPROVE_PLACEHOLDER, BESTBID_SECONDS, type LiveMsg, type Phase } from \"../liveData\";\n\nexport const MOBILECHATPANEL_WIDTH = 420;\n\nconst VMC_LOGO = ![\"VMC](\"/logo-preview.png\"){kind=logo}
;\n\nfunction Bubble({ m }: { m: LiveMsg }): JSX.Element {\n if (m.kind === \"vmc\") {\n return (\n (\"…necesarias para que tu propuesta sea aceptada por el…\") no se re-partan. */\n.smchatpanel--narrow .smchat__reserve-note { font-size: 10px; width: 300px; max-width: 100%; }\n/* ── Pantalla \"Ingresa un monto superior\" (improve) ── */\n.smchat__improve {\n display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%;\n padding: 0 20px; box-sizing: border-box;\n}\n/* Título — VYheading-xl (20/28, ExtraBold) gradiente lila VYStrokes3 + glow morado */\n.smchat__improve-title {\n font-size: 20px; font-weight: 800; line-height: 28px; text-align: center;\n background: linear-gradient(135deg, #CFBAFF 0%, #ffffff 35%, #AE8EFF 65%, #CFBAFF 100%);\n -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;\n filter: drop-shadow(0 0 53.31px rgba(49,0,138,0.4)) drop-shadow(0 0 31.98px rgba(82,52,188,0.5));\n}\n/* Input glass 278×72 — glass white 8% + borde gradiente VYStrokes1 (white→#F4AC59→\n #8460E5→white) radio 20, background blur, drop-shadow #140045 30%. */\n.smchat__improve-input {\n position: relative; box-sizing: border-box;\n width: 278px; max-width: 100%; height: 72px; border-radius: 20px;\n background: rgba(255,255,255,0.08);\n -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);\n box-shadow: rgba(20,0,69,0.3) 0 8px 24px -2px;\n display: flex; align-items: center; justify-content: flex-start; gap: 32px;\n padding: 0 22px 0 30px;\n}\n.smchat__improve-input::before {\n content: \"\"; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;\n background: linear-gradient(135deg, #ffffff 0%, #F4AC59 22%, #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; mask-composite: exclude; pointer-events: none;\n}\n/* Prefijo \"US$\" — pegado a la izquierda, blanco sólido, ExtraBold */\n.smchat__improve-cur {\n font-size: 36px; font-weight: 800; color: #ffffff; letter-spacing: 0.01em;\n flex-shrink: 0;\n}\n/* Campo editable — ocupa el resto a la derecha del \"US$\" (como en Figma).\n Transparente, ExtraBold. */\n.smchat__improve-field {\n min-width: 0; flex: 1; border: none; outline: none; background: transparent;\n font-family: inherit; font-size: 36px; font-weight: 800; letter-spacing: 0.01em;\n color: #ffffff; font-variant-numeric: tabular-nums; text-align: left;\n}\n.smchat__improve-field::placeholder { color: rgba(255,255,255,0.4); font-weight: 800; }\n/* Panel angosto (desktop 313px): el contenedor pierde padding lateral y el input\n ocupa TODO el ancho disponible; el contenido se reduce para no cortarse. */\n.smchatpanel--narrow .smchat__improve,\n.smchatpanel--narrow .smchat__best { padding: 0 8px; }\n.smchatpanel--narrow .smchat__improve-input { width: 100%; max-width: 100%; gap: 16px; padding: 0 16px 0 18px; }\n.smchatpanel--narrow .smchat__improve-cur,\n.smchatpanel--narrow .smchat__improve-field { font-size: 28px; }\n/* Botones — el primary reusa .pvbtn (width 200). \"Volver\" texto subrayado que\n pasa a primary. */\n.smchat__improve-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; }\n.smchat__improve-actions .pvbtn { width: 200px; padding: 0; }\n/* \"Volver\" — texto subrayado (se vuelve primary con .pvbtn width auto) */\n.smchat__improve-back {\n width: 50px; height: 28px; padding: 0; border: none; background: transparent;\n cursor: pointer; font-family: inherit; font-size: 16px; font-weight: 600;\n color: #ffffff; text-decoration: underline; text-underline-offset: 3px;\n}\n/* Texto explicativo — arriba de la barra, igual que .smchat__reserve-note.\n En MOBILE (ancho) los son renglones fijos (nowrap) = saltos del Figma.\n En DESKTOP (angosto) el texto FLUYE (los se vuelven inline) y parte solo. */\n.smchat__improve-note {\n position: absolute; left: 50%; bottom: 102px; z-index: 5;\n transform: translateX(-50%);\n box-sizing: border-box; width: 348px; max-width: 96%; padding-bottom: 12px;\n text-align: center; font-size: 11.5px; font-weight: 400; line-height: 1.5;\n color: rgba(255,255,255,0.9);\n}\n/* Mobile: cada renglón entero (los saltos del Figma). */\n.smchat__improve-note span { display: block; white-space: nowrap; }\n/* Desktop (panel angosto ~276px): el texto fluye libre en varias líneas. Los\n pasan a inline (con espacio) y el contenedor angosto define el wrap. */\n.smchatpanel--narrow .smchat__improve-note { font-size: 10px; width: 276px; max-width: 100%; }\n.smchatpanel--narrow .smchat__improve-note span { display: inline; white-space: normal; }\n.smchatpanel--narrow .smchat__improve-note span::after { content: \" \"; }\n\n/* ── Pantalla \"Mejor postor / ¿Deseas mejorarlo?\" (bestbid) ── */\n.smchat__best {\n display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%;\n padding: 0 20px; box-sizing: border-box;\n}\n/* Texto superior (3 líneas) — blanco 18/700; el user en línea 1 */\n.smchat__best-top {\n font-size: 18px; font-weight: 700; line-height: 1.35; text-align: center; color: #ffffff;\n}\n/* SOLO \"Mejor postor de la Oferta\" con degradado lila VYStrokes3 + glow */\n.smchat__best-hl {\n display: inline-block; white-space: nowrap;\n font-size: 20px; font-weight: 800; line-height: 1.4;\n background: linear-gradient(135deg, #CFBAFF 0%, #ffffff 35%, #AE8EFF 65%, #CFBAFF 100%);\n -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;\n filter: drop-shadow(0 0 10px rgba(132,96,229,0.55));\n}\n/* Desktop (panel angosto): reduce el texto superior para que las 3 líneas quepan\n (en especial \"Mejor postor de la Oferta\" en una sola línea). */\n.smchatpanel--narrow .smchat__best-top { font-size: 16px; }\n.smchatpanel--narrow .smchat__best-hl { font-size: 17px; }\n/* Display del monto — mismo glass que el input pero no editable, centrado */\n.smchat__best-amount { justify-content: center; gap: 20px; padding: 0 24px; }\n.smchatpanel--narrow .smchat__best-amount { gap: 14px; padding: 0 16px; }\n.smchat__best-value { flex: 0 0 auto; }\n/* Texto medio (2 líneas) — blanco tenue */\n.smchat__best-sub {\n font-size: 13px; font-weight: 400; line-height: 1.35; text-align: center;\n color: rgba(255,255,255,0.85);\n}\n/* Desktop: cada renglón del texto medio entero (los saltos del Figma) */\n.smchatpanel--narrow .smchat__best-sub { font-size: 12px; white-space: nowrap; }\n/* \"¿Deseas mejorarlo?\" — degradado lila + glow */\n.smchat__best-ask {\n font-size: 18px; font-weight: 800; line-height: 1.2;\n background: linear-gradient(135deg, #CFBAFF 0%, #ffffff 35%, #AE8EFF 65%, #CFBAFF 100%);\n -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;\n filter: drop-shadow(0 0 10px rgba(132,96,229,0.55));\n}\n/* Timer sobre la barra — texto + contador naranja */\n.smchat__best-timer {\n position: absolute; left: 50%; bottom: 100px; z-index: 5;\n transform: translateX(-50%);\n display: flex; align-items: center; gap: 8px; white-space: nowrap;\n font-size: 12px; font-weight: 400; color: rgba(255,255,255,0.9);\n}\n.smchat__best-count {\n font-size: 16px; font-weight: 800; color: #ED8936; font-variant-numeric: tabular-nums;\n text-shadow: 0 0 8px rgba(237,137,54,0.5);\n}\n.smchatpanel--narrow .smchat__best-timer { font-size: 10px; gap: 6px; }\n.smchatpanel--narrow .smchat__best-count { font-size: 13px; }\n\n/* ── Pantalla \"Confirmar monto\" (sub-vista de improve) ── */\n.smchat__confirm {\n display: flex; flex-direction: column; align-items: center; gap: 26px; width: 100%;\n padding: 0 20px; box-sizing: border-box;\n}\n/* Pregunta — 2 líneas, blanco 18/700. El user en bold (ya blanco). */\n.smchat__confirm-ask {\n font-size: 18px; font-weight: 700; line-height: 1.4; text-align: center; color: #ffffff;\n}\n.smchat__confirm-ask b { font-weight: 800; }\n/* SOLO \"el monto a US$XX?\" con degradado lila VYStrokes3 + glow morado */\n.smchat__confirm-amount {\n background: linear-gradient(135deg, #CFBAFF 0%, #ffffff 35%, #AE8EFF 65%, #CFBAFF 100%);\n -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;\n filter: drop-shadow(0 0 10px rgba(132,96,229,0.55));\n}\n.smchat__confirm-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; }\n\n/* Botón glass \"Confirmar monto\" 196×48 — glass burbuja + borde gradiente VYStrokes1\n + inner shadow blanco (0 1 6 #fff 45%). Animación \"gambler\" en hover/press. */\n.smchat__confirm-btn {\n position: relative; box-sizing: border-box;\n min-width: 196px; max-width: 100%; height: 48px; padding: 0 28px; border: none; border-radius: 9999px;\n cursor: pointer; overflow: hidden; isolation: isolate; white-space: nowrap;\n font-family: inherit; font-size: 16px; font-weight: 700; color: #ffffff;\n /* Glass burbuja: highlight superior + base translúcida */\n background:\n radial-gradient(120% 80% at 30% -10%, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 55%),\n linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.06) 45%, rgba(255,255,255,0.03) 100%);\n -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);\n /* Inner shadow blanco (Figma 0 1 6 #fff 45%) + leve sombra externa */\n box-shadow: inset 0 1px 6px rgba(255,255,255,0.45), 0 4px 14px -4px rgba(20,0,69,0.5);\n transition: transform 0.18s cubic-bezier(0.25,0.8,0.25,1), box-shadow 0.25s;\n}\n/* Borde gradiente VYStrokes1 (white→#F4AC59→#8460E5→white) 1.5px */\n.smchat__confirm-btn::before {\n content: \"\"; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;\n background: linear-gradient(135deg, #ffffff 0%, #F4AC59 22%, #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; mask-composite: exclude; pointer-events: none; z-index: 2;\n}\n/* Shimmer diagonal \"gambler\" — banda de luz que recorre el botón. En default está\n FUERA a la izquierda (translateX -220%); solo entra en hover. */\n.smchat__confirm-btn::after {\n content: \"\"; position: absolute; top: 0; bottom: 0; left: 0;\n width: 55%; z-index: 1; pointer-events: none;\n background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);\n transform: translateX(-220%) skewX(-18deg);\n}\n.smchat__confirm-btn-label { position: relative; z-index: 3; text-shadow: 0 1px 3px rgba(0,0,0,0.28); }\n/* Panel angosto (desktop): fuente/padding menores para que el texto largo\n (\"Sí, quiero mejorar el monto\") entre en UNA línea. */\n.smchatpanel--narrow .smchat__confirm-btn { font-size: 14px; padding: 0 18px; min-width: 0; }\n/* Hover: la banda recorre + glow morado pulsante + leve levantada */\n.smchat__confirm-btn:hover {\n transform: translateY(-2px) scale(1.02);\n box-shadow:\n inset 0 1px 6px rgba(255,255,255,0.55),\n 0 0 18px rgba(174,142,255,0.55),\n 0 8px 22px -6px rgba(132,96,229,0.6);\n animation: gambler-glow 1.1s ease-in-out infinite;\n}\n.smchat__confirm-btn:hover::after { animation: gambler-sweep 1.1s ease-in-out infinite; }\n/* Press: \"punch\" — se hunde y destella */\n.smchat__confirm-btn:active {\n transform: scale(0.95) translateY(1px);\n box-shadow: inset 0 2px 8px rgba(0,0,0,0.25), inset 0 0 12px rgba(255,255,255,0.5);\n animation: none;\n}\n.smchat__confirm-btn:active::after {\n left: 0; width: 100%; transform: translateX(0) skewX(0deg);\n background: radial-gradient(60% 100% at 50% 50%, rgba(255,255,255,0.7) 0%, transparent 70%);\n animation: none;\n}\n.smchat__confirm-btn:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px #ffffff, 0 0 0 5px rgba(132,96,229,0.9);\n}\n/* Disabled — glass apagado (gris), sin burbuja ni gambler (Button primary disabled) */\n.smchat__confirm-btn:disabled {\n cursor: not-allowed;\n background: var(--vmc-color-background-disabled, #e1e3e2);\n color: var(--vmc-color-neutral-700, #99a1af);\n box-shadow: none;\n -webkit-backdrop-filter: none; backdrop-filter: none;\n transform: none; animation: none;\n}\n.smchat__confirm-btn:disabled::before { background: transparent; }\n.smchat__confirm-btn:disabled::after { display: none; }\n.smchat__confirm-btn:disabled .smchat__confirm-btn-label { text-shadow: none; }\n@keyframes gambler-sweep {\n 0% { transform: translateX(-220%) skewX(-18deg); }\n 60%, 100% { transform: translateX(400%) skewX(-18deg); }\n}\n@keyframes gambler-glow {\n 0%, 100% { box-shadow: inset 0 1px 6px rgba(255,255,255,0.55), 0 0 14px rgba(174,142,255,0.4), 0 8px 22px -6px rgba(132,96,229,0.55); }\n 50% { box-shadow: inset 0 1px 6px rgba(255,255,255,0.6), 0 0 26px rgba(207,186,255,0.75), 0 10px 26px -6px rgba(132,96,229,0.7); }\n}\n@media (prefers-reduced-motion: reduce) {\n .smchat__confirm-btn:hover, .smchat__confirm-btn:hover::after { animation: none; }\n}\n\n/* Pill \"Con Precio Reserva\" (VYSecondaryHover) dentro del panel (desktop) —\n pegado arriba, centrado, esquinas inferiores 16px. Gradiente #AE8EFF→#5A35C2 +\n sombra card (0 0 16 spread 4, #000 10%). Sin glow morado. */\n.smchat__reserve-pill {\n position: absolute; top: 0; left: 50%; z-index: 6;\n transform: translateX(-50%);\n box-sizing: border-box; height: 33px; padding: 0 22px;\n border-radius: 0 0 16px 16px;\n display: flex; align-items: center; justify-content: center; white-space: nowrap;\n font-size: 15px; font-weight: 600; color: #ffffff;\n background: linear-gradient(155deg, #5A35C2 0%, #AE8EFF 100%);\n}\n\n@media (prefers-reduced-motion: reduce) {\n .smchat__msg--received, .smchat__msg--sent, .smchat__rdots span { animation: none; }\n}\n`;\n\nlet _stylesInjected = false;\n\nfunction pad(n: number): string {\n return String(Math.max(0, n)).padStart(2, \"0\");\n}\n\nexport interface MobileChatPanelProps {\n height?: number;\n /** Ancho del panel. Default 420 (mobile). En desktop es menor: recorta a los\n lados sin achicar el contenido (centrado + overflow:hidden). */\n width?: number;\n className?: string;\n /** Estado de la animación (controlado por SalaMobile) */\n live?: boolean;\n phase?: Phase;\n shown?: number;\n progress?: number;\n progressVariant?: ProgressBarVariant;\n count?: number;\n /** Bid actual (para BidProposal) */\n bidAmount?: number;\n bidder?: string;\n /** Contador que dispara la animación de nuevo bid en BidProposal */\n flash?: number;\n /** Colores del efecto de luz (editable) */\n flashColors?: string[];\n /** Tipo de efecto de luz: \"bulb\" o \"spin\" */\n flashMode?: \"bulb\" | \"spin\" | \"explode\" | \"pulse\" | \"combo\" | \"shine\";\n /** Muestra el pill \"Con Precio Reserva\" pegado arriba del panel (solo desktop:\n en mobile el pill lo pone MobileHeader). Se ve en la fase \"reserve\". */\n reservePill?: boolean;\n}\n\nexport default function MobileChatPanel({\n height = 670,\n width = MOBILECHATPANEL_WIDTH,\n className = \"\",\n live = false,\n phase = \"idle\",\n shown = 0,\n progress = 40,\n progressVariant = \"rainbow\",\n count = 3,\n bidAmount = 6559,\n bidder = \"ZAE389\",\n flash = 0,\n flashColors,\n flashMode = \"bulb\",\n reservePill = false,\n}: MobileChatPanelProps): 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 = SMCHATPANEL_STYLES;\n document.head.appendChild(el);\n }\n _stylesInjected = true;\n }\n\n // Sub-flujo con precio reserva. La fase del motor entra en \"bestbid\"; a partir de\n // ahí el panel navega localmente entre estos pasos (interacciones del usuario):\n // bestbid → \"Mejor postor / ¿Deseas mejorarlo?\" (+ countdown 23s)\n // improve → \"Ingresa un monto superior\" (input)\n // confirm → \"¿estás seguro de mejorar el monto a US$XX?\"\n // reserve → \"Revisa tu historial / 48 horas\" (fin)\n type Step = \"bestbid\" | \"improve\" | \"confirm\" | \"reserve\";\n const [step, setStep] = useState
\n {/* idle: lista estática */}\n {showStatic ? (\n \n {STATIC.map((m, i) => (\n \n
\n ) : null}\n\n {/* streaming: mensajes entrando (slide horizontal + suben) */}\n {showStream ? (\n \n {STREAM.slice(0, shown).map((m, i) => (\n
\n ) : null}\n\n {/* status: recibiendo participantes / inicio extendido */}\n {showStatus ? (\n \n
\n ))}\n \n
\n ) : null}\n\n {/* Procesando · Un momento por favor — mismo look que \"Recibiendo\n participantes\" (título glow + dots), sin la caja \"Inicia en\" */}\n {showProcessing ? (\n \n Recibiendo\n
\n participantes\n
\n \n participantes\n
\n \n \n \n
\n {phase === \"extended\" ? Inicio extendido
: null}\n \n Inicia en:\n
\n \n {phase === \"extended\" ?
\n \n
\n ) : null}\n\n {/* Tabla de posiciones — título + filas del podio (1° ganador, 2° …) */}\n {showResult ? (\n \n
\n Procesando
\n Un momento por favor
\n \n \n \n \n
\n \n
\n ) : null}\n\n {/* Actividad — SIN título: \"con una propuesta de\" + BidProposal ganador */}\n {showActivity ? (\n Tabla de posiciones
\n \n {STANDINGS.map((s) => (\n
\n \n
\n ))}\n \n {s.rank}\n °\n
\n \n {fmtMoney(s.amount)}\n \n {s.user}\n
\n {s.note}
\n \n
\n ) : null}\n\n {/* Sin precio reserva — reloj + \"Revisa tu historial / 48 horas\". El reloj y\n el copy van centrados; la nota \"Recuerda…\" va sobre la barra. */}\n {showReserve ? (\n <>\n {/* Pill \"Con Precio Reserva\" pegado arriba (solo desktop; en mobile lo\n pone MobileHeader colgando bajo el header) */}\n {reservePill ? Con Precio Reserva : null}\n \n \n
\n \n Felicitaciones {STANDINGS[0].user} has\n
\n Ganado la Oferta
\n con una propuesta de
\n \n
\n \n \n
\n \n \n Revisa tu historial de participación\n
\n en las próximas\n \n 48 horas\n para ver el estado del proceso\n
\n \n en las próximas\n \n 48 horas\n para ver el estado del proceso\n
\n Recuerda que estaremos realizando las gestiones\n
\n necesarias para que tu propuesta sea aceptada por el\n
\n vendedor\n
\n \n ) : null}\n\n {/* Mejor postor / ¿Deseas mejorarlo? — resultado + display del monto +\n \"Sí, quiero mejorar el monto\" (→ ingresar monto) / \"Omitir\" (→ 48 horas).\n Abajo: countdown (barra baja); al llegar a 0 → 48 horas. */}\n {showBestbid ? (\n <>\n {reservePill ? Con Precio Reserva : null}\n \n necesarias para que tu propuesta sea aceptada por el\n
\n vendedor\n
\n
\n \n
\n \n Estimado(a) {STANDINGS[0].user} eres el\n
\n Mejor postor de la Oferta\n
\n Con una propuesta de\n
\n \n Mejor postor de la Oferta\n
\n Con una propuesta de\n
\n US$\n {fmtMoney(bidAmount).replace(\"US$ \", \"\")}\n
\n \n Es probable que el monto con el que ganaste\n
\n sea rechazado\n
\n \n sea rechazado\n
¿Deseas mejorarlo?
\n \n \n \n
\n \n Te queda poco tiempo. ¡Mejora el monto ahora!\n {countdown}\n
\n \n ) : null}\n\n {/* Ingresa un monto superior — input glass + \"Sí, mejorar el monto\"\n (disabled hasta que el monto supere al ganador) + \"Volver\" (subrayado). */}\n {showImprove ? (\n <>\n {reservePill ? Con Precio Reserva : null}\n \n
\n \n
\n Ingresa un monto superior
\n \n \n setStep(\"confirm\")}\n >\n Sí, mejorar el monto\n \n \n
\n \n El proceso terminó con Precio Reserva y pasará a consulta con el\n vendedor. Aumentarás las probabilidades de que tu\n propuesta sea aceptada si la mejoras\n
\n \n ) : null}\n\n {/* Confirmar monto — \"¿Estimado(a) {user} estás seguro de mejorar el monto\n a US$XX?\" + botón glass (efecto burbuja + gambler) + \"Volver\". */}\n {showConfirm ? (\n <>\n {reservePill ? Con Precio Reserva : null}\n \n
\n \n
\n \n ¿Estimado(a) {STANDINGS[0].user} estás seguro de mejorar\n
\n el monto a US${improveShown}?\n
\n \n el monto a US${improveShown}?\n
\n \n \n
\n \n Recuerda que si mejoras tu propuesta aumentan las\n probabilidades de ser aceptado. Estaremos realizando las\n gestiones necesarias para que sea aceptado por el\n vendedor.\n
\n \n ) : null}\n\n {/* Bid actual (glass) — arriba al centro, en idle y streaming */}\n {showProposal ? (\n \n
\n ) : null}\n\n {/* Arriba de la barra: ícono + mensaje. Cambian entre \"result\" y \"activity\". */}\n {showResult || showActivity ? (\n \n {isActivity ?
\n iniciar el proceso de compra\n \n ) : (\n \n ¡Participa en nuestras próximas ofertas y\n
\n recuerda que todas las semanas\n
\n publicamos nuevas!\n \n )}\n
\n ) : null}\n\n {/* ProgressBar sobre la zona del botón (deja 80px abajo). En result/activity/\n reserve/improve/confirm 100% (llena); en bestbid baja con el countdown;\n en processing 0% (vacía). */}\n \n iniciar el proceso de compra\n \n ) : (\n \n ¡Participa en nuestras próximas ofertas y\n
\n recuerda que todas las semanas\n
\n publicamos nuevas!\n \n )}\n
\n
\n \n \n );\n}\n"
},
{
"path": "bloques/sala/mobile/MobileHeader.tsx",
"type": "registry:file",
"target": "bloques/sala/mobile/MobileHeader.tsx",
"content": "/**\n * MobileHeader — Sección del bloque Sala · Mobile (Voyager DS)\n * Fuente: Figma VOYAGER · \"Group 4\" (header sala mobile · 420×95)\n *\n * NO es componente registrado: es una sección del bloque. Dos bloques cuadrados\n * (sin esquinas redondeadas), pegados:\n * · Izquierda 310×95 → tarjeta de la sala (gradiente naranja→morado, borde\n * gradiente). Título + Signal (white) + vendedor + fila de pills.\n * · Derecha 110×95 → imagen del carro (slot por prop) con borde gradiente y\n * placa glass.\n * Pills glass 50×22 (reusa StatPill glass). Pill naranja 60×22. Los puntos\n * amarillos del Figma son guías → se ignoran. Copia tal cual del SVG.\n */\n\n\"use client\";\n\nimport type { JSX } from \"react\";\nimport Signal from \"../../../components/Signal\";\nimport StatPill from \"../../../components/StatPill\";\n\nexport const MOBILEHEADER_WIDTH = 420;\nexport const MOBILEHEADER_HEIGHT = 95;\nconst INFO_WIDTH = 310;\nconst CAR_WIDTH = 110;\n\n// Tarjeta sala (paint0 fill + paint1 borde) — diagonal naranja→morado\nconst INFO_FILL = \"linear-gradient(125deg, #ED8936 0%, #ED8936 40%, #8460E5 100%)\";\nconst INFO_BORDER = \"linear-gradient(125deg, #ffffff 0%, #F4AC59 22%, #8460E5 74.5%, #ffffff 100%)\";\n// Pill naranja 60×22 (paint8 fill + paint9 borde)\nconst LIVE_FILL = \"linear-gradient(180deg, #FF9639 0%, #EF852E 40%, #BE3D00 100%)\";\nconst LIVE_BORDER = \"linear-gradient(140deg, #FFBC83 0%, rgba(255,255,255,0.45) 40%, #DA6C1E 75%, #FFBC83 100%)\";\n\n// Placa glass 54×22 (paint13 fill + paint15 borde lila) · glass real vía máscara\nconst PLATE_STYLE_ID = \"concorde-mh-plate-styles\";\nconst PLATE_STYLES = `\n.mh-plate {\n position: relative;\n box-sizing: border-box;\n width: 50px;\n height: 20px;\n border-radius: 10px;\n background: linear-gradient(180deg, rgba(255,255,255,0.24) 0%, rgba(255,255,255,0.12) 45%, rgba(255,255,255,0.06) 100%);\n backdrop-filter: blur(5px);\n -webkit-backdrop-filter: blur(5px);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 10px;\n font-weight: 700;\n letter-spacing: 0.02em;\n color: #ffffff;\n}\n.mh-plate::before {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: inherit;\n padding: 1px;\n background: linear-gradient(140deg, #CFBAFF 0%, #ffffff 35%, #AE8EFF 65%, #CFBAFF 100%);\n -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n -webkit-mask-composite: xor;\n mask-composite: exclude;\n pointer-events: none;\n}\n/* Pill \"Con Precio Reserva\" (VYSecondaryHover) — cuelga bajo el header\n (199×33, esquinas inferiores 16px). Gradiente #AE8EFF→#5A35C2 + sombra card\n (0 0 16 spread 4, #000 10%). Sin glow morado. */\n.mh-reserve {\n position: absolute;\n top: 100%;\n left: 50%;\n transform: translateX(-50%);\n z-index: 6;\n box-sizing: border-box;\n height: 33px;\n padding: 0 22px;\n border-radius: 0 0 16px 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n white-space: nowrap;\n font-size: 15px;\n font-weight: 600;\n color: #ffffff;\n background: linear-gradient(155deg, #5A35C2 0%, #AE8EFF 100%);\n}\n`;\nlet _plateInjected = false;\n\nexport interface MobileHeaderProps {\n /** Título del lote (default \"Toyota Etios\") */\n title?: string;\n /** Año (default \"2021\") */\n year?: string;\n /** Etiqueta vendedor (default \"Vendedor\") */\n sellerLabel?: string;\n /** Nombre del vendedor (default \"Autoland\") */\n seller?: string;\n /** Imagen del carro — slot por prop (default \"/demo/bronco.jpg\") */\n carSrc?: string;\n /** Placa (default \"ABC123\") */\n plate?: string;\n /** Bids del usuario (default \"11\") */\n myBids?: string;\n /** Bids totales (default \"111\") */\n totalBids?: string;\n /** Participantes (default \"18\") */\n people?: string;\n /** Código de la subasta para la pill naranja (default \"47292\") */\n liveCode?: string;\n /** Muestra el pill \"Con Precio Reserva\" colgando bajo el header */\n reservePill?: boolean;\n className?: string;\n}\n\n// Flecha del componente SendBidIcon (ARROW_PATH) renderizada como glyph blanco\nfunction ArrowGlyph(): JSX.Element {\n return (\n \n );\n}\n\n// Ícono de grupo de personas — paths exactos del SVG (clip4)\nfunction PeopleGlyph(): JSX.Element {\n return (\n \n );\n}\n\nexport default function MobileHeader({\n title = \"Toyota Etios\",\n year = \"2021\",\n sellerLabel = \"Vendedor\",\n seller = \"Autoland\",\n carSrc = \"/demo/bronco.jpg\",\n plate = \"ABC123\",\n myBids = \"11\",\n totalBids = \"111\",\n people = \"18\",\n liveCode = \"47292\",\n reservePill = false,\n className = \"\",\n}: MobileHeaderProps): JSX.Element {\n if (typeof document !== \"undefined\" && !_plateInjected) {\n if (!document.getElementById(PLATE_STYLE_ID)) {\n const el = document.createElement(\"style\");\n el.id = PLATE_STYLE_ID;\n el.textContent = PLATE_STYLES;\n document.head.appendChild(el);\n }\n _plateInjected = true;\n }\n\n return (\n <>\n \n \n \n {title} {year}\n \n
\n\n {/* Vendedor — pegado al título */}\n \n {sellerLabel} {seller}\n \n\n {/* Signal (white) — absoluto a la derecha; su base alineada con la base de \"Vendedor\" */}\n \n
\n\n {/* Fila pills full-width: izquierda (3 glass + naranja) · derecha placa */}\n \n {/* Sub-fila izquierda dentro de la tarjeta 310 */}\n
\n \n\n {/* Pill \"Con Precio Reserva\" — cuelga bajo el header, centrado */}\n {reservePill ? Con Precio Reserva : null}\n \n \n );\n}\n"
},
{
"path": "bloques/sala/mobile/SalaMobile.tsx",
"type": "registry:file",
"target": "bloques/sala/mobile/SalaMobile.tsx",
"content": "/**\n * SalaMobile — Bloque de Concorde (Voyager DS)\n *\n * Sala de subasta · mobile (420 × 844). Orquesta la animación \"Ver live\" (la\n * prop `live` la controla el visor / botón \"Ver live\" de la doc):\n * 1. Recibiendo participantes (3s) — sube el pill de participantes, los demás 0.\n * 2. Inicio extendido (3s) — igual + símbolo \"+\". ProgressBar BLANCO full estos 6s.\n * 3. Streaming de pujas: cada puja sube el bid actual; si es MÍA (sent/live) el\n * botón se anima presionado y suben \"mis bids\" + \"bid totales\"; si es de otro,\n * solo \"bid totales\". El ProgressBar (rainbow) está vacío y solo se llena en el\n * remate \"A la una/dos/tres\". La última puja es MÍA → gano.\n * 4. Procesando (2s) → \"Tabla de posiciones\" (1° YO, naranja + estrella). Se queda.\n * El CTA muestra el siguiente bid (bid actual + paso) y se oculta al terminar.\n */\n\n\"use client\";\n\nimport { useState } from \"react\";\nimport type { JSX } from \"react\";\nimport MobileHeader, { MOBILEHEADER_HEIGHT } from \"./MobileHeader\";\nimport MobileChatPanel from \"./MobileChatPanel\";\nimport Button from \"../../../components/Button\";\nimport type { ProgressBarVariant } from \"../../../components/ProgressBar\";\nimport { STEP, ME, fmtMoney } from \"../liveData\";\nimport { useLiveAuction } from \"../useSala\";\n\nexport interface SalaMobileProps {\n className?: string;\n /** Modo en vivo — controlado desde el visor (botón \"Ver live\") */\n live?: boolean;\n /** Sin precio reserva — el remate no supera la reserva: tras \"procesando\" muestra\n * la pantalla \"Revisa tu historial / 48 horas\" (sin tabla ni actividad). */\n noReserve?: boolean;\n /** Colores del efecto de luz del bid actual (editable). Default: primary. */\n flashColors?: string[];\n /** Tipo de efecto de luz: \"bulb\" (bombilla) o \"spin\" (gira). Default \"bulb\". */\n flashMode?: \"bulb\" | \"spin\" | \"explode\" | \"pulse\" | \"combo\" | \"shine\";\n}\n\n// CTA primary 320×48 + estado \"presionado\" (réplica de .pvbtn:active)\nconst CTA_STYLES = `\n.salamobile-cta .pvbtn { width: 320px; padding: 0; }\n.salamobile-cta--pressed .pvbtn {\n --vbtn-angle: 135deg;\n --vbtn-stop-a: #d46e20;\n --vbtn-stop-b: #5a35c2;\n color: #d1d5dc;\n transform: scale(0.97) translateY(1px);\n box-shadow: rgba(0,0,0,0.22) 0 2px 5px 2px inset, rgba(0,0,0,0.12) 0 1px 3px;\n}\n`;\n\nimport { SALAMOBILE_WIDTH, SALAMOBILE_HEIGHT, SALAMOBILE_BG } from \"./dimensions\";\nexport { SALAMOBILE_WIDTH, SALAMOBILE_HEIGHT, SALAMOBILE_BG } from \"./dimensions\";\n\nexport default function SalaMobile({ className = \"\", live = false, noReserve = false, flashColors, flashMode = \"bulb\" }: SalaMobileProps): JSX.Element {\n const {\n phase, shown, prog, count, participants, myBids, totalBids, bidAmount, bidder, pressed, flash,\n } = useLiveAuction(live, noReserve);\n\n // Estado del bid actual en idle (interactivo con el botón \"Bidear\")\n const [idleBid, setIdleBid] = useState(6559);\n const [idleBidder, setIdleBidder] = useState(\"ZAE389\");\n const [idleFlash, setIdleFlash] = useState(0);\n\n const progVariant: ProgressBarVariant = live ? (phase === \"streaming\" || phase === \"result\" || phase === \"activity\" || phase === \"bestbid\" ? \"rainbow\" : \"white\") : \"rainbow\";\n const ctaAmount = (live ? bidAmount : idleBid) + STEP; // CTA = siguiente bid (un poco mayor)\n\n // Click en \"Bidear\" (idle): pujo yo → sube mi bid + anima el bid actual\n function handleBid(): void {\n if (live) return;\n setIdleBid((b) => b + STEP);\n setIdleBidder(ME);\n setIdleFlash((f) => f + 1);\n }\n\n return (\n \n \n {liveCode}\n \n
\n {/* Placa centrada sobre el carro (110) — misma fila = mismo nivel */}\n \n {plate}\n
\n \n
\n\n {/* Panel glass del chat — llega hasta abajo (cubre la zona del botón con su\n borde live); el botón flota encima, en su espacio reservado */}\n \n
\n\n {/* CTA primary 320×48 — siguiente bid (bid actual + paso); se \"presiona\" con mi\n puja. Se oculta al terminar la subasta (Procesando / Tabla de posiciones). */}\n \n {phase === \"processing\" || phase === \"result\" || phase === \"activity\" || phase === \"bestbid\" ? null : (\n \n \n \n \n {flashMode === \"explode\" || flashMode === \"combo\" ? (\n \n {Array.from({ length: SPARKS }).map((_, i) => (\n \n ))}\n \n ) : null}\n {amount}\n {label ? {label} : null}\n
\n \n );\n}\n"
},
{
"path": "components/BidMessage.tsx",
"type": "registry:file",
"target": "components/BidMessage.tsx",
"content": "\"use client\";\n\n/**\n * BidMessage — Generado por Concorde\n * Fuente: Figma VOYAGER · \"BidMessage\" (3162:12972 / 12990 / 13002 / 12984)\n *\n * Burbuja de mensaje de puja, estilo chat. Dos lados (cola en la esquina\n * inferior del lado):\n * · side=\"sent\" → derecha (cola inferior-derecha)\n * · side=\"received\" → izquierda (cola inferior-izquierda)\n * Color por `type`:\n * · \"live\" → relleno naranja (#FF9639→#BE3D00) + borde gradiente, texto blanco\n * · \"vault\" → relleno morado (#19004A→#3B1782→#2E0F70), texto blanco\n * · \"white\" → relleno blanco + borde lila, texto morado #3B1782\n * `logo` (slot) para la variante con logo. `children` = el mensaje.\n * Por convención: sent → live; received → vault/white. (type por defecto según side.)\n */\n\nimport type { JSX, ReactNode } from \"react\";\n\nexport type BidMessageSide = \"sent\" | \"received\";\nexport type BidMessageType = \"live\" | \"vault\" | \"white\";\n\nexport interface BidMessageProps {\n /** Lado de la burbuja (default \"received\") */\n side?: BidMessageSide;\n /** Color (default: sent→\"live\", received→\"vault\") */\n type?: BidMessageType;\n /** Logo opcional (slot) antes del texto */\n logo?: ReactNode;\n /** Contenido del mensaje */\n children?: ReactNode;\n className?: string;\n}\n\nconst STYLE_ID = \"concorde-bidmessage-styles\";\n\nconst BIDMESSAGE_STYLES = `\n.pbidmsg {\n display: inline-flex;\n align-items: center;\n gap: 9px;\n min-height: 40px;\n max-width: 100%;\n box-sizing: border-box;\n padding: 8px 18px;\n font-family: var(--vmc-font-display, \"Plus Jakarta Sans\", -apple-system, sans-serif);\n font-size: 14px;\n font-weight: 500;\n line-height: 1.3;\n}\n.pbidmsg__logo { display: inline-flex; align-items: center; flex-shrink: 0; }\n.pbidmsg__text { white-space: nowrap; }\n\n/* Cola según el lado */\n.pbidmsg--received { border-radius: 20px 20px 20px 4px; }\n.pbidmsg--sent { border-radius: 20px 20px 4px 20px; }\n\n/* live (naranja) — sent */\n.pbidmsg--live {\n border: 1.5px solid transparent;\n background-image:\n linear-gradient(180deg, #FF9639 0%, #EF852E 40%, #BE3D00 100%),\n linear-gradient(120deg, #ffffff 0%, #F4AC59 22%, #8460E5 74.5%, #ffffff 100%);\n background-origin: border-box;\n background-clip: padding-box, border-box;\n color: #ffffff;\n box-shadow: rgba(225,108,16,0.3) 0px 2px 12px;\n}\n\n/* vault (morado) — received */\n.pbidmsg--vault {\n border: none;\n background: linear-gradient(90deg, #19004A 0%, #3B1782 50%, #2E0F70 100%);\n color: #ffffff;\n box-shadow: rgba(46,15,112,0.35) 0px 4px 16px;\n}\n\n/* white (blanco, texto morado) — received */\n.pbidmsg--white {\n border: 1.5px solid transparent;\n background-image:\n linear-gradient(#ffffff, #ffffff),\n linear-gradient(135deg, #CFBAFF 0%, #ffffff 35%, #AE8EFF 65%, #CFBAFF 100%);\n background-origin: border-box;\n background-clip: padding-box, border-box;\n color: #3B1782;\n box-shadow: rgba(90,53,194,0.5) 0px 2px 10px;\n}\n`;\n\nlet _stylesInjected = false;\n\nexport default function BidMessage({\n side = \"received\",\n type,\n logo,\n children = \"PROPUSO US$ 25,000\",\n className = \"\",\n}: BidMessageProps): JSX.Element {\n const resolvedType: BidMessageType = type ?? (side === \"sent\" ? \"live\" : \"vault\");\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 = BIDMESSAGE_STYLES;\n document.head.appendChild(el);\n }\n _stylesInjected = true;\n }\n\n const cls = [\"pbidmsg\", `pbidmsg--${side}`, `pbidmsg--${resolvedType}`, className].filter(Boolean).join(\" \");\n\n return (\n <>\n \n \n {logo ? {logo} : null}\n {children}\n
\n \n );\n}\n"
},
{
"path": "components/ProgressBar.tsx",
"type": "registry:file",
"target": "components/ProgressBar.tsx",
"content": "\"use client\";\n\n/**\n * ProgressBar — Generado por Concorde\n * Fuente: Figma VOYAGER · \"Progressbar - Tiempo de bid\" (3182:12947)\n *\n * Barra de progreso (track hundido): top recto, esquinas inferiores redondeadas\n * (radio 13), fondo negro 22% con inner-shadows. El relleno (`value` 0-100) usa\n * la gradiente primary (white → #F4AC59 → #8460E5 → white · VYStrokes1). Copia\n * del SVG. Solo `value` — sin estilos editables.\n */\n\nimport type { JSX } from \"react\";\n\nexport type ProgressBarVariant = \"default\" | \"rainbow\" | \"white\";\n\nexport interface ProgressBarProps {\n /** Progreso 0-100 (default 60) */\n value?: number;\n /** Relleno: \"default\" (gradiente primary), \"rainbow\" (white→magenta→rosa) o \"white\" (blanco sólido). Default \"default\". */\n variant?: ProgressBarVariant;\n /**\n * Duración (ms) de la transición de ancho al cambiar `value`. Si se omite usa\n * la del CSS (0.3s). Útil para animar un llenado continuo (p. ej. 3000ms lineal).\n */\n transitionMs?: number;\n \"aria-label\"?: string;\n className?: string;\n}\n\nconst STYLE_ID = \"concorde-progressbar-styles\";\n\nconst PROGRESSBAR_STYLES = `\n.pprogbar {\n position: relative;\n width: 100%;\n height: 22px;\n border-radius: 0 0 13px 13px;\n overflow: hidden;\n background: rgba(0,0,0,0.22);\n box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), inset 0 2px 4px rgba(0,0,0,0.35);\n}\n.pprogbar__fill {\n position: absolute;\n left: 0;\n top: 0;\n height: 100%;\n background: linear-gradient(135deg, #FFFFFF 0%, #F4AC59 22%, #8460E5 74.5%, #FFFFFF 100%);\n transition: width 0.3s cubic-bezier(0.3,0,0,1);\n}\n/* Rainbow horizontal (no diagonal): white → lila → magenta → rosa */\n.pprogbar__fill--rainbow {\n background: linear-gradient(90deg, #FFFFFF 0%, #F2CCFF 25%, #CC00FF 60%, #FF0066 100%);\n box-shadow: 0 0 6px rgba(255,255,255,0.8), 0 0 14px rgba(204,0,255,0.9), 0 0 30px rgba(255,0,102,0.5);\n}\n/* Blanco sólido (fases de carga: recibiendo participantes / inicio extendido) */\n.pprogbar__fill--white {\n background: #ffffff;\n box-shadow: 0 0 6px rgba(255,255,255,0.7);\n}\n@media (prefers-reduced-motion: reduce) { .pprogbar__fill { transition: none; } }\n`;\n\nlet _stylesInjected = false;\n\nexport default function ProgressBar({\n value = 60,\n variant = \"default\",\n transitionMs,\n \"aria-label\": ariaLabel,\n className = \"\",\n}: ProgressBarProps): 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 = PROGRESSBAR_STYLES;\n document.head.appendChild(el);\n }\n _stylesInjected = true;\n }\n\n const clamped = Math.max(0, Math.min(100, value));\n\n return (\n <>\n \n \n {icon ??
\n \n );\n }\n\n const isBids = variant === \"bids\";\n return (\n \n
\n \n );\n}\n"
},
{
"path": "components/TimerIcon.tsx",
"type": "registry:file",
"target": "components/TimerIcon.tsx",
"content": "/**\n * TimerIcon — Generado por Concorde\n * Fuente: Figma VOYAGER · \"timericon\" (3201)\n *\n * Icono de temporizador/reloj (22×22), trazo redondeado 1.83. Copia exacta del\n * path del SVG. Tamaño y color personalizables (default currentColor).\n */\n\nimport type { JSX } from \"react\";\n\nexport interface TimerIconProps {\n /** Tamaño en px (default 22) */\n size?: number;\n /** Color del trazo (default \"currentColor\") */\n color?: string;\n /** Texto accesible. Si se omite, es decorativo (aria-hidden). */\n title?: string;\n className?: string;\n}\n\nexport default function TimerIcon({ size = 22, color = \"currentColor\", title, className = \"\" }: TimerIconProps): JSX.Element {\n return (\n \n \n {title}\n {year ? {year} : null}\n \n \n {placaLabel}\n {placa ? {placa} : null}\n \n
\n \n \n
\n \n {currentSrc ? 
: null}\n\n \n\n \n\n \n\n {index + 1}/{total}\n
\n );\n\n return (\n <>\n \n \n\n {/* Conjunto header + visor (con header → card de borde gradiente; sin header → visor suelto) */}\n {header ? (\n \n {images.map((src, i) => {\n const selected = i === index;\n return (\n \n {src ? 
: null}\n \n );\n })}\n
\n \n \n );\n}\n"
},
{
"path": "components/BidPosition.tsx",
"type": "registry:file",
"target": "components/BidPosition.tsx",
"content": "\"use client\";\n\n/**\n * BidPosition — Generado por Concorde\n * Fuente: Figma VOYAGER · \"ConsolePositions\" (2934:14554) +\n * \"Background+Border\" (3188:11944 live · 3188:11955 vault)\n *\n * Tabla de posiciones de pujas: card glass (white 28%→4% + backdrop-blur, radio 16, borde gradiente, sombra)\n * con header de columnas (PUESTO · USUARIO · BIDS, decodificado del SVG) y N\n * filas tipo pastilla en grid de 3 columnas:\n * · 1ª posición → live (naranja #FF9639→#BE3D00, borde gradiente, trofeo dorado)\n * · resto → vault (morado #19004A→#3B1782→#2E0F70, borde #99A1AF)\n * Colores/gradientes/sombras copiados tal cual del SVG. Texto = data (`positions`),\n * porque en el SVG los textos son glifos vectorizados (placeholder), no editables.\n */\n\nimport { useEffect, useLayoutEffect, useRef } from \"react\";\nimport type { JSX } from \"react\";\n\nexport interface BidPositionItem {\n /**\n * Identidad estable de la fila (p. ej. el id de usuario de la API/socket).\n * Es lo que habilita la animación de reordenamiento: mientras el `id` se\n * mantenga, la fila se desliza a su nueva posición en vez de re-montarse.\n * Si se omite se usa el `name` (sin animación de reorden ante nombres iguales).\n */\n id?: string;\n /** Usuario / nombre (columna central) */\n name: string;\n /** Nº de bids (columna derecha) */\n value: string;\n /** Override del ordinal (default: índice + \"°\") */\n rank?: string;\n}\n\nexport interface BidPositionProps {\n /** Encabezado columna izquierda (default \"PUESTO\") */\n rankLabel?: string;\n /** Encabezado columna central (default \"C.U.U.\") */\n nameLabel?: string;\n /** Encabezado columna derecha (default \"BIDS\") */\n bidsLabel?: string;\n /**\n * Posiciones (la 1ª es live, el resto vault). Pensado para alimentarse en\n * vivo desde una API/socket: pásalas como nuevo array en cada actualización\n * y, si las filas traen `id`, los cambios de orden se animan automáticamente.\n */\n positions?: BidPositionItem[];\n className?: string;\n}\n\nconst DEFAULT_POSITIONS: BidPositionItem[] = [\n { id: \"u1\", name: \"JA8NEE\", value: \"2\" },\n { id: \"u2\", name: \"BEKVS1\", value: \"1\" },\n { id: \"u3\", name: \"KAHTH4\", value: \"1\" },\n { id: \"u4\", name: \"KAHTH4\", value: \"1\" },\n { id: \"u5\", name: \"KAHTH4\", value: \"1\" },\n];\n\nconst STYLE_ID = \"concorde-bidposition-styles\";\n\nconst BIDPOSITION_STYLES = `\n.pbidpos {\n box-sizing: border-box;\n width: 313px;\n max-width: 100%;\n border-radius: 16px;\n border: 1.5px solid transparent;\n /* GLASS oscuro: base navy (= el \"behind transparent areas\" #0A002E) + sheen\n blanco (paint0: white 28%→4%) + backdrop-blur (Figma \"bg blur 40\" → 20px) */\n background-image:\n linear-gradient(127deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.07) 45%, rgba(255,255,255,0.03) 100%),\n linear-gradient(160deg, rgba(28,13,82,0.93) 0%, rgba(14,3,56,0.95) 100%),\n linear-gradient(125deg, rgba(255,255,255,0.9) 0%, rgba(244,172,89,0.7) 22%, rgba(132,96,229,0.7) 74.5%, rgba(255,255,255,0.9) 100%);\n background-origin: border-box;\n background-clip: padding-box, padding-box, border-box;\n -webkit-backdrop-filter: blur(20px);\n backdrop-filter: blur(20px);\n box-shadow: rgba(10,0,46,0.6) 0px 12px 36px -4px, inset 0 1px 0 rgba(255,255,255,0.22);\n padding: 0 16px 16px;\n font-family: var(--vmc-font-display, \"Plus Jakarta Sans\", -apple-system, sans-serif);\n}\n/* 3 columnas fijas como el SVG: 78 · 143 · 58 (= 279) */\n.pbidpos__head,\n.pbidpos__row {\n display: grid;\n grid-template-columns: 78fr 143fr 58fr;\n align-items: center;\n}\n.pbidpos__head {\n padding: 14px 0 11px;\n margin-bottom: 12px;\n border-bottom: 1px solid #E1E3E2;\n}\n.pbidpos__head span {\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 0.04em;\n text-transform: uppercase;\n color: #ffffff;\n white-space: nowrap;\n}\n.pbidpos__rows { display: flex; flex-direction: column; gap: 8px; }\n.pbidpos__row {\n box-sizing: border-box;\n height: 28px;\n border-radius: 14px;\n color: #ffffff;\n will-change: transform;\n}\n@media (prefers-reduced-motion: reduce) {\n .pbidpos__row { transition: none !important; transform: none !important; }\n}\n/* alineación por columna (idéntica en header y filas) */\n.pbidpos__c1 { text-align: center; }\n.pbidpos__c2 { text-align: left; padding-left: 12px; }\n.pbidpos__c3 { text-align: center; }\n.pbidpos__rank { font-size: 12px; font-weight: 700; }\n.pbidpos__value { font-size: 12px; font-weight: 700; white-space: nowrap; }\n.pbidpos__name {\n display: flex;\n align-items: center;\n gap: 6px;\n min-width: 0;\n padding-left: 12px;\n}\n.pbidpos__nametext {\n font-size: 12px;\n font-weight: 500;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.pbidpos__trophy { flex-shrink: 0; filter: drop-shadow(0 0 2px rgba(240,187,59,0.65)); }\n\n/* 1ª posición — live (naranja, borde gradiente) */\n.pbidpos__row--live {\n border: 1px solid transparent;\n background-image:\n linear-gradient(180deg, #FF9639 0%, #EF852E 40%, #BE3D00 100%),\n linear-gradient(120deg, #ffffff 0%, #F4AC59 22%, #8460E5 74.5%, #ffffff 100%);\n background-origin: border-box;\n background-clip: padding-box, border-box;\n}\n/* resto — vault (morado, borde gris) */\n.pbidpos__row--vault {\n border: 1px solid #99A1AF;\n background: linear-gradient(90deg, #19004A 0%, #3B1782 50%, #2E0F70 100%);\n}\n`;\n\nfunction Trophy(): JSX.Element {\n return (\n \n );\n}\n\nfunction keyOf(p: BidPositionItem, i: number): string {\n return p.id ?? `${p.name}-${i}`;\n}\n\nexport default function BidPosition({\n rankLabel = \"PUESTO\",\n nameLabel = \"C.U.U.\",\n bidsLabel = \"BIDS\",\n positions = DEFAULT_POSITIONS,\n className = \"\",\n}: BidPositionProps): JSX.Element {\n // Inyección de estilos en cliente (el \n
\n ) : (\n viewer\n )}\n\n {/* Filmstrip (aparte, debajo del conjunto) */}\n \n {header}\n {viewer}\n
\n