// ── ARGOLLAS DE MATRIMONIO v3 — Estilos universales + Recibo ──

function Argollas() {
  const { useState } = React;

  const [paso, setPaso] = useState(1);
  const [config, setConfig] = useState({
    estilo:'Clásica', metal:'Oro 18K', acabado:'Pulido',
    anchoEl:5, anchoElla:4, tallaEl:20, tallaElla:14,
    grabadoEl:'', grabadoElla:'', tipoGrabado:'Interior', fuenteGrabado:'Script',
    piedra:'Sin piedra', quilates:'',
    clienteNombre:'', clienteRut:'', clienteTelefono:'', clienteWhatsapp:'', clienteEmail:'',
    fechaEntrega:'', senal:0, saldoPagado:0, tiendaOrigen:'navarro', tecnico:'', notas:'',
    precioManual: null,
  });
  const [cotizaciones, setCotiz] = useState(() => lsGet('argollas_cotiz', [
    { id:'ARG-001', cliente:'Carlos Errázuriz', estilo:'Clásica', metal:'Oro 18K',
      ancho:'6mm/5mm', tallas:'22/14', grabado:'Coordenadas Santa Cruz', precio:480000,
      estado:'En producción', fechaEntrega:'2026-05-10', senal:200000 },
  ]));
  const [modalRecibo, setModalRecibo] = useState(null);

  // ── Estilos UNIVERSALES de argollas ──────────────────────
  const ESTILOS = [
    { id:'Clásica',          desc:'Perfil plano, liso, atemporal. El más vendido.', icon:'⭕' },
    { id:'Comfort Fit',      desc:'Interior redondeado para mayor comodidad al usar.', icon:'🔵' },
    { id:'Media Caña',       desc:'Perfil semicircular exterior. Clásico europeo.', icon:'〇' },
    { id:'Plana Biselada',   desc:'Bordes biscelados en 45°. Acabado moderno.', icon:'◻' },
    { id:'Doble Tono',       desc:'Combinación de dos metales o acabados contrastantes.', icon:'◑' },
    { id:'Trenzada',         desc:'Trenzado de dos o tres hilos del mismo metal.', icon:'🌀' },
    { id:'Martillada',       desc:'Superficie trabajada a martillo, textura rústica exclusiva.', icon:'🔨' },
    { id:'Con Pavé',         desc:'Piedras engastadas a lo largo del aro (pavé/micro-pavé).', icon:'💎' },
    { id:'Solitario Central',desc:'Una piedra central prominente flanqueada por aro liso.', icon:'💍' },
    { id:'Eternidad',        desc:'Piedras rodeando todo el aro. Total eternity band.', icon:'✦' },
    { id:'Milgrain',         desc:'Borde trabajado con pequeños granos metálicos (antique).', icon:'〜' },
    { id:'Grabado Exterior', desc:'Diseño grabado en la superficie exterior visible.', icon:'✒' },
    { id:'Personalizada',    desc:'Diseño completamente a medida por el cliente.', icon:'✏️' },
  ];

  const METALES_ARG = [
    { id:'Oro 18K',         precio: PRECIO_METALES['Oro 18K']?.valor || 76800,       color:'#c9a84c' },
    { id:'Oro 14K',         precio: PRECIO_METALES['Oro 14K']?.valor || 59700,       color:'#d4a843' },
    { id:'Oro Blanco 18K',  precio: PRECIO_METALES['Oro Blanco 18K']?.valor || 78500, color:'#e8e8e8' },
    { id:'Oro Rosado 18K',  precio: PRECIO_METALES['Oro Rosado 18K']?.valor || 77200, color:'#d4906a' },
    { id:'Platino 950',     precio: PRECIO_METALES['Platino 950']?.valor || 29460,   color:'#d0d8e0' },
    { id:'Plata 925',       precio: PRECIO_METALES['Plata 925']?.valor || 960,       color:'#b0b8c8' },
    { id:'Paladio',         precio: PRECIO_METALES['Paladio']?.valor || 28800,       color:'#c8d0d8' },
    { id:'Titanio',         precio: 4500,                                             color:'#78909c' },
    { id:'Acero Inox.',     precio: 1200,                                             color:'#90a4ae' },
  ];

  const ACABADOS   = ['Pulido','Mate','Satinado','Martillado','Cepillado','Combinado','Texturizado'];
  const PIEDRAS    = ['Sin piedra','Diamante','Diamante laboratorio','Rubí','Esmeralda','Zafiro','Moissanite','Circón','Cuarzo','Otro'];
  const FUENTES    = ['Script','Serif','Sans','Bloque','Cursiva'];

  const metalInfo  = METALES_ARG.find(m => m.id === config.metal) || METALES_ARG[0];
  const gramosEl   = config.anchoEl * 0.45 * (config.tallaEl * 0.032);
  const gramosElla = config.anchoElla * 0.38 * (config.tallaElla * 0.032);
  const costoMetal = Math.round((gramosEl + gramosElla) * metalInfo.precio);
  const costoMO    = config.estilo==='Personalizada'?150000:config.estilo==='Con Pavé'||config.estilo==='Eternidad'?140000:
                     config.estilo==='Solitario Central'?120000:config.estilo==='Milgrain'||config.estilo==='Grabado Exterior'?85000:
                     config.estilo==='Martillada'?80000:config.estilo==='Trenzada'||config.estilo==='Doble Tono'?75000:60000;
  const costoGrab  = (config.grabadoEl||config.grabadoElla) ? 20000 : 0;
  const costoBase  = costoMetal + costoMO + costoGrab;
  const costoTotal = config.precioManual !== null ? config.precioManual : Math.round(costoBase * 1.65);
  const saldo      = costoTotal - config.senal;

  function set(k, v) { setConfig(c => ({ ...c, [k]: v })); }

  function guardar() {
    const id = `ARG-${String(Date.now()).slice(-5)}`;
    const nueva = {
      id, fecha: hoy(),
      cliente: config.clienteNombre||'Sin nombre', rut: config.clienteRut, telefono: config.clienteTelefono,
      whatsapp: config.clienteWhatsapp, email: config.clienteEmail,
      estilo: config.estilo, metal: config.metal, acabado: config.acabado,
      ancho: `${config.anchoEl}mm/${config.anchoElla}mm`,
      tallas: `${config.tallaEl}/${config.tallaElla}`,
      grabado: (config.grabadoEl||config.grabadoElla)||'Sin grabado',
      tipoGrabado: config.tipoGrabado, fuenteGrabado: config.fuenteGrabado,
      piedra: config.piedra, quilates: config.quilates,
      precio: costoTotal, estado:'Presupuesto',
      fechaEntrega: config.fechaEntrega, senal: config.senal,
      tiendaOrigen: config.tiendaOrigen, tecnico: config.tecnico, notas: config.notas,
    };
    const nuevas = [nueva, ...cotizaciones];
    setCotiz(nuevas); lsSet('argollas_cotiz', nuevas);
    setModalRecibo(nueva);
  }

  function imprimirRecibo(c) {
    imprimirReciboTaller({
      titulo: 'COTIZACIÓN ARGOLLAS',
      folio: c.id, fecha: c.fecha || hoy(),
      cliente: c.cliente, rut: c.rut, telefono: c.telefono || c.whatsapp,
      tienda: TIENDAS.find(t => t.id === c.tiendaOrigen)?.nombre || '',
      items: [
        { label: `Argollas ${c.estilo} — ${c.metal}`, detalle: `${c.ancho} · Tallas ${c.tallas} · Acabado ${c.acabado}` },
        { label: `Grabado interior: ÉL: "${c.grabado?.split('/')[0]||'—'}" ELLA: "${c.grabado?.split('/')[1]||'—'}"`, detalle: `${c.tipoGrabado} · ${c.fuenteGrabado}` },
        c.piedra && c.piedra !== 'Sin piedra' ? { label: `Piedra: ${c.piedra}${c.quilates?' '+c.quilates:''}`, detalle:'' } : null,
        c.notas ? { label: 'Observaciones:', detalle: c.notas } : null,
      ].filter(Boolean),
      total: c.precio, senal: c.senal, saldo: c.precio - c.senal,
      tecnico: c.tecnico, fechaEntrega: c.fechaEntrega,
      notas: null,
    });
  }

  const S = argStyles;
  const totalPasos = 4;

  function RingPreview({ ancho, metal:m, acabado, grabado, label }) {
    const info = METALES_ARG.find(x => x.id === m) || METALES_ARG[0];
    return (
      <div style={{ textAlign:'center' }}>
        <svg width="110" height="110" viewBox="0 0 110 110">
          <defs>
            <radialGradient id={`rg${label}`} cx="35%" cy="30%">
              <stop offset="0%" stopColor="white" stopOpacity="0.45"/>
              <stop offset="100%" stopColor="black" stopOpacity="0.2"/>
            </radialGradient>
          </defs>
          <ellipse cx="55" cy="100" rx="32" ry="5" fill="rgba(0,0,0,0.35)"/>
          <circle cx="55" cy="52" r="44" fill="none" stroke={info.color}
            strokeWidth={Math.max(6, ancho * 1.8)}
            style={{ filter:`drop-shadow(0 0 10px ${info.color}55)` }}/>
          <circle cx="55" cy="52" r="44" fill="none" stroke="white"
            strokeWidth="1.5" strokeOpacity="0.35" strokeDasharray="50 230" strokeDashoffset="-25"/>
          {acabado === 'Martillado' && (
            <circle cx="55" cy="52" r="44" fill="none" stroke={info.color}
              strokeWidth="1" strokeOpacity="0.5" strokeDasharray="2 4"/>
          )}
          {grabado && (
            <text x="55" y="56" textAnchor="middle" fontSize="6.5" fill={info.color} opacity="0.85"
              fontFamily="Cormorant Garamond,serif" fontStyle="italic">{grabado.slice(0,16)}</text>
          )}
        </svg>
        <div style={{ color:'var(--cream-3)', fontSize:'11px', marginTop:'2px' }}>{label}</div>
        <div style={{ color:'var(--gold)', fontSize:'10px' }}>{ancho}mm · {m}</div>
      </div>
    );
  }

  return (
    <div style={{ display:'flex', height:'100%', overflow:'hidden' }}>
      <div style={{ flex:1, display:'flex', flexDirection:'column', overflow:'hidden' }}>

        {/* Progress */}
        <div style={S.progress}>
          {['Estilo & Metal','Medidas & Tallas','Grabado & Detalles','Cliente & Cierre'].map((p, i) => (
            <div key={p} onClick={() => setPaso(i+1)}
              style={{ ...S.progStep, ...(paso===i+1 ? S.progStepAct : {}), ...(paso>i+1 ? { color:'var(--cream-2)', cursor:'pointer' } : {}) }}>
              <div style={{ ...S.progNum, ...(paso===i+1 ? S.progNumAct : paso>i+1 ? { background:'var(--gold)', color:'#0c0908' } : {}) }}>
                {paso > i+1 ? '✓' : i+1}
              </div>
              <span style={{ fontSize:'11px' }}>{p}</span>
            </div>
          ))}
        </div>

        <div style={{ flex:1, overflowY:'auto', padding:'20px', display:'flex', gap:'20px' }}>
          <div style={{ flex:1 }}>

            {/* PASO 1: Estilo */}
            {paso === 1 && (
              <div className="fade-in">
                <div style={S.pasoTitle}>Estilo de Argolla</div>
                <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:'7px', marginBottom:'20px' }}>
                  {ESTILOS.map(e => (
                    <button key={e.id} onClick={() => set('estilo', e.id)}
                      style={{ ...S.estiloCard, ...(config.estilo===e.id ? S.estiloCardAct : {}) }}>
                      <div style={{ fontSize:'20px', marginBottom:'4px' }}>{e.icon}</div>
                      <div style={{ fontWeight:600, fontSize:'12px', color:'var(--cream)' }}>{e.id}</div>
                      <div style={{ color:'var(--cream-3)', fontSize:'9px', marginTop:'2px', lineHeight:'1.3' }}>{e.desc}</div>
                    </button>
                  ))}
                </div>
                <div style={S.pasoTitle}>Metal</div>
                <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:'6px', marginBottom:'16px' }}>
                  {METALES_ARG.map(m => (
                    <button key={m.id} onClick={() => set('metal', m.id)}
                      style={{ ...S.metalCard, ...(config.metal===m.id ? { ...S.metalCardAct, borderColor:m.color } : {}) }}>
                      <div style={{ width:'11px', height:'11px', borderRadius:'50%', background:m.color, flexShrink:0 }}/>
                      <div style={{ flex:1, textAlign:'left' }}>
                        <div style={{ color:'var(--cream)', fontSize:'12px', fontWeight:500 }}>{m.id}</div>
                        <div style={{ color:'var(--cream-3)', fontSize:'10px' }}>{clp(m.precio)}/g spot</div>
                      </div>
                    </button>
                  ))}
                </div>
                <div style={S.pasoTitle}>Acabado</div>
                <div style={{ display:'flex', gap:'5px', flexWrap:'wrap' }}>
                  {ACABADOS.map(a => (
                    <button key={a} onClick={() => set('acabado', a)}
                      style={{ ...calcStyles.chip, ...(config.acabado===a ? calcStyles.chipAct : {}) }}>{a}</button>
                  ))}
                </div>
              </div>
            )}

            {/* PASO 2: Medidas */}
            {paso === 2 && (
              <div className="fade-in">
                <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:'20px' }}>
                  {[{ label:'ÉL', anchoKey:'anchoEl', tallaKey:'tallaEl' }, { label:'ELLA', anchoKey:'anchoElla', tallaKey:'tallaElla' }].map(p => (
                    <div key={p.label} style={S.medidasCard}>
                      <div style={{ fontFamily:'Cormorant Garamond,serif', fontSize:'18px', fontWeight:600, color:'var(--cream)', marginBottom:'14px', textAlign:'center' }}>{p.label}</div>
                      <div style={{ marginBottom:'14px' }}>
                        <div style={{ display:'flex', justifyContent:'space-between', marginBottom:'6px' }}>
                          <span style={{ color:'var(--cream-3)', fontSize:'12px' }}>Ancho</span>
                          <span style={{ color:'var(--gold)', fontWeight:700 }}>{config[p.anchoKey]}mm</span>
                        </div>
                        <input type="range" min="2" max="12" step="0.5" value={config[p.anchoKey]}
                          onChange={e => set(p.anchoKey, parseFloat(e.target.value))}
                          style={{ width:'100%', accentColor:'var(--gold)' }}/>
                        <div style={{ display:'flex', justifyContent:'space-between', fontSize:'10px', color:'var(--cream-3)' }}><span>2mm</span><span>12mm</span></div>
                      </div>
                      <div>
                        <div style={{ display:'flex', justifyContent:'space-between', marginBottom:'6px' }}>
                          <span style={{ color:'var(--cream-3)', fontSize:'12px' }}>Talla</span>
                          <span style={{ color:'var(--gold)', fontWeight:700 }}>Talla {config[p.tallaKey]}</span>
                        </div>
                        <input type="range" min="6" max="32" step="1" value={config[p.tallaKey]}
                          onChange={e => set(p.tallaKey, parseInt(e.target.value))}
                          style={{ width:'100%', accentColor:'var(--gold)' }}/>
                        <div style={{ display:'flex', justifyContent:'space-between', fontSize:'10px', color:'var(--cream-3)' }}><span>6</span><span>32</span></div>
                        <div style={{ textAlign:'center', fontSize:'10px', color:'var(--cream-3)', marginTop:'4px' }}>
                          ⌀ {(config[p.tallaKey] * 0.032 + 1.2).toFixed(2)}mm interior
                        </div>
                      </div>
                      <div style={{ background:'var(--surface)', borderRadius:'6px', padding:'7px', marginTop:'10px', fontSize:'10px', color:'var(--cream-3)', lineHeight:'1.6' }}>
                        💡 Mujer: 10–16 · Hombre: 18–24
                      </div>
                    </div>
                  ))}
                </div>
                <div style={{ marginTop:'16px' }}>
                  <div style={S.pasoTitle}>Piedra preciosa</div>
                  <div style={{ display:'flex', gap:'5px', flexWrap:'wrap' }}>
                    {PIEDRAS.map(p => (
                      <button key={p} onClick={() => set('piedra', p)}
                        style={{ ...calcStyles.chip, ...(config.piedra===p ? calcStyles.chipAct : {}) }}>{p}</button>
                    ))}
                  </div>
                  {config.piedra !== 'Sin piedra' && (
                    <input style={{ ...calcStyles.input, marginTop:'8px', width:'100%' }}
                      placeholder="Especificar quilates / tamaño (ej: 0.3ct D-VS1)"
                      value={config.quilates} onChange={e => set('quilates', e.target.value)}/>
                  )}
                </div>
              </div>
            )}

            {/* PASO 3: Grabado */}
            {paso === 3 && (
              <div className="fade-in">
                <div style={S.pasoTitle}>Texto del Grabado</div>
                <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:'16px', marginBottom:'16px' }}>
                  {[{ label:'Grabado ÉL', key:'grabadoEl' }, { label:'Grabado ELLA', key:'grabadoElla' }].map(g => (
                    <div key={g.key} style={S.medidasCard}>
                      <div style={{ color:'var(--cream-3)', fontSize:'11px', marginBottom:'6px' }}>{g.label}</div>
                      <input style={calcStyles.input} placeholder="Ej: Para siempre · 14.02.2026"
                        value={config[g.key]} onChange={e => set(g.key, e.target.value)} maxLength={30}/>
                      <div style={{ fontSize:'10px', color:'var(--cream-3)', marginTop:'4px' }}>{config[g.key].length}/30</div>
                      {config[g.key] && (
                        <div style={{ marginTop:'10px', background:'var(--surface)', borderRadius:'6px', padding:'8px', textAlign:'center' }}>
                          <div style={{ fontFamily: config.fuenteGrabado==='Script'?'Cormorant Garamond,serif':config.fuenteGrabado==='Serif'?'Georgia,serif':'Inter,sans-serif', fontSize:'13px', color:'var(--gold)', fontStyle: config.fuenteGrabado==='Script'||config.fuenteGrabado==='Cursiva'?'italic':'normal', letterSpacing: config.fuenteGrabado==='Bloque'?'3px':'0.5px' }}>
                            {config[g.key]}
                          </div>
                        </div>
                      )}
                    </div>
                  ))}
                </div>
                <div style={S.pasoTitle}>Ubicación del Grabado</div>
                <div style={{ display:'flex', gap:'6px', marginBottom:'16px' }}>
                  {['Interior','Exterior','Ambos'].map(u => (
                    <button key={u} onClick={() => set('tipoGrabado', u)}
                      style={{ ...calcStyles.chip, ...(config.tipoGrabado===u ? calcStyles.chipAct : {}), flex:1, textAlign:'center' }}>{u}</button>
                  ))}
                </div>
                <div style={S.pasoTitle}>Tipografía</div>
                <div style={{ display:'flex', gap:'6px', flexWrap:'wrap' }}>
                  {FUENTES.map(f => (
                    <button key={f} onClick={() => set('fuenteGrabado', f)}
                      style={{ ...calcStyles.chip, ...(config.fuenteGrabado===f ? calcStyles.chipAct : {}) }}>
                      <span style={{ fontFamily: f==='Script'||f==='Cursiva'?'Cormorant Garamond,serif':f==='Serif'?'Georgia,serif':'Inter,sans-serif', fontStyle:f==='Script'||f==='Cursiva'?'italic':'normal', fontSize:'13px' }}>{f}</span>
                    </button>
                  ))}
                </div>
                <div style={{ marginTop:'16px' }}>
                  <div style={S.pasoTitle}>Observaciones / Notas especiales</div>
                  <textarea rows={3} style={{ ...calcStyles.input, resize:'vertical' }}
                    placeholder="Detalles especiales, instrucciones para taller…"
                    value={config.notas} onChange={e => set('notas', e.target.value)}/>
                </div>
              </div>
            )}

            {/* PASO 4: Cliente */}
            {paso === 4 && (
              <div className="fade-in">
                <div style={S.pasoTitle}>Datos del Cliente</div>
                <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:'10px', marginBottom:'16px' }}>
                  {[
                    { label:'Nombre completo', key:'clienteNombre', ph:'Ej: Carlos y María' },
                    { label:'RUT',              key:'clienteRut',    ph:'12.345.678-9' },
                    { label:'Teléfono',         key:'clienteTelefono', ph:'+56 9 xxxx xxxx' },
                    { label:'WhatsApp',         key:'clienteWhatsapp', ph:'+56 9 xxxx xxxx' },
                    { label:'Correo electrónico', key:'clienteEmail', ph:'correo@email.com' },
                    { label:'Fecha entrega',    key:'fechaEntrega',  ph:'', type:'date' },
                  ].map(f => (
                    <div key={f.key}>
                      <div style={{ fontSize:'11px', color:'var(--cream-3)', marginBottom:'4px' }}>{f.label}</div>
                      <input type={f.type||'text'} placeholder={f.ph||''} style={calcStyles.input}
                        value={config[f.key]} onChange={e => set(f.key, e.target.value)}/>
                    </div>
                  ))}
                </div>
                <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:'10px', marginBottom:'16px' }}>
                  <div>
                    <div style={{ fontSize:'11px', color:'var(--cream-3)', marginBottom:'4px' }}>Artesano asignado</div>
                    <select style={{ ...invStyles.select, width:'100%' }} value={config.tecnico} onChange={e => set('artesano', e.target.value)}>
                      <option value="">Sin asignar</option>
                      {TECNICOS.map(t => <option key={t}>{t}</option>)}
                    </select>
                  </div>
                  <div>
                    <div style={{ fontSize:'11px', color:'var(--cream-3)', marginBottom:'4px' }}>Tienda de origen</div>
                    <select style={{ ...invStyles.select, width:'100%' }} value={config.tiendaOrigen} onChange={e => set('tiendaOrigen', e.target.value)}>
                      {TIENDAS.map(t => <option key={t.id} value={t.id}>{t.sigla} — {t.nombre.split(' ').slice(0,3).join(' ')}</option>)}
                    </select>
                  </div>
                </div>

                {/* Precio editable */}
                <div style={{ background:'var(--surface)', borderRadius:'10px', padding:'14px', marginBottom:'14px' }}>
                  <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:'8px' }}>
                    <div style={{ fontSize:'11px', color:'var(--cream-3)', fontWeight:600 }}>PRECIO TOTAL</div>
                    <button onClick={() => set('precioManual', config.precioManual !== null ? null : costoTotal)}
                      style={{ ...invStyles.btnEdit, fontSize:'10px' }}>
                      {config.precioManual !== null ? '↺ Usar calc.' : '✏ Editar precio'}
                    </button>
                  </div>
                  {config.precioManual !== null ? (
                    <input type="number" style={{ ...calcStyles.input, fontSize:'20px', fontWeight:700, color:'var(--gold)', textAlign:'center' }}
                      value={config.precioManual} onChange={e => set('precioManual', parseInt(e.target.value)||0)}/>
                  ) : (
                    <div style={{ fontSize:'26px', fontWeight:700, color:'var(--gold)', textAlign:'center' }}>{clp(costoTotal)}</div>
                  )}
                </div>

                <div>
                  <div style={{ display:'flex', justifyContent:'space-between', marginBottom:'4px' }}>
                    <span style={{ fontSize:'11px', color:'var(--cream-3)' }}>Abono recibido</span>
                    <span style={{ fontSize:'11px', color:'var(--cream-3)' }}>Total: {clp(costoTotal)}</span>
                  </div>
                  <input type="number" style={calcStyles.input} placeholder="0"
                    value={config.senal} onChange={e => set('abono', parseInt(e.target.value)||0)}/>
                  {config.senal > 0 && (
                    <div style={{ marginTop:'6px', color:'#27ae60', fontSize:'12px' }}>
                      Saldo pendiente: {clp(saldo)}
                    </div>
                  )}
                </div>
              </div>
            )}

            {/* Navegación */}
            <div style={{ display:'flex', gap:'8px', marginTop:'24px' }}>
              {paso > 1 && (
                <button onClick={() => setPaso(p => p-1)}
                  style={{ ...invStyles.btnEdit, padding:'10px 20px', fontSize:'13px' }}>← Anterior</button>
              )}
              {paso < 4 && (
                <button onClick={() => setPaso(p => p+1)}
                  style={{ ...posStyles.cobrarBtn, margin:0, flex:1 }}>Siguiente →</button>
              )}
              {paso === 4 && (
                <button onClick={guardar}
                  style={{ ...posStyles.cobrarBtn, margin:0, flex:1 }}>✦ Guardar y Emitir Recibo</button>
              )}
            </div>
          </div>

          {/* Preview */}
          <div style={S.previewCol}>
            <div style={{ fontFamily:'Cormorant Garamond,serif', fontSize:'15px', fontWeight:600, color:'var(--cream)', marginBottom:'16px', textAlign:'center' }}>Vista Previa</div>
            <div style={{ display:'flex', justifyContent:'center', gap:'20px', marginBottom:'18px' }}>
              <RingPreview ancho={config.anchoEl} metal={config.metal} acabado={config.acabado} grabado={config.grabadoEl} label="ÉL"/>
              <RingPreview ancho={config.anchoElla} metal={config.metal} acabado={config.acabado} grabado={config.grabadoElla} label="ELLA"/>
            </div>
            <div style={{ background:'var(--surface)', borderRadius:'10px', padding:'12px' }}>
              <div style={{ fontSize:'10px', color:'var(--cream-3)', marginBottom:'7px' }}>COTIZACIÓN ESTIMADA</div>
              {[
                { l:'Costo metal', v:clp(costoMetal) },
                { l:'Mano de obra', v:clp(costoMO) },
                { l:'Grabado', v:clp(costoGrab) },
                { l:'Margen 65%', v:'incluido' },
              ].map(r => (
                <div key={r.l} style={{ display:'flex', justifyContent:'space-between', fontSize:'11px', marginBottom:'4px' }}>
                  <span style={{ color:'var(--cream-3)' }}>{r.l}</span>
                  <span style={{ color:'var(--cream)' }}>{r.v}</span>
                </div>
              ))}
              <div style={{ display:'flex', justifyContent:'space-between', fontWeight:700, fontSize:'17px', borderTop:'1px solid var(--border)', paddingTop:'7px', marginTop:'7px' }}>
                <span style={{ color:'var(--cream)' }}>TOTAL PAR</span>
                <span style={{ color:'var(--gold)' }}>{clp(costoTotal)}</span>
              </div>
              {config.precioManual !== null && (
                <div style={{ fontSize:'9px', color:'var(--gold)', textAlign:'right', marginTop:'2px' }}>Precio editado manualmente</div>
              )}
              {config.senal > 0 && (
                <div style={{ display:'flex', justifyContent:'space-between', fontSize:'12px', marginTop:'5px' }}>
                  <span style={{ color:'var(--cream-3)' }}>Saldo</span>
                  <span style={{ color:'#27ae60' }}>{clp(saldo)}</span>
                </div>
              )}
            </div>
            <div style={{ marginTop:'10px', fontSize:'10px', color:'var(--cream-3)', lineHeight:'1.9' }}>
              {config.estilo && <div>Estilo: <span style={{ color:'var(--cream)' }}>{config.estilo}</span></div>}
              {config.metal  && <div>Metal: <span style={{ color:'var(--cream)' }}>{config.metal} · {config.acabado}</span></div>}
              <div>ÉL: <span style={{ color:'var(--cream)' }}>T{config.tallaEl} · {config.anchoEl}mm</span></div>
              <div>ELLA: <span style={{ color:'var(--cream)' }}>T{config.tallaElla} · {config.anchoElla}mm</span></div>
            </div>
          </div>
        </div>
      </div>

      {/* Lista cotizaciones */}
      <div style={S.cotizPanel}>
        <div style={{ fontFamily:'Cormorant Garamond,serif', fontSize:'15px', fontWeight:600, color:'var(--cream)', marginBottom:'10px', paddingBottom:'7px', borderBottom:'1px solid var(--border)' }}>
          Pedidos Argollas
        </div>
        {cotizaciones.map(c => (
          <div key={c.id} style={{ background:'var(--surface)', borderRadius:'9px', padding:'10px', marginBottom:'7px', border:'1px solid var(--border)' }}>
            <div style={{ display:'flex', justifyContent:'space-between', marginBottom:'3px' }}>
              <span style={{ color:'var(--cream)', fontWeight:500, fontSize:'11px' }}>{c.cliente}</span>
              <span style={estadoBadge(c.estado==='En producción'?'En proceso':c.estado==='Presupuesto'?'Recibido':'Entregado')}>{c.estado}</span>
            </div>
            <div style={{ color:'var(--cream-3)', fontSize:'9px', lineHeight:'1.7' }}>
              {c.estilo} · {c.metal}<br/>
              {c.ancho} · T{c.tallas}<br/>
              {c.fechaEntrega && <>Entrega: {c.fechaEntrega}<br/></>}
            </div>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginTop:'6px' }}>
              <span style={{ color:'var(--gold)', fontWeight:700, fontSize:'13px' }}>{clp(c.precio)}</span>
              <button onClick={() => imprimirRecibo(c)}
                style={{ ...invStyles.btnEdit, fontSize:'9px', padding:'3px 7px' }}>
                🖨 Recibo
              </button>
            </div>
          </div>
        ))}
      </div>

      {/* Modal recibo */}
      {modalRecibo && (
        <div style={posStyles.overlay} onClick={e => e.target===e.currentTarget && setModalRecibo(null)}>
          <div style={{ ...posStyles.modalBox, maxWidth:'360px', textAlign:'center' }}>
            <div style={{ color:'var(--gold)', fontSize:'32px', marginBottom:'8px' }}>✦</div>
            <div style={{ fontFamily:'Cormorant Garamond,serif', fontSize:'20px', fontWeight:600, color:'var(--cream)', marginBottom:'4px' }}>
              Cotización Guardada
            </div>
            <div style={{ color:'var(--cream-3)', fontSize:'12px', marginBottom:'20px' }}>
              {modalRecibo.id} · {modalRecibo.cliente}
            </div>
            <div style={{ background:'var(--surface)', borderRadius:'10px', padding:'14px', marginBottom:'16px', textAlign:'left' }}>
              <div style={{ display:'flex', justifyContent:'space-between', fontSize:'12px', marginBottom:'4px' }}>
                <span style={{ color:'var(--cream-3)' }}>Total par</span>
                <span style={{ color:'var(--gold)', fontWeight:700 }}>{clp(modalRecibo.precio)}</span>
              </div>
              <div style={{ display:'flex', justifyContent:'space-between', fontSize:'12px' }}>
                <span style={{ color:'var(--cream-3)' }}>Abono</span>
                <span style={{ color:'#27ae60' }}>{clp(modalRecibo.senal)}</span>
              </div>
            </div>
            <button onClick={() => { imprimirRecibo(modalRecibo); setModalRecibo(null); }}
              style={{ ...posStyles.cobrarBtn, width:'100%', marginBottom:'8px' }}>
              🖨 Imprimir Recibo (3 copias)
            </button>
            <button onClick={() => setModalRecibo(null)}
              style={{ ...invStyles.btnEdit, width:'100%', padding:'10px', textAlign:'center' }}>
              Cerrar
            </button>
          </div>
        </div>
      )}
    </div>
  );
}

const argStyles = {
  progress:{ display:'flex', padding:'10px 18px', borderBottom:'1px solid var(--border)', gap:'4px', flexShrink:0, background:'var(--bg-card)' },
  progStep:{ display:'flex', alignItems:'center', gap:'7px', flex:1, color:'var(--cream-3)', cursor:'default', fontSize:'11px' },
  progStepAct:{ color:'var(--cream)' },
  progNum:{ width:'20px', height:'20px', borderRadius:'50%', background:'var(--surface)', border:'1px solid var(--border)', display:'flex', alignItems:'center', justifyContent:'center', fontSize:'10px', fontWeight:700, flexShrink:0 },
  progNumAct:{ background:'var(--gold)', border:'none', color:'#0c0908' },
  pasoTitle:{ fontFamily:'Cormorant Garamond,serif', fontSize:'15px', fontWeight:600, color:'var(--cream)', marginBottom:'9px', marginTop:'14px' },
  estiloCard:{ background:'var(--surface)', border:'1px solid var(--border)', borderRadius:'9px', padding:'10px 7px', cursor:'pointer', textAlign:'center', transition:'all 0.12s', fontFamily:'Inter,sans-serif' },
  estiloCardAct:{ border:'1px solid var(--gold)', background:'var(--gold-dim)' },
  metalCard:{ display:'flex', alignItems:'center', gap:'8px', background:'var(--surface)', border:'1px solid var(--border)', borderRadius:'7px', padding:'9px', cursor:'pointer', transition:'all 0.12s', fontFamily:'Inter,sans-serif' },
  metalCardAct:{ background:'var(--gold-dim)' },
  medidasCard:{ background:'var(--bg-card)', border:'1px solid var(--border)', borderRadius:'11px', padding:'14px' },
  previewCol:{ width:'210px', padding:'0 0 0 16px', flexShrink:0 },
  cotizPanel:{ width:'230px', borderLeft:'1px solid var(--border)', padding:'14px', overflowY:'auto', flexShrink:0 },
};

Object.assign(window, { Argollas });