// PatientPanel — central patient data sheet.
// User enters demographics + vitals + planned solutions once,
// and every relevant calculator auto-populates with results.

const { useState: usePS, useMemo: usePM, useEffect: usePE } = React;

function PatientPanel() {
  const [p, setP] = window.PatientStore.usePatient();
  const { NumberField, fmt, fmt0, classifyImc } = window.Calc;

  const tipo = p.poblacion || 'adulto';
  const peso = +p.peso;
  const tallaM = (+p.talla) / 100;
  const fc = +p.fc;
  const tas = +p.tas;
  const tad = +p.tad;
  const temp = +p.temp;
  const horas = +p.horas || 8;

  // ─── Derived: IMC ─────────────────────────────────────
  const imc = (peso && tallaM) ? peso / (tallaM * tallaM) : NaN;
  const imcKlass = classifyImc(imc);

  // ─── Derived: PAM ─────────────────────────────────────
  const pam = (tas && tad) ? (tas + 2 * tad) / 3 : NaN;
  const pp = (tas && tad) ? tas - tad : NaN;

  // ─── Derived: Índice de choque ────────────────────────
  const si = (fc && tas) ? fc / tas : NaN;

  // ─── Derived: Pérdidas insensibles automáticas ────────
  let perdidasPerHora = NaN;
  let perdidasNota = '';
  let perdidasFormula = [];
  let perdidasFactor = NaN;
  if (tipo === 'adulto' && peso) {
    const factor = !isFinite(temp) || temp === 0 ? 0.5 :
                   temp < 37 ? 0.5 :
                   temp < 38 ? 0.6 :
                   temp < 39 ? 0.7 : 1;
    perdidasFactor = factor;
    perdidasPerHora = peso * factor;
    perdidasNota = `Adulto · factor temperatura ×${factor}`;
    perdidasFormula = [
      'Pérdidas/h = Peso × Factor térmico',
      `           = ${fmt(peso, 1)} kg × ${factor}`,
      `           = ${fmt(perdidasPerHora, 1)} ml/h`,
    ];
  } else if ((tipo === 'pediatra' || tipo === 'neonato') && peso) {
    const C = { estable: 400, puntas: 500, fiebre: 600, ventilador: 700, calor: 300 }[p.apoyo || 'estable'];
    const sc = peso <= 10 ? (peso * 4 + 9) / 100 : (peso * 4 + 7) / (90 + peso);
    perdidasPerHora = (sc * C) / 24;
    perdidasNota = `${tipo === 'neonato' ? 'Neonato' : 'Pediátrico'} · SC ${fmt(sc, 3)} m² · constante ${C}`;
    perdidasFormula = [
      `SC = ${peso <= 10 ? '(Peso×4 + 9) ÷ 100' : '(Peso×4 + 7) ÷ (90 + Peso)'}`,
      `   = ${fmt(sc, 3)} m²`,
      'Pérdidas/h = (SC × Constante) ÷ 24',
      `           = (${fmt(sc, 3)} × ${C}) ÷ 24`,
      `           = ${fmt(perdidasPerHora, 1)} ml/h`,
    ];
  }
  const perdidas24 = perdidasPerHora * 24;
  const perdidasCustom = perdidasPerHora * horas;

  // ─── Fórmulas y escalas de clasificación (para el resumen) ──
  const imcFormula = isFinite(imc) ? [
    'IMC = Peso ÷ Talla²',
    `    = ${fmt(peso, 1)} ÷ (${fmt(tallaM, 2)})²`,
    `    = ${fmt(peso, 1)} ÷ ${fmt(tallaM * tallaM, 3)}`,
    `    = ${fmt(imc, 2)} kg/m²`,
  ] : ['IMC = Peso (kg) ÷ Talla² (m)'];
  const pamFormula = isFinite(pam) ? [
    'PAM = (PAS + 2 × PAD) ÷ 3',
    `    = (${fmt0(tas)} + 2 × ${fmt0(tad)}) ÷ 3`,
    `    = ${fmt0(tas + 2 * tad)} ÷ 3`,
    `    = ${fmt(pam, 1)} mmHg`,
  ] : ['PAM = (PAS + 2 × PAD) ÷ 3'];
  const siFormula = isFinite(si) ? [
    'IC = FC ÷ PAS',
    `   = ${fmt0(fc)} ÷ ${fmt0(tas)}`,
    `   = ${fmt(si, 2)}`,
  ] : ['IC = Frecuencia cardiaca ÷ PAS'];

  const imcScale = [
    { lbl: 'Bajo peso',    rng: '< 18.5',      hit: imc < 18.5 },
    { lbl: 'Peso normal',  rng: '18.5 – 24.9', hit: imc >= 18.5 && imc < 25 },
    { lbl: 'Sobrepeso',    rng: '25.0 – 29.9', hit: imc >= 25 && imc < 30 },
    { lbl: 'Obesidad I',   rng: '30.0 – 34.9', hit: imc >= 30 && imc < 35 },
    { lbl: 'Obesidad II',  rng: '35.0 – 39.9', hit: imc >= 35 && imc < 40 },
    { lbl: 'Obesidad III', rng: '≥ 40.0',      hit: imc >= 40 },
  ];
  const pamScale = [
    { lbl: 'Hipoperfusión',      rng: '< 60',    hit: pam < 60 },
    { lbl: 'Límite inferior',    rng: '60 – 69', hit: pam >= 60 && pam < 70 },
    { lbl: 'Perfusión adecuada', rng: '70 – 105',hit: pam >= 70 && pam <= 105 },
    { lbl: 'Elevada',            rng: '> 105',   hit: pam > 105 },
  ];
  const siScale = [
    { lbl: 'Sobrecarga / inadecuado', rng: '< 0.5',     hit: si < 0.5 },
    { lbl: 'Normal',                  rng: '0.5 – 0.7', hit: si >= 0.5 && si <= 0.7 },
    { lbl: 'Choque leve',             rng: '0.7 – 0.9', hit: si > 0.7 && si < 1 },
    { lbl: 'Choque moderado',         rng: '1.0 – 1.3', hit: si >= 1 && si < 1.4 },
    { lbl: 'Choque severo',           rng: '≥ 1.4',     hit: si >= 1.4 },
  ];
  const tempScale = [
    { lbl: 'Normotermia', rng: '< 37 °C',      f: '0.5', hit: tipo === 'adulto' && (!isFinite(temp) || temp === 0 || temp < 37) },
    { lbl: 'Subfebril',   rng: '37 – 37.9 °C', f: '0.6', hit: tipo === 'adulto' && temp >= 37 && temp < 38 },
    { lbl: 'Fiebre',      rng: '38 – 38.9 °C', f: '0.7', hit: tipo === 'adulto' && temp >= 38 && temp < 39 },
    { lbl: 'Hipertermia', rng: '≥ 39 °C',      f: '1.0', hit: tipo === 'adulto' && temp >= 39 },
  ];

  const [sel, setSel] = usePS(null);
  const toggleSel = (k) => setSel(s => (s === k ? null : k));

  // Chips de entrada y bloque de detalle reutilizable
  const Chip = ({ k, v }) => <span className="rd-chip"><span className="rd-chip-k">{k}</span><span className="rd-chip-v mono">{v}</span></span>;
  const Formula = ({ lines }) => <pre className="rd-formula mono">{lines.join('\n')}</pre>;
  const Scale = ({ rows }) => (
    <div className="rd-scale">
      {rows.map((r, i) => (
        <div key={i} className={'rd-scale-row' + (r.hit ? ' hit' : '')}>
          <span className="rd-scale-lbl">{r.lbl}</span>
          <span className="rd-scale-rng mono">{r.rng}{r.f ? ` · ×${r.f}` : ''}</span>
        </div>
      ))}
    </div>
  );

  // ─── Soluciones planificadas ──────────────────────────
  const soluciones = p.soluciones || [];
  const addSolucion = () => setP({
    soluciones: [...soluciones, { nombre: 'Solución salina 0.9%', volumen: 500, tiempo: 8, equipo: 'macro' }]
  });
  const updSol = (i, patch) => {
    const next = [...soluciones];
    next[i] = { ...next[i], ...patch };
    setP({ soluciones: next });
  };
  const rmSol = (i) => setP({ soluciones: soluciones.filter((_, j) => j !== i) });

  // For each solucion compute gtt/min and mL/h
  const computedSols = soluciones.map(s => {
    const gpm = { macro: 10, normo: 20, micro: 60, trans: 15 }[s.equipo] || 20;
    const totalMin = (+s.tiempo || 0) * 60;
    const gtt = totalMin > 0 ? ((+s.volumen || 0) * gpm) / totalMin : NaN;
    const mlh = (+s.tiempo) > 0 ? (+s.volumen) / (+s.tiempo) : NaN;
    return { ...s, gpm, gtt, mlh };
  });

  const isReady = peso && tallaM;

  const clearPatient = () => {
    if (confirm('¿Borrar todos los datos del paciente?')) {
      setP({
        poblacion: 'adulto', nombre: '', edad: '', edadUnit: 'años', sexo: 'F',
        peso: '', talla: '', fc: '', fr: '', tas: '', tad: '', temp: '', spo2: '',
        apoyo: 'estable', horas: 8, soluciones: [],
      });
    }
  };

  return (
    <div className="patient-panel fade-in">
      <div className="patient-grid">
        {/* ─── LEFT: input form ─── */}
        <div>
          <div className="calc-card">
            <div className="calc-head" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', flexWrap: 'wrap', gap: 12 }}>
              <div>
                <h3>Datos del paciente</h3>
                <p>Estos datos se comparten con todas las calculadoras.</p>
              </div>
              <button className="btn-secondary small" onClick={clearPatient}>Limpiar</button>
            </div>

            <div className="patient-section-eyebrow">Población</div>
            <div className="calc-segmented" style={{ marginBottom: 18 }}>
              {[
                ['neonato', 'Neonato', true],
                ['pediatra', 'Pediátrico', false],
                ['adulto', 'Adulto', false],
              ].map(([k, l, soon]) => (
                <button
                  key={k}
                  className={(tipo === k ? 'on ' : '') + (soon ? 'soon' : '')}
                  disabled={soon}
                  title={soon ? 'Próximamente' : undefined}
                  onClick={soon ? undefined : () => setP({ poblacion: k })}
                >
                  {l}{soon && <span className="cc-pip">Próximamente</span>}
                </button>
              ))}
            </div>

            <div className="patient-section-eyebrow">Identidad</div>
            <div className="calc-fields" style={{ marginBottom: 18 }}>
              <div className="calc-field">
                <label>Iniciales</label>
                <div className="calc-input-row">
                  <input type="text" value={p.nombre || ''} onChange={e => setP({ nombre: e.target.value })} maxLength="6" placeholder="ej. M. G."/>
                </div>
              </div>
              <div className="calc-field">
                <label>Edad</label>
                <div className="calc-input-row" style={{ paddingRight: 4 }}>
                  <input type="number" value={p.edad ?? ''} onChange={e => setP({ edad: e.target.value === '' ? '' : +e.target.value })} min="0" placeholder="—"/>
                  <select className="calc-input-suffix-select" value={p.edadUnit} onChange={e => setP({ edadUnit: e.target.value })}>
                    <option value="años">años</option>
                    <option value="meses">meses</option>
                    <option value="días">días</option>
                  </select>
                </div>
              </div>
              <div className="calc-field">
                <label>Sexo</label>
                <div className="calc-segmented" style={{ marginTop: 0 }}>
                  <button className={p.sexo === 'F' ? 'on' : ''} onClick={() => setP({ sexo: 'F' })}>F · Femenino</button>
                  <button className={p.sexo === 'M' ? 'on' : ''} onClick={() => setP({ sexo: 'M' })}>M · Masculino</button>
                </div>
              </div>
              {(tipo === 'pediatra' || tipo === 'neonato') && (
                <div className="calc-field">
                  <label>Apoyo respiratorio</label>
                  <select className="calc-select" value={p.apoyo} onChange={e => setP({ apoyo: e.target.value })}>
                    <option value="estable">Estable · 400</option>
                    <option value="puntas">Puntas nasales · 500</option>
                    <option value="fiebre">Fiebre · 600</option>
                    <option value="ventilador">Ventilador mecánico · 700</option>
                    <option value="calor">Calor radiante · 300</option>
                  </select>
                </div>
              )}
            </div>

            <div className="patient-section-eyebrow">Antropometría</div>
            <div className="calc-fields" style={{ marginBottom: 18 }}>
              <NumberField label="Peso" value={p.peso} onChange={v => setP({ peso: v })} unit="kg" step="0.1" placeholder="ej. 15"/>
              <NumberField label="Talla" value={p.talla} onChange={v => setP({ talla: v })} unit="cm" placeholder="ej. 95"/>
            </div>

            <div className="patient-section-eyebrow">Signos vitales</div>
            <div className="calc-fields">
              <NumberField label="Frecuencia cardiaca" value={p.fc} onChange={v => setP({ fc: v })} unit="lpm" placeholder="ej. 96"/>
              <NumberField label="Presión sistólica" value={p.tas} onChange={v => setP({ tas: v })} unit="mmHg" placeholder="ej. 120"/>
              <NumberField label="Presión diastólica" value={p.tad} onChange={v => setP({ tad: v })} unit="mmHg" placeholder="ej. 80"/>
              <NumberField label="Temperatura" value={p.temp} onChange={v => setP({ temp: v })} unit="°C" step="0.1" placeholder="ej. 37.4"/>
              <NumberField label="Horas de turno / cálculo" value={p.horas} onChange={v => setP({ horas: v })} unit="h" placeholder="8"/>
            </div>
          </div>

          {/* ─── Soluciones ─── */}
          <div className="calc-card" style={{ marginTop: 18 }}>
            <div className="calc-head" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', flexWrap: 'wrap', gap: 12 }}>
              <div>
                <h3>Soluciones planificadas</h3>
                <p>Agrega cada solución para conocer goteo y velocidad de infusión.</p>
              </div>
              <button className="btn-primary small" onClick={addSolucion}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M12 5v14M5 12h14"/></svg>
                Añadir
              </button>
            </div>
            {computedSols.length === 0 ? (
              <div className="solucion-empty">
                <p>Sin soluciones aún. Agrega la primera para calcular gotas por minuto y ml/h.</p>
              </div>
            ) : (
              <div className="solucion-list">
                {computedSols.map((s, i) => (
                  <div key={i} className="solucion-row">
                    <div className="solucion-row-head">
                      <input
                        className="solucion-name"
                        type="text"
                        value={s.nombre}
                        onChange={e => updSol(i, { nombre: e.target.value })}
                        placeholder="Nombre de la solución"
                      />
                      <button className="solucion-remove" onClick={() => rmSol(i)} aria-label="Quitar">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg>
                      </button>
                    </div>
                    <div className="solucion-fields">
                      <div className="solucion-field">
                        <label>Volumen</label>
                        <div className="calc-input-row"><input type="number" value={s.volumen} onChange={e => updSol(i, { volumen: +e.target.value || 0 })}/><span>ml</span></div>
                      </div>
                      <div className="solucion-field">
                        <label>Tiempo</label>
                        <div className="calc-input-row"><input type="number" value={s.tiempo} onChange={e => updSol(i, { tiempo: +e.target.value || 0 })} step="0.5"/><span>h</span></div>
                      </div>
                      <div className="solucion-field">
                        <label>Equipo</label>
                        <select className="calc-select" value={s.equipo} onChange={e => updSol(i, { equipo: e.target.value })}>
                          <option value="macro">Macro · 10</option>
                          <option value="normo">Normo · 20</option>
                          <option value="micro">Micro · 60</option>
                          <option value="trans">Transfusión · 15</option>
                        </select>
                      </div>
                    </div>
                    <div className="solucion-result">
                      <div><span>Velocidad</span><strong className="mono">{fmt0(s.mlh)} ml/h</strong></div>
                      <div><span>Goteo</span><strong className="mono">{fmt0(s.gtt)} gtt/min</strong></div>
                      <div><span>Equivalencia</span><strong className="mono">{s.gpm} gtt = 1 ml</strong></div>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>

        {/* ─── RIGHT: live results ─── */}
        <aside className="patient-results">
          <div className="patient-results-eyebrow">Resultados en vivo</div>
          {!isReady && (
            <div className="patient-empty">
              <p>Ingresa al menos <strong>peso</strong> y <strong>talla</strong> para calcular.</p>
            </div>
          )}
          <div className="patient-results-hint">Toca una tarjeta para ver el resumen, la fórmula y la clasificación.</div>

          {/* Pérdidas insensibles */}
          <div className={'result-card key clickable' + (sel === 'perdidas' ? ' open' : '')}
               role="button" tabIndex={0} onClick={() => toggleSel('perdidas')}>
            <div className="result-card-head">
              <span className="result-card-eyebrow">Pérdidas insensibles</span>
              <span className="result-card-pop mono">{tipo === 'adulto' ? 'Adulto' : tipo === 'neonato' ? 'Neonato' : 'Pediátrico'}</span>
              <svg className="result-chevron" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M6 9l6 6 6-6"/></svg>
            </div>
            {isFinite(perdidasPerHora) ? (
              <>
                <div className="result-multi">
                  <div><div className="lbl">En 1 h</div><div className="val mono">{fmt(perdidasPerHora, 1)}<small> ml</small></div></div>
                  <div className="main"><div className="lbl">En {horas} h</div><div className="val mono">{fmt(perdidasCustom, 1)}<small> ml</small></div></div>
                  <div><div className="lbl">En 24 h</div><div className="val mono">{fmt(perdidas24, 1)}<small> ml</small></div></div>
                </div>
                <div className="result-card-note">{perdidasNota}</div>
              </>
            ) : (
              <div className="result-card-empty">Esperando peso{(tipo === 'adulto') ? ' y temperatura' : ' y apoyo respiratorio'}…</div>
            )}
            {sel === 'perdidas' && (
              <div className="result-detail" onClick={e => e.stopPropagation()}>
                <div className="rd-label">Datos usados</div>
                <div className="rd-chips">
                  <Chip k="Peso" v={isFinite(peso) && peso ? fmt(peso, 1) + ' kg' : '—'}/>
                  {tipo === 'adulto'
                    ? <Chip k="Temperatura" v={isFinite(temp) && temp ? fmt(temp, 1) + ' °C' : '—'}/>
                    : <Chip k="Apoyo resp." v={({ estable: 'Estable · 400', puntas: 'Puntas · 500', fiebre: 'Fiebre · 600', ventilador: 'Ventilador · 700', calor: 'Calor · 300' })[p.apoyo || 'estable']}/>}
                </div>
                <div className="rd-label">Fórmula</div>
                <Formula lines={perdidasFormula.length ? perdidasFormula : (tipo === 'adulto' ? ['Pérdidas/h = Peso × Factor térmico'] : ['Pérdidas/h = (SC × Constante) ÷ 24'])}/>
                {tipo === 'adulto' && (
                  <>
                    <div className="rd-label">Factor según temperatura</div>
                    <Scale rows={tempScale}/>
                  </>
                )}
              </div>
            )}
          </div>

          {/* IMC */}
          <div className={'result-card clickable' + (sel === 'imc' ? ' open' : '')}
               role="button" tabIndex={0} onClick={() => toggleSel('imc')}>
            <div className="result-card-head">
              <span className="result-card-eyebrow">Índice de masa corporal</span>
              <svg className="result-chevron" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M6 9l6 6 6-6"/></svg>
            </div>
            {isFinite(imc) ? (
              <>
                <div className="result-big mono">{fmt(imc, 2)}<small> kg/m²</small></div>
                {imcKlass && (
                  <div className="result-tag" style={{ background: imcKlass.tint, color: imcKlass.color }}>
                    {imcKlass.label}
                  </div>
                )}
              </>
            ) : <div className="result-card-empty">Esperando peso y talla…</div>}
            {sel === 'imc' && (
              <div className="result-detail" onClick={e => e.stopPropagation()}>
                <div className="rd-label">Datos usados</div>
                <div className="rd-chips">
                  <Chip k="Peso" v={isFinite(peso) && peso ? fmt(peso, 1) + ' kg' : '—'}/>
                  <Chip k="Talla" v={p.talla ? fmt0(+p.talla) + ' cm' : '—'}/>
                </div>
                <div className="rd-label">Fórmula</div>
                <Formula lines={imcFormula}/>
                <div className="rd-label">Clasificación · OMS</div>
                <Scale rows={imcScale}/>
              </div>
            )}
          </div>

          {/* PAM */}
          <div className={'result-card clickable' + (sel === 'pam' ? ' open' : '')}
               role="button" tabIndex={0} onClick={() => toggleSel('pam')}>
            <div className="result-card-head">
              <span className="result-card-eyebrow">Presión arterial media</span>
              <svg className="result-chevron" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M6 9l6 6 6-6"/></svg>
            </div>
            {isFinite(pam) ? (
              <>
                <div className="result-big mono">{fmt(pam, 1)}<small> mmHg</small></div>
                <div className="result-card-note">Presión de pulso · {fmt0(pp)} mmHg</div>
                <div className="result-tag" style={{
                  background: pam < 60 ? 'var(--wine-100)' : pam < 70 ? 'var(--honey-100)' : pam <= 105 ? 'var(--sage-100)' : 'var(--wine-100)',
                  color:      pam < 60 ? 'var(--wine-700)' : pam < 70 ? 'var(--honey-700)' : pam <= 105 ? 'var(--sage-700)' : 'var(--wine-500)'
                }}>
                  {pam < 60 ? 'Hipoperfusión' : pam < 70 ? 'Límite inferior' : pam <= 105 ? 'Perfusión adecuada' : 'Elevada'}
                </div>
              </>
            ) : <div className="result-card-empty">Esperando presión sistólica y diastólica…</div>}
            {sel === 'pam' && (
              <div className="result-detail" onClick={e => e.stopPropagation()}>
                <div className="rd-label">Datos usados</div>
                <div className="rd-chips">
                  <Chip k="PAS" v={tas ? fmt0(tas) + ' mmHg' : '—'}/>
                  <Chip k="PAD" v={tad ? fmt0(tad) + ' mmHg' : '—'}/>
                </div>
                <div className="rd-label">Fórmula</div>
                <Formula lines={pamFormula}/>
                <div className="rd-label">Clasificación</div>
                <Scale rows={pamScale}/>
              </div>
            )}
          </div>

          {/* Índice de choque */}
          <div className={'result-card clickable' + (sel === 'si' ? ' open' : '')}
               role="button" tabIndex={0} onClick={() => toggleSel('si')}>
            <div className="result-card-head">
              <span className="result-card-eyebrow">Índice de choque</span>
              <svg className="result-chevron" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M6 9l6 6 6-6"/></svg>
            </div>
            {isFinite(si) ? (
              <>
                <div className="result-big mono">{fmt(si, 2)}</div>
                <div className="result-tag" style={{
                  background: si < 0.5 ? 'var(--wine-100)' : si <= 0.7 ? 'var(--sage-100)' : si < 1 ? 'var(--honey-100)' : si < 1.4 ? 'var(--cinnamon-100)' : 'var(--wine-100)',
                  color:      si < 0.5 ? 'var(--wine-500)' : si <= 0.7 ? 'var(--sage-700)' : si < 1 ? 'var(--honey-700)' : si < 1.4 ? 'var(--cinnamon-600)' : 'var(--wine-700)'
                }}>
                  {si < 0.5 ? 'Sobrecarga / inadecuado' : si <= 0.7 ? 'Normal' : si < 1 ? 'Choque leve' : si < 1.4 ? 'Choque moderado' : 'Choque severo'}
                </div>
              </>
            ) : <div className="result-card-empty">Esperando frecuencia cardiaca y sistólica…</div>}
            {sel === 'si' && (
              <div className="result-detail" onClick={e => e.stopPropagation()}>
                <div className="rd-label">Datos usados</div>
                <div className="rd-chips">
                  <Chip k="FC" v={fc ? fmt0(fc) + ' lpm' : '—'}/>
                  <Chip k="PAS" v={tas ? fmt0(tas) + ' mmHg' : '—'}/>
                </div>
                <div className="rd-label">Fórmula</div>
                <Formula lines={siFormula}/>
                <div className="rd-label">Clasificación</div>
                <Scale rows={siScale}/>
              </div>
            )}
          </div>

          <div className="patient-help">
            <strong>💡 Tip.</strong> Los datos persisten en este navegador. Cualquier cálculo en
            <em> Calculadoras </em> también leerá automáticamente estos valores.
          </div>
        </aside>
      </div>
    </div>
  );
}

window.PatientPanel = PatientPanel;