\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
\n
Procesando
\n
Un momento por favor
\n
\n
\n \n \n \n
\n
\n ) : null}\n\n {/* Tabla de posiciones — título + filas del podio (1° ganador, 2° …) */}\n {showResult ? (\n
\n
Tabla de posiciones
\n
\n {STANDINGS.map((s) => (\n
\n
\n {s.rank}\n °\n
\n
\n {fmtMoney(s.amount)}\n \n {s.user}\n \n \n
\n
{s.note}
\n
\n ))}\n
\n
\n ) : null}\n\n {/* Actividad — SIN título: \"con una propuesta de\" + BidProposal ganador */}\n {showActivity ? (\n
\n
\n \n \n \n
\n Felicitaciones {STANDINGS[0].user} has\n
\n
Ganado la Oferta
\n
con una propuesta de
\n \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 \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
\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
\n
\n Estimado(a) {STANDINGS[0].user} eres el\n \n Mejor postor de la Oferta\n \n Con una propuesta de\n
\n Es probable que el monto con el que ganaste\n \n sea rechazado\n
\n
¿Deseas mejorarlo?
\n
\n \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
Ingresa un monto superior
\n \n
\n setStep(\"confirm\")}\n >\n Sí, mejorar el monto\n \n \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 ¿Estimado(a) {STANDINGS[0].user} estás seguro de mejorar\n \n el monto a US${improveShown}?\n
\n
\n \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
\n ) : null}\n\n {/* Arriba de la barra: ícono + mensaje. Cambian entre \"result\" y \"activity\". */}\n {showResult || showActivity ? (\n
\n {isActivity ? : }\n {isActivity ? (\n \n Revisa el estado de tu Actividad para\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 ) : null}\n\n {/* ProgressBar — vive 28px arriba del borde de la zona reservada al CTA\n (--cta-reserve, default 108px → bottom 80px). En result/activity/\n reserve/improve/confirm 100% (llena); en bestbid baja con el countdown;\n en processing 0% (vacía). Oculto cuando hideProgress=true (variante overlay). */}\n \n \n \n \n \n );\n}\n"
},
{
"path": "bloques/testsala2/mobile/MobileHeader.tsx",
"type": "registry:file",
"target": "bloques/testsala2/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 {/* Capa fondo: tarjeta sala 310×95 (cuadrada) */}\n \n {/* Capa fondo: carro 110×95 (cuadrado, borde gradiente) */}\n \n \n \n\n {/* Contenido al frente — UNA columna full-width: la fila de pills incluye\n la placa, así pills y placa comparten fila y se alinean exacto */}\n \n {/* Título (Signal va aparte, absoluto, para no inflar la fila) */}\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 {/* Sub-fila izquierda dentro de la tarjeta 310 */}\n
\n } />\n } />\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 {/* Pill \"Con Precio Reserva\" — cuelga bajo el header, centrado */}\n {reservePill ? Con Precio Reserva : null}\n \n \n );\n}\n"
},
{
"path": "bloques/testsala2/mobile/SalaMobile.tsx",
"type": "registry:file",
"target": "bloques/testsala2/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 { useEffect, useRef, 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, OTHERS, STATIC, fmtMoney, type LiveMsg } from \"../liveData\";\nimport { useLiveAuction } from \"../useSala\";\n\n/** Variantes del CTA — experimentos para darle más protagonismo al botón. */\nexport type CtaVariant = \"default\" | \"hero\" | \"fullbutton\";\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 /** Variante visual del CTA — \"default\" (full-width 60px), \"hero\" (XL con más\n * espacio propio) o \"fullbutton\" (arranca gigante; cada puja agrega mensajes de\n * conversación — sin remate — y solo a la 3ra puja dispara, una única vez, la\n * secuencia real \"Cierra en\" + \"A la una/dos/tres\" con ProgressBar; tras eso el\n * botón se queda chico y la barra llena para siempre). */\n ctaVariant?: CtaVariant;\n}\n\n// CTA primary — 3 variantes: default (full-width 60px), hero (XL más grande, con\n// más espacio propio reservado en el panel — no tapa stream ni ProgressBar) y\n// fullbutton (arranca gigante sin barra visible; cada puja dispara la secuencia\n// real del remate y se achica mientras corre, luego vuelve a agrandarse).\n// + estado \"presionado\" (réplica de .pvbtn:active) para las 3.\nconst CTA_STYLES = `\n.salamobile-cta {\n transition: left 320ms cubic-bezier(0.3,0,0,1), right 320ms cubic-bezier(0.3,0,0,1),\n bottom 320ms cubic-bezier(0.3,0,0,1);\n}\n.salamobile-cta .pvbtn {\n display: flex; width: 100%; padding: 0;\n transition: height 320ms cubic-bezier(0.3,0,0,1), font-size 320ms cubic-bezier(0.3,0,0,1),\n box-shadow 320ms ease, transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);\n}\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/* default */\n.salamobile-cta--default .pvbtn { height: 60px; font-size: 18px; }\n\n/* hero — más grande y más alto; el panel le reserva más espacio propio (ver\n ctaReserve en SalaMobile) para no tapar el stream ni el ProgressBar. */\n.salamobile-cta--hero .pvbtn {\n height: 76px;\n font-size: 22px;\n letter-spacing: 0.01em;\n box-shadow:\n rgba(255,255,255,0.32) 0 1px 0 2px inset,\n rgba(237,137,54,0.55) 0 6px 20px,\n rgba(132,96,229,0.45) 0 2px 40px;\n}\n.salamobile-cta--hero .pvbtn::after { opacity: 0.55; filter: blur(22px); }\n\n/* fullbutton — dos estados propios (no dependen de .pressed): \"big\" domina la\n pantalla (sin remate corriendo); \"shrink\" (mientras corre el remate) baja a\n la altura default. */\n.salamobile-cta--fullbutton .pvbtn {\n box-shadow:\n rgba(255,255,255,0.32) 0 1px 0 2px inset,\n rgba(237,137,54,0.55) 0 6px 22px,\n rgba(132,96,229,0.5) 0 2px 44px;\n}\n.salamobile-cta--fullbutton .pvbtn::after { opacity: 0.55; filter: blur(22px); }\n.salamobile-cta--fullbutton-big .pvbtn { height: 88px; font-size: 24px; }\n.salamobile-cta--fullbutton-shrink .pvbtn {\n height: 60px;\n font-size: 18px;\n box-shadow:\n rgba(255,255,255,0.28) 0 1px 0 2px inset,\n rgba(237,137,54,0.3) 0 2px 6px;\n}\n.salamobile-cta--fullbutton-shrink .pvbtn::after { opacity: 0; }\n`;\n\nimport { SALAMOBILE_WIDTH, SALAMOBILE_HEIGHT, SALAMOBILE_BG } from \"./dimensions\";\nexport { SALAMOBILE_WIDTH, SALAMOBILE_HEIGHT, SALAMOBILE_BG } from \"./dimensions\";\n\n// ── Variante \"Full Botón\": secuencia real disparada por cada puja ──────────\n// Cada click MÍO agrega mi puja + respuesta de otro postor al chat (como una\n// conversación real, \"infinita\"). Solo a la 3ra puja se dispara el remate real:\n// \"Cierra en US$X\" → \"A la una\" (arranca ProgressBar) → \"A las dos\" → \"A las\n// tres\" (100%). Es un evento único: tras eso el botón se queda chico y la barra\n// llena para siempre; las pujas siguientes vuelven a ser conversación normal.\nconst FB_STEP_MS = 550; // ritmo entre mensajes de conversación\nconst FB_REMATE_MS = 1500; // duración de cada tramo del remate (1/3 del progress)\nconst FB_END_PAUSE_MS = 700; // pausa tras \"A las tres\" antes de liberar el botón\nconst FB_BIDS_PER_CYCLE = 3; // pujas mías antes de disparar el remate (una sola vez)\n\nfunction useFullButtonEngine(active: boolean, startBid: number) {\n // Semilla de contexto — primeros mensajes de otros postores (sin pujas mías ni\n // remate) para que el chat no arranque vacío antes del primer click.\n const SEED = STATIC.slice(0, 2);\n\n const [messages, setMessages] = useState(SEED);\n const [big, setBig] = useState(true);\n // progressVisible: independiente de `big`. Solo pasa a true en el instante en\n // que arranca el remate real (mensaje \"A la una\"); nunca en pujas normales\n // (1ra/2da), aunque el botón se achique transitoriamente en esas también.\n const [progressVisible, setProgressVisible] = useState(false);\n const [progress, setProgress] = useState(0);\n const [bidAmount, setBidAmount] = useState(startBid);\n const [pressed, setPressed] = useState(false);\n const busyRef = useRef(false);\n const cycleCountRef = useRef(0); // pujas mías acumuladas en el ciclo actual (0..FB_BIDS_PER_CYCLE-1)\n const otherIdxRef = useRef(0);\n const remateDoneRef = useRef(false); // true tras el 1er remate — el botón ya no vuelve a agrandarse\n const timers = useRef[]>([]);\n\n function clearTimers(): void {\n timers.current.forEach(clearTimeout);\n timers.current = [];\n }\n\n // Reset al desactivar (cambiar de variante)\n useEffect(() => {\n if (!active) {\n clearTimers();\n busyRef.current = false;\n cycleCountRef.current = 0;\n remateDoneRef.current = false;\n setMessages(SEED);\n setBig(true);\n setProgressVisible(false);\n setProgress(0);\n setBidAmount(startBid);\n }\n return clearTimers;\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [active]);\n\n function nextOther(): string {\n const name = OTHERS[otherIdxRef.current % OTHERS.length];\n otherIdxRef.current += 1;\n return name;\n }\n\n function bid(): void {\n if (!active || busyRef.current) return;\n busyRef.current = true;\n clearTimers();\n\n const myAmount = bidAmount + STEP;\n setPressed(true);\n timers.current.push(setTimeout(() => setPressed(false), 200));\n\n // Mi puja entra al stream (el botón NO se achica todavía — se mantiene\n // grande hasta la 3ra puja, que es cuando arranca el remate real).\n setMessages((m) => [...m, { kind: \"proposal\", side: \"sent\", type: \"live\", amount: myAmount, bidder: ME, mine: true }]);\n\n cycleCountRef.current += 1;\n // El remate ocurre una sola vez en la vida del bloque: al llegar a la 3ra\n // puja. Pasado eso, todas las pujas futuras quedan como conversación normal.\n const isRemateBid = !remateDoneRef.current && cycleCountRef.current >= FB_BIDS_PER_CYCLE;\n\n if (!isRemateBid) {\n // Puja \"normal\" (1ra o 2da del ciclo): la conversación sigue — otro postor\n // responde con un monto mayor. Sin remate, sin ProgressBar, botón sigue grande.\n const otherAmount = myAmount + STEP;\n timers.current.push(\n setTimeout(() => {\n setBidAmount(otherAmount);\n setMessages((m) => [...m, { kind: \"proposal\", side: \"received\", type: \"white\", amount: otherAmount, bidder: nextOther() }]);\n }, FB_STEP_MS),\n );\n timers.current.push(\n setTimeout(() => {\n busyRef.current = false;\n }, FB_STEP_MS * 2),\n );\n return;\n }\n\n // 2) 3ra puja del ciclo: dispara el remate completo — recién aquí se achica.\n setBig(false);\n setBidAmount(myAmount);\n timers.current.push(\n setTimeout(() => {\n setMessages((m) => [...m, { kind: \"closes\", side: \"received\", type: \"vault\", amount: myAmount }]);\n }, FB_STEP_MS),\n );\n\n const remateStart = FB_STEP_MS * 2;\n const remateLabels = [\"A la una\", \"A las dos\", \"A las tres\"];\n remateLabels.forEach((text, i) => {\n timers.current.push(\n setTimeout(() => {\n setMessages((m) => [...m, { kind: \"vmc\", side: \"received\", type: \"vault\", text, slow: true }]);\n if (i === 0) setProgressVisible(true); // recién ahora (\"A la una\") aparece la barra\n const s = Date.now();\n const targetPct = ((i + 1) / remateLabels.length) * 100;\n const startPct = (i / remateLabels.length) * 100;\n const iv = setInterval(() => {\n const t = Math.min(1, (Date.now() - s) / FB_REMATE_MS);\n setProgress(startPct + (targetPct - startPct) * t);\n if (t >= 1) clearInterval(iv);\n }, 60);\n timers.current.push(iv);\n }, remateStart + i * FB_REMATE_MS),\n );\n });\n\n // 3) Fin del remate: la barra se queda llena y visible para siempre, y el\n // botón se queda chico para siempre (ya no vuelve a agrandarse en ningún\n // ciclo futuro). Solo libera el botón para seguir pujando.\n timers.current.push(\n setTimeout(\n () => {\n remateDoneRef.current = true;\n busyRef.current = false;\n },\n remateStart + remateLabels.length * FB_REMATE_MS + FB_END_PAUSE_MS,\n ),\n );\n }\n\n return { messages, big, progressVisible, progress, bidAmount, pressed, bid };\n}\n\nexport default function SalaMobile({ className = \"\", live = false, noReserve = false, flashColors, flashMode = \"bulb\", ctaVariant = \"fullbutton\" }: SalaMobileProps): JSX.Element {\n const {\n phase, shown, prog, count, participants, myBids, totalBids, bidAmount: liveBidAmount, bidder, pressed: livePressed, flash,\n } = useLiveAuction(live, noReserve);\n\n // Estado del bid actual en idle (interactivo con el botón \"Bidear\") — usado por\n // las variantes default/hero, que no tienen secuencia propia.\n const [idleBid, setIdleBid] = useState(6559);\n const [idleBidder, setIdleBidder] = useState(\"ZAE389\");\n const [idleFlash, setIdleFlash] = useState(0);\n\n // Motor propio de \"Full Botón\" — solo corre en modo idle (!live), nunca en \"Ver live\".\n const fb = useFullButtonEngine(ctaVariant === \"fullbutton\" && !live, 6559);\n\n const progVariant: ProgressBarVariant = live\n ? (phase === \"streaming\" || phase === \"result\" || phase === \"activity\" || phase === \"bestbid\" ? \"rainbow\" : \"white\")\n : \"rainbow\";\n\n const isFullButton = ctaVariant === \"fullbutton\" && !live;\n const ctaAmount = isFullButton ? fb.bidAmount + STEP : (live ? liveBidAmount : idleBid) + STEP;\n const pressed = isFullButton ? fb.pressed : livePressed;\n\n // Click en \"Bidear\" (idle): pujo yo → sube mi bid + anima el bid actual\n function handleBid(): void {\n if (live) return;\n if (isFullButton) {\n fb.bid();\n return;\n }\n setIdleBid((b) => b + STEP);\n setIdleBidder(ME);\n setIdleFlash((f) => f + 1);\n }\n\n // Espacio reservado al pie del panel por variante (stream/status terminan ahí,\n // el ProgressBar vive 28px arriba de ese borde): default 108, hero más alto\n // (130, cabe el botón de 76px sin invadir el stream ni la barra), fullbutton usa\n // más espacio mientras está \"big\" (botón de 88px, barra oculta) y el default una\n // vez que el remate ocurrió (barra visible, botón chico, ya para siempre).\n const ctaReserve = ctaVariant === \"hero\" ? 130 : isFullButton ? (fb.big ? 156 : 108) : 108;\n // Independiente del tamaño del botón: la barra solo aparece durante/después del\n // remate real (fb.progressVisible), nunca por el achicado transitorio de una\n // puja normal (1ra/2da del ciclo).\n const hideProgress = isFullButton && !fb.progressVisible;\n\n return (\n \n {/* Header 420×95 — pills dinámicas: mis bids (live) · bid totales · participantes */}\n
\n \n
\n\n {/* Panel glass del chat — llega hasta abajo. Le reservamos al pie el espacio\n exacto que necesita el CTA de cada variante (ctaReserve) para que el\n stream de mensajes y el ProgressBar nunca queden tapados. */}\n
\n \n
\n\n {/* CTA — siguiente bid (bid actual + paso); se \"presiona\" con mi puja. Se oculta\n al terminar la subasta (Procesando / Tabla de posiciones). 3 variantes:\n · default — full-width, 60px.\n · hero — XL 76px con más espacio propio reservado (no tapa nada).\n · fullbutton — arranca gigante (88px); cada puja se achica un instante y\n agrega conversación (mi puja + respuesta de otro postor). Solo a la 3ra\n puja dispara, una única vez, el remate real (\"Cierra en\" +\n \"A la una/dos/tres\" con ProgressBar); tras eso el botón se queda chico\n y la barra llena para siempre. */}\n \n {phase === \"processing\" || phase === \"result\" || phase === \"activity\" || phase === \"bestbid\" ? null : (\n \n \n \n )}\n \n );\n}\n"
},
{
"path": "bloques/testsala2/useSala.ts",
"type": "registry:file",
"target": "bloques/testsala2/useSala.ts",
"content": "/**\n * useSala — motor de la animación \"Ver live\" compartido por SalaMobile y\n * SalaDesktop/BidChat.\n *\n * Máquina de estados: idle → welcome → extended → streaming → processing →\n * result → activity. Centraliza timers y estado para que ambos bloques rendericen\n * la misma secuencia. Conectar `onBid` con el backend real se hace aquí.\n */\n\n\"use client\";\n\nimport { useEffect, useRef, useState } from \"react\";\nimport type { Phase } from \"./liveData\";\nimport {\n STREAM,\n REVEAL_AT,\n TOTAL_STREAM,\n VMC_START,\n VMC_FILL,\n WELCOME_MS,\n EXTENDED_MS,\n RESTART_PAUSE,\n PROCESSING_MS,\n RESULT_MS,\n START_COUNT,\n PARTICIPANTS_TARGET,\n BASE,\n} from \"./liveData\";\n\nexport interface LiveAuction {\n phase: Phase;\n count: number;\n participants: number;\n myBids: number;\n totalBids: number;\n shown: number;\n prog: number;\n bidAmount: number;\n bidder: string;\n pressed: boolean;\n flash: number;\n /** Segundos transcurridos desde que empezó el live (\"INICIÓ HACE\") */\n elapsed: number;\n}\n\n/** Formatea segundos → \"HH:MM:SS\". */\nexport function fmtElapsed(total: number): string {\n const p = (n: number): string => String(n).padStart(2, \"0\");\n return `${p(Math.floor(total / 3600))}:${p(Math.floor((total % 3600) / 60))}:${p(total % 60)}`;\n}\n\nexport function useLiveAuction(live: boolean, noReserve = false): LiveAuction {\n const [phase, setPhase] = useState(\"idle\");\n const [count, setCount] = useState(START_COUNT);\n const [participants, setParticipants] = useState(0);\n const [myBids, setMyBids] = useState(0);\n const [totalBids, setTotalBids] = useState(0);\n const [shown, setShown] = useState(0);\n const [prog, setProg] = useState(40);\n const [bidAmount, setBidAmount] = useState(BASE);\n const [bidder, setBidder] = useState(\"ZAE389\");\n const [pressed, setPressed] = useState(false);\n const [flash, setFlash] = useState(0);\n const [elapsed, setElapsed] = useState(0);\n const timers = useRef[]>([]);\n const elapsedTimer = useRef | null>(null);\n\n useEffect(\n function runLive() {\n function clearAll(): void {\n timers.current.forEach((id) => {\n clearTimeout(id);\n clearInterval(id);\n });\n timers.current = [];\n }\n function clearElapsed(): void {\n if (elapsedTimer.current !== null) {\n clearInterval(elapsedTimer.current);\n elapsedTimer.current = null;\n }\n }\n\n if (!live) {\n clearAll();\n clearElapsed();\n setPhase(\"idle\");\n setParticipants(0);\n setShown(0);\n setProg(40);\n setPressed(false);\n setElapsed(0);\n return;\n }\n\n let cancelled = false;\n\n // \"INICIÓ HACE\" corre desde 00:00:00 durante todo el live; su timer va aparte\n // para sobrevivir a los clearAll() de las transiciones de fase.\n setElapsed(0);\n clearElapsed();\n elapsedTimer.current = setInterval(() => setElapsed((e) => e + 1), 1000);\n\n function cycle(): void {\n if (cancelled) return;\n clearAll();\n // (1)+(2) Recibiendo / Inicio extendido — barra BLANCA full · cuenta de 3s\n setPhase(\"welcome\");\n setShown(0);\n setProg(100);\n setCount(START_COUNT);\n setParticipants(0);\n setMyBids(0);\n setTotalBids(0);\n setBidAmount(BASE);\n setBidder(\"—\");\n\n timers.current.push(setInterval(() => setParticipants((p) => (p < PARTICIPANTS_TARGET ? p + 1 : p)), 300));\n timers.current.push(setInterval(() => setCount((c) => (c > 1 ? c - 1 : 1)), 1000));\n timers.current.push(\n setTimeout(() => {\n setPhase(\"extended\");\n setCount(START_COUNT); // reinicia la cuenta de 3s para \"inicio extendido\"\n }, WELCOME_MS),\n );\n\n timers.current.push(\n setTimeout(function toStreaming() {\n clearAll();\n // (3) Streaming — barra rainbow VACÍA hasta el remate\n setPhase(\"streaming\");\n setShown(0);\n setProg(0);\n\n STREAM.forEach(function schedule(m, i) {\n timers.current.push(\n setTimeout(function reveal() {\n setShown(i + 1);\n if (m.kind === \"proposal\") {\n setBidAmount(m.amount ?? BASE);\n setBidder(m.bidder ?? \"—\");\n setFlash((f) => f + 1); // anima el bid actual con cada puja\n if (m.mine) {\n setMyBids((x) => x + 1);\n setTotalBids((x) => x + 1);\n setPressed(true);\n timers.current.push(setTimeout(() => setPressed(false), 200));\n } else {\n setTotalBids((x) => x + 1);\n }\n }\n }, REVEAL_AT[i]),\n );\n });\n\n // El ProgressBar solo se llena durante el remate (A la una/dos/tres)\n timers.current.push(\n setTimeout(function startFill() {\n const s = Date.now();\n const iv = setInterval(() => {\n const p = Math.min(100, ((Date.now() - s) / VMC_FILL) * 100);\n setProg(p);\n if (p >= 100) clearInterval(iv);\n }, 100);\n timers.current.push(iv);\n }, VMC_START),\n );\n\n // Fin del remate → Procesando (\"Un momento por favor\", barra vacía). De ahí:\n // · Con precio reserva → \"bestbid\" (\"Mejor postor / ¿Deseas mejorarlo?\").\n // El sub-flujo (deseas mejorar → ingresar monto → confirmar → 48 horas)\n // lo maneja MobileChatPanel localmente (son interacciones del usuario).\n // · Sin precio reserva → Tabla de posiciones (result) → Actividad.\n timers.current.push(\n setTimeout(function toProcessing() {\n clearAll();\n setPhase(\"processing\");\n setProg(0);\n timers.current.push(\n setTimeout(function afterProcessing() {\n if (noReserve) {\n // Con precio reserva: entra al sub-flujo \"Mejor postor\".\n setPhase(\"bestbid\");\n setProg(100);\n return;\n }\n // Sin reserva: Tabla (barra 100%, 5s) → Actividad.\n setPhase(\"result\");\n setProg(100);\n timers.current.push(setTimeout(() => setPhase(\"activity\"), RESULT_MS));\n }, PROCESSING_MS),\n );\n }, TOTAL_STREAM + RESTART_PAUSE),\n );\n }, WELCOME_MS + EXTENDED_MS),\n );\n }\n\n cycle();\n return function cleanup() {\n cancelled = true;\n clearAll();\n clearElapsed();\n };\n },\n [live],\n );\n\n return { phase, count, participants, myBids, totalBids, shown, prog, bidAmount, bidder, pressed, flash, elapsed };\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 \n \n \n );\n}\n"
},
{
"path": "components/BidProposal.tsx",
"type": "registry:file",
"target": "components/BidProposal.tsx",
"content": "\"use client\";\n\n/**\n * BidProposal — Generado por Concorde\n * Fuente: Figma VOYAGER · \"PropuestaBid v2 / Default\" (3300:12845)\n *\n * Propuesta de bid (glassmorphic): card 278×78 (radio 20) con relleno white 8% +\n * backdrop-blur(5px), borde gradiente y sombra morada. Monto grande blanco con\n * glow morado y caption lila.\n *\n * Animación de \"nuevo bid\" (prop `flash`), con los colores `flashColors` y 4\n * modos `flashMode` (taxonomía de animación de slots):\n * · \"bulb\" → Luminiscente: se prende y apaga como una bombilla (sin giro).\n * · \"spin\" → Rotatoria: un haz/cometa de luz que gira una vez.\n * · \"explode\" → Explosiva: estallido de chispas/partículas hacia afuera.\n * · \"pulse\" → Anticipación/Expansiva: escala elástica + borde neón intermitente.\n * · \"combo\" → Celebración: estallido (explode) + anticipación (pulse) juntos.\n * · \"shine\" → Como \"combo\" pero SIN chispas (solo latido + luz + neón).\n * En todos, el nuevo monto aparece al apagarse/asentarse la luz.\n */\n\nimport { useEffect, useRef, useState } from \"react\";\nimport type { JSX, CSSProperties } from \"react\";\n\nexport type BidProposalFlashMode = \"bulb\" | \"spin\" | \"explode\" | \"pulse\" | \"combo\" | \"shine\";\n\nexport interface BidProposalProps {\n /** Monto grande (blanco) — default \"US$ 6,559\" */\n amount?: string;\n /** Caption inferior (degradado lila) — default \"ENVIADO POR ZAE389\" */\n label?: string;\n /** Contador: al cambiar, dispara la animación de nuevo bid */\n flash?: number;\n /** Colores del efecto de luz (editable). Default: primary (naranja→lila→blanco). */\n flashColors?: string[];\n /** Tipo de efecto. Default \"bulb\". */\n flashMode?: BidProposalFlashMode;\n className?: string;\n}\n\n// Primary (VYStrokes1): naranja-500 → vault-500 → blanco\nconst DEFAULT_FLASH_COLORS = [\"#F4AC59\", \"#8460E5\", \"#ffffff\"];\nconst SPARKS = 12;\n\nconst STYLE_ID = \"concorde-bidproposal-styles\";\n\nconst BIDPROPOSAL_STYLES = `\n@property --pbid-spin { syntax: \"\"; inherits: false; initial-value: 0deg; }\n\n.pbid {\n position: relative;\n box-sizing: border-box;\n width: 278px;\n max-width: 100%;\n height: 78px;\n border-radius: 20px;\n background: rgba(255,255,255,0.08);\n -webkit-backdrop-filter: blur(5px);\n backdrop-filter: blur(5px);\n box-shadow: rgba(20,0,69,0.3) 0px 8px 24px -2px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 2px;\n padding: 8px 16px;\n font-family: var(--vmc-font-display, \"Plus Jakarta Sans\", -apple-system, sans-serif);\n}\n/* Borde gradiente base (anillo 1.5px, centro recortado con mask) */\n.pbid::before {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: inherit;\n 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;\n mask-composite: exclude;\n pointer-events: none;\n z-index: 2;\n}\n/* Luz del borde (común): el fondo/animación dependen del modo */\n.pbid::after {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: inherit;\n padding: 1.5px;\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 opacity: 0;\n z-index: 3;\n filter: drop-shadow(0 0 5px var(--pbid-c3, #ffffff)) drop-shadow(0 0 12px var(--pbid-c2, #8460E5)) drop-shadow(0 0 20px var(--pbid-c1, #F4AC59));\n}\n\n/* Luz interna (común): forma/animación por modo */\n.pbid__lightwrap {\n position: absolute; inset: 0; border-radius: inherit;\n overflow: hidden; pointer-events: none; z-index: 0;\n}\n.pbid__light {\n position: absolute; inset: -15%;\n filter: blur(22px) saturate(1.7) brightness(1.6);\n mix-blend-mode: screen;\n opacity: 0;\n}\n\n/* ===== Modo BULB (mancha horizontal, se prende y apaga sin giro) ===== */\n.pbid--bulb .pbid__light {\n background: linear-gradient(95deg, var(--pbid-c1, #F4AC59) 0%, var(--pbid-c2, #8460E5) 52%, var(--pbid-c3, #ffffff) 100%);\n}\n.pbid--bulb.pbid--flash .pbid__light { animation: pbid-bulb 600ms ease-in-out; }\n.pbid--bulb::after {\n background: linear-gradient(135deg, var(--pbid-c1, #F4AC59) 0%, var(--pbid-c2, #8460E5) 50%, var(--pbid-c3, #ffffff) 100%);\n}\n.pbid--bulb.pbid--flash::after { animation: pbid-onoff 600ms ease-in-out; }\n@keyframes pbid-bulb { 0% { opacity: 0; } 28% { opacity: 1; } 100% { opacity: 0; } }\n@keyframes pbid-onoff { 0% { opacity: 0; } 28% { opacity: 1; } 100% { opacity: 0; } }\n\n/* ===== Modo SPIN (haz/cometa que gira alrededor del borde) ===== */\n.pbid--spin .pbid__light {\n inset: -45%;\n background: conic-gradient(from 0deg, transparent 0deg, var(--pbid-c1, #F4AC59) 60deg, var(--pbid-c2, #8460E5) 150deg, var(--pbid-c3, #ffffff) 230deg, transparent 330deg);\n}\n.pbid--spin.pbid--flash .pbid__light { animation: pbid-spin-light 900ms ease-in-out; }\n.pbid--spin::after {\n background: conic-gradient(from var(--pbid-spin), transparent 0 270deg, var(--pbid-c1, #F4AC59) 315deg, var(--pbid-c2, #8460E5) 340deg, var(--pbid-c3, #ffffff) 356deg, transparent 360deg);\n}\n.pbid--spin.pbid--flash::after { animation: pbid-arc 950ms ease-in-out; }\n@keyframes pbid-spin-light {\n 0% { opacity: 0; transform: rotate(0deg) scale(1.2); }\n 16% { opacity: 1; }\n 70% { opacity: 1; }\n 100% { opacity: 0; transform: rotate(540deg) scale(1.2); }\n}\n@keyframes pbid-arc {\n 0% { opacity: 0; --pbid-spin: 0deg; }\n 12% { opacity: 1; }\n 88% { opacity: 1; }\n 100% { opacity: 0; --pbid-spin: 540deg; }\n}\n\n/* ===== Modo EXPLODE (estallido: flash central + chispas hacia afuera) ===== */\n.pbid--explode .pbid__light {\n background: radial-gradient(circle at 50% 50%, var(--pbid-c3, #ffffff) 0%, var(--pbid-c2, #8460E5) 38%, var(--pbid-c1, #F4AC59) 65%, transparent 80%);\n}\n.pbid--explode.pbid--flash .pbid__light { animation: pbid-burst 500ms ease-out; }\n.pbid--explode::after {\n background: linear-gradient(135deg, var(--pbid-c1, #F4AC59) 0%, var(--pbid-c2, #8460E5) 50%, var(--pbid-c3, #ffffff) 100%);\n}\n.pbid--explode.pbid--flash::after { animation: pbid-onoff 500ms ease-out; }\n@keyframes pbid-burst {\n 0% { opacity: 0; transform: scale(0.3); }\n 16% { opacity: 1; transform: scale(1); }\n 100% { opacity: 0; transform: scale(1.35); }\n}\n.pbid__sparks { position: absolute; inset: 0; pointer-events: none; z-index: 4; }\n.pbid__spark {\n position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;\n border-radius: 50%;\n background: radial-gradient(circle, var(--pbid-c3, #ffffff) 0%, var(--pbid-c1, #F4AC59) 70%, transparent 100%);\n filter: drop-shadow(0 0 4px var(--pbid-c2, #8460E5));\n opacity: 0;\n}\n.pbid--explode.pbid--flash .pbid__spark { animation: pbid-spark 600ms cubic-bezier(0.2,0.7,0.3,1); }\n@keyframes pbid-spark {\n 0% { opacity: 0; transform: rotate(var(--ang)) translateX(6px) scale(0.4); }\n 22% { opacity: 1; }\n 100% { opacity: 0; transform: rotate(var(--ang)) translateX(66px) scale(1); }\n}\n\n/* ===== Modo PULSE (anticipación/expansiva: escala elástica + neón intermitente) ===== */\n.pbid--pulse.pbid--flash { animation: pbid-pulse 700ms cubic-bezier(0.34,1.56,0.64,1); }\n@keyframes pbid-pulse {\n 0% { transform: scale(1); }\n 40% { transform: scale(1.05); }\n 100% { transform: scale(1); }\n}\n.pbid--pulse .pbid__light {\n background: linear-gradient(95deg, var(--pbid-c1, #F4AC59) 0%, var(--pbid-c2, #8460E5) 52%, var(--pbid-c3, #ffffff) 100%);\n}\n.pbid--pulse.pbid--flash .pbid__light { animation: pbid-pulse-light 700ms ease-in-out; }\n.pbid--pulse::after {\n background: linear-gradient(135deg, var(--pbid-c1, #F4AC59) 0%, var(--pbid-c2, #8460E5) 50%, var(--pbid-c3, #ffffff) 100%);\n}\n.pbid--pulse.pbid--flash::after { animation: pbid-flicker 700ms steps(1, end); }\n@keyframes pbid-pulse-light {\n 0% { opacity: 0; } 25% { opacity: 0.9; } 50% { opacity: 0.2; } 75% { opacity: 0.9; } 100% { opacity: 0; }\n}\n@keyframes pbid-flicker {\n 0% { opacity: 0; } 12% { opacity: 1; } 28% { opacity: 0.15; } 44% { opacity: 1; } 60% { opacity: 0.15; } 78% { opacity: 1; } 100% { opacity: 0; }\n}\n\n/* ===== Modos COMBO (estalla + anticipa) y SHINE (combo sin chispas) ===== */\n.pbid--combo.pbid--flash, .pbid--shine.pbid--flash { animation: pbid-combo 800ms cubic-bezier(0.34,1.56,0.64,1); }\n@keyframes pbid-combo {\n 0% { transform: scale(1); box-shadow: rgba(20,0,69,0.3) 0px 8px 24px -2px; }\n 18% {\n transform: scale(1.06);\n box-shadow:\n rgba(20,0,69,0.3) 0px 8px 24px -2px,\n 0 0 20px var(--pbid-c3, #ffffff),\n 0 0 38px var(--pbid-c2, #8460E5),\n 0 0 58px var(--pbid-c1, #F4AC59);\n }\n 40% { transform: scale(1.005); box-shadow: rgba(20,0,69,0.3) 0px 8px 24px -2px; }\n 62% {\n transform: scale(1.045);\n box-shadow:\n rgba(20,0,69,0.3) 0px 8px 24px -2px,\n 0 0 18px var(--pbid-c3, #ffffff),\n 0 0 34px var(--pbid-c2, #8460E5),\n 0 0 52px var(--pbid-c1, #F4AC59);\n }\n 100% { transform: scale(1); box-shadow: rgba(20,0,69,0.3) 0px 8px 24px -2px; }\n}\n.pbid--combo .pbid__light, .pbid--shine .pbid__light {\n background: radial-gradient(circle at 50% 50%, var(--pbid-c3, #ffffff) 0%, var(--pbid-c2, #8460E5) 38%, var(--pbid-c1, #F4AC59) 65%, transparent 80%);\n}\n/* luz interna intermitente (como Anticipa) en vez de un solo estallido */\n.pbid--combo.pbid--flash .pbid__light, .pbid--shine.pbid--flash .pbid__light { animation: pbid-pulse-light 800ms ease-in-out; }\n.pbid--combo::after, .pbid--shine::after {\n background: linear-gradient(135deg, var(--pbid-c1, #F4AC59) 0%, var(--pbid-c2, #8460E5) 50%, var(--pbid-c3, #ffffff) 100%);\n}\n.pbid--combo.pbid--flash::after, .pbid--shine.pbid--flash::after { animation: pbid-flicker 800ms steps(1, end); }\n/* solo \"combo\" lanza chispas */\n.pbid--combo.pbid--flash .pbid__spark { animation: pbid-spark 650ms cubic-bezier(0.2,0.7,0.3,1); }\n\n/* Glow externo (común salvo pulse/combo): la card \"irradia\" al prenderse */\n.pbid--bulb.pbid--flash, .pbid--spin.pbid--flash, .pbid--explode.pbid--flash {\n animation: pbid-glow 600ms ease-in-out;\n}\n@keyframes pbid-glow {\n 0%, 100% { box-shadow: rgba(20,0,69,0.3) 0px 8px 24px -2px; }\n 28% {\n box-shadow:\n rgba(20,0,69,0.3) 0px 8px 24px -2px,\n 0 0 20px var(--pbid-c3, #ffffff),\n 0 0 38px var(--pbid-c2, #8460E5),\n 0 0 58px var(--pbid-c1, #F4AC59);\n }\n}\n\n/* El nuevo monto/label aparecen cuando la luz se apaga (común) */\n.pbid--flash .pbid__amount, .pbid--flash .pbid__label { animation: pbid-appear 600ms ease-out; }\n@keyframes pbid-appear {\n 0%, 38% { opacity: 0; transform: scale(0.94); }\n 100% { opacity: 1; transform: scale(1); }\n}\n\n.pbid__amount {\n position: relative;\n z-index: 1;\n font-size: 36px;\n font-weight: 800;\n line-height: 1;\n letter-spacing: 0.04em;\n color: #ffffff;\n font-variant-numeric: tabular-nums;\n white-space: nowrap;\n text-shadow:\n 0 0 7px rgba(174,166,255,0.7),\n 0 0 16px rgba(107,85,222,0.6),\n 0 0 32px rgba(82,52,189,0.5),\n 0 0 53px rgba(49,0,138,0.4);\n}\n.pbid__label {\n position: relative;\n z-index: 1;\n font-size: 13px;\n font-weight: 700;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n line-height: 1;\n white-space: nowrap;\n background: linear-gradient(160deg, #CFBAFF 0%, #ffffff 35%, #AE8EFF 65%, #CFBAFF 100%);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n -webkit-text-fill-color: transparent;\n filter: drop-shadow(0 0 6px rgba(239,133,46,0.5));\n}\n@media (prefers-reduced-motion: reduce) {\n .pbid--flash, .pbid--flash::after, .pbid--flash .pbid__light, .pbid--flash .pbid__spark,\n .pbid--flash .pbid__amount, .pbid--flash .pbid__label { animation: none; }\n}\n`;\n\nlet _stylesInjected = false;\n\nexport default function BidProposal({\n amount = \"US$ 6,559\",\n label = \"ENVIADO POR ZAE389\",\n flash = 0,\n flashColors = DEFAULT_FLASH_COLORS,\n flashMode = \"bulb\",\n className = \"\",\n}: BidProposalProps): JSX.Element {\n const [flashing, setFlashing] = useState(false);\n const prevFlash = useRef(flash);\n\n const [c1, c2, c3] = flashColors;\n const colorVars = {\n \"--pbid-c1\": c1 ?? DEFAULT_FLASH_COLORS[0],\n \"--pbid-c2\": c2 ?? DEFAULT_FLASH_COLORS[1],\n \"--pbid-c3\": c3 ?? DEFAULT_FLASH_COLORS[2],\n } as CSSProperties;\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 = BIDPROPOSAL_STYLES;\n document.head.appendChild(el);\n }\n _stylesInjected = true;\n }\n\n // Duración de cada modo (debe ser >= la animación CSS más larga de ese modo,\n // o la clase \"pbid--flash\" se quita a medio ciclo y el efecto se corta).\n const FLASH_MS: Record = {\n bulb: 650,\n spin: 1000,\n explode: 650,\n pulse: 750,\n combo: 850,\n shine: 850,\n };\n\n useEffect(\n function onFlash() {\n if (flash === prevFlash.current) return;\n prevFlash.current = flash;\n // reinicia la animación (quita y vuelve a poner la clase)\n setFlashing(false);\n const raf = requestAnimationFrame(() => requestAnimationFrame(() => setFlashing(true)));\n const t = setTimeout(() => setFlashing(false), FLASH_MS[flashMode]);\n return () => {\n cancelAnimationFrame(raf);\n clearTimeout(t);\n };\n },\n [flash, flashMode],\n );\n\n return (\n <>\n \n
![\"VMC](\"/logo-preview.png\"){kind=logo}
;\n\nfunction Bubble({ m }: { m: LiveMsg }): JSX.Element {\n if (m.kind === \"vmc\") {\n return (\n