// ── CALCULADORA DE PRECIOS + COMPARATIVA MERCADO ──────

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

  const [metal,       setMetal]       = useState('Plata 925');
  const [gramos,      setGramos]      = useState(3.50);
  const [gramosInput, setGramosInput] = useState('3.50');
  const [manoObra,    setManoObra]    = useState(35000);
  const [margen,      setMargen]      = useState(65);
  const [margenInput, setMargenInput] = useState('65');
  const [gastosExtra, setExtra]       = useState(0);
  const [descuento,   setDescuento]   = useState(0);
  const [descTipo,    setDescTipo]    = useState('%'); // '%' | 'CLP'
  const [tipoPieza,   setTipoPieza]   = useState('Anillo');
  const [complejidad, setComplejidad] = useState('Media');
  const [historial,   setHistorial]   = useState(()=>lsGet('cotizaciones',[]));
  const [buscandoMercado, setBuscandoMercado] = useState(false);
  const [refMercado,      setRefMercado]      = useState(null);
  const [errorMercado,    setErrorMercado]    = useState('');

  const cfg = getConfig ? getConfig() : { iva: 19 };
  const IVA_RATE = cfg.iva / 100;

  // Precio por gramo: buscar en PRECIO_METALES o en precios configurados
  const precioPorGramo = (() => {
    if (PRECIO_METALES[metal]) return PRECIO_METALES[metal].valor;
    // Fallback a precios de trabajo guardados
    const pt = lsGet('precios_trabajo', {});
    if (pt[metal]) return pt[metal].venta;
    return 2300; // default Plata
  })();

  const MANO_OBRA_SUGERIDA = {
    'Anillo':     {Simple:25000, Media:45000, Compleja:80000, 'Muy Compleja':150000},
    'Colgante':   {Simple:20000, Media:35000, Compleja:65000, 'Muy Compleja':120000},
    'Pulsera':    {Simple:30000, Media:55000, Compleja:95000, 'Muy Compleja':170000},
    'Aros':       {Simple:28000, Media:50000, Compleja:88000, 'Muy Compleja':160000},
    'Collar':     {Simple:40000, Media:70000, Compleja:120000,'Muy Compleja':220000},
    'Brazalete':  {Simple:45000, Media:75000, Compleja:130000,'Muy Compleja':250000},
    'Gemelos':    {Simple:35000, Media:60000, Compleja:100000,'Muy Compleja':190000},
    'Argolla':    {Simple:50000, Media:85000, Compleja:140000,'Muy Compleja':280000},
    'Personalizado':{Simple:30000,Media:60000,Compleja:110000,'Muy Compleja':200000},
  };

  const costoMetal   = Math.round(precioPorGramo * gramos);
  const costoBase    = costoMetal + manoObra + gastosExtra;
  const margenMonto  = Math.round(costoBase * margen / 100);
  const precioSinDesc = costoBase + margenMonto;
  const descMonto    = descTipo==='%' ? Math.round(precioSinDesc * descuento / 100) : descuento;
  const precioVenta  = precioSinDesc - descMonto;
  const neto         = Math.round(precioVenta / (1 + IVA_RATE));
  const iva          = precioVenta - neto;
  const moSugerida   = MANO_OBRA_SUGERIDA[tipoPieza]?.[complejidad] || 45000;

  async function buscarMercado() {
    setBuscandoMercado(true);
    setErrorMercado('');
    setRefMercado(null);
    try {
      const prompt = `Actúa como experto en precios de joyería en Chile y mercado internacional.
Dame una comparativa de precios de mercado REAL para esta joya, en pesos chilenos (CLP):

- Tipo: ${tipoPieza}
- Metal: ${metal} (${gramos}g)
- Precio calculado por nosotros: ${clp(precioVenta)}
- Complejidad: ${complejidad}

Entrega en este formato JSON exacto (solo el JSON, sin texto adicional):
{
  "precio_bajo": NUMBER,
  "precio_promedio": NUMBER,
  "precio_alto": NUMBER,
  "precio_premium": NUMBER,
  "posicionamiento": "bajo|competitivo|alto|premium",
  "tiendas_referencia": ["Tienda1 ~$X", "Tienda2 ~$X", "Tienda3 ~$X"],
  "recomendacion": "texto breve de máximo 2 oraciones con recomendación de precio",
  "margen_sugerido": NUMBER
}`;
      const resp = await window.claude.complete(prompt);
      // Extraer JSON
      const jsonMatch = resp.match(/\{[\s\S]*\}/);
      if (jsonMatch) {
        const data = JSON.parse(jsonMatch[0]);
        setRefMercado(data);
      } else {
        setErrorMercado('No se pudo obtener la comparativa. Intenta de nuevo.');
      }
    } catch(e) {
      setErrorMercado('Error al consultar. Verifica conexión.');
    }
    setBuscandoMercado(false);
  }

  function guardarCotizacion() {
    const nueva = [{
      id:`COT-${Date.now().toString().slice(-5)}`,
      fecha:hoy(), tipoPieza, metal, gramos, complejidad,
      costoMetal, manoObra, gastosExtra, costoBase,
      margen, precioVenta,
      refMercado: refMercado || null,
    },...historial].slice(0,20);
    setHistorial(nueva); lsSet('cotizaciones',nueva);
  }

  const S = calcStyles3;

  const posicionamiento = refMercado ? {
    bajo:        {label:'Por debajo del mercado', color:'#f39c12', icon:'📉'},
    competitivo: {label:'Precio competitivo ✓',   color:'#27ae60', icon:'✅'},
    alto:        {label:'Sobre el promedio',       color:'#2980b9', icon:'📈'},
    premium:     {label:'Precio premium ✓',        color:'var(--gold)', icon:'✦'},
  }[refMercado.posicionamiento] : null;

  return (
    <div style={S.wrap}>
      {/* ── Izquierda: Inputs ── */}
      <div style={S.leftCol}>
        <div style={{fontFamily:'Cormorant Garamond,serif',fontSize:'21px',fontWeight:600,
          color:'var(--cream)',marginBottom:'4px'}}>Calculadora de Precios</div>
        <div style={{color:'var(--cream-3)',fontSize:'11px',marginBottom:'18px'}}>
          Costo real → precio justo con margen + comparativa de mercado
        </div>

        {/* Tipo pieza */}
        <div style={S.grupo}>
          <div style={S.label}>Tipo de Pieza</div>
          <div style={{display:'flex',flexWrap:'wrap',gap:'4px'}}>
            {Object.keys(MANO_OBRA_SUGERIDA).map(t=>(
              <button key={t} onClick={()=>{setTipoPieza(t);setManoObra(MANO_OBRA_SUGERIDA[t][complejidad]||35000);}}
                style={{...calcStyles2.chip,...(tipoPieza===t?calcStyles2.chipAct:{})}}>
                {t}
              </button>
            ))}
          </div>
        </div>

        {/* Complejidad */}
        <div style={S.grupo}>
          <div style={S.label}>Complejidad</div>
          <div style={{display:'flex',gap:'4px'}}>
            {['Simple','Media','Compleja','Muy Compleja'].map(c=>(
              <button key={c} onClick={()=>{setComplejidad(c);setManoObra(MANO_OBRA_SUGERIDA[tipoPieza]?.[c]||35000);}}
                style={{...calcStyles2.chip,flex:1,textAlign:'center',fontSize:'10px',
                  ...(complejidad===c?calcStyles2.chipAct:{})}}>
                {c}
              </button>
            ))}
          </div>
        </div>

        {/* Metal */}
        <div style={S.grupo}>
          <div style={S.label}>Metal</div>
          <select style={{ ...calcStyles2.input, width:'100%' }} value={metal} onChange={e => setMetal(e.target.value)}>
            {Object.keys(PRECIO_METALES).map(m => (
              <option key={m} value={m}>{m} — {clp(PRECIO_METALES[m].valor)}/g</option>
            ))}
          </select>
          <div style={{ fontSize:'10px', color:'var(--cream-3)', marginTop:'4px', display:'flex', justifyContent:'space-between' }}>
            <span>Precio spot: {clp(precioPorGramo)}/g</span>
            <span style={{ color:'var(--gold)' }}>Fuente: {PRECIO_METALES[metal]?.fuente||'Manual'}</span>
          </div>
        </div>

        {/* Gramos */}
        <div style={S.grupo}>
          <div style={{ display:'flex', justifyContent:'space-between', marginBottom:'5px' }}>
            <div style={S.label}>Peso en gramos</div>
            <input type="number" step="0.01" min="0.01" max="200"
              value={gramosInput}
              onChange={e => { setGramosInput(e.target.value); const v=parseFloat(e.target.value); if(!isNaN(v)&&v>0) setGramos(v); }}
              style={{ width:'80px', background:'var(--surface)', border:'1px solid var(--gold)', borderRadius:'5px', padding:'2px 6px', color:'var(--gold)', fontSize:'12px', fontWeight:700, textAlign:'right', outline:'none' }}/>
          </div>
          <input type="range" min="0.1" max="100" step="0.01" value={gramos}
            onChange={e => { const v=parseFloat(e.target.value); setGramos(v); setGramosInput(v.toFixed(2)); }}
            style={{ width:'100%', accentColor:'var(--gold)' }}/>
          <div style={{ display:'flex', justifyContent:'space-between', fontSize:'10px', color:'var(--cream-3)', marginTop:'2px' }}>
            <span>0.1g</span>
            <span style={{ color:'var(--cream-2)', fontWeight:500 }}>Costo metal: {clp(costoMetal)}</span>
            <span>100g</span>
          </div>
        </div>

        {/* Mano de obra */}
        <div style={S.grupo}>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:'4px' }}>
            <div style={S.label}>Mano de obra (CLP)</div>
            <button onClick={() => setManoObra(moSugerida)}
              style={{ fontSize:'9px', padding:'2px 7px', background:'var(--gold-dim)', border:'1px solid var(--gold)', borderRadius:'4px', color:'var(--gold)', cursor:'pointer' }}>
              Sugerida: {clp(moSugerida)}
            </button>
          </div>
          <input type="number" step="1000" style={calcStyles2.input} value={manoObra}
            onChange={e => setManoObra(parseInt(e.target.value)||0)}/>
        </div>

        {/* Gastos extra */}
        <div style={S.grupo}>
          <div style={S.label}>Gastos adicionales (piedras, insumos…)</div>
          <input type="number" style={calcStyles2.input} value={gastosExtra} placeholder="0"
            onChange={e => setExtra(parseInt(e.target.value)||0)}/>
        </div>

        {/* Margen */}
        <div style={S.grupo}>
          <div style={{ display:'flex', justifyContent:'space-between', marginBottom:'5px' }}>
            <div style={S.label}>Margen comercial</div>
            <input type="number" step="1" min="0" max="500"
              value={margenInput}
              onChange={e => { setMargenInput(e.target.value); const v=parseInt(e.target.value); if(!isNaN(v)&&v>=0) setMargen(v); }}
              style={{ width:'70px', background:'var(--surface)', border:'1px solid var(--gold)', borderRadius:'5px', padding:'2px 6px', color:'var(--gold)', fontSize:'13px', fontWeight:700, textAlign:'right', outline:'none' }}/>
          </div>
          <input type="range" min="0" max="300" step="1" value={margen}
            onChange={e => { const v=parseInt(e.target.value); setMargen(v); setMargenInput(String(v)); }}
            style={{ width:'100%', accentColor:'var(--gold)' }}/>
          <div style={{ display:'flex', justifyContent:'space-between', fontSize:'10px', color:'var(--cream-3)', marginTop:'2px' }}>
            <span>0%</span><span>100%</span><span>300%</span>
          </div>
        </div>

        {/* Descuento */}
        <div style={S.grupo}>
          <div style={S.label}>Descuento</div>
          <div style={{ display:'flex', gap:'4px', marginBottom:'6px' }}>
            <button onClick={() => setDescTipo('%')} style={{ ...calcStyles2.chip, ...(descTipo==='%'?calcStyles2.chipAct:{}), flex:1, textAlign:'center' }}>% Porcentaje</button>
            <button onClick={() => setDescTipo('CLP')} style={{ ...calcStyles2.chip, ...(descTipo==='CLP'?calcStyles2.chipAct:{}), flex:1, textAlign:'center' }}>$ Monto fijo</button>
          </div>
          <input type="number" step={descTipo==='%'?1:1000} style={calcStyles2.input}
            placeholder={descTipo==='%'?'0%':'$0'}
            value={descuento||''} onChange={e => setDescuento(parseFloat(e.target.value)||0)}/>
          {descMonto > 0 && <div style={{ fontSize:'10px', color:'#c0392b', marginTop:'3px' }}>Descuento: −{clp(descMonto)}</div>}
        </div>
      </div>

      {/* ── Centro: Resultado + Comparativa ── */}
      <div style={S.centerCol}>
        {/* Precio calculado */}
        <div style={S.resultCard}>
          <div style={{fontSize:'10px',color:'var(--gold)',letterSpacing:'2px',marginBottom:'6px'}}>
            PRECIO DE VENTA AL PÚBLICO
          </div>
          <div style={{fontFamily:'Cormorant Garamond,serif',fontSize:'50px',fontWeight:600,
            color:'var(--cream)',lineHeight:1}}>
            {clp(precioVenta)}
          </div>
          <div style={{color:'var(--cream-3)',fontSize:'11px',marginTop:'6px'}}>
            {tipoPieza} · {metal} · {gramos.toFixed(1)}g · {complejidad}
          </div>
        </div>

        {/* Desglose */}
        <div style={S.card}>
          <div style={S.cardTitle}>Desglose de costos</div>
          {[
            {l:`Metal (${gramos.toFixed(2)}g × ${clp(precioPorGramo)}/g)`, v:costoMetal},
            {l:'Mano de obra',    v:manoObra},
            {l:'Gastos adicionales', v:gastosExtra},
            {l:'COSTO BASE',     v:costoBase,   bold:true},
            {l:`Margen ${margen}%`, v:margenMonto, c:'#27ae60'},
            {l:'Precio sin desc.', v:precioSinDesc},
            ...(descMonto>0?[{l:`Descuento (${descTipo==='%'?descuento+'%':clp(descuento)})`, v:-descMonto, c:'#c0392b'}]:[]),
          ].map(r=>(
            <div key={r.l} style={{display:'flex',justifyContent:'space-between',
              padding:'6px 0',borderBottom:'1px solid var(--border)',fontSize:'12px'}}>
              <span style={{color:'var(--cream-3)'}}>{r.l}</span>
              <span style={{color:r.c||'var(--cream)',fontWeight:r.bold?700:400}}>{clp(r.v)}</span>
            </div>
          ))}
          <div style={{display:'flex',justifyContent:'space-between',
            paddingTop:'8px',fontSize:'14px',fontWeight:700}}>
            <span style={{color:'var(--cream)'}}>Precio venta</span>
            <span style={{color:'var(--gold)'}}>{clp(precioVenta)}</span>
          </div>

          {/* SII */}
          <div style={{marginTop:'10px',background:'var(--surface)',borderRadius:'8px',padding:'10px'}}>
            <div style={{fontSize:'10px',color:'var(--cream-3)',marginBottom:'5px',fontWeight:600}}>
              BOLETA / SII — IVA {cfg.iva}%
            </div>
            {[{l:'Neto',v:neto},{l:`IVA ${cfg.iva}%`,v:iva},{l:'Total boleta',v:precioVenta}].map(r=>(
              <div key={r.l} style={{display:'flex',justifyContent:'space-between',fontSize:'11px',marginBottom:'3px'}}>
                <span style={{color:'var(--cream-3)'}}>{r.l}</span>
                <span style={{color:r.l==='Total boleta'?'var(--gold)':'var(--cream)',
                  fontWeight:r.l==='Total boleta'?700:400}}>{clp(r.v)}</span>
              </div>
            ))}
          </div>

          {/* Indicadores rentabilidad */}
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:'5px',marginTop:'10px'}}>
            {[
              {l:'Factor precio', v:`${(1+margen/100).toFixed(2)}×`},
              {l:'Utilidad',      v:clp(margenMonto)},
              {l:'Margen %',      v:`${margen}%`},
            ].map(i=>(
              <div key={i.l} style={{background:'var(--surface)',borderRadius:'7px',
                padding:'8px',textAlign:'center'}}>
                <div style={{color:'var(--gold)',fontWeight:700,fontSize:'13px'}}>{i.v}</div>
                <div style={{color:'var(--cream-3)',fontSize:'9px',marginTop:'1px'}}>{i.l}</div>
              </div>
            ))}
          </div>

          <button onClick={guardarCotizacion}
            style={{...posStyles.cobrarBtn,width:'100%',margin:'12px 0 0',fontSize:'12px'}}>
            ✦ Guardar Cotización
          </button>
        </div>
      </div>

      {/* ── Derecha: Comparativa Mercado ── */}
      <div style={S.rightCol}>
        <div style={S.cardTitle}>
          🌐 Comparativa de Mercado
        </div>
        <div style={{fontSize:'11px',color:'var(--cream-3)',marginBottom:'14px',lineHeight:'1.6'}}>
          Analiza precios de competencia con IA para posicionar mejor tu producto.
        </div>

        <button onClick={buscarMercado} disabled={buscandoMercado}
          style={{...posStyles.cobrarBtn,width:'100%',margin:'0 0 14px',fontSize:'12px',
            ...(buscandoMercado?{opacity:0.6,cursor:'wait'}:{})}}>
          {buscandoMercado?'⏳ Consultando mercado…':'🔍 Analizar precios de competencia'}
        </button>

        {errorMercado&&(
          <div style={{padding:'10px',background:'rgba(192,57,43,0.1)',border:'1px solid rgba(192,57,43,0.3)',
            borderRadius:'8px',fontSize:'11px',color:'#c0392b',marginBottom:'12px'}}>
            {errorMercado}
          </div>
        )}

        {!refMercado&&!buscandoMercado&&!errorMercado&&(
          <div style={{background:'var(--surface)',borderRadius:'10px',padding:'16px',
            border:'1px solid var(--border)',marginBottom:'14px'}}>
            <div style={{fontSize:'10px',color:'var(--cream-3)',marginBottom:'8px',fontWeight:600}}>
              ¿QUÉ HACE ESTA FUNCIÓN?
            </div>
            {[
              '• Analiza precios para el mismo tipo de joya',
              '• Compara con mercado nacional e internacional',
              '• Identifica tiendas de referencia',
              '• Recomienda posicionamiento de precio',
              '• Sugiere margen óptimo según competencia',
            ].map((l,i)=>(
              <div key={i} style={{fontSize:'11px',color:'var(--cream-2)',marginBottom:'4px'}}>{l}</div>
            ))}
            <div style={{marginTop:'10px',padding:'8px',background:'var(--bg-card)',
              borderRadius:'6px',fontSize:'10px',color:'var(--cream-3)'}}>
              💡 Usa IA para consultar precios de referencia. Los resultados son estimaciones — úsalos como guía.
            </div>
          </div>
        )}

        {refMercado&&(
          <div className="fade-in">
            {/* Posicionamiento */}
            {posicionamiento&&(
              <div style={{padding:'12px',borderRadius:'10px',marginBottom:'12px',textAlign:'center',
                background:`${posicionamiento.color}11`,border:`1px solid ${posicionamiento.color}44`}}>
                <div style={{fontSize:'20px',marginBottom:'4px'}}>{posicionamiento.icon}</div>
                <div style={{color:posicionamiento.color,fontWeight:700,fontSize:'13px'}}>
                  {posicionamiento.label}
                </div>
              </div>
            )}

            {/* Rango de precios */}
            <div style={S.card}>
              <div style={{fontSize:'10px',color:'var(--cream-3)',fontWeight:600,marginBottom:'10px'}}>
                RANGO DE PRECIOS EN EL MERCADO
              </div>
              {[
                {l:'Precio bajo',    v:refMercado.precio_bajo,    c:'var(--cream-3)'},
                {l:'Precio promedio',v:refMercado.precio_promedio,c:'var(--cream)'},
                {l:'Precio alto',    v:refMercado.precio_alto,    c:'#2980b9'},
                {l:'Precio premium', v:refMercado.precio_premium, c:'var(--gold)'},
                {l:'▶ Tu precio',    v:precioVenta,               c:posicionamiento?.color||'var(--cream)',bold:true},
              ].map(r=>(
                <div key={r.l} style={{display:'flex',justifyContent:'space-between',
                  padding:'5px 0',borderBottom:'1px solid var(--border)',fontSize:'12px'}}>
                  <span style={{color:'var(--cream-3)'}}>{r.l}</span>
                  <span style={{color:r.c,fontWeight:r.bold?700:400}}>{clp(r.v)}</span>
                </div>
              ))}
              {/* Barra visual */}
              {refMercado.precio_alto>refMercado.precio_bajo&&(
                <div style={{marginTop:'10px'}}>
                  <div style={{fontSize:'10px',color:'var(--cream-3)',marginBottom:'4px'}}>
                    Posición en el rango
                  </div>
                  <div style={{height:'8px',background:'var(--surface)',borderRadius:'4px',
                    position:'relative',overflow:'visible'}}>
                    <div style={{height:'100%',background:'linear-gradient(90deg,#27ae60,var(--gold),#c0392b)',
                      borderRadius:'4px'}}/>
                    {(()=>{
                      const pct=Math.min(100,Math.max(0,
                        (precioVenta-refMercado.precio_bajo)/
                        (refMercado.precio_alto-refMercado.precio_bajo)*100));
                      return <div style={{position:'absolute',top:'-4px',
                        left:`${pct}%`,transform:'translateX(-50%)',
                        width:'16px',height:'16px',borderRadius:'50%',
                        background:'white',border:'2px solid var(--gold)',
                        boxShadow:'0 2px 6px rgba(0,0,0,0.5)'}}/>;
                    })()}
                  </div>
                  <div style={{display:'flex',justifyContent:'space-between',
                    fontSize:'9px',color:'var(--cream-3)',marginTop:'2px'}}>
                    <span>{clp(refMercado.precio_bajo)}</span>
                    <span>{clp(refMercado.precio_alto)}</span>
                  </div>
                </div>
              )}
            </div>

            {/* Tiendas referencia */}
            {refMercado.tiendas_referencia?.length>0&&(
              <div style={{...S.card,marginTop:'10px'}}>
                <div style={{fontSize:'10px',color:'var(--cream-3)',fontWeight:600,marginBottom:'8px'}}>
                  TIENDAS DE REFERENCIA
                </div>
                {refMercado.tiendas_referencia.map((t,i)=>(
                  <div key={i} style={{fontSize:'11px',color:'var(--cream-2)',
                    padding:'4px 0',borderBottom:'1px solid var(--border)'}}>
                    {t}
                  </div>
                ))}
              </div>
            )}

            {/* Recomendación */}
            {refMercado.recomendacion&&(
              <div style={{...S.card,marginTop:'10px',borderLeft:'2px solid var(--gold)'}}>
                <div style={{fontSize:'10px',color:'var(--gold)',fontWeight:600,marginBottom:'5px'}}>
                  RECOMENDACIÓN
                </div>
                <div style={{fontSize:'11px',color:'var(--cream-2)',lineHeight:'1.7'}}>
                  {refMercado.recomendacion}
                </div>
                {refMercado.margen_sugerido&&(
                  <div style={{marginTop:'8px',display:'flex',justifyContent:'space-between',
                    fontSize:'12px'}}>
                    <span style={{color:'var(--cream-3)'}}>Margen sugerido</span>
                    <span style={{color:'var(--gold)',fontWeight:700}}>{refMercado.margen_sugerido}%</span>
                  </div>
                )}
              </div>
            )}
          </div>
        )}

        {/* Historial cotizaciones */}
        {historial.length>0&&(
          <div style={{marginTop:'16px'}}>
            <div style={{fontSize:'10px',color:'var(--cream-3)',fontWeight:600,letterSpacing:'0.5px',
              marginBottom:'7px'}}>COTIZACIONES GUARDADAS</div>
            {historial.slice(0,8).map(h=>(
              <div key={h.id} style={{display:'flex',justifyContent:'space-between',
                padding:'7px 0',borderBottom:'1px solid var(--border)',fontSize:'11px'}}>
                <div>
                  <span style={{color:'var(--cream)',fontWeight:500}}>{h.tipoPieza}</span>
                  <span style={{color:'var(--cream-3)',marginLeft:'5px'}}>{h.metal} · {h.gramos}g</span>
                </div>
                <div style={{textAlign:'right'}}>
                  <div style={{color:'var(--gold)',fontWeight:700}}>{clp(h.precioVenta)}</div>
                  <div style={{color:'var(--cream-3)',fontSize:'9px'}}>{h.fecha}</div>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

const calcStyles3 = {
  wrap:{display:'flex',height:'100%',overflow:'hidden'},
  leftCol:{width:'360px',overflowY:'auto',padding:'18px',borderRight:'1px solid var(--border)',flexShrink:0},
  centerCol:{width:'320px',overflowY:'auto',padding:'18px',borderRight:'1px solid var(--border)',flexShrink:0},
  rightCol:{flex:1,overflowY:'auto',padding:'18px'},
  grupo:{marginBottom:'16px'},
  label:{fontSize:'10px',color:'var(--cream-3)',fontWeight:600,letterSpacing:'0.5px',
    textTransform:'uppercase',marginBottom:'7px'},
  resultCard:{background:'linear-gradient(135deg,var(--surface) 0%,var(--bg-card) 100%)',
    border:'1px solid var(--border)',borderRadius:'14px',padding:'20px',marginBottom:'12px',
    borderTop:'2px solid var(--gold)'},
  card:{background:'var(--bg-card)',border:'1px solid var(--border)',borderRadius:'10px',padding:'14px'},
  cardTitle:{fontFamily:'Cormorant Garamond,serif',fontSize:'16px',fontWeight:600,
    color:'var(--cream)',marginBottom:'12px',paddingBottom:'7px',borderBottom:'1px solid var(--border)'},
};

Object.assign(window,{Calculadora});