function SanidadScreen() {
  const { Icon, Badge } = window.SIGADesignSystem_97fcbf;
  const [tab, setTab] = React.useState('calendario');
  const tabs = [
    { key: 'calendario', label: 'Calendario de Aplicaciones', icon: 'calendar-days' },
    { key: 'planes', label: 'Planes', icon: 'clipboard-list' },
    { key: 'tratamientos', label: 'Tratamientos', icon: 'pencil' },
    { key: 'recursos', label: 'Recursos', icon: 'package' },
    { key: 'productos', label: 'Productos', icon: 'flask-conical' },
    { key: 'responsables', label: 'Responsables', icon: 'user-round' }
  ];
  const months = ['ene', 'feb', 'mar', 'abr', 'may', 'jun', 'jul', 'ago', 'sep', 'oct', 'nov', 'dic'];
  return (
    <div style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 20 }}>
      <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
        <span style={{ width: 44, height: 44, borderRadius: 10, background: 'var(--brand-primary-tint)', color: 'var(--brand-primary-strong)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name="syringe" size={22} /></span>
        <div>
          <div style={{ fontSize: 'var(--text-2xl)', fontWeight: 800 }}>Sanidad</div>
          <div style={{ fontSize: 14, color: 'var(--text-secondary)' }}>Planes, tratamientos, aplicaciones y recursos sanitarios</div>
        </div>
      </div>
      <div style={{ background: '#fff', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-md)', boxShadow: 'var(--shadow-sm)' }}>
        <div style={{ display: 'flex', gap: 4, borderBottom: '1px solid var(--border-default)', padding: '0 16px', overflowX: 'auto' }}>
          {tabs.map(t => (
            <button key={t.key} onClick={() => setTab(t.key)} style={{
              display: 'flex', gap: 8, alignItems: 'center', padding: '14px 12px', border: 'none', background: 'none', cursor: 'pointer',
              fontFamily: 'var(--font-body)', fontSize: 13, fontWeight: 600, whiteSpace: 'nowrap',
              color: tab === t.key ? 'var(--brand-primary)' : 'var(--text-secondary)',
              borderBottom: tab === t.key ? '2px solid var(--brand-primary)' : '2px solid transparent'
            }}><Icon name={t.icon} size={15} />{t.label}</button>
          ))}
        </div>
        {tab === 'calendario' ? (
          <div style={{ padding: 20 }}>
            <div style={{ display: 'grid', gridTemplateColumns: '160px repeat(12, 1fr)', fontSize: 11, color: 'var(--text-secondary)', marginBottom: 8 }}>
              <div>Categoría</div>{months.map(m => <div key={m} style={{ textAlign: 'center' }}>{m} 2026</div>)}
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '160px repeat(12, 1fr)', alignItems: 'center', fontSize: 13, padding: '6px 0' }}>
              <div style={{ fontWeight: 600 }}>Vacuna</div>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '160px repeat(12, 1fr)', alignItems: 'center', fontSize: 13, padding: '6px 0', paddingLeft: 12 }}>
              <div>(G) vacuna pa todos (T 3+)</div>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '160px repeat(12, 1fr)', alignItems: 'center', fontSize: 13, padding: '6px 0' }}>
              <div style={{ paddingLeft: 24, color: 'var(--text-secondary)' }}>Carbunclo - Sin Observaciones</div>
              <div style={{ gridColumn: '8 / span 4' }}><div style={{ background: 'var(--tnd-success)', color: '#fff', fontSize: 11, fontWeight: 700, borderRadius: 6, padding: '6px 10px', textAlign: 'center' }}>1° (50/50)</div></div>
            </div>
            <div style={{ display: 'flex', gap: 48, marginTop: 36, paddingTop: 24, borderTop: '1px solid var(--border-default)', flexWrap: 'wrap' }}>
              <div>
                <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--text-secondary)', marginBottom: 8 }}>TIPO DE PLAN</div>
                <div style={{ display: 'flex', gap: 20, fontSize: 12 }}><span>(G) General</span><span>(E) Específico</span><span>(C) Campo</span></div>
              </div>
              <div style={{ paddingLeft: 48, borderLeft: '1px solid var(--border-default)' }}>
                <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--text-secondary)', marginBottom: 8 }}>TIPO DE RECURSO</div>
                <div style={{ display: 'flex', gap: 18, fontSize: 12 }}>
                  <span><span style={{ display: 'inline-block', width: 8, height: 8, background: 'var(--tnd-warning)', marginRight: 4 }} />Antiparasitario</span>
                  <span><span style={{ display: 'inline-block', width: 8, height: 8, background: 'var(--tnd-info)', marginRight: 4 }} />Baño</span>
                  <span><span style={{ display: 'inline-block', width: 8, height: 8, background: 'var(--tnd-success)', marginRight: 4 }} />Hemovacuna</span>
                  <span><span style={{ display: 'inline-block', width: 8, height: 8, background: 'var(--brand-primary)', marginRight: 4 }} />Suplemento</span>
                  <span><span style={{ display: 'inline-block', width: 8, height: 8, background: 'var(--tnd-chart-violet)', marginRight: 4 }} />Vacuna</span>
                </div>
              </div>
              <div style={{ paddingLeft: 48, borderLeft: '1px solid var(--border-default)' }}>
                <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--text-secondary)', marginBottom: 8 }}>ESTADO</div>
                <div style={{ display: 'flex', gap: 14 }}>
                  <Badge tone="info">Pendiente</Badge><Badge tone="warning">En Progreso</Badge><Badge tone="success">Completado</Badge><Badge tone="error">Cancelado</Badge>
                </div>
              </div>
            </div>
          </div>
        ) : (
          <div style={{ padding: 40, textAlign: 'center', color: 'var(--text-secondary)', fontSize: 13 }}>
            Pantalla no incluida en este kit — no había captura de referencia para "{tabs.find(t => t.key === tab).label}".
          </div>
        )}
      </div>
    </div>
  );
}
window.SanidadScreen = SanidadScreen;