function DonutRing({ segments, total, size = 190 }) {
  let acc = 0;
  const stops = segments.map(s => { const start = acc; acc += s.pct; return `${s.color} ${start}% ${acc}%`; }).join(', ');
  const inner = Math.round(size * 0.653);
  const totalFont = Math.max(16, Math.round(size * 0.1316));
  return (
    <div style={{ width: size, height: size, borderRadius: '50%', background: `conic-gradient(${stops})`, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
      <div style={{ width: inner, height: inner, borderRadius: '50%', background: '#fff', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
        <div style={{ fontSize: totalFont, fontWeight: 800, color: 'var(--text-primary)' }}>{total}</div>
        <div style={{ fontSize: 12, color: 'var(--text-secondary)' }}>Total</div>
      </div>
    </div>
  );
}

function Legend({ segments, mobile }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', justifyContent: mobile ? 'flex-start' : 'space-between', gap: mobile ? 6 : 0, flex: 1, minWidth: 0, alignSelf: 'stretch' }}>
      {segments.map(s => (
        <div key={s.key} style={mobile
          ? { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, padding: '5px 0', borderBottom: '1px solid var(--border-default)' }
          : { background: 'var(--siga-teal-50)', borderRadius: 'var(--radius-sm)', padding: '8px 12px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10 }
        }>
          <div style={{ display: 'flex', alignItems: 'center', gap: mobile ? 6 : 9, fontSize: mobile ? 12 : 13, color: 'var(--text-secondary)', minWidth: 0 }}>
            <span style={{ width: mobile ? 8 : 10, height: mobile ? 8 : 10, borderRadius: '50%', background: s.color, flexShrink: 0 }} />
            <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{s.key}</span>
          </div>
          <div style={{ fontSize: mobile ? 13 : 15, fontWeight: 700, color: 'var(--text-primary)', flexShrink: 0 }}>{s.qty.toLocaleString('es-AR')}</div>
        </div>
      ))}
    </div>
  );
}

function Donut({ segments, total, mobile }) {
  return (
    <div style={{ display: 'flex', flexDirection: mobile ? 'column' : 'row', alignItems: mobile ? 'stretch' : 'center', gap: mobile ? 16 : 28, height: '100%' }}>
      <div style={{ display: 'flex', justifyContent: 'center' }}>
        <DonutRing segments={segments} total={total} size={mobile ? 140 : 190} />
      </div>
      <Legend segments={segments} mobile={mobile} />
    </div>
  );
}

function useWheelToHorizontalScroll() {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const onWheel = (e) => {
      if (el.scrollWidth <= el.clientWidth) return;
      if (Math.abs(e.deltaY) <= Math.abs(e.deltaX)) return;
      e.preventDefault();
      el.scrollLeft += e.deltaY;
    };
    el.addEventListener('wheel', onWheel, { passive: false });
    return () => el.removeEventListener('wheel', onWheel);
  }, []);
  return ref;
}

function ScrollX({ minWidth, children }) {
  const ref = useWheelToHorizontalScroll();
  return (
    <div ref={ref} className="scroll-hidden" style={{ overflowX: 'auto', WebkitOverflowScrolling: 'touch', margin: '0 -4px', padding: '0 4px' }}>
      <div style={{ minWidth }}>{children}</div>
    </div>
  );
}

function StackedBars({ data, colors }) {
  const chartHeight = 210;
  const totals = data.map(d => d.segs.reduce((a, b) => a + b, 0));
  const rawMax = Math.max(...totals, 1);
  const axisMax = Math.ceil(rawMax / 500) * 500;
  const ticks = [];
  for (let t = 0; t <= axisMax; t += 500) ticks.push(t);
  const fmt = n => n.toLocaleString('es-AR');
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      <div style={{ display: 'flex', gap: 12 }}>
        <div style={{ width: 42, height: chartHeight, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', fontSize: 11, color: 'var(--text-secondary)', textAlign: 'right' }}>
          {[...ticks].reverse().map(t => <div key={t}>{fmt(t)}</div>)}
        </div>
        <div style={{ position: 'relative', flex: 1, height: chartHeight }}>
          {ticks.map(t => (
            <div key={t} style={{ position: 'absolute', left: 0, right: 0, bottom: `${(t / axisMax) * chartHeight}px`, borderTop: '1px dashed var(--border-default)' }} />
          ))}
          <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'flex-end', gap: 22, padding: '0 8px' }}>
            {data.map(d => (
              <div key={d.name} style={{ flex: 1, display: 'flex', justifyContent: 'center' }}>
                <div style={{ width: '100%', maxWidth: 58, display: 'flex', flexDirection: 'column-reverse', borderRadius: '4px 4px 0 0', overflow: 'hidden' }}>
                  {d.segs.map((v, i) => v > 0 && <div key={i} style={{ height: `${(v / axisMax) * chartHeight}px`, background: colors[i] }} />)}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
      <div style={{ display: 'flex', gap: 12 }}>
        <div style={{ width: 42, flexShrink: 0 }} />
        <div style={{ flex: 1, display: 'flex', gap: 22, padding: '0 8px' }}>
          {data.map(d => (
            <div key={d.name} style={{ flex: 1, fontSize: 10, color: 'var(--text-secondary)', textAlign: 'center' }}>{d.name}</div>
          ))}
        </div>
      </div>
    </div>
  );
}

function GroupedBars({ data }) {
  const chartHeight = 200;
  const cantMax = Math.ceil(Math.max(...data.map(d => d.cantidad), 1) / 500) * 500;
  const pesoMax = Math.ceil(Math.max(...data.map(d => d.peso), 1) / 100) * 100;
  const fracs = [0, 1 / 6, 2 / 6, 3 / 6, 4 / 6, 5 / 6, 1];
  const fmt = n => Math.round(n).toLocaleString('es-AR');
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      <div style={{ display: 'flex', gap: 12 }}>
        <div style={{ width: 48, height: chartHeight, display: 'flex', flexDirection: 'column-reverse', justifyContent: 'space-between', fontSize: 11, color: 'var(--siga-teal-600)', textAlign: 'right' }}>
          {fracs.map(f => <div key={f}>{fmt(f * cantMax)}</div>)}
        </div>
        <div style={{ position: 'relative', flex: 1, height: chartHeight }}>
          {fracs.map(f => (
            <div key={f} style={{ position: 'absolute', left: 0, right: 0, bottom: `${f * chartHeight}px`, borderTop: '1px dashed var(--border-default)' }} />
          ))}
          <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'flex-end', gap: 22, padding: '0 8px' }}>
            {data.map(d => {
              const cantH = (d.cantidad / cantMax) * chartHeight;
              const pesoH = (d.peso / pesoMax) * chartHeight;
              return (
                <div key={d.name} style={{ flex: 1, display: 'flex', justifyContent: 'center', alignItems: 'flex-end', gap: 6 }}>
                  <div style={{ position: 'relative', width: 24 }}>
                    <div style={{ position: 'absolute', bottom: cantH + 4, left: -6, right: -6, textAlign: 'center', fontSize: 10, fontWeight: 700, color: 'var(--siga-teal-600)', whiteSpace: 'nowrap' }}>{fmt(d.cantidad)}</div>
                    <div style={{ height: cantH, background: 'var(--siga-teal-600)', borderRadius: '3px 3px 0 0' }} />
                  </div>
                  <div style={{ position: 'relative', width: 24 }}>
                    <div style={{ position: 'absolute', bottom: pesoH + 4, left: -10, right: -10, textAlign: 'center', fontSize: 10, fontWeight: 700, color: 'var(--siga-teal-400)', whiteSpace: 'nowrap' }}>{d.peso.toFixed(2)}</div>
                    <div style={{ height: pesoH, background: 'var(--siga-teal-400)', borderRadius: '3px 3px 0 0' }} />
                  </div>
                </div>
              );
            })}
          </div>
        </div>
        <div style={{ width: 56, height: chartHeight, display: 'flex', flexDirection: 'column-reverse', justifyContent: 'space-between', fontSize: 11, color: 'var(--siga-teal-400)', textAlign: 'left' }}>
          {fracs.map(f => <div key={f}>{Math.round(f * pesoMax)} kg</div>)}
        </div>
      </div>
      <div style={{ display: 'flex', gap: 12 }}>
        <div style={{ width: 48, flexShrink: 0 }} />
        <div style={{ flex: 1, display: 'flex', gap: 22, padding: '0 8px' }}>
          {data.map(d => <div key={d.name} style={{ flex: 1, fontSize: 10, color: 'var(--text-secondary)', textAlign: 'center' }}>{d.name}</div>)}
        </div>
        <div style={{ width: 56, flexShrink: 0 }} />
      </div>
      <div style={{ display: 'flex', gap: 16, fontSize: 12, color: 'var(--text-secondary)', justifyContent: 'center', flexWrap: 'wrap' }}>
        <span><span style={{ display: 'inline-block', width: 8, height: 8, borderRadius: '50%', background: 'var(--siga-teal-600)', marginRight: 5 }} />Cantidad de Animales</span>
        <span><span style={{ display: 'inline-block', width: 8, height: 8, borderRadius: '50%', background: 'var(--siga-teal-400)', marginRight: 5 }} />Peso Promedio (kg)</span>
      </div>
    </div>
  );
}

function CamposTable({ data, total }) {
  const maxCantidad = Math.max(...data.map(d => d.cantidad));
  const cols = '1.3fr 1.7fr 1fr';
  return (
    <div>
      <div style={{ display: 'grid', gridTemplateColumns: cols, gap: 12, padding: '0 4px 10px', fontSize: 11, fontWeight: 700, color: 'var(--text-secondary)', letterSpacing: .4, borderBottom: '1px solid var(--border-default)' }}>
        <div>CAMPO</div>
        <div>CANTIDAD</div>
        <div style={{ textAlign: 'right' }}>PESO PROMEDIO</div>
      </div>
      {data.map((d, i) => (
        <div key={d.name} style={{ display: 'grid', gridTemplateColumns: cols, gap: 12, alignItems: 'center', padding: '11px 8px', background: i % 2 === 0 ? '#fff' : 'var(--siga-teal-50)', borderBottom: i < data.length - 1 ? '1px solid var(--border-default)' : 'none', fontSize: 13 }}>
          <div style={{ fontWeight: 600, color: 'var(--text-primary)' }}>{d.name}</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <span style={{ color: 'var(--siga-teal-600)', fontWeight: 700, width: 48 }}>{d.cantidad.toLocaleString('es-AR')}</span>
            <span style={{ flex: 1, height: 6, borderRadius: 999, background: '#fff', border: '1px solid var(--siga-teal-100)', overflow: 'hidden', display: 'block' }}>
              <span style={{ display: 'block', height: '100%', width: `${(d.cantidad / maxCantidad) * 100}%`, background: 'var(--siga-teal-600)', borderRadius: 999 }} />
            </span>
          </div>
          <div style={{ textAlign: 'right', color: 'var(--siga-teal-400)', fontWeight: 600 }}>{d.peso.toFixed(2)}</div>
        </div>
      ))}
      <div style={{ display: 'grid', gridTemplateColumns: cols, gap: 12, alignItems: 'center', padding: '14px 4px 4px', marginTop: 4, borderTop: '2px solid var(--border-default)', fontWeight: 800 }}>
        <div style={{ fontSize: 15, letterSpacing: .4, textTransform: 'uppercase', color: 'var(--text-primary)' }}>Total</div>
        <div style={{ fontSize: 20, color: 'var(--siga-teal-600)' }}>{total.cantidad.toLocaleString('es-AR')}</div>
        <div style={{ textAlign: 'right', fontSize: 20, color: 'var(--siga-teal-400)' }}>{total.peso.toFixed(2)}</div>
      </div>
    </div>
  );
}

function PanelScreen() {
  const { Card, StatusBar, SectionTabs, Icon, useBreakpoint } = window.SIGADesignSystem_97fcbf;
  const bp = useBreakpoint();
  const mobile = bp === 'mobile';
  const [tab, setTab] = React.useState('general');
  const tabs = [
    { key: 'general', label: 'General', sublabel: 'Vista integral del negocio', icon: 'layout-grid' },
    { key: 'recria', label: 'Recría', sublabel: 'Crecimiento y engorde', icon: 'trending-up' },
    { key: 'cria', label: 'Cría', sublabel: 'Reproducción y cría', icon: 'sprout' },
    { key: 'operaciones', label: 'Operaciones', sublabel: 'Traslados y movimientos', icon: 'shuffle' },
    { key: 'administrativo', label: 'Administrativo', sublabel: 'Procesos y control', icon: 'briefcase' }
  ];
  const clase = [
    { key: '1 (<250)', pct: 46, qty: 3262, color: 'var(--siga-teal-600)' },
    { key: '2 (250-300)', pct: 13, qty: 922, color: 'var(--siga-teal-400)' },
    { key: '3 (300-350)', pct: 13, qty: 922, color: 'var(--siga-teal-200)' },
    { key: '4 (>350)', pct: 28, qty: 1985, color: 'var(--siga-teal-100)' }
  ];
  const potrero = [
    { key: 'campo', pct: 85, qty: 6019, color: 'var(--siga-teal-600)' },
    { key: 'feedlot', pct: 15, qty: 1062, color: 'var(--siga-teal-200)' }
  ];
  const campos = [
    { name: 'BUENA VISTA', segs: [4, 0, 0, 6] }, { name: 'CAMPO 1', segs: [420, 130, 130, 320] },
    { name: 'FELICIANO', segs: [0, 0, 20, 130] }, { name: 'IBICUY ROCIO', segs: [0, 0, 0, 450] },
    { name: 'ISLA DEL PILLO', segs: [0, 0, 90, 860] }, { name: 'RUINAS', segs: [230, 230, 230, 260] },
    { name: 'RUINAS RECRIA', segs: [2850, 0, 0, 0] }, { name: 'SALENTEIN', segs: [0, 0, 0, 700] }
  ];
  const categorias = [
    { name: 'BUENA VISTA', segs: [0, 0, 0, 0, 20] }, { name: 'CAMPO 1', segs: [70, 40, 0, 0, 0] },
    { name: 'FELICIANO', segs: [0, 30, 0, 0, 0] }, { name: 'IBICUY ROCIO', segs: [0, 0, 0, 450, 0] },
    { name: 'ISLA DEL PILLO', segs: [0, 0, 0, 0, 0] }, { name: 'RUINAS', segs: [0, 40, 70, 0, 0] },
    { name: 'RUINAS RECRIA', segs: [1300, 500, 700, 0, 0] }, { name: 'SALENTEIN', segs: [0, 0, 0, 0, 0] }
  ];
  const totalesPorCampo = [
    { name: 'BUENA VISTA', cantidad: 40, peso: 0 }, { name: 'CAMPO 1', cantidad: 1226, peso: 288.31 },
    { name: 'FELICIANO', cantidad: 272, peso: 345.71 }, { name: 'IBICUY ROCIO', cantidad: 529, peso: 535.91 },
    { name: 'ISLA DEL PILLO', cantidad: 941, peso: 359.77 }, { name: 'RUINAS', cantidad: 1002, peso: 285.21 },
    { name: 'RUINAS RECRIA', cantidad: 2667, peso: 86.20 }, { name: 'SALENTEIN', cantidad: 404, peso: 402.69 }
  ];
  const totalesTotal = { cantidad: 7081, peso: 240.84 };
  return (
    <div style={{ padding: mobile ? 16 : 24, display: 'flex', flexDirection: 'column', gap: mobile ? 16 : 20 }}>
      <SectionTabs items={tabs} active={tab} onSelect={setTab} />
      <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : '1fr 1fr 1.1fr', gap: mobile ? 16 : 20 }}>
        <Card title="Cantidad por clase"><Donut segments={clase} total="7.091" mobile={mobile} /></Card>
        <Card title="Cantidad por tipo de potrero">
          {mobile ? (
            <Donut segments={potrero} total="7.081" mobile={mobile} />
          ) : (
            <div style={{ display: 'flex', alignItems: 'center', gap: 24, height: '100%' }}>
              <DonutRing segments={potrero} total="7.081" />
              <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between', flex: 1, minWidth: 0, alignSelf: 'stretch' }}>
                <div style={{ background: 'var(--siga-teal-50)', borderRadius: 'var(--radius-md)', padding: '0 14px', display: 'flex', alignItems: 'center', gap: 12, flex: 1 }}>
                  <span style={{ width: 38, height: 38, borderRadius: '50%', background: 'var(--siga-teal-600)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                    <Icon name="fence" size={19} />
                  </span>
                  <div style={{ minWidth: 0 }}>
                    <div style={{ fontSize: 12, color: 'var(--text-secondary)', fontWeight: 600 }}>Campo</div>
                    <div style={{ fontSize: 19, fontWeight: 800, color: 'var(--text-primary)' }}>6.019</div>
                  </div>
                </div>
                <div style={{ background: 'var(--siga-teal-50)', borderRadius: 'var(--radius-md)', padding: '0 14px', display: 'flex', alignItems: 'center', gap: 12, flex: 1, marginTop: 12 }}>
                  <span style={{ width: 38, height: 38, borderRadius: '50%', background: 'var(--siga-teal-200)', color: 'var(--siga-teal-800)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                    <Icon name="warehouse" size={19} />
                  </span>
                  <div style={{ minWidth: 0 }}>
                    <div style={{ fontSize: 12, color: 'var(--text-secondary)', fontWeight: 600 }}>Feedlot</div>
                    <div style={{ fontSize: 19, fontWeight: 800, color: 'var(--text-primary)' }}>1.062</div>
                  </div>
                </div>
              </div>
            </div>
          )}
        </Card>
        <Card title="Animales con caravana electrónica">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12, height: '100%' }}>
            <StatusBar segments={[{ label: 'Con CE', pct: 95.2, color: 'var(--tnd-success)' }, { label: 'Sin CE', pct: 4.8, color: 'var(--tnd-error)' }]} height={30} />
            <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : '1fr 1fr', gap: 16, flex: 1 }}>
              <div style={{ background: 'var(--tnd-success-tint-4)', borderRadius: 'var(--radius-md)', padding: 18, display: 'grid', gridTemplateColumns: '1fr 1fr', alignItems: 'center', justifyItems: 'center' }}>
                <img src="https://hbs-repo.sfo3.cdn.digitaloceanspaces.com/Nacho/testing/Others/icons-01.png" alt="Con CE" style={{ width: mobile ? 72 : 104, height: mobile ? 72 : 104, objectFit: 'contain', flexShrink: 0 }} />
                <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: 'var(--tnd-success-shade-1)' }}>
                    <Icon name="check-circle-2" size={18} />
                    <span style={{ fontSize: 13, fontWeight: 700 }}>Con CE</span>
                  </div>
                  <div style={{ fontSize: 28, fontWeight: 800, color: 'var(--text-primary)' }}>6.751</div>
                  <div style={{ fontSize: 12, color: 'var(--text-secondary)' }}>95.2% del total</div>
                </div>
              </div>
              <div style={{ background: 'var(--tnd-error-tint-4)', borderRadius: 'var(--radius-md)', padding: 18, display: 'grid', gridTemplateColumns: '1fr 1fr', alignItems: 'center', justifyItems: 'center' }}>
                <img src="https://hbs-repo.sfo3.cdn.digitaloceanspaces.com/Nacho/testing/Others/icons-02.png" alt="Sin CE" style={{ width: mobile ? 72 : 104, height: mobile ? 72 : 104, objectFit: 'contain', flexShrink: 0 }} />
                <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: 'var(--tnd-error-shade-1)' }}>
                    <Icon name="alert-circle" size={18} />
                    <span style={{ fontSize: 13, fontWeight: 700 }}>Sin CE</span>
                  </div>
                  <div style={{ fontSize: 28, fontWeight: 800, color: 'var(--text-primary)' }}>340</div>
                  <div style={{ fontSize: 12, color: 'var(--text-secondary)' }}>4.8% del total</div>
                </div>
              </div>
            </div>
          </div>
        </Card>
      </div>
      <Card title="Clasificación por campo">
        {mobile ? (
          <ScrollX minWidth={640}>
            <StackedBars data={campos} colors={['var(--siga-teal-600)', 'var(--siga-teal-400)', 'var(--siga-teal-200)', 'var(--siga-teal-100)']} />
          </ScrollX>
        ) : (
          <StackedBars data={campos} colors={['var(--siga-teal-600)', 'var(--siga-teal-400)', 'var(--siga-teal-200)', 'var(--siga-teal-100)']} />
        )}
        <div style={{ display: 'flex', gap: 16, fontSize: 12, color: 'var(--text-secondary)', marginTop: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
          <span><span style={{ display: 'inline-block', width: 8, height: 8, borderRadius: '50%', background: 'var(--siga-teal-600)', marginRight: 5 }} />1 (&lt;250)</span>
          <span><span style={{ display: 'inline-block', width: 8, height: 8, borderRadius: '50%', background: 'var(--siga-teal-400)', marginRight: 5 }} />2 (250-300)</span>
          <span><span style={{ display: 'inline-block', width: 8, height: 8, borderRadius: '50%', background: 'var(--siga-teal-200)', marginRight: 5 }} />3 (300-350)</span>
          <span><span style={{ display: 'inline-block', width: 8, height: 8, borderRadius: '50%', background: 'var(--siga-teal-100)', marginRight: 5 }} />4 (&gt;350)</span>
        </div>
      </Card>
      <Card title="Categorías por campo">
        {mobile ? (
          <ScrollX minWidth={640}>
            <StackedBars data={categorias} colors={['var(--siga-teal-800)', 'var(--siga-teal-600)', 'var(--siga-teal-400)', 'var(--siga-teal-200)', 'var(--siga-teal-100)']} />
          </ScrollX>
        ) : (
          <StackedBars data={categorias} colors={['var(--siga-teal-800)', 'var(--siga-teal-600)', 'var(--siga-teal-400)', 'var(--siga-teal-200)', 'var(--siga-teal-100)']} />
        )}
        <div style={{ display: 'flex', gap: 16, fontSize: 12, color: 'var(--text-secondary)', marginTop: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
          <span><span style={{ display: 'inline-block', width: 8, height: 8, borderRadius: '50%', background: 'var(--siga-teal-800)', marginRight: 5 }} />TO</span>
          <span><span style={{ display: 'inline-block', width: 8, height: 8, borderRadius: '50%', background: 'var(--siga-teal-600)', marginRight: 5 }} />TMM</span>
          <span><span style={{ display: 'inline-block', width: 8, height: 8, borderRadius: '50%', background: 'var(--siga-teal-400)', marginRight: 5 }} />THM</span>
          <span><span style={{ display: 'inline-block', width: 8, height: 8, borderRadius: '50%', background: 'var(--siga-teal-200)', marginRight: 5 }} />TORO</span>
          <span><span style={{ display: 'inline-block', width: 8, height: 8, borderRadius: '50%', background: 'var(--siga-teal-100)', marginRight: 5 }} />T 3+</span>
        </div>
      </Card>
      <Card title="Totales por campo">
        {mobile ? <ScrollX minWidth={640}><GroupedBars data={totalesPorCampo} /></ScrollX> : <GroupedBars data={totalesPorCampo} />}
      </Card>
      <Card title="Totales por campo">
        {mobile ? <ScrollX minWidth={460}><CamposTable data={totalesPorCampo} total={totalesTotal} /></ScrollX> : <CamposTable data={totalesPorCampo} total={totalesTotal} />}
      </Card>
    </div>
  );
}
window.PanelScreen = PanelScreen;