// === comun.jsx — piezas de play para «Del presupuesto a la factura» ===
// Dibujan las pantallas tal como son hoy en play.dinaup.com (Blazor + Radzen Material + DinaZen):
// paleta de wwwroot/css/var.css (primary #1d73e2, success #3a8707, info #085786), Roboto y los
// iconos Material con el nombre exacto que llevan los .razor. Todo es función de t: nada de estado.
//
// Fuentes de cada texto:
//   Menú ........... Pages/Apps/Pymes/PymesPage.razor:19-46 (MenuSectionU «Preventa», etc.)
//   Pestañas ....... Components/App/ReportTabsU.razor + NotesTabsU.razor (note_stack, lock)
//   Botones verdes . Pymes/Components/ToolBars/ToolBarPresupuestosU.razor / ToolBarPedidosU.razor
//   Ventana TPV .... TPVCore/TPVHeaderBarU, TPVHeader_QuickDatosFiscalesyEnvioBarU, TPVPanelDerechaU, TPVFooterU
//   Flujos ......... DataFlow/DataFlowPresupuestoDeVentaDialog, DataFlowPedidoDialog, InlineDataFlowU

const P = {
  azul:'#1d73e2', azulF:'rgba(0,111,255,0.10)', azulL:'#bcd8ff',
  verde:'#3a8707', info:'#085786', rojo:'#c62828', morado:'#9c75f0',
  tinta:'#1f2937', gris:'#6b7280', gris2:'#9ca3af', borde:'#e3e6ea', fondo:'#f4f5f7', blanco:'#fff',
  ambarF:'#fff3e0', ambarT:'#b45309', okF:'#e3f7d6', okT:'#166534',
};
const ROBOTO = "'Roboto', system-ui, sans-serif";

// Progreso suave de un beat: 0 antes de `desde`, 1 tras `dur` segundos.
const pr = (t, desde, dur = 0.6) => Easing.easeOutCubic(clamp((t - desde) / dur, 0, 1));

function Ico({ n, s = 22, c = P.gris, style }){
  return <span className="material-symbols-outlined" style={{ fontSize:s, color:c, lineHeight:1, width:s, height:s, display:'inline-block', overflow:'hidden', flexShrink:0, ...style }}>{n}</span>;
}

// Texto en Roboto (la familia única de play).
function R({ children, s = 18, w = 400, c = P.tinta, style }){
  return <span style={{ fontFamily:ROBOTO, fontSize:s, fontWeight:w, color:c, ...style }}>{children}</span>;
}

// ── Botón Radzen ──
function Boton({ txt, ico, tipo = 'verde', tam = 18, foco = 0, style }){
  const estilos = {
    verde:   { bg:P.verde, c:'#fff', b:P.verde },
    azul:    { bg:P.azul, c:'#fff', b:P.azul },
    texto:   { bg:'transparent', c:P.azul, b:'transparent' },
    gris:    { bg:'transparent', c:P.gris, b:'transparent' },
    rojo:    { bg:'transparent', c:P.rojo, b:'transparent' },
    contorno:{ bg:'#fff', c:P.verde, b:P.verde },
  }[tipo];
  return (
    <div style={{ display:'inline-flex', alignItems:'center', gap:6, padding:`${tam*0.35}px ${tam*0.7}px`, borderRadius:6,
      background:estilos.bg, border:`1.5px solid ${estilos.b}`, transform:`scale(${1 + foco * 0.06})`,
      boxShadow: foco > 0 ? `0 0 0 ${3 + foco * 3}px rgba(29,115,226,${0.22 * foco})` : 'none', ...style }}>
      {ico && <Ico n={ico} s={tam * 1.15} c={estilos.c}/>}
      {txt && <R s={tam} w={500} c={estilos.c} style={{ letterSpacing:'0.02em' }}>{txt}</R>}
    </div>
  );
}

// ── Cursor: puntos [[t, x, y], …]; clics: [t, …] ──
function Cursor({ t, puntos, clics = [], desde = null }){
  if (desde !== null && t < desde) return null;
  let x = puntos[0][1], y = puntos[0][2];
  for (let i = 1; i < puntos.length; i++) {
    const [t0, x0, y0] = puntos[i-1], [t1, x1, y1] = puntos[i];
    if (t >= t1) { x = x1; y = y1; continue; }
    if (t > t0) { const e = Easing.easeInOutCubic((t - t0) / (t1 - t0)); x = lerp(x0, x1, e); y = lerp(y0, y1, e); }
    break;
  }
  const clicando = clics.some(c => t >= c && t < c + 0.18);
  const anillo = clics.map(c => (t - c)).find(d => d >= 0 && d < 0.6);
  return (
    <React.Fragment>
      {anillo !== undefined && (
        <div style={{ position:'absolute', left:x - 22, top:y - 22, width:44, height:44, borderRadius:100,
          border:`2px solid ${P.azul}`, opacity:1 - anillo / 0.6, transform:`scale(${0.5 + anillo * 1.2})`, zIndex:60 }}/>
      )}
      <div style={{ position:'absolute', left:x, top:y, zIndex:61, transform:`scale(${clicando ? 0.9 : 1})`, transformOrigin:'0 0' }}>
        <svg width="30" height="38" viewBox="0 0 22 28"><path d="M2 2 L2 22 L8 17 L11 24 L14 22 L11 16 L19 16 Z" fill="#fff" stroke="#111" strokeWidth="1.3" strokeLinejoin="round"/></svg>
      </div>
    </React.Fragment>
  );
}

// ── Rótulo inferior: una frase corta que refuerza a la voz ──
function Rotulo({ t, desde, hasta = 1e9, children, top = 1000 }){
  const e = pr(t, desde, 0.6) * (1 - pr(t, hasta, 0.4));
  if (e <= 0) return null;
  return (
    <div style={{ position:'absolute', left:0, right:0, top, textAlign:'center', opacity:e, transform:`translateY(${(1 - e) * 12}px)`, zIndex:40 }}>
      <span className="f-plex" style={{ display:'inline-block', fontSize:30, fontWeight:600, color:'#0F172A', background:'#fff',
        border:`1px solid ${P.borde}`, borderRadius:14, padding:'12px 28px', boxShadow:'0 10px 30px rgba(15,23,42,0.08)' }}>{children}</span>
    </div>
  );
}

// ── Ventana del navegador con la cabecera de play (AppHeaderU) ──
function Ventana({ x = 90, y = 150, w = 1740, h = 840, url, op = 1, dy = 0, atenuar = 0, children }){
  return (
    <div style={{ position:'absolute', left:x, top:y, width:w, height:h, opacity:op * (1 - atenuar * 0.6), transform:`translateY(${dy}px)`,
      borderRadius:14, overflow:'hidden', background:P.fondo, border:`1px solid ${P.borde}`, boxShadow:'0 24px 60px rgba(15,23,42,0.12)',
      filter: atenuar > 0 ? `saturate(${1 - atenuar * 0.45})` : 'none' }}>
      <BrowserChrome url={url} title="Dinaup · Pymes"/>
      <div style={{ height:58, background:'#fff', borderBottom:`1px solid ${P.borde}`, display:'flex', alignItems:'center', padding:'0 20px', gap:18 }}>
        <Ico n="menu" s={28} c={P.gris}/>
        <DinaupLogo size={26}/>
        <div style={{ flex:1 }}/>
        <Ico n="grid_view" s={26} c={P.gris}/>
        <Ico n="dark_mode" s={26} c={P.gris}/>
        <Ico n="help" s={26} c={P.gris}/>
        <div style={{ display:'flex', alignItems:'center', gap:10, marginLeft:8 }}>
          <div style={{ width:38, height:38, borderRadius:100, background:'#dbe7f7', border:`3px solid ${P.azul}`, display:'flex', alignItems:'center', justifyContent:'center' }}>
            <R s={15} w={700} c={P.azul}>MR</R>
          </div>
          <div style={{ display:'flex', flexDirection:'column', lineHeight:1.15 }}>
            <R s={16} w={700}>Marta Ruiz</R><R s={13} c={P.gris}>Administración</R>
          </div>
        </div>
      </div>
      <div style={{ position:'absolute', left:0, right:0, top:134, bottom:0 }}>{children}</div>
    </div>
  );
}

// ── Menú lateral de Pymes (PymesPage.razor) ──
const MENU_PYMES = [
  { txt:'Inicio', ico:'home' }, { txt:'Empresa', ico:'business' },
  { sec:'Preventa', color:P.info },
  { txt:'Presupuestos', ico:'request_quote' }, { txt:'Pedidos', ico:'shopping_cart_checkout' },
  { sec:'Ventas & Ingresos', color:P.verde },
  { txt:'Facturas Emitidas', ico:'receipt_long' }, { txt:'Otros Ingresos', ico:'trending_up' },
  { sec:'Compras & Gastos', color:P.rojo },
  { txt:'Facturas Recibidas', ico:'assignment_returned' }, { txt:'Otros Gastos', ico:'trending_down' }, { txt:'Nóminas', ico:'universal_currency' },
  { sec:'Entidades', color:P.morado },
  { txt:'Clientes', ico:'group' }, { txt:'Proveedores', ico:'work' },
];
function Menu({ activo, focoSeccion = 0, atenuarResto = 0, w = 300 }){
  let enPreventa = false;
  return (
    <div style={{ position:'absolute', left:0, top:0, bottom:0, width:w, background:'#fff', borderRight:`1px solid ${P.borde}`, padding:'14px 12px' }}>
      {MENU_PYMES.map((m, i) => {
        if (m.sec) {
          enPreventa = m.sec === 'Preventa';
          const foco = enPreventa ? focoSeccion : 0;
          return (
            <div key={i} style={{ marginTop:16, marginBottom:4, display:'flex', alignItems:'center', gap:10, height:26, paddingLeft:4,
              opacity: enPreventa ? 1 : 1 - atenuarResto * 0.6 }}>
              <div style={{ width:4, height:20, borderRadius:2, background:m.color }}/>
              <R s={14} w={700} c={m.color} style={{ letterSpacing:'0.08em', textTransform:'uppercase' }}>{m.sec}</R>
              {foco > 0 && <div style={{ flex:1, height:2, background:m.color, opacity:foco * 0.5, transform:`scaleX(${foco})`, transformOrigin:'0 50%' }}/>}
            </div>
          );
        }
        const on = m.txt === activo;
        const op = enPreventa || on ? 1 : 1 - atenuarResto * 0.6;
        return (
          <div key={i} style={{ display:'flex', alignItems:'center', gap:14, height:44, padding:'0 12px', marginLeft: i > 1 ? 10 : 0, borderRadius:8,
            background:on ? P.azulF : 'transparent', opacity:op }}>
            <Ico n={m.ico} s={23} c={on ? P.azul : P.gris}/>
            <R s={17} w={on ? 600 : 400} c={on ? P.azul : '#374151'}>{m.txt}</R>
          </div>
        );
      })}
    </div>
  );
}

// ── Pestañas Radzen (ReportTabsU: la del informe + las de notas, solo icono) ──
function Pestanas({ tabs, activo = 0, s = 17 }){
  return (
    <div style={{ display:'flex', alignItems:'flex-end', gap:4, borderBottom:`1px solid ${P.borde}`, height:52 }}>
      {tabs.map((tb, i) => {
        const on = i === activo;
        return (
          <div key={i} style={{ display:'flex', alignItems:'center', gap:8, padding:'0 18px', height:50, borderBottom:`3px solid ${on ? P.azul : 'transparent'}` }}>
            <Ico n={tb.ico} s={s + 5} c={on ? P.azul : P.gris}/>
            {tb.txt && <R s={s} w={500} c={on ? P.azul : P.gris} style={{ textTransform:'uppercase', letterSpacing:'0.04em' }}>{tb.txt}</R>}
          </div>
        );
      })}
    </div>
  );
}

// ── Tarjeta DinaZen (DnzCard + DnzCardTitle) ──
function Tarjeta({ titulo, ico, sub, derecha, children, style, foco = 0 }){
  return (
    <div style={{ background:'#fff', border:`1px solid ${foco > 0 ? P.azulL : P.borde}`, borderRadius:12, padding:'18px 22px',
      boxShadow: foco > 0 ? `0 16px 40px rgba(15,23,42,${0.06 + foco * 0.06})` : '0 2px 6px rgba(15,23,42,0.04)', ...style }}>
      {titulo && (
        <div style={{ display:'flex', alignItems:'center', gap:10 }}>
          {ico && <Ico n={ico} s={26} c={P.azul}/>}
          <div style={{ display:'flex', flexDirection:'column' }}>
            <R s={21} w={700}>{titulo}</R>
            {sub && <R s={15} c={P.gris}>{sub}</R>}
          </div>
          <div style={{ flex:1 }}/>
          {derecha}
        </div>
      )}
      {children}
    </div>
  );
}

// Badges del DataFlow (.df-badge-pending / .df-badge-done)
function Insignia({ txt, ok = false, e = 1 }){
  return (
    <span style={{ display:'inline-flex', alignItems:'center', gap:5, padding:'5px 14px', borderRadius:99, opacity:e,
      background: ok ? P.okF : P.ambarF, color: ok ? P.okT : P.ambarT, fontFamily:ROBOTO, fontSize:15, fontWeight:600, whiteSpace:'nowrap' }}>
      {ok && <Ico n="check_circle" s={17} c={P.okT}/>}{txt}
    </span>
  );
}

// Estado de un documento (DnzBadgetAutoColor): pastilla de color sobria.
function Estado({ txt, color = P.verde }){
  return <span style={{ display:'inline-block', padding:'3px 11px', borderRadius:6, background:color + '1f', color, fontFamily:ROBOTO, fontSize:14, fontWeight:600 }}>{txt}</span>;
}

// ── Diálogo Radzen (MostrarDialogGenerico + DnzDialogLayout) ──
function Dialogo({ x, y, w, h, titulo, cabecera, e = 1, children, pie = true }){
  if (e <= 0) return null;
  return (
    <div style={{ position:'absolute', left:x, top:y, width:w, height:h, opacity:e, transform:`translateY(${(1 - e) * 24}px)`, zIndex:20,
      background:P.fondo, borderRadius:12, border:`1px solid ${P.borde}`, boxShadow:'0 30px 80px rgba(15,23,42,0.22)', overflow:'hidden',
      display:'flex', flexDirection:'column' }}>
      <div style={{ height:56, background:'#fff', borderBottom:`1px solid ${P.borde}`, display:'flex', alignItems:'center', padding:'0 22px' }}>
        <R s={20} w={500} c={P.gris}>{titulo}</R><div style={{ flex:1 }}/><Ico n="close" s={24} c={P.gris}/>
      </div>
      {cabecera && <div style={{ padding:'16px 24px 0' }}><R s={24} w={700}>{cabecera[0]}</R>{cabecera[1] && <R s={21} c={P.gris}> <span style={{ opacity:0.5 }}>·</span> {cabecera[1]}</R>}</div>}
      <div style={{ flex:1, padding:'16px 24px', display:'flex', flexDirection:'column', gap:16, overflow:'hidden' }}>{children}</div>
      {pie && <div style={{ height:58, display:'flex', justifyContent:'flex-end', alignItems:'center', padding:'0 18px', borderTop:`1px solid ${P.borde}`, background:'#fff' }}>
        <Boton txt="Cerrar" ico="close" tipo="rojo" tam={17}/>
      </div>}
    </div>
  );
}

// ── La ventana de venta (TPVDialog) en presupuesto, venta o pedido ──
// lineas: [{ c, u, p, d, tot, op, tachar }] · origen: 'P-2026-0031' pinta la barra «Presupuesto …»
function VentanaTPV({ x, y, w, h, e = 1, titulo, numero, fecha = '09/10/2026', cliente = 'Reformas Albar, S.L.', origen, focoOrigen = 0,
                      lineas = [], focoCol = null, esVenta = false, total, panel, tabActiva = 'Agregar', focoFlujo = 0, focoAceptar = 0, focoImprimir = 0, aceptarLleno = true, zIndex = 15, pw = 560 }){
  if (e <= 0) return null;
  const tabs = [{ txt:'Agregar', ico:'add' }, { txt:'Archivo', ico:'description' }, { txt:'Parámetros', ico:'info' }, { txt:'Notas', ico:'note_stack' }]
    .concat(esVenta ? [{ txt:'Ticket', ico:'receipt_long' }] : []).concat([{ txt:'Flujo', ico:'account_tree' }]);
  const colF = (k) => focoCol === k ? { background:'rgba(29,115,226,0.10)', borderRadius:6 } : {};
  const PW = pw;
  return (
    <div style={{ position:'absolute', left:x, top:y, width:w, height:h, opacity:e, transform:`translateY(${(1 - e) * 28}px)`, zIndex,
      background:P.fondo, borderRadius:12, border:`1px solid ${P.borde}`, boxShadow:'0 30px 80px rgba(15,23,42,0.22)', overflow:'hidden' }}>
      {/* Barra de la ventana */}
      <div style={{ height:50, background:'#fff', borderBottom:`1px solid ${P.borde}`, display:'flex', alignItems:'center', padding:'0 20px', gap:10 }}>
        <Ico n={esVenta ? 'point_of_sale' : 'request_quote'} s={22} c={P.gris}/>
        <R s={18} w={500} c={P.gris}>{titulo}</R><div style={{ flex:1 }}/>
        <Ico n="remove" s={22} c={P.gris2}/><Ico n="close" s={22} c={P.gris}/>
      </div>
      {/* Cabecera: Datos fiscales · Número · Fecha (TPVHeaderBarU) */}
      <div style={{ display:'flex', gap:14, padding:'14px 18px 8px' }}>
        {[['Datos fiscales', cliente, 330], ['Número', numero || '', 220], ['Fecha', fecha, 170]].map(([l, v, ww], i) => (
          <div key={i} style={{ width:ww, background:'#fff', border:`1px solid ${P.borde}`, borderRadius:8, padding:'6px 12px' }}>
            <R s={13} c={P.gris}>{l}</R>
            <div style={{ height:26, display:'flex', alignItems:'center' }}><R s={18} w={500}>{v}</R></div>
          </div>
        ))}
      </div>
      {/* Barra de origen y datos fiscales (TPVHeader_QuickDatosFiscalesyEnvioBarU) */}
      <div style={{ margin:'0 18px', background:'#fff', border:`1px solid ${P.borde}`, borderRadius:8, padding:'6px 14px', display:'flex', alignItems:'center', gap:22, height:38 }}>
        {origen && (
          <span style={{ display:'inline-flex', alignItems:'center', gap:6, padding:'2px 8px', borderRadius:6,
            background: focoOrigen > 0 ? `rgba(29,115,226,${0.12 * focoOrigen})` : 'transparent', outline: focoOrigen > 0 ? `2px solid rgba(29,115,226,${0.6 * focoOrigen})` : 'none' }}>
            <Ico n={origen.ico || 'request_quote'} s={18} c={P.gris2}/>
            <R s={15} c={P.gris}>{origen.tipo || 'Presupuesto'}</R><R s={15} w={700}>{origen.num}</R>
            <Ico n="open_in_new" s={16} c={P.gris2}/>
          </span>
        )}
        <span style={{ display:'inline-flex', alignItems:'center', gap:6 }}>
          <Ico n="contact_page" s={18} c={P.gris2}/><R s={15} w={700}>B50123456</R><R s={15} c={P.gris}>C/ Mayor 14, 50001 Zaragoza</R>
        </span>
      </div>
      {/* Líneas */}
      <div style={{ position:'absolute', left:18, top:208, right:PW + 30, bottom:74, background:'#fff', border:`1px solid ${P.borde}`, borderRadius:10, padding:'10px 16px' }}>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 80px 120px 80px 130px', gap:8, padding:'6px 4px', borderBottom:`1px solid ${P.borde}` }}>
          {['Concepto', 'Uds', 'Precio', 'Dto.', 'Total'].map((c, i) => <R key={i} s={14} w={600} c={P.gris} style={{ textAlign: i ? 'right' : 'left', textTransform:'uppercase', letterSpacing:'0.05em' }}>{c}</R>)}
        </div>
        {lineas.map((l, i) => (
          <div key={i} style={{ display:'grid', gridTemplateColumns:'1fr 80px 120px 80px 130px', gap:8, padding:'12px 4px', borderBottom:`1px solid #f0f1f3`,
            opacity:l.op === undefined ? 1 : l.op, transform:`translateY(${(1 - (l.op === undefined ? 1 : l.op)) * 10}px)`, textDecoration:l.tachar ? 'line-through' : 'none' }}>
            <R s={18} w={500} c={l.tachar ? P.gris2 : P.tinta}>{l.c}</R>
            <R s={18} style={{ textAlign:'right', ...colF('u') }}>{l.u}</R>
            <R s={18} style={{ textAlign:'right', ...colF('p') }}>{l.p}</R>
            <R s={18} style={{ textAlign:'right', ...colF('d') }}>{l.d}</R>
            <R s={18} w={600} c={l.tachar ? P.gris2 : P.tinta} style={{ textAlign:'right' }}>{l.tot}</R>
          </div>
        ))}
        {total && <div style={{ position:'absolute', right:20, bottom:14, display:'flex', alignItems:'baseline', gap:12 }}>
          <R s={16} c={P.gris} style={{ textTransform:'uppercase', letterSpacing:'0.06em' }}>Total</R><R s={30} w={700}>{total}</R>
        </div>}
      </div>
      {/* Columna derecha (TPVPanelDerechaU) */}
      <div style={{ position:'absolute', right:18, top:208, width:PW, bottom:74, background:'#fff', border:`1px solid ${P.borde}`, borderRadius:10, overflow:'hidden' }}>
        <div style={{ display:'flex', borderBottom:`1px solid ${P.borde}`, height:46, alignItems:'flex-end', padding:'0 4px' }}>
          {tabs.map((tb, i) => {
            const on = tb.txt === tabActiva, fl = tb.txt === 'Flujo' ? focoFlujo : 0;
            return (
              <div key={i} style={{ display:'flex', alignItems:'center', gap:4, padding:'0 8px', height:44, borderBottom:`3px solid ${on ? P.azul : 'transparent'}`,
                background: fl > 0 ? `rgba(29,115,226,${0.10 * fl})` : 'transparent', borderRadius:'6px 6px 0 0' }}>
                <Ico n={tb.ico} s={PW > 600 ? 20 : 17} c={on ? P.azul : P.gris}/>
                <R s={PW > 600 ? 14 : 12} w={500} c={on ? P.azul : P.gris} style={{ textTransform:'uppercase' }}>{tb.txt}</R>
              </div>
            );
          })}
        </div>
        <div style={{ position:'absolute', left:0, right:0, top:46, bottom:0 }}>{panel}</div>
      </div>
      {/* Pie (TPVFooterU) */}
      <div style={{ position:'absolute', left:0, right:0, bottom:0, height:64, background:'#fff', borderTop:`1px solid ${P.borde}`, display:'flex', alignItems:'center', padding:'0 16px', gap:6 }}>
        <Boton txt="Imprimir" ico="print" tipo="gris" tam={17} foco={focoImprimir}/>
        <Boton txt="Flujo" ico="account_tree" tipo="gris" tam={17} foco={focoFlujo && tabActiva !== 'Flujo' ? focoFlujo : 0}/>
        <div style={{ flex:1 }}/>
        {esVenta && <Boton txt="Cobrar" ico="payments" tipo="azul" tam={18}/>}
        <Boton txt="Aceptar" ico="check" tipo={aceptarLleno ? 'verde' : 'contorno'} tam={18} foco={focoAceptar}/>
      </div>
    </div>
  );
}

// Panel «Agregar» de la columna derecha: el buscador del catálogo, de atrezzo.
function PanelAgregar(){
  return (
    <div style={{ padding:16, display:'flex', flexDirection:'column', gap:12 }}>
      <div style={{ height:44, border:`1px solid ${P.borde}`, borderRadius:8, display:'flex', alignItems:'center', gap:8, padding:'0 12px' }}>
        <Ico n="search" s={22} c={P.gris2}/><R s={16} c={P.gris2}>Buscar producto</R>
      </div>
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:10 }}>
        {['Toldos', 'Motores', 'Lonas', 'Servicios', 'Accesorios', 'Repuestos'].map((c, i) => (
          <div key={i} style={{ height:78, borderRadius:8, background:P.fondo, border:`1px solid ${P.borde}`, display:'flex', alignItems:'center', justifyContent:'center' }}>
            <R s={15} c={P.gris}>{c}</R>
          </div>
        ))}
      </div>
    </div>
  );
}

// Los datos del ejemplo: un toldo para Reformas Albar. Cuadran: 640 + 260 + 100 = 1.000 + 21 % = 1.210,00 €.
const LINEAS = [
  { c:'Toldo de brazo 4 m', u:'1', p:'640,00', d:'0 %', tot:'640,00' },
  { c:'Instalación', u:'1', p:'260,00', d:'0 %', tot:'260,00' },
  { c:'Motor con mando', u:'1', p:'100,00', d:'0 %', tot:'100,00' },
];

Object.assign(window, { P, ROBOTO, pr, Ico, R, Boton, Cursor, Rotulo, Ventana, Menu, Pestanas, Tarjeta, Insignia, Estado, Dialogo, VentanaTPV, PanelAgregar, LINEAS });